Challenge of building a Calendar with Pure JavaScript

These are the steps I followed to create this beautiful and functional calendar.

Step 1: Creating UI —

Creating the UI part is pretty simple. Our calendar UI does not contain a lot of elements. Here are the main things we need to create.

Here we have not created a body for the table. We will generate the cells dynamically and populate them. Let’s see how to do that.

Step 2: Writing The Program.

The program contains several different functions. The first thing we will do here is create a showCalendar(month, year) function which takes in two parameters, month and year. Once, the function is called, it dynamically generates a calendar in HTML and appends it into our table. Here’s my approach.

2. Next, get the number of days in that month. We can achieve this too using date function.

Explanation, the function new Date(year, month, 32) returns the 32nd day after the month started. If we subtract that date from 32, we get the final day of that month. Example, If we pass feb 2018 as an argument, its ‘32nd’ day will be 4th of march, subtract 32 from 4 and we get 28, final day of the month of feb 2018.

Once we have the two things ready, we populate the table with numbers 1 to [last day of month] on appropriate places. For example, if the starting of that month is Thursday and Ending date is 28, we’ll put the number 1 below thursday, 2 below, friday, 3 below saturday and so on. When we reach 28, we break out of the loop. Here’s what the code will look like —

Here, we use a nested for loop because we have upto 6 rows and 7 columns.

In the outer loop, we create a new “tr” element, ie, table row, up to 6 times. (maximum number of rows we need to create the calendar), then run the inner loop to create elements in each rows, then append those rows into our table.

In the inner loop, we populate each row with “td” elements in it. We keep track of the date using variable “date” in it.There are three if conditions at each iteration:

If we’re at first row and we have not yet reached first yet, create td element and leave it blank.

If “date” is higher than max days in that month, we break out of the loop because we have finished creating the table.

Else, we create the “td” element and print the “date” in it. Here we can also check if the date/month/year we’re at matches the today’s date. If it does, we can highlight it. That’s why I put this code there.

Our Final Show Calendar function would look like this-

Now we implement functions to jump to different months. We will create a variable currentYear and currentMonth, initially it is set to today’s year and month. when the program is run, showCalendar(currentMonth, currentYear) is called to display the calendar of current month.

we’ll also create function previous(), next(), and jump(), which, when called, will update the value of currentMonth and currentYear and call showCalendar function to update the calendar.

Here’s a snippet for that:

Now, that we have completed the programming part, we can put it all together and beautify the UI with some basic bootstrap, here’s for what the final project looks like.

See you next time!

Related posts:

Hi Everyone! Today is a great day to start a blog, don’t you think? I’m so excited to become your partner in style and to begin this journey with you! Whether you’re interested in cooking, home…

I was born in 1984. The year of the first Mac, the awesome Nike Air Jordans and Indiana Jones. 100 years from now I will be 134 years old. How do you think your life wilk look like in 2118? So how…

You need to have your own definition of success. Popular culture would have you define success as having a bank account with lots of zeros behind it. Understandable, since human behavior is to see…