Customize Material-UI Datepicker With React

credits : unplash.com

Material-UI Datepicker is a great Tool we can use as a calendar, but it is a bit confusing to work with and a bit confusing to customize so I decided to share a few things I found about it in this article. Also this is going to be a bit long 🙃. So I divide the article into three main sections.

Those who are pro in setting things up , just hop down👇 for customizing section .

Prerequisites 🤔

• npm installed
• npx installed
• Node Js
• Familiar with ReactJs/Javascript
• Familiar with CSS

Setup 😋

Go through following steps to set up our react app and calendar component.

1. npx create-react-app custom-calendar

Run this command with cmd in an empty folder. Here “custom-calendar” is just a name I like, you can use whatever you wish.

2. open created project with your favorite IDE (I’m using Webstrome).

3. npm run start

In the IDE terminal run this and make sure the react project is working. If everything is fine you browser will pop up with http://localhost:3000 shows,

4. Then let’s install relevant packages.

NOTE : Since date-fns latest versions have some breaking issues . I’m specifying a working combination of package versions, feel free to upgrade and try overtime.

Run above three lines to install Material-UI , Material-UI pickers and date-fns. Material-UI pickers were designed to use the date management library of our choice so we can use whatever preferred library. Here I use date-fns. You can use moment, luxon or dayjs also. Make sure these three packages are in the dependencies list of your package.json.

Design 👨‍🎨

Now setting up packages is done 🥳. Then in the src folder create a js file, I’m naming it as CustomCalendar.js. Then add the following codes.

This is a functional component. I’ll explain confusing lines for you.

• In line 8, I used react useState to keep the currently selected date as a state.
• In line 11, As I mentioned before, Material-UI Datepicker needs a date management library, so MuiPickersUtilsProvider provides that DateFnsUtils as utill.
• variant=”static” is used to keep the DatePicker open so that it can act as a Calendar.(huh 😌 that’s what we need)

Then let’s edit the App.js file as follows.

• In line 2 , import our CustomCalendar component.
• line line 7–11 , just place our calendar in the middle of our page.

Then if everything went well, hop back to your browser and refresh,

It should looks like, raw calendar

Customize 😍

Method 1

Great 🥳 , we have a working Calendar in standard theme. And you can access the selected date from the state. Let’s give it a try to do some customizations. You can learn about basic css customizations on Material-UI picker from the official documentation.

Briefly, we can override the css of DatePicker, by creating a new theme using createMuiTheme and provide it to the DatePicker using ThemeProvider.

After that customization calendar look like this

Method 2

There are limitations of overriding when it comes to customizing date tiles. In the following section I will show how to use the renderDay prop of DatePicker to extend our customization. Here I’m using makeStyles and Material-Ui Icons. First install those external libraries with,

npm install @material-ui/icons

npm install @material-ui/styles

renderDate prop requires a function that accepts (day: Date, selectedDate: Date, isInCurrentMonth: boolean, dayComponent: Element)and then returns Element that can be rendered as date tile. Datepicker invokes this function with each and every date shown on it.

So, for this section I’m going to mark sunny days by adding ☀️ on Date tiles and change the look of tiles a little bit so you can get a better idea.

Step 1

Using makeStyles I created four css settings for four type of Date tiles which are,

• Today tile
• Selected date tile
• Normal date tile
• Days not belongs to current month

Step 2

Write a function that accepts (day: Date, selectedDate: Date, isInCurrentMonth: boolean, dayComponent: Element) and conditionally returns Element to render as one date tile.

Step 3

Give that function to the renderDate prop. Then DatePicker calls our function every time it renders a date and asks for a date tile. Our function evaluates the day and returns an appropriate date tile.

Here is the code of CustomCalendar.js,

Here, this is just a square tile that contains a date. I just use Paper and Grid to build it because they are really handy when making layouts. Similar to class in HTML/CSS in React we can use className to apply CSS settings.

So hope you learn something from this article. Using these two methods you can customize Material-UI DatePicker to match with your needs and theme.

Here is the Result.

🥰 You can use this idea to make your own designs. happy coding!!!!

You can get all codes from Git Repo.