Create A Dynamic Calendar in HTML CSS & JavaScript | Calendar in JavaScript

In this video, I've shown how to Create A Dynamic Calendar in HTML CSS & JavaScript. In this calendar, users can see the current date and the day of the week. They can also see the past or future month days using the previous and next icons.

Live Demo or Download Codes of this Calendar

Follow me on Instagram

Timestamps:
0:00 Demo of Calendar
1:28 HTML & CSS Start
10:57 JavaScript Start
11:21 Working on Current Date
13:46 Working on Month Days
16:49 Working on Prev & Next Icons
19:05 Showing Previous Month Last Days
21:11 Showing Next Month First Days
23:45 Showing Next or Previous Year Calendar

Music Credit:
Deep Sea by Vendredi

Something 'bout July (Instrumental) by RYYZN

Ikson - We Are Free [Official]

[luispaulocavalcante]

Awesome video!!!

The person doesn't speak a word, but the video itself is an absurdly good didactic haha.

The part of the comments explaining the logic was sensational too.

No words, perfect lessons!

[umiamira]

Thank you. You really doing a great job. I am learning and completing your JavaScript Projects playlist. Sometimes I DIY first, sometimes I code along with you when I stuck. What I'm trying to say is thank you for teaching it for free and make a real-life problem solving

[jaykumar-jtfp]

I did not see someone coder like you on you tube i am just shock how could you make such as applications where no one youtubers even tells and makes such as application they just makes simple websites. If have to join genuine software company need to be coder like you

[somarjaber]

Thanks a lot, very clear and obvious video. Excellent work 🙌🙌

[lupsie]

I just finished this tutorial! I’m hoping to build my own calendar to use for my business. This was a lot of fun and I’ll be adding more features!

[Kun.]

Hola me encantan los tutoriales, me sirven tambien para repasar mi ingles en cuanto a escritura, nuevo subscriptor. Saludos desde Mexico, City

[Amir-yjpv]

I don't know if i have ever seen a better coding video than this. thank you for your awesome work. it was perfect.

[elaaddamomarmi]

You really did an amazing work, I appreciate it , But it seems that there is a problem with the .active day, I still get it in other days in each year .
I think the broblem is in this part of code :
"
if (curMonth<0 || curMonth>11){
date = new Date(currYear, curMonth);
curMonth = date.getMonth();
currYear = date.getFullYear();
}else{
date = new Date();
}
"
So i used :
"
if (curMonth>11) {
curMonth = 0;
currYear+=1;
}
if (curMonth<0) {
curMonth = 11;
currYear-=1;
}
" instead, and it works .
Anyway thanks a lot .

[prabhat]

Very cool! I love how you use Vanilla JS and it was so relaxing watching you code. I think the music did its job 😄

[mehedihasanhridoy]

it's amaging, really love the man.

[migzster]

how can you add like designs like adding images or adding certain colors in the dates where it has events?

[nexusbkmz]

How to make the first day of the week not Sunday, but Monday?

[mortenrune]

Thanks for this one. I tried to make it myself and it works ❤ I wish I understood the code so I could change it to start on a Monday 😅

[PranjalGAnime]

woow! you're too good in this bro!

[Neerajfullstackdeveloper]

Thankyou sir g for such a wonder full video

[MegaXDBrasil]

Uncaught TypeError: prevNextIcon.forEach is not a function
at JSCalend.js:28:14

[carlossantiago]

Really appreciate the post! Just wanted to let you know I found a little bug when the current month is December and you go to January then back to December it displays today's date as the first instead of the current date. I fixed it and this should solve that bug by checking for the current year and if you are going back to December.

Code with bug fixed:

prevNextIcon.forEach(icon => { // getting prev and next icons
icon.addEventListener("click", () => { // adding click event on both icons
// if clicked icon is previous icon then decrement current month by 1 else increment it by 1
currMonth = icon.id === "prev" ? currMonth - 1 : currMonth + 1;

if(currMonth < 0 || currMonth > 11) { // if current month is less than 0 or greater than 11
if (currMonth === -1 && currYear - 1 === new Date().getFullYear()) { // checks if we are going back to the previous month and if the current year matches the year we are going to
date = new Date();
} else {
// creating a new date of current year & month and pass it as date value
date = new Date(currYear, currMonth);
}

currYear = date.getFullYear(); // updating current year with new date year
currMonth = date.getMonth(); // updating current month with new date month
} else {
date = new Date(); // pass the current date as date value
}
renderCalendar(); // calling renderCalendar function
});
});

[triko]

how can I add event listeners to every date separately if I want to add a note for each day?

[farazahmadsha]

thank you so much dude you're a god

[ayushijoshi]

can you please tell me the JS code to add a today button in this code. If I click on the today button then the calendar's date, month and year goes back to current date, month and year.