Build a calendar from scratch with tailwind css
Build a calendar from scratch with react and tailwind css.
Calendar components are very popular and we can easily get a lib from npm. However calendar components can be also a hard one to style due to it comes with a set of builtin css. So we can build a calendar on our own to fit what we need and what we have set up.
Getting started.
The calendar I built in this post can be found here https://maxaledigheten.info/.
Install dependencies
It is actually not so difficult to build a calendar. First we need to install libraries for building this.
- tailwindcss for ui css.
- dayjs for working with datime.
Build a month calendar
In the application we render 12 months calendar. The core component here is a month calendar. The month calendar takes only two props month and year which is quite straightforward. The component will look like this <MonthCalendar year={2022} month={4} key={4} />
We will start with week days to render
const today = dayjs().set('year', year);
const startWeek = today.startOf("isoWeek");
const weekDays = Array.from(new Array(7).keys()).map((index) => {
return startWeek.add(index, "day");
});
We get number of days in the month to render
const startOfMonth = today.set("month", month).startOf("month");
const startOfFirstWeek = startOfMonth.startOf("isoWeek");
const daysToFirstDay = startOfMonth.diff(startOfFirstWeek, "day");
const daysToPrepend = Array.from(new Array(daysToFirstDay).keys());
const daysInMonth = Array.from(new Array(startOfMonth.daysInMonth()).keys());
- daysToPrepend is the number of days in the first week of the month but from the previous month.
Last step is to gather data and then render
<div className="grid grid-cols-7 mt-2 rounded-md border overflow-hidden flex-1">
{weekDays.map((weekDay, index) => (
<div className="text-center" key={`weekday_${index}`}>
{weekDay.format("ddd")}
</div>
))}
{daysToPrepend.map((day) => (
<div key={`prepend_${day}`}></div>
))}
{daysInMonth.map((day) => {
const key = getDate(startOfMonth, day);
return (
<div
className={`text-center `}
key={key}
>
{day + 1}
</div>
)
})}
</div>
- so we use a grid of 7 columns which corresponds to 7 days in a week.
- to render days in the right order we need to compensate with daysToPrepend.
TLDR
with the help of tailwind css and dayjs so to build a calendar component is quite simple and straightforward. Life is getting easier when we have the help from grid also.
this post is originally posted here https://www.hittaducmai.se/blogs/build-a-calendar-from-scratch-with-tailwind-css