Skip to main content

Simple Calendar in JavaScript

Screenshot
Body
In this tutorial, we are going to create Simple Calendar in JavaScript. This simple work creates using JavaScript and HTML. The users enable to navigate the calendar by his/her choice of month. Using a drop down menu to select what they want to display or show in the web page. Visit the Live Demo, kindly click the button below. We are going to construct the Markup for the drop down function to choose the desired month to display in the web page. In the source code below, shows all the list of a month in the drop down, then one textbox for the year, and a button to execute.
And, we have to code for the controls in a calendar. It contains a next and previous button. Take a look a simple source code below.
This is the script where we can set up the Year, Month, Day, and Date Today. Look the script below. function setToday() { var now = new Date(); var day = now.getDate(); var month = now.getMonth(); var year = now.getYear(); if (year Use this script to select Month in the web page using a select tag. function selectDate() { var year = document.calControl.year.value; if (isFourDigitYear(year)) { var day = 0; var month = document.calControl.month.selectedIndex; displayCalendar(month, year); } } And, this script helps us to navigate the calendar whether you can Next or Previous in the Month or Year. function setPreviousYear() { var year = document.calControl.year.value; if (isFourDigitYear(year)) { var day = 0; var month = document.calControl.month.selectedIndex; year--; document.calControl.year.value = year; displayCalendar(month, year); } } function setPreviousMonth() { var year = document.calControl.year.value; if (isFourDigitYear(year)) { var day = 0; var month = document.calControl.month.selectedIndex; if (month == 0) { month = 11; if (year > 1000) { year--; document.calControl.year.value = year; } } else { month--; } document.calControl.month.selectedIndex = month; displayCalendar(month, year); } } function setNextMonth() { var year = document.calControl.year.value; if (isFourDigitYear(year)) { var day = 0; var month = document.calControl.month.selectedIndex; if (month == 11) { month = 0; year++; document.calControl.year.value = year; } else { month++; } document.calControl.month.selectedIndex = month; displayCalendar(month, year); } } function setNextYear() { var year = document.calControl.year.value; if (isFourDigitYear(year)) { var day = 0; var month = document.calControl.month.selectedIndex; year++; document.calControl.year.value = year; displayCalendar(month, year); } }

Output

Result That's it, you have a calendar after compiling all the source code above. For the full source code, kindly download below. Thank you.

Add new comment