Learn How to Code a Simple JavaScript Calendar and Datepicker

HTML Structure

We will commencement our JavaScript almanac by building nan building pinch HTML and CSS. Once nan interface is done, we will switch nan functionality pinch JavaScript.

The HTML building will incorporate a header showing nan existent period and year. Then, we will person arrows to navigate to nan adjacent aliases erstwhile month, and lastly, we will person a grid showing nan names of nan days successful a week and each time of nan month.

Inside nan div pinch nan people days, we will capable our days dynamically pinch JavaScript.

Styling Calendar With CSS

Lets commencement by applying immoderate styles to nan assemblage and nan instrumentality element.

We’ll statesman by settings immoderate variables for our colors. Then nan almanac will beryllium centered successful nan instrumentality constituent and person a separator radius to make it rounded. 

The header elements, including a p tag and 2 arrows, will usage Flexbox pinch nan items dispersed crossed nan x-axis and spaced evenly. 

Calendar Grid Layout

The divs containing nan names of days successful a week and nan days successful a period will usage a grid layout of 7 adjacent columns and will beryllium centered horizontally.

We will besides adhd a hover effect connected each time of nan week and an opacity to nan names of nan days of nan week. 

We will besides show nan day erstwhile a time successful nan almanac is clicked and use a inheritance colour to today’s date.

JavaScript Calendar Functionality

Okay, that’s fixed america our structure, now let’s attraction connected nan behavior. We’ll commencement by selecting each nan elements that will request to beryllium updated.

Date() Object

JavaScript comes pinch an inbuilt Date() object that makes it easy to activity pinch dates. To get nan existent date, you tin usage nan caller Date() entity for illustration this:

You tin besides usage nan day entity methods to get various parts of nan date, specified arsenic nan year, month, time of nan week, etc.

Start by defining a adaptable day utilizing nan Date entity and get nan month’s and year’s values.

Create a usability called displayCalendar and update nan header to show nan existent period and year. 

Invoke nan displayCalendar() function to show nan header functionality. Now, nan header displays nan existent period and year.

Displaying nan Calendar

Next, update nan displayCalendar() usability arsenic follows:

• const firstDay = caller Date(year, month, 1);: Creates a caller Date object  representing nan first time of nan existent month. 
• const firstDayIndex = firstDay.getDay();:  Here, we usage nan worth of firstDay to get nan scale of nan first time of nan week. For example, 0 represents Sunday, 1 represents Monday, and truthful on.  
• const lastDay = caller Date(year, period + 1, 0);: Creates a caller Date entity representing nan past time of nan existent month. 
• const numberOfDays = lastDay.getDate();:  Here, we usage nan worth of  lastDay to get nan scale of nan past time of nan month. This worth will let america to get nan nonstop days successful a month. For example, if a period has 31 days, numberOfDays will beryllium 31

From nan worth of firstDayIndex, we cognize erstwhile nan first time of nan period will start. For example, for December 2023, nan first time of nan period will commencement astatine scale 5, connected a Friday. The almanac should beryllium blank from scale 0 (Sunday) to scale 4 (Thursday). Let’s usage firstDayIndex to create a for loop that will adhd quiet divs to nan commencement of nan calendar. 

To show nan days successful a month, we will create different for loop that will adhd divs adjacent to nan worth of numberOfDays. Each div will besides incorporate nan time of nan period matched correctly to nan time of nan week. 

The for loop does nan following:

• Creates div elements representing each time successful a month
• Adds a dataset property called day to each div containing a day matching nan existent day, month, and year. The information property will beryllium adjuvant erstwhile we want to find which day has been clicked. 
• Appends each div to our days element.
• We are besides adding a different CSS people to nan div, which matches nan existent date. 

Now, our JavaScript almanac is displaying nan correct date.

Selecting a Date

We besides want to perceive for a click arena erstwhile a time is clicked and do nan following:

• retrieve nan currentDate worth from nan information property of nan clicked element
• display nan selected day connected nan screen. 

In nan codification above, we iterate done nan time elements, assigning a click arena listener to each div element. When clicked, we retrieve nan existent day from nan data-date property and update nan show constituent pinch nan formatted existent date.

The displaySelected() usability is past invoked. 

You should spot nan pursuing explanation displayed astatine nan bottommost of nan UI erstwhile you click immoderate date.

Final JavaScript Calendar Functionality

The last functionality is to guarantee nan correct period and twelvemonth are displayed erstwhile nan prev and adjacent elements are clicked. 

In nan codification above:

•  days.innerHTML = ""; : Clears nan contented of HTML div elements for nan existent month.

• selected.innerHTML=""; : Clears nan contents of nan currentDate.

• In nan for loop, we first cheque if nan existent period is little than 0 (January ). If true, we group nan period to December (December has scale 11)  and besides alteration nan twelvemonth by 1. If false, we decrement nan period only.
• dateToday.setMonth(month); : sets nan period to nan recently updated month. Finally, we invoke nan displayCalendar() and  displaySelected() functions.

For nan adjacent element, we cheque if nan period is greater than 11 (December) and if true, we group nan period to 0 and increment nan twelvemonth to nan adjacent year. Otherwise, we increment nan period by 1.

Conclusion

This tutorial has covered really to usage JavaScript to create a afloat functional almanac dynamically. Hopefully, you’ve learned a lot, and you are now successful a position to create move JavaScript calendars for different purposes!