This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Rafał Goławski
Introduction
There's no doubt that calendars and date pickers are one of the most useful components in the modern front-end world. They are usually part of many popular UI libraries like MUI or Mantine, but you can also find it in the good old HTML 👇
<input type="date" />
Building a calendar from scratch might seem like a complicated thing to do, but fear not. In this article, I would like to show you how to achieve similar results with minimum effort and a little bit of JavaScript.
Code
Believe me or not - the trickiest part is this piece of code 👇
export default function date2calendar({ date }: { date: Date }) {
// 1. Get year of a given date
const year = date.getFullYear();
// 2. Get month of a given date
const month = date.getMonth();
// 3. Get first day of the month
const firstDay = new Date(year, month, 1).getDay();
// 4. Get last day of the month
const lastDay = new Date(year, month + 1, 0).getDate();
// 5. Number of columns (days) in our 2D array
const days = 7;
// 6. Number of rows (weeks) in our 2D array
const weeks = Math.ceil((firstDay + lastDay) / days);
// 7. Generate rows (weeks)
return Array.from({ length: weeks }).map((_, week) =>
// 8. Generate columns (days)
Array.from({ length: days }).map((_, day) => {
// 9. Convert 2D array index to 1D array index
const index = week * days + day;
// 10. Get day number, this might be negative or greater that last day in month, which means this day is outside of current month
const dateDay = index - firstDay + 1;
// 11. Return day if it's in range, otherwise return 0
return dateDay > 0 && dateDay <= lastDay ? dateDay : 0;
})
);
}
As you can see, this function takes an object with date prop as a parameter and based on that returns a two-dimensional array that contains weeks with days for a month of a given date.
// November 2022
[
[0, 0, 1, 2, 3, 4, 5], // week 1
[6, 7, 8, 9, 10, 11, 12], // week 2
// ...
[27, 28, 29, 30, 0, 0, 0], // week 5
]
These zeros here represents the days that are outside the current month (last days of previous month, and first days of the next month). This function assumes that the week starts on Sunday, so based on that we can see that November 2022 starts on Tuesday and ends on Wednesday.
With that now we're ready to render the body for our calendar component using any technology you want, no matter if it's React, Vue or plain JavaScript.
Building UI
Below you can find my implementation of a calendar component based on a function we just created, built with popular front-end frameworks with a little bit of help from dayjs.
React example
Vue example
Package
Feel free to use this code in your project. It's available as an NPM package, so you can easily add it to your project by running this command 👇
npm install date2calendar
I hope you enjoyed this content. Let me know what you think in the comment section down below. You can also find me on my Twitter.
Thanks for reading! đź‘‹
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Rafał Goławski
Rafał Goławski | Sciencx (2022-11-08T00:13:37+00:00) Simple calendar in a few lines of code 📆. Retrieved from https://www.scien.cx/2022/11/08/simple-calendar-in-a-few-lines-of-code-%f0%9f%93%86/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.