Simple Calendar in JavaScript
Submitted by azalea zenith on Friday, October 14, 2016 - 16:06.
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.
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);
}
}
That's it, you have a calendar after compiling all the source code above. For the full source code, kindly download below. Thank you.
Output
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
- 1412 views
