In this article we will see how anyone can create simple calendar of current month or any month using jQuery of JavaScript. We know there is date-picker element in jQuery ui however if someone want to create calendar on its own then this code will help him to understand the date() object and how to use various property of that to create the calendar in his desired format.
To create calendar we will create one simple html page with jQuery script tag included in header. This is required to use the date property and displaying the same. Inside body tag we will create table with id calendar. We have by default listed all the days of month in this table. Now using jQuery we will add dates from next row based on the start days of the month.
Below is the HTML code for reference. We have used two ids “month_year” to display the month and year with “calendar” to display the complete calendar dates.
<!DOCTYPE html>
<html>
<head>
<title>Calendar</title>
<link rel=”stylesheet” href=”calendar.css”>
<script src=”https://code.jquery.com/jquery-3.1.1.min.js”></script>
<script src=”calendar.js”></script>
</head>
<body>
<main>
<h1><span id=”month_year”> </span></h1>
<table id=”calendar”>
<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
</table>
</main>
</body>
</html>
CSS of our html page calendar is below. You can use the same or change as per your requirement.
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 360px;
border: 3px solid blue;
padding: 0 2em 1em;
}
h1 {
color: blue;
margin-bottom: .25em;
}
table {
border-collapse: collapse;
border: 1px solid black;
}
td {
width: 3em;
height: 3em;
vertical-align: top;
padding: 0.5 0 0 0.5;
border: 1px solid black;
}
Now we will write the jquery code to on document ready state. To create calendar in jQuery we need current month, current year, last day of the month and start date of the month with weekdays ie. Monday, Tuesday etc of start date.
Lets call function calendar with two passing variables year and month in number format. ie. calendar(2018,06) will return July calendar of 2018 year.
“use strict”;
$(document).ready(function(){
calendar(year,month);
}
We know that javascript or jquery give us month in number format from 0-11. To convert that to actual month we will first write a function. Lets call the function “getMonthText” and using simple if loop return the month name based on currentMonth number. Place this code above our calendar functions.
var getMonthText = function(currentMonth) {
if (currentMonth === 0) { return “January”; }
else if (currentMonth === 1) { return “February”; }
else if (currentMonth === 2) { return “March”; }
else if (currentMonth === 3) { return “April”; }
else if (currentMonth === 4) { return “May”; }
else if (currentMonth === 5) { return “June”; }
else if (currentMonth === 6) { return “July”; }
else if (currentMonth === 7) { return “August”; }
else if (currentMonth === 8) { return “September”; }
else if (currentMonth === 9) { return “October”; }
else if (currentMonth === 10) { return “November”; }
else if (currentMonth === 11) { return “December”; }
};
Now we have month and year. We need last day of month, first day of month and weekday of first day. Lets write function to get the last day of month, call it getLastDayofMonth and create a new variable lastDay and assign new date() to that. Now we can call all the property of date function using lastDay variable. We will use setDate and setMonth to set the next month and first date of next month for which we need to generate the calendar. In that way we will get the last date of current month.
var getLastDayofMonth = function(currentMonth) {
var lastDay = new Date();
// Set the month to next month
lastDay.setMonth( currentMonth + 1 );
// Set the date to one day before the start of the month
lastDay.setDate(0);
return lastDay.getDate();
};
Now we will write calendar function to display the calendar in our html under calendar id.
var calendar = function(y,m){
var firstDay = new Date(y, m, 1);// date object with first day of current month
var lastDayofmonth = getLastDayofMonth(m);// date object with last day of current month
var html = $(“#calendar”).html();
var number = 0;
for (var i = 0; i < 6; i++) { // run for 6 weeks to get full month
// creates a table row
html += “<tr>”;
for (let j = 0; j < 7; j++) { // run for 7 days of month
if (i === 0 && j < firstDay.getDay()) {
html+=”<td></td>”;
}else if(number>=lastDayofmonth){
html+=”<td></td>”;
}else{
number +=1;
html+=”<td>”+number+”</td>”;
}
}
html += “</tr>”;
if(number>=lastDayofmonth){
break;
}
}
$(“#calendar”).html(html);// writes current month calendar in html table with id calendar
$(“#month_year”).text(getMonthText(m)+” “+y); // writes current month and year on html insdie month_year span tag
}
Now below is complete jQuery code once again.
“use strict”;
$(document).ready(function(){
var getMonthText = function(currentMonth) {
if (currentMonth === 0) { return “January”; }
else if (currentMonth === 1) { return “February”; }
else if (currentMonth === 2) { return “March”; }
else if (currentMonth === 3) { return “April”; }
else if (currentMonth === 4) { return “May”; }
else if (currentMonth === 5) { return “June”; }
else if (currentMonth === 6) { return “July”; }
else if (currentMonth === 7) { return “August”; }
else if (currentMonth === 8) { return “September”; }
else if (currentMonth === 9) { return “October”; }
else if (currentMonth === 10) { return “November”; }
else if (currentMonth === 11) { return “December”; }
};
var getLastDayofMonth = function(currentMonth) {
var lastDay = new Date();
// Set the month to next month
lastDay.setMonth( currentMonth + 1 );
// Set the date to one day before the start of the month
lastDay.setDate(0);
return lastDay.getDate();
};
var calendar = function(y,m){
var firstDay = new Date(y, m, 1);// date object with first day of current month
var lastDayofmonth = getLastDayofMonth(m);// date object with last day of current month
var html = $(“#calendar”).html();
var number = 0;
for (var i = 0; i < 6; i++) {
// creates a table row
html += “<tr>”;
for (let j = 0; j < 7; j++) {
if (i === 0 && j < firstDay.getDay()) {
html+=”<td></td>”;
}else if(number>=lastDayofmonth){
html+=”<td></td>”;
}else{
number +=1;
html+=”<td>”+number+”</td>”;
}
}
html += “</tr>”;
if(number>=lastDayofmonth){
break;
}
}
$(“#calendar”).html(html);// writes current month calendar in html table with id calendar
$(“#month_year”).text(getMonthText(m)+” “+y); // writes current month and year on html insdie month_year span tag
}
calendar(2018,10); // User calendar(2018,6); for july calendar of 2018
});
Leave a Reply