# Simple calendar problem

**URL:** <https://discourse.mozilla.org/t/simple-calendar-problem/64692>\
**Category:** MDN\
**Created:** [July 28, 2020, 5:07am UTC](https://discourse.mozilla.org/t/simple-calendar-problem/64692 "2020-07-28T05:07:44Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Harshit\_Badolla](https://avatars.discourse-cdn.com/v4/letter/h/4af34b/32.png) [@Harshit\_Badolla](https://discourse.mozilla.org/u/Harshit_Badolla)\
**Post date:** [July 28, 2020, 5:07am UTC](https://discourse.mozilla.org/t/simple-calendar-problem/64692/1 "2020-07-28T05:07:44Z")

</div>

Hi,  
I tried creating the simple calendar and below is the code link

https://codepen.io/harshitbadolla/embed/preview/eYJaBJX?height=300&slug-hash=eYJaBJX&default-tabs=js,result&host=https://codepen.io

The problem i am facing is only if you select a month from the dropdown, the number of days would be displayed. I want January to be default just like how it is in this page ([https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building\_blocks/conditionals](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals));

I don’t want to manually add 31 li’s in my HTML.

Please let me know how can this be achieved?

---

<div class="post-metadata">

**Author:** ![Harshit\_Badolla](https://avatars.discourse-cdn.com/v4/letter/h/4af34b/32.png) [@Harshit\_Badolla](https://discourse.mozilla.org/u/Harshit_Badolla)\
**Post date:** [July 28, 2020, 5:09am UTC](https://discourse.mozilla.org/t/simple-calendar-problem/64692/3 "2020-07-28T05:09:56Z")

</div>

Here’s the code link

[https://codepen.io/harshitbadolla/pen/eYJaBJX](https://codepen.io/harshitbadolla/pen/eYJaBJX)

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [July 28, 2020, 7:12am UTC](https://discourse.mozilla.org/t/simple-calendar-problem/64692/4 "2020-07-28T07:12:35Z")

</div>

@Harshit_Badolla so, to get this clear, this code works fine, but the problem you’ve got is that you want it to display “January” and 31 days by default when it first loads, but it doesn’t display anything?

The problem is that you are only able to update the Month name and shown days when the change event fires, as all the code is inside the change handler. You should extract the part of the code that displays the month name and days out to a separate function, call that form inside the change handler, and then also call it separately when the page first loads, to show January by default.

---

<div class="post-metadata">

**Author:** ![Harshit\_Badolla](https://avatars.discourse-cdn.com/v4/letter/h/4af34b/32.png) [@Harshit\_Badolla](https://discourse.mozilla.org/u/Harshit_Badolla)\
**Post date:** [July 28, 2020, 7:22am UTC](https://discourse.mozilla.org/t/simple-calendar-problem/64692/5 "2020-07-28T07:22:09Z")

</div>

Thank you so much…I have updated the code and it works.  
I have also updated the code in the above codepen link.

Thanks a lot.

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [July 28, 2020, 7:35am UTC](https://discourse.mozilla.org/t/simple-calendar-problem/64692/6 "2020-07-28T07:35:23Z")

</div>

Perfect, that is really nice work!