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 .
Go through following steps to set up our react app and calendar component.
Run this command with cmd in an empty folder. Here “custom-calendar” is just a name I like, you can use whatever you wish.
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,
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.
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.
Then let’s edit the App.js file as follows.
Then if everything went well, hop back to your browser and refresh,
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.
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,
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.
Using makeStyles I created four css settings for four type of Date tiles which are,
Write a function that accepts (day: Date, selectedDate: Date, isInCurrentMonth: boolean, dayComponent: Element) and conditionally returns Element to render as one date tile.
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.
🥰 You can use this idea to make your own designs. happy coding!!!
You can get all codes from Git Repo.