Calendar using JavaScript
========================
> ## Excerpt
> We will Create a calendar using HTML, CSS, and JavaScript that displays the current month and year, and allows the user to navigate to previous and next months. Also, it allows the user to jump to a specific month and year. The calendar should also highlight the current date.Prerequisites: HTMLCSSJavaScript&nbsp;The

---
# How to Design a Simple Calendar using JavaScript ?

Last Updated : 25 Sep, 2024

Summarize

Comments

Improve

Suggest changes

13 Likes

Like

Save

Share

Report

 [![News](How%20to%20Design%20a%20Simple%20Calendar%20using%20JavaScript%20-%20GeeksforGeeks/Google-news.svg) Follow](https://news.google.com/publications/CAAqBwgKMLTrzwsw44bnAw?hl=en-IN&gl=IN&ceid=IN%3Aen)

We will Create a calendar using HTML, CSS, and JavaScript that displays the current month and year, and allows the user to navigate to previous and next months. Also, it allows the user to jump to a specific month and year. The calendar should also highlight the current date.

### ****Prerequisites:****

-   [HTML](https://www.geeksforgeeks.org/html/)
-   [CSS](https://www.geeksforgeeks.org/css/)
-   [JavaScript](https://www.geeksforgeeks.org/javascript/) 

The task at hand is to create a webpage that displays a calendar. The calendar should have the functionality to navigate to the previous and next months. The calendar should also be able to display the current date in a different color.

## ****Approach:****

-   Create an HTML structure for the calendar using a table and appropriate list elements.
-   Create JavaScript variables to keep track of the current month and year, as well as elements to display the current month and year on the page.
-   Use JavaScript to create a function to display the current month’s calendar. This function should take in the current month and year as arguments and use them to determine the number of days in the current month, and the first day of the month, and fill in the appropriate number of days in the calendar.
-   Create JavaScript functions to navigate to the next and previous months.
-   Use JavaScript to add event listeners to the appropriate elements (next and previous buttons) to call the appropriate navigation functions when clicked.

****Implementation:**** Below is the implementation of the above approach:

-   ****index.html:**** This file contains the skeleton of calendar
-   ****styles.css:**** This file contains CSS to improve the look of the calendar
-   ****script.js:**** This file contains the code to make the calendar dynamic

 ****Example:**** Here is the implementation of the above-explained steps.

HTML` ``` <span></span><span class="cp">&lt;!DOCTYPE html&gt;</span> <span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span> <span class="na">dir</span><span class="o">=</span><span class="s">"ltr"</span><span class="p">&gt;</span>  <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>     <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">&gt;</span>     <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Calendar<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>     <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span>            <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="p">&gt;</span>     <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span>         <span class="na">href</span><span class="o">=</span><span class="s">"styles.css"</span><span class="p">&gt;</span>         <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span>         <span class="na">href</span><span class="o">=</span> <span class="s">"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"</span><span class="p">&gt;</span>     <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>  <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>     <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"calendar-container"</span><span class="p">&gt;</span>         <span class="p">&lt;</span><span class="nt">header</span> <span class="na">class</span><span class="o">=</span><span class="s">"calendar-header"</span><span class="p">&gt;</span>             <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"calendar-current-date"</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>             <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"calendar-navigation"</span><span class="p">&gt;</span>                 <span class="p">&lt;</span><span class="nt">span</span> <span class="na">id</span><span class="o">=</span><span class="s">"calendar-prev"</span>                        <span class="na">class</span><span class="o">=</span><span class="s">"material-symbols-rounded"</span><span class="p">&gt;</span>                     chevron_left                 <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>                 <span class="p">&lt;</span><span class="nt">span</span> <span class="na">id</span><span class="o">=</span><span class="s">"calendar-next"</span>                        <span class="na">class</span><span class="o">=</span><span class="s">"material-symbols-rounded"</span><span class="p">&gt;</span>                     chevron_right                 <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>             <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>         <span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span>          <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"calendar-body"</span><span class="p">&gt;</span>             <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"calendar-weekdays"</span><span class="p">&gt;</span>                 <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Sun<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>                 <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Mon<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>                 <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Tue<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>                 <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Wed<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>                 <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Thu<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>                 <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Fri<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>                 <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Sat<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>             <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>             <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"calendar-dates"</span><span class="p">&gt;&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>         <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>     <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>     <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"script.js"</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>  <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span> ``` `
CSS` ``` <span></span><span class="o">*</span><span class="w"> </span><span class="p">{</span> <span class="w">    </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span> <span class="w">    </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span> <span class="w">    </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="s1">'Poppins'</span><span class="p">,</span><span class="w"> </span><span class="kc">sans-serif</span><span class="p">;</span> <span class="p">}</span>  <span class="nt">body</span><span class="w"> </span><span class="p">{</span> <span class="w">    </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">flex</span><span class="p">;</span> <span class="w">    </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#ef62da</span><span class="p">;</span> <span class="w">    </span><span class="k">min-height</span><span class="p">:</span><span class="w"> </span><span class="mi">100</span><span class="kt">vh</span><span class="p">;</span> <span class="w">    </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="p">;</span> <span class="w">    </span><span class="k">align-items</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span> <span class="w">    </span><span class="k">justify-content</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span> <span class="p">}</span>  <span class="p">.</span><span class="nc">calendar-container</span><span class="w"> </span><span class="p">{</span> <span class="w">    </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#fff</span><span class="p">;</span> <span class="w">    </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">450</span><span class="kt">px</span><span class="p">;</span> <span class="w">    </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="p">;</span> <span class="w">    </span><span class="k">box-shadow</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="w"> </span><span class="mi">40</span><span class="kt">px</span><span class="w"> </span><span class="nb">rgba</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0.12</span><span class="p">);</span> <span class="p">}</span>  <span class="p">.</span><span class="nc">calendar-container</span><span class="w"> </span><span class="nt">header</span><span class="w"> </span><span class="p">{</span> <span class="w">    </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">flex</span><span class="p">;</span> <span class="w">    </span><span class="k">align-items</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span> <span class="w">    </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">25</span><span class="kt">px</span><span class="w"> </span><span class="mi">30</span><span class="kt">px</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="p">;</span> <span class="w">    </span><span class="k">justify-content</span><span class="p">:</span><span class="w"> </span><span class="kc">space-between</span><span class="p">;</span> <span class="p">}</span>  <span class="nt">header</span><span class="w"> </span><span class="p">.</span><span class="nc">calendar-navigation</span><span class="w"> </span><span class="p">{</span> <span class="w">    </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">flex</span><span class="p">;</span> <span class="p">}</span>  <span class="nt">header</span><span class="w"> </span><span class="p">.</span><span class="nc">calendar-navigation</span><span class="w"> </span><span class="nt">span</span><span class="w"> </span><span class="p">{</span> <span class="w">    </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">38</span><span class="kt">px</span><span class="p">;</span> <span class="w">    </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">38</span><span class="kt">px</span><span class="p">;</span> <span class="w">    </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="p">;</span> <span class="w">    </span><span class="k">cursor</span><span class="p">:</span><span class="w"> </span><span class="kc">pointer</span><span class="p">;</span> <span class="w">    </span><span class="k">text-align</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span> <span class="w">    </span><span class="k">line-height</span><span class="p">:</span><span class="w"> </span><span class="mi">38</span><span class="kt">px</span><span class="p">;</span> <span class="w">    </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">50</span><span class="kt">%</span><span class="p">;</span> <span class="w">    </span><span class="k">user-select</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span> <span class="w">    </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#aeabab</span><span class="p">;</span> <span class="w">    </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mf">1.9</span><span class="kt">rem</span><span class="p">;</span> <span class="p">}</span>  <span class="p">.</span><span class="nc">calendar-navigation</span><span class="w"> </span><span class="nt">span</span><span class="p">:</span><span class="nd">last-child</span><span class="w"> </span><span class="p">{</span> <span class="w">    </span><span class="k">margin-right</span><span class="p">:</span><span class="w"> </span><span class="mi">-10</span><span class="kt">px</span><span class="p">;</span> <span class="p">}</span>  <span class="nt">header</span><span class="w"> </span><span class="p">.</span><span class="nc">calendar-navigation</span><span class="w"> </span><span class="nt">span</span><span class="p">:</span><span class="nd">hover</span><span class="w"> </span><span class="p">{</span> <span class="w">    </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#f2f2f2</span><span class="p">;</span> <span class="p">}</span>  <span class="nt">header</span><span class="w"> </span><span class="p">.</span><span class="nc">calendar-current-date</span><span class="w"> </span><span class="p">{</span> <span class="w">    </span><span class="k">font-weight</span><span class="p">:</span><span class="w"> </span><span class="mi">500</span><span class="p">;</span> <span class="w">    </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mf">1.45</span><span class="kt">rem</span><span class="p">;</span> <span class="p">}</span>  <span class="p">.</span><span class="nc">calendar-body</span><span class="w"> </span><span class="p">{</span> <span class="w">    </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span> <span class="p">}</span>  <span class="p">.</span><span class="nc">calendar-body</span><span class="w"> </span><span class="nt">ul</span><span class="w"> </span><span class="p">{</span> <span class="w">    </span><span class="k">list-style</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span> <span class="w">    </span><span class="k">flex-wrap</span><span class="p">:</span><span class="w"> </span><span class="kc">wrap</span><span class="p">;</span> <span class="w">    </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">flex</span><span class="p">;</span> <span class="w">    </span><span class="k">text-align</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span> <span class="p">}</span>  <span class="p">.</span><span class="nc">calendar-body</span><span class="w"> </span><span class="p">.</span><span class="nc">calendar-dates</span><span class="w"> </span><span class="p">{</span> <span class="w">    </span><span class="k">margin-bottom</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span> <span class="p">}</span>  <span class="p">.</span><span class="nc">calendar-body</span><span class="w"> </span><span class="nt">li</span><span class="w"> </span><span class="p">{</span> <span class="w">    </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="nb">calc</span><span class="p">(</span><span class="mi">100</span><span class="kt">%</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mi">7</span><span class="p">);</span> <span class="w">    </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mf">1.07</span><span class="kt">rem</span><span class="p">;</span> <span class="w">    </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#414141</span><span class="p">;</span> <span class="p">}</span>  <span class="p">.</span><span class="nc">calendar-body</span><span class="w"> </span><span class="p">.</span><span class="nc">calendar-weekdays</span><span class="w"> </span><span class="nt">li</span><span class="w"> </span><span class="p">{</span> <span class="w">    </span><span class="k">cursor</span><span class="p">:</span><span class="w"> </span><span class="kc">default</span><span class="p">;</span> <span class="w">    </span><span class="k">font-weight</span><span class="p">:</span><span class="w"> </span><span class="mi">500</span><span class="p">;</span> <span class="p">}</span>  <span class="p">.</span><span class="nc">calendar-body</span><span class="w"> </span><span class="p">.</span><span class="nc">calendar-dates</span><span class="w"> </span><span class="nt">li</span><span class="w"> </span><span class="p">{</span> <span class="w">    </span><span class="k">margin-top</span><span class="p">:</span><span class="w"> </span><span class="mi">30</span><span class="kt">px</span><span class="p">;</span> <span class="w">    </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">relative</span><span class="p">;</span> <span class="w">    </span><span class="k">z-index</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="p">;</span> <span class="w">    </span><span class="k">cursor</span><span class="p">:</span><span class="w"> </span><span class="kc">pointer</span><span class="p">;</span> <span class="p">}</span>  <span class="p">.</span><span class="nc">calendar-dates</span><span class="w"> </span><span class="nt">li</span><span class="p">.</span><span class="nc">inactive</span><span class="w"> </span><span class="p">{</span> <span class="w">    </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#aaa</span><span class="p">;</span> <span class="p">}</span>  <span class="p">.</span><span class="nc">calendar-dates</span><span class="w"> </span><span class="nt">li</span><span class="p">.</span><span class="nc">active</span><span class="w"> </span><span class="p">{</span> <span class="w">    </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#fff</span><span class="p">;</span> <span class="p">}</span>  <span class="p">.</span><span class="nc">calendar-dates</span><span class="w"> </span><span class="nt">li</span><span class="p">::</span><span class="nd">before</span><span class="w"> </span><span class="p">{</span> <span class="w">    </span><span class="k">position</span><span class="p">:</span><span class="w"> </span><span class="kc">absolute</span><span class="p">;</span> <span class="w">    </span><span class="k">content</span><span class="p">:</span><span class="w"> </span><span class="s2">""</span><span class="p">;</span> <span class="w">    </span><span class="k">z-index</span><span class="p">:</span><span class="w"> </span><span class="mi">-1</span><span class="p">;</span> <span class="w">    </span><span class="k">top</span><span class="p">:</span><span class="w"> </span><span class="mi">50</span><span class="kt">%</span><span class="p">;</span> <span class="w">    </span><span class="k">left</span><span class="p">:</span><span class="w"> </span><span class="mi">50</span><span class="kt">%</span><span class="p">;</span> <span class="w">    </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">40</span><span class="kt">px</span><span class="p">;</span> <span class="w">    </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">40</span><span class="kt">px</span><span class="p">;</span> <span class="w">    </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">50</span><span class="kt">%</span><span class="p">;</span> <span class="w">    </span><span class="k">transform</span><span class="p">:</span><span class="w"> </span><span class="nb">translate</span><span class="p">(</span><span class="mi">-50</span><span class="kt">%</span><span class="p">,</span><span class="w"> </span><span class="mi">-50</span><span class="kt">%</span><span class="p">);</span> <span class="p">}</span>  <span class="p">.</span><span class="nc">calendar-dates</span><span class="w"> </span><span class="nt">li</span><span class="p">.</span><span class="nc">active</span><span class="p">::</span><span class="nd">before</span><span class="w"> </span><span class="p">{</span> <span class="w">    </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#6332c5</span><span class="p">;</span> <span class="p">}</span>  <span class="p">.</span><span class="nc">calendar-dates</span><span class="w"> </span><span class="nt">li</span><span class="p">:</span><span class="nd">not</span><span class="o">(</span><span class="p">.</span><span class="nc">active</span><span class="o">)</span><span class="p">:</span><span class="nd">hover</span><span class="p">::</span><span class="nd">before</span><span class="w"> </span><span class="p">{</span> <span class="w">    </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#e4e1e1</span><span class="p">;</span> <span class="p">}</span> ``` `
JavaScript`` ``` <span></span><span class="kd">let</span><span class="w"> </span><span class="nx">date</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">();</span> <span class="kd">let</span><span class="w"> </span><span class="nx">year</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">date</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">();</span> <span class="kd">let</span><span class="w"> </span><span class="nx">month</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">date</span><span class="p">.</span><span class="nx">getMonth</span><span class="p">();</span>  <span class="kd">const</span><span class="w"> </span><span class="nx">day</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">".calendar-dates"</span><span class="p">);</span>  <span class="kd">const</span><span class="w"> </span><span class="nx">currdate</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span> <span class="w">    </span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">".calendar-current-date"</span><span class="p">);</span>  <span class="kd">const</span><span class="w"> </span><span class="nx">prenexIcons</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span> <span class="w">    </span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s2">".calendar-navigation span"</span><span class="p">);</span>  <span class="c1">// Array of month names</span> <span class="kd">const</span><span class="w"> </span><span class="nx">months</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span> <span class="w">    </span><span class="s2">"January"</span><span class="p">,</span> <span class="w">    </span><span class="s2">"February"</span><span class="p">,</span> <span class="w">    </span><span class="s2">"March"</span><span class="p">,</span> <span class="w">    </span><span class="s2">"April"</span><span class="p">,</span> <span class="w">    </span><span class="s2">"May"</span><span class="p">,</span> <span class="w">    </span><span class="s2">"June"</span><span class="p">,</span> <span class="w">    </span><span class="s2">"July"</span><span class="p">,</span> <span class="w">    </span><span class="s2">"August"</span><span class="p">,</span> <span class="w">    </span><span class="s2">"September"</span><span class="p">,</span> <span class="w">    </span><span class="s2">"October"</span><span class="p">,</span> <span class="w">    </span><span class="s2">"November"</span><span class="p">,</span> <span class="w">    </span><span class="s2">"December"</span> <span class="p">];</span>  <span class="c1">// Function to generate the calendar</span> <span class="kd">const</span><span class="w"> </span><span class="nx">manipulate</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>  <span class="w">    </span><span class="c1">// Get the first day of the month</span> <span class="w">    </span><span class="kd">let</span><span class="w"> </span><span class="nx">dayone</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">(</span><span class="nx">year</span><span class="p">,</span><span class="w"> </span><span class="nx">month</span><span class="p">,</span><span class="w"> </span><span class="mf">1</span><span class="p">).</span><span class="nx">getDay</span><span class="p">();</span>  <span class="w">    </span><span class="c1">// Get the last date of the month</span> <span class="w">    </span><span class="kd">let</span><span class="w"> </span><span class="nx">lastdate</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">(</span><span class="nx">year</span><span class="p">,</span><span class="w"> </span><span class="nx">month</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">).</span><span class="nx">getDate</span><span class="p">();</span>  <span class="w">    </span><span class="c1">// Get the day of the last date of the month</span> <span class="w">    </span><span class="kd">let</span><span class="w"> </span><span class="nx">dayend</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">(</span><span class="nx">year</span><span class="p">,</span><span class="w"> </span><span class="nx">month</span><span class="p">,</span><span class="w"> </span><span class="nx">lastdate</span><span class="p">).</span><span class="nx">getDay</span><span class="p">();</span>  <span class="w">    </span><span class="c1">// Get the last date of the previous month</span> <span class="w">    </span><span class="kd">let</span><span class="w"> </span><span class="nx">monthlastdate</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">(</span><span class="nx">year</span><span class="p">,</span><span class="w"> </span><span class="nx">month</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">).</span><span class="nx">getDate</span><span class="p">();</span>  <span class="w">    </span><span class="c1">// Variable to store the generated calendar HTML</span> <span class="w">    </span><span class="kd">let</span><span class="w"> </span><span class="nx">lit</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">""</span><span class="p">;</span>  <span class="w">    </span><span class="c1">// Loop to add the last dates of the previous month</span> <span class="w">    </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">let</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dayone</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">--</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w">        </span><span class="nx">lit</span><span class="w"> </span><span class="o">+=</span> <span class="w">            </span><span class="sb">`&lt;li class="inactive"&gt;</span><span class="si">${</span><span class="nx">monthlastdate</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="si">}</span><span class="sb">&lt;/li&gt;`</span><span class="p">;</span> <span class="w">    </span><span class="p">}</span>  <span class="w">    </span><span class="c1">// Loop to add the dates of the current month</span> <span class="w">    </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">let</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">1</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;=</span><span class="w"> </span><span class="nx">lastdate</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>  <span class="w">        </span><span class="c1">// Check if the current date is today</span> <span class="w">        </span><span class="kd">let</span><span class="w"> </span><span class="nx">isToday</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="nx">date</span><span class="p">.</span><span class="nx">getDate</span><span class="p">()</span> <span class="w">            </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">month</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">().</span><span class="nx">getMonth</span><span class="p">()</span> <span class="w">            </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">year</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">().</span><span class="nx">getFullYear</span><span class="p">()</span> <span class="w">            </span><span class="o">?</span><span class="w"> </span><span class="s2">"active"</span> <span class="w">            </span><span class="o">:</span><span class="w"> </span><span class="s2">""</span><span class="p">;</span> <span class="w">        </span><span class="nx">lit</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="sb">`&lt;li class="</span><span class="si">${</span><span class="nx">isToday</span><span class="si">}</span><span class="sb">"&gt;</span><span class="si">${</span><span class="nx">i</span><span class="si">}</span><span class="sb">&lt;/li&gt;`</span><span class="p">;</span> <span class="w">    </span><span class="p">}</span>  <span class="w">    </span><span class="c1">// Loop to add the first dates of the next month</span> <span class="w">    </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">let</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dayend</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">6</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w">        </span><span class="nx">lit</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="sb">`&lt;li class="inactive"&gt;</span><span class="si">${</span><span class="nx">i</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">dayend</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="si">}</span><span class="sb">&lt;/li&gt;`</span> <span class="w">    </span><span class="p">}</span>  <span class="w">    </span><span class="c1">// Update the text of the current date element </span> <span class="w">    </span><span class="c1">// with the formatted current month and year</span> <span class="w">    </span><span class="nx">currdate</span><span class="p">.</span><span class="nx">innerText</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="sb">`</span><span class="si">${</span><span class="nx">months</span><span class="p">[</span><span class="nx">month</span><span class="p">]</span><span class="si">}</span><span class="sb"> </span><span class="si">${</span><span class="nx">year</span><span class="si">}</span><span class="sb">`</span><span class="p">;</span>  <span class="w">    </span><span class="c1">// update the HTML of the dates element </span> <span class="w">    </span><span class="c1">// with the generated calendar</span> <span class="w">    </span><span class="nx">day</span><span class="p">.</span><span class="nx">innerHTML</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">lit</span><span class="p">;</span> <span class="p">}</span>  <span class="nx">manipulate</span><span class="p">();</span>  <span class="c1">// Attach a click event listener to each icon</span> <span class="nx">prenexIcons</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">icon</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>  <span class="w">    </span><span class="c1">// When an icon is clicked</span> <span class="w">    </span><span class="nx">icon</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">"click"</span><span class="p">,</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>  <span class="w">        </span><span class="c1">// Check if the icon is "calendar-prev"</span> <span class="w">        </span><span class="c1">// or "calendar-next"</span> <span class="w">        </span><span class="nx">month</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">icon</span><span class="p">.</span><span class="nx">id</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s2">"calendar-prev"</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="nx">month</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mf">1</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="nx">month</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="p">;</span>  <span class="w">        </span><span class="c1">// Check if the month is out of range</span> <span class="w">        </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">month</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">0</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">month</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="mf">11</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>  <span class="w">            </span><span class="c1">// Set the date to the first day of the </span> <span class="w">            </span><span class="c1">// month with the new year</span> <span class="w">            </span><span class="nx">date</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">(</span><span class="nx">year</span><span class="p">,</span><span class="w"> </span><span class="nx">month</span><span class="p">,</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">().</span><span class="nx">getDate</span><span class="p">());</span>  <span class="w">            </span><span class="c1">// Set the year to the new year</span> <span class="w">            </span><span class="nx">year</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">date</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">();</span>  <span class="w">            </span><span class="c1">// Set the month to the new month</span> <span class="w">            </span><span class="nx">month</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">date</span><span class="p">.</span><span class="nx">getMonth</span><span class="p">();</span> <span class="w">        </span><span class="p">}</span>  <span class="w">        </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>  <span class="w">            </span><span class="c1">// Set the date to the current date</span> <span class="w">            </span><span class="nx">date</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">();</span> <span class="w">        </span><span class="p">}</span>  <span class="w">        </span><span class="c1">// Call the manipulate function to </span> <span class="w">        </span><span class="c1">// update the calendar display</span> <span class="w">        </span><span class="nx">manipulate</span><span class="p">();</span> <span class="w">    </span><span class="p">});</span> <span class="p">});</span> ``` ``

****Output:****

![a1](How%20to%20Design%20a%20Simple%20Calendar%20using%20JavaScript%20-%20GeeksforGeeks/a1.gif)

How to Design a Simple Calendar using JavaScript?
