Project 58 of 100 - React Calendar

Hey! I'm on a mission to make 100 React.js projects ending March 31st. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!

Link to the deployed project: Link
Link to the repo: github

This is going to be one of the simplest projects I've ever done, so please don't berate me for it. I have a larger project in mind for this weekend that uses the calendar component so this project just gets your feet wet with the excellent react-calendar npm package.

It's a full-featured and up to date calendar component that comes with default styling you can import or you can feel free to write your own styles.

All you need to do is follow the example on the npm homepage for this one (link here). The basic code looks like this:

import React,{useState} from 'react'
import Calendar from 'react-calendar'
import 'react-calendar/dist/Calendar.css';

function App() {
  const [value,onChange] = useState(new Date())

  return (
    <div className="app">
      <Calendar 
        onChange={onChange}
        value={value}
        className='app__calendar'
      />
    </div>
  );
}

export default App;

The onChange handler for the component is commandeered by the Calendar component so you'll want to be aware of that. It also comes with all kinds of options you can read about on their github- stuff like what happens when the user drills down to a given date, or when there's a new click on a day, or if you want to show weeks, or years, or whole centuries.

That's it for today! This weekend you'll see this pop up again. For now, enjoy this simple, easy to use calendar component thanks again to the react-calendar team :)