In this article we will add previous and next month links to our basic JavaScript and CSScalendar explained before. If you have not check that please go through Basic Javascript and CSS calendar first.
To start with we will write HTML and CSS for the calendar. In HTML we will create one div for previous and next arrow with active month name in middle. After that we will create un-ordered list to display the weekdays. We have displayed static weekdays however you can try the same using jQuery array dynamically. Give it a try and let me know if need any help.
After displaying the weekdays we will create one empty un-ordered list for calendar dates and populate the same using calendar function of our jQuery.
<div id=”current-month”>
<div id=”prev” style=”float:left;”>
<a href=”#” id=”prearrow”><</a>
</div>
<div id=”month”>December, 2018-</div>
<div id=”next” style=”float:right;”>
<a href=”#” id=”nexarrow”>></a>
</div>
</div>
<ul class=”calendar-days” id=”calendardays”>
<li class=”weekday”>Sun</li>
<li class=”weekday”>Mon</li>
<li class=”weekday”>Tue</li>
<li class=”weekday”>Wed</li>
<li class=”weekday”>Thu</li>
<li class=”weekday”>Fri</li>
<li class=”weekday”>Sat</li>
</ul>
<ul class=”calendar-dates” id=”calendardates”>
<!– Dynamic Calendar here –>
</ul>
CSS to display the calendar properly in or HTML page. You can change it as per your need to improve the UI of calendar.
#container{
width:96%;
margin: 0 auto;
height:600px;
}
#jsoncalendar{
width:60%;
float:left;
clear:left;
}
#jsoncalendar .date{
color: #bf5a3c;
width:50px;
font-size: 18px;
font-weight:bold;
float:left;
line-height: 18px;
}
#date{
width:50px;
}
#date span{
color: #bf5a3c;
width:40px;
font-weight:bold;
float:left;
line-height: 24px;
margin-left:0;
}
.emonth{
font-size: 18px;
}
.edate{
font-size: 28px;
}
#calendar-main{
float:right;
width:30%;
min-width:30%;
height:auto;
font-family: ‘Roboto Condensed’, sans-serif;
font-size: 1em;
border:1px dotted #000;
}
#current-month{
position:relative;
width: 80%;
margin:auto;
max-width:800px;
overflow:hidden;
text-align:center;
font-weight:600;
color:#6d6235;
}
#current-month{
margin-top:20px !important;
margin-bottom:40px !important;
}
#calendar-main a{
color: #ea9d55;
font-weight: bold;
}
div #prev, div #next{
position: relative;
width: 20px;
height: 20px;
margin-top: 2px;
}
div #month{
position: absolute;
width: 80%;
margin-left:40px;
}
.calendar-days, .calendar-dates{
padding-left: 0;
width:100%;
}
.weekday, .calendar-date{
display: inline-block;
width: 13.50%;
text-align: center;
padding-left:0px;
}
.cal-day{
position: relative;
margin: 5px;
padding: 5px;
}
.cal-day .eventday{
display: inline-block;
height: 20px;
width: 20px;
border-radius: 50px;
}
.toady{
color: #fff;
}
.nextmonth, .prevmonth{
color: #bbb;
}
Now will explain how to write the jquery functions to display your calendar at run time. First we will declare variable required to use in our functions. we need previousmonth, nextmonth, dates, month, year, and months in string as below.
var previousmonth = “”;
var nexttmonth = “”;
var dates = new Date();
var month = dates.getMonth();
var year = dates.getFullYear();
var months = [“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”]; // to display months
Now we write the funtion to get the last date of month. Have used name getprevdate function however you can change as per your requirement.
var getprevdate = function(y,m,d) {
var prevdate = new Date(y, (m), -d).getDate();
return prevdate; // return the last day of month
};
Next we will write function to calculate and get the previous month and year value and also next month value and year.
// check for prev month calendar dates //
var premonth = function(y,m){
var premonth=1;
var preyear = 0;
if(m==0){
premonth=11;
preyear = y-1;
}else{
premonth = parseInt(m)-1;
preyear = parseInt(y);
}
return preyear+’,’+premonth;
}
// check for next month calendar dates //
var nextmonth = function(y,m){
var nexmonth= 0;
var nexyear = 0;
if(m==11){
nexmonth=0;
nexyear = parseInt(y)+1;
}else{
nexmonth = parseInt(m)+1;
nexyear = y;
}
return nexyear+’,’+nexmonth;
}
Now we will write calendar function. you will note that this function is taking two constructor y and m and input value. We will send the value of month and year for which calendar need to be generated. By default at start it will show current month and year calendar. Next and previous month link will get populated using nextmonth and prevmonth functions.
var calendar = function(y,m){ //———–Calendar function start ———-//
var selectedFirstDate = new Date(y, (m), 1).getDate(); // get first date of month
var selectedLastDate = new Date(y, (m + 1), 0).getDate();// get last date of month
var selectedFirstDay = new Date(y, (m), 1).getDay(); // get first day of the month
var selectedLastDay = new Date(y, (m + 1), 0).getDay(); // get last day of the month
var calendardates = “”;
var number = 0;
var next = 1;
var prev=””;
for (var i = 0; i < 6; i++) { // run for 6 weeks to get full month
// creates a table row
for (var j = 0; j < 7; j++) { // run for 7 days of month
if (i === 0 && j < selectedFirstDay) {
prev = getprevdate(y,m,selectedFirstDay-j-1);
calendardates += ‘<li class=”weekday prevmonth”>’+prev+'</li> ‘;
}else if(number>=selectedLastDate){
calendardates += ‘<li class=”weekday nextmonth”>’+next+'</li> ‘;
next++;
}else if(number+1 == dates.getDate()){
number++;
calendardates += ‘<li class=”weekday today”><p class=”cal-day” id=”‘+number+'”>’+number+'</p></li> ‘;
}else{
number++;
//alert(“not in inarray”);
calendardates += ‘<li class=”weekday”><p class=”cal-day” id=”‘+number+'”>’+number+'</p></li> ‘;
}
}
if(number>=selectedLastDate){
break;
}
}
//premonth(y,m);
previousmonth = premonth(y,m); // store value of previous month and year
nexttmonth = nextmonth(y,m); // store value of previous month and year
$(“#month”).html(months[m]+”, “+y); //write current month and year in div
$(“#calendardates”).html(calendardates);// writes current month calendar in html table with id calendar
}
anywhere in your js file you will call this function using line below.
/*—-Call calendar funtion —–*/
calendar(year,month);
here year annd month value are coming from top variable of dates.
Now as our calendar is ready we need to call this function again and pass the value of previous month and next month to get that month calendar.
We will use below two function on click of arrows and call the calendar function to get that month calendar.
/*————–generate calendar on next and previous click————*/
$(“#prearrow”).click(function(){
var x = previousmonth.split(‘,’);
calendar(x[0],x[1]);
});
$(“#nexarrow”).click(function(){
var y = nexttmonth.split(‘,’);
calendar(y[0],y[1]);
});
/*————– generate calendar on next and previous click end ————*/
Now our calendar is complete you can test this code in html file and write to me if need any help.
Leave a Reply