How to create a custom calendar in Javascript(Next.js)
Hello team,
I have started creating a custom calendar, fetching data from a CMS I use and displaying it in NExt.js.
I am stuck at the point where I need to adjust the displayed days to ending of the previous month. How can i display it in an HTML tbale to start counting from where the last month has ended.
Each month has 32-33 days. I've got to the point where I can display the days correctly, but how do i adjust that when the last month ends on the 4th day of the week, then the next month starts at the 5day of the week?
5 Replies
Determine the day of the week of the 1st of the current month and the length of the previous month. For September 2023, the 1st is a Friday, which means you will have 5 days of the previous month, since Friday is the 6th day of the week on a calendar that starts on Sunday. Since August has 31 days, the range of days from August needed would start on the 27th, which is derived from 31-5+1.
For the portion of the next month needed, you only need to know the day of the week of the last day of the current month. Subtract the day of the week's numeric value from 7 to determine how many days of the next month are needed. For example, September 2023 ends on a Saturday, which gets a day number of 7, and 7-7=0, so no days of the next month are needed. October 2023 ends on a Tuesday, which has a day number of 3, and 7-3=4, so you need 4 days from November.
Awesome, thanks a bunch. I will try to do it. Hopefully i will be able to wrap my mind as well around it.
Just to be clear when i want to render this in an html table i need to make sure that i have to render empty cells for the next month which are taken away from the previous one, right?
Cells for the next month are not taken away from the current. Those are the cells that would be empty if you had 7 cells in every row and the calendar ended on the last day of the current month.
Alright thank you for your help, additionally could you give me some pseudocode example, because I'm looking at my laptop acreen and cant tigure put how to do it
I already described it in regular English with sufficient detail to implement. The only part that might be tricky is actually getting it into a table. It's actually easier to use a grid, since you can use a regular map() to generate a series of date boxes without needing to also compute the row and column.