How to create a real-time calendar for a website? Solution: HTML CSS JavaScript Calendar Program. In other words, Animated JQuery Calendar.

I am sure you had seen the calendar on some website before. Trip and event types of websites use a calendar, for the users can choose their date. I saw that many institute’s websites also use the calendar for giving info to students. Suppose, you run a campaign for a limited offer, then calendar highlight is the best way to attract your customers.

Now question is that how you can create a good UI based calendar? Don’t worry, Because Today I am sharing HTML CSS JavaScript Calendar program. Basically, this is an animated jQuery calendar, because jQuery is a JavaScript library that’s why I am saying this JavaScript program. This calendar has a very good user interface, and also this is an advanced calendar program.

I used two external library jQuery and Font-Awesome in this program. It also has an animation effect when you click on the double angle button. When you click on the angle button, then today’s date, month, and the day will appear. You can call this an animated calendar using jQuery or JavaScript.

If you are thinking now how this program looks like, then see the preview given here below.

Preview Of Animated JQuery Calendar

See this video preview for getting an idea of how this program actually is. How well does it look?

Now you can see this program visually. If you like this, then get the source code of its.

You May Also Like:

HTML CSS JavaScript Calendar Source Code

As always before sharing source code, Let’s talk something about this program. As you know this is an HTML CSS & JavaScript Calendar program. For creating this program I used jQuery ( a javascript library ) and an external font called font-awesome. To create this program I had mostly used JavaScript var and if statement. Also, CSS play an important part in this program. I used font-awesome to add icons, and I had also used a google font.

The whole HTML structure is table based and created a div for showing current date status. The div show today’s date with an animation effect.

For creating this program, you have to create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to create this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

index.html <!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <title>HTML CSS JavaScript Calender | Webdevtrick.com</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <div class="sideb"> <div class="header"><i class="fa fa-angle-left" aria-hidden="true"></i><span><span class="month"> </span><span class="year"></span></span><i class="fa fa-angle-right" aria-hidden="true"></i></div> <div class="calender"> <table> <thead> <tr class="weedays"> <th data-weekday="sun" data-column="0">Sun</th> <th data-weekday="mon" data-column="1">Mon</th> <th data-weekday="tue" data-column="2">Tue</th> <th data-weekday="wed" data-column="3">Wed</th> <th data-weekday="thu" data-column="4">Thu</th> <th data-weekday="fri" data-column="5">Fri</th> <th data-weekday="sat" data-column="6">Sat</th> </tr> </thead> <tbody> <tr class="days" data-row="0"> <td data-column="0"></td> <td data-column="1"></td> <td data-column="2"></td> <td data-column="3"></td> <td data-column="4"></td> <td data-column="5"></td> <td data-column="6"></td> </tr> <tr class="days" data-row="1"> <td data-column="0"></td> <td data-column="1"></td> <td data-column="2"></td> <td data-column="3"></td> <td data-column="4"></td> <td data-column="5"></td> <td data-column="6"></td> </tr> <tr class="days" data-row="2"> <td data-column="0"></td> <td data-column="1"></td> <td data-column="2"></td> <td data-column="3"></td> <td data-column="4"></td> <td data-column="5"></td> <td data-column="6"></td> </tr> <tr class="days" data-row="3"> <td data-column="0"></td> <td data-column="1"></td> <td data-column="2"></td> <td data-column="3"></td> <td data-column="4"></td> <td data-column="5"></td> <td data-column="6"></td> </tr> <tr class="days" data-row="4"> <td data-column="0"></td> <td data-column="1"></td> <td data-column="2"></td> <td data-column="3"></td> <td data-column="4"></td> <td data-column="5"></td> <td data-column="6"></td> </tr> <tr class="days" data-row="5"> <td data-column="0"></td> <td data-column="1"></td> <td data-column="2"></td> <td data-column="3"></td> <td data-column="4"></td> <td data-column="5"></td> <td data-column="6"></td> </tr> </tbody> </table> </div> <div class="showDate"><i class="fa fa-angle-double-right" aria-hidden="true"></i></div> </div> <div class="right-wrapper"> <div class="header"><span></span></div><span class="day"></span><span class="month"></span> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="function.js"></script> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 <!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset = "UTF-8" > <title> HTML CSS JavaScript Calender | Webdevtrick.com </title> <link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.8.2/css/all.css" > <link rel = "stylesheet" href = "style.css" > </head> <body> <div class = "main" > <div class = "sideb" > <div class = "header" > <i class = "fa fa-angle-left" aria-hidden = "true" > </i> <span> <span class = "month" > </span> <span class = "year" > </span> </span> <i class = "fa fa-angle-right" aria-hidden = "true" > </i> </div> <div class = "calender" > <table> <thead> <tr class = "weedays" > <th data-weekday = "sun" data-column = "0" > Sun </th> <th data-weekday = "mon" data-column = "1" > Mon </th> <th data-weekday = "tue" data-column = "2" > Tue </th> <th data-weekday = "wed" data-column = "3" > Wed </th> <th data-weekday = "thu" data-column = "4" > Thu </th> <th data-weekday = "fri" data-column = "5" > Fri </th> <th data-weekday = "sat" data-column = "6" > Sat </th> </tr> </thead> <tbody> <tr class = "days" data-row = "0" > <td data-column = "0" > </td> <td data-column = "1" > </td> <td data-column = "2" > </td> <td data-column = "3" > </td> <td data-column = "4" > </td> <td data-column = "5" > </td> <td data-column = "6" > </td> </tr> <tr class = "days" data-row = "1" > <td data-column = "0" > </td> <td data-column = "1" > </td> <td data-column = "2" > </td> <td data-column = "3" > </td> <td data-column = "4" > </td> <td data-column = "5" > </td> <td data-column = "6" > </td> </tr> <tr class = "days" data-row = "2" > <td data-column = "0" > </td> <td data-column = "1" > </td> <td data-column = "2" > </td> <td data-column = "3" > </td> <td data-column = "4" > </td> <td data-column = "5" > </td> <td data-column = "6" > </td> </tr> <tr class = "days" data-row = "3" > <td data-column = "0" > </td> <td data-column = "1" > </td> <td data-column = "2" > </td> <td data-column = "3" > </td> <td data-column = "4" > </td> <td data-column = "5" > </td> <td data-column = "6" > </td> </tr> <tr class = "days" data-row = "4" > <td data-column = "0" > </td> <td data-column = "1" > </td> <td data-column = "2" > </td> <td data-column = "3" > </td> <td data-column = "4" > </td> <td data-column = "5" > </td> <td data-column = "6" > </td> </tr> <tr class = "days" data-row = "5" > <td data-column = "0" > </td> <td data-column = "1" > </td> <td data-column = "2" > </td> <td data-column = "3" > </td> <td data-column = "4" > </td> <td data-column = "5" > </td> <td data-column = "6" > </td> </tr> </tbody> </table> </div> <div class = "showDate" > <i class = "fa fa-angle-double-right" aria-hidden = "true" > </i> </div> </div> <div class = "right-wrapper" > <div class = "header" > <span> </span> </div> <span class = "day" > </span> <span class = "month" > </span> </div> </div> <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" > </script> <script src = "function.js" > </script> </body> </html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

style.css /** code by webdevtrick ( https://webdevtrick.com ) **/ @import url("https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap"); body, html { width: 100%; height: 100%; font-family: 'Josefin Sans', sans-serif; background-color: #B8F0FF; overflow: hidden; position: relative; outline: none; perspective: 1000px; } .main { position: absolute; width: 730px; height: 420px; top: 50%; left: 50%; box-sizing: border-box; transform: translate(-50%, -50%); transition: all 0.195s ease; transform-style: preserve-3d; } .main.is-rotated-left { transform: translate(-50%, -50%) rotateY(-4deg); } .main.is-rotated-right { transform: translate(-50%, -50%) rotateY(4deg); } .main .sideb, .main .right-wrapper { background-color: white; width: 50%; float: left; height: 100%; box-sizing: border-box; padding: 25px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .main .header { padding: 15px 0 20px; display: flex; justify-content: space-between; width: 100%; } .main .header i { padding: 0 5px; cursor: pointer; } .main .header span { display: inline-block; margin: 0 3px; font-weight: 700; } .main .right-wrapper { background-color: #f05855; color: white; transform-origin: left center; transform: rotateY(110deg); transition: all 0.5s; } .main .right-wrapper.is-active { transform: rotateY(0deg); } .main .right-wrapper .header { text-align: left; justify-content: center; } .main .right-wrapper .day { font-size: 12em; text-indent: -12px; display: block; } .main .right-wrapper .month { font-size: 2.5em; } .main .sideb .showDate { color: white; text-align: right; width: 100%; } .main .sideb .showDate i { cursor: pointer; background: #f05855; border-radius: 4px; padding: 8px 12px; transform: scale(1); transition: all 0.3s; } .main .sideb .showDate i.is-active { transform: scale(-1); } .main .sideb table { text-align: center; width: 90%; margin: 30px auto 0; table-layout: fixed; border-collapse: collapse; } .main .sideb table tbody:before { content: "-"; display: block; line-height: 0.75em; color: transparent; } .main .sideb table th { color: #f05855; font-size: 0.75em; text-transform: uppercase; margin-bottom: 10px; } .main .sideb table td { padding: 11px 5px; color: #ced0ce; font-size: 0.75em; transition: all 0.3s; position: relative; } .main .sideb table td::before { content: ""; display: none; width: 50%; height: 2px; position: absolute; left: 50%; top: 100%; transform: translate(-50%, -8px); background-color: #f05855; } .main .sideb table td.currentDay::before { display: block; } .main .sideb table td.selectable { color: #303633; cursor: pointer; } .main .sideb table td.selectable:hover { background: #f05855; color: white; } .main .sideb table td.between { background-color: #333; color: white; } .main .sideb table td.active, .main .sideb table td.hover { background: #f05855; color: white; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 /** code by webdevtrick ( https://webdevtrick.com ) **/ @import url("https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap"); body, html { width : 100% ; height : 100% ; font-family : 'Josefin Sans' , sans-serif ; background-color : #B8F0FF ; overflow : hidden ; position : relative ; outline : none ; perspective : 1000px ; } .main { position : absolute ; width : 730px ; height : 420px ; top : 50% ; left : 50% ; box-sizing : border-box ; transform : translate ( -50%, -50% ) ; transition : all 0.195s ease ; transform-style : preserve-3d ; } .main.is-rotated-left { transform : translate ( -50%, -50% ) rotateY ( -4deg ) ; } .main.is-rotated-right { transform : translate ( -50%, -50% ) rotateY ( 4deg ) ; } .main .sideb, .main .right-wrapper { background-color : white ; width : 50% ; float : left ; height : 100% ; box-sizing : border-box ; padding : 25px ; display : flex ; flex-direction : column ; justify-content : flex-start ; align-items : center ; } .main .header { padding : 15px 0 20px ; display : flex ; justify-content : space-between ; width : 100% ; } .main .header i { padding : 0 5px ; cursor : pointer ; } .main .header span { display : inline-block ; margin : 0 3px ; font-weight : 700 ; } .main .right-wrapper { background-color : #f05855 ; color : white ; transform-origin : left center ; transform : rotateY ( 110deg ) ; transition : all 0.5s ; } .main .right-wrapper.is-active { transform : rotateY ( 0deg ) ; } .main .right-wrapper .header { text-align : left ; justify-content : center ; } .main .right-wrapper .day { font-size : 12em ; text-indent : -12px ; display : block ; } .main .right-wrapper .month { font-size : 2.5em ; } .main .sideb .showDate { color : white ; text-align : right ; width : 100% ; } .main .sideb .showDate i { cursor : pointer ; background : #f05855 ; border-radius : 4px ; padding : 8px 12px ; transform : scale ( 1 ) ; transition : all 0.3s ; } .main .sideb .showDate i.is-active { transform : scale ( -1 ) ; } .main .sideb table { text-align : center ; width : 90% ; margin : 30px auto 0 ; table-layout : fixed ; border-collapse : collapse ; } .main .sideb table tbody:before { content : "-" ; display : block ; line-height : 0.75em ; color : transparent ; } .main .sideb table th { color : #f05855 ; font-size : 0.75em ; text-transform : uppercase ; margin-bottom : 10px ; } .main .sideb table td { padding : 11px 5px ; color : #ced0ce ; font-size : 0.75em ; transition : all 0.3s ; position : relative ; } .main .sideb table td::before { content : "" ; display : none ; width : 50% ; height : 2px ; position : absolute ; left : 50% ; top : 100% ; transform : translate ( -50%, -8px ) ; background-color : #f05855 ; } .main .sideb table td.currentDay::before { display : block ; } .main .sideb table td.selectable { color : #303633 ; cursor : pointer ; } .main .sideb table td.selectable:hover { background : #f05855 ; color : white ; } .main .sideb table td.between { background-color : #333 ; color : white ; } .main .sideb table td.active, .main .sideb table td.hover { background : #f05855 ; color : white ; }

function.js

The final step, Create a JS file named ‘function.js‘ and put the codes.

function.js /** code by webdevtrick ( https://webdevtrick.com ) **/ var month = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; var weekday = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]; var weekdayShort = [ "sun", "mon", "tue", "wed", "thu", "fri", "sat" ]; var monthDirection = 0; function getNextMonth() { monthDirection++; var current; var now = new Date(); if (now.getMonth() == 11) { current = new Date(now.getFullYear() + monthDirection, 0, 1); } else { current = new Date(now.getFullYear(), now.getMonth() + monthDirection, 1); } initCalender(getMonth(current)); } function getPrevMonth() { monthDirection--; var current; var now = new Date(); if (now.getMonth() == 11) { current = new Date(now.getFullYear() + monthDirection, 0, 1); } else { current = new Date(now.getFullYear(), now.getMonth() + monthDirection, 1); } initCalender(getMonth(current)); } Date.prototype.isSameDateAs = function (pDate) { return ( this.getFullYear() === pDate.getFullYear() && this.getMonth() === pDate.getMonth() && this.getDate() === pDate.getDate() ); }; function getMonth(currentDay) { var now = new Date(); var currentMonth = month[currentDay.getMonth()]; var monthArr = []; for (i = 1 - currentDay.getDate(); i < 31; i++) { var tomorrow = new Date(currentDay); tomorrow.setDate(currentDay.getDate() + i); if (currentMonth !== month[tomorrow.getMonth()]) { break; } else { monthArr.push({ date: { weekday: weekday[tomorrow.getDay()], weekday_short: weekdayShort[tomorrow.getDay()], day: tomorrow.getDate(), month: month[tomorrow.getMonth()], year: tomorrow.getFullYear(), current_day: now.isSameDateAs(tomorrow) ? true : false, date_info: tomorrow } }); } } return monthArr; } function clearCalender() { $("table tbody tr").each(function () { $(this).find("td").removeClass("active selectable currentDay between hover").html(""); }); $("td").each(function () { $(this).unbind('mouseenter').unbind('mouseleave'); }); $("td").each(function () { $(this).unbind('click'); }); clickCounter = 0; } function initCalender(monthData) { var row = 0; var classToAdd = ""; var currentDay = ""; var today = new Date(); clearCalender(); $.each(monthData, function (i, value) { var weekday = value.date.weekday_short; var day = value.date.day; var column = 0; var index = i + 1; $(".sideb .header .month").html(value.date.month); $(".sideb .header .year").html(value.date.year); if (value.date.current_day) { currentDay = "currentDay"; classToAdd = "selectable"; $(".right-wrapper .header span").html(value.date.weekday); $(".right-wrapper .day").html(value.date.day); $(".right-wrapper .month").html(value.date.month); } if (today.getTime() < value.date.date_info.getTime()) { classToAdd = "selectable"; } $("tr.weedays th").each(function () { var row = $(this); if (row.data("weekday") === weekday) { column = row.data("column"); return; } }); $($($($("tr.days").get(row)).find("td").get(column)).addClass(classToAdd + " " + currentDay).html(day)); currentDay = ""; if (column == 6) { row++; } }); $("td.selectable").click(function () { dateClickHandler($(this)); }); } initCalender(getMonth(new Date())); var clickCounter = 0; $(".fa-angle-double-right").click(function () { $(".right-wrapper").toggleClass("is-active"); $(this).toggleClass("is-active"); }); function dateClickHandler(elem) { var day1 = parseInt($(elem).html()); if (clickCounter === 0) { $("td.selectable").each(function () { $(this).removeClass("active between hover"); }); } clickCounter++; if (clickCounter === 2) { $("td.selectable").each(function () { $(this).unbind('mouseenter').unbind('mouseleave'); }); clickCounter = 0; return; } $(elem).toggleClass("active"); $("td.selectable").hover(function () { var day2 = parseInt($(this).html()); $(this).addClass("hover"); $("td.selectable").each(function () { $(this).removeClass("between"); }); if (day1 > day2 + 1) { $("td.selectable").each(function () { var dayBetween = parseInt($(this).html()); if (dayBetween > day2 && dayBetween < day1) { $(this).addClass("between"); } }); } else if (day1 < day2 + 1) { $("td.selectable").each(function () { var dayBetween = parseInt($(this).html()); if (dayBetween > day1 && dayBetween < day2) { $(this).addClass("between"); } }); } }, function () { $(this).removeClass("hover"); }); } $(".fa-angle-left").click(function () { getPrevMonth(); $(".main").addClass("is-rotated-left"); setTimeout(function () { $(".main").removeClass("is-rotated-left"); }, 195); }); $(".fa-angle-right").click(function () { getNextMonth(); $(".main").addClass("is-rotated-right"); setTimeout(function () { $(".main").removeClass("is-rotated-right"); }, 195); }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 /** code by webdevtrick ( https://webdevtrick.com ) **/ var month = [ "January" , "February" , "March" , "April" , "May" , "June" , "July" , "August" , "September" , "October" , "November" , "December" ] ; var weekday = [ "Sunday" , "Monday" , "Tuesday" , "Wednesday" , "Thursday" , "Friday" , "Saturday" ] ; var weekdayShort = [ "sun" , "mon" , "tue" , "wed" , "thu" , "fri" , "sat" ] ; var monthDirection = 0 ; function getNextMonth ( ) { monthDirection ++ ; var current ; var now = new Date ( ) ; if ( now . getMonth ( ) == 11 ) { current = new Date ( now . getFullYear ( ) + monthDirection , 0 , 1 ) ; } else { current = new Date ( now . getFullYear ( ) , now . getMonth ( ) + monthDirection , 1 ) ; } initCalender ( getMonth ( current ) ) ; } function getPrevMonth ( ) { monthDirection -- ; var current ; var now = new Date ( ) ; if ( now . getMonth ( ) == 11 ) { current = new Date ( now . getFullYear ( ) + monthDirection , 0 , 1 ) ; } else { current = new Date ( now . getFullYear ( ) , now . getMonth ( ) + monthDirection , 1 ) ; } initCalender ( getMonth ( current ) ) ; } Date . prototype . isSameDateAs = function ( pDate ) { return ( this . getFullYear ( ) === pDate . getFullYear ( ) && this . getMonth ( ) === pDate . getMonth ( ) && this . getDate ( ) === pDate . getDate ( ) ) ; } ; function getMonth ( currentDay ) { var now = new Date ( ) ; var currentMonth = month [ currentDay . getMonth ( ) ] ; var monthArr = [ ] ; for ( i = 1 - currentDay . getDate ( ) ; i < 31 ; i ++ ) { var tomorrow = new Date ( currentDay ) ; tomorrow . setDate ( currentDay . getDate ( ) + i ) ; if ( currentMonth !== month [ tomorrow . getMonth ( ) ] ) { break ; } else { monthArr . push ( { date : { weekday : weekday [ tomorrow . getDay ( ) ] , weekday_short : weekdayShort [ tomorrow . getDay ( ) ] , day : tomorrow . getDate ( ) , month : month [ tomorrow . getMonth ( ) ] , year : tomorrow . getFullYear ( ) , current_day : now . isSameDateAs ( tomorrow ) ? true : false , date_info : tomorrow } } ) ; } } return monthArr ; } function clearCalender ( ) { $ ( "table tbody tr" ) . each ( function ( ) { $ ( this ) . find ( "td" ) . removeClass ( "active selectable currentDay between hover" ) . html ( "" ) ; } ) ; $ ( "td" ) . each ( function ( ) { $ ( this ) . unbind ( 'mouseenter' ) . unbind ( 'mouseleave' ) ; } ) ; $ ( "td" ) . each ( function ( ) { $ ( this ) . unbind ( 'click' ) ; } ) ; clickCounter = 0 ; } function initCalender ( monthData ) { var row = 0 ; var classToAdd = "" ; var currentDay = "" ; var today = new Date ( ) ; clearCalender ( ) ; $ . each ( monthData , function ( i , value ) { var weekday = value . date . weekday_short ; var day = value . date . day ; var column = 0 ; var index = i + 1 ; $ ( ".sideb .header .month" ) . html ( value . date . month ) ; $ ( ".sideb .header .year" ) . html ( value . date . year ) ; if ( value . date . current_day ) { currentDay = "currentDay" ; classToAdd = "selectable" ; $ ( ".right-wrapper .header span" ) . html ( value . date . weekday ) ; $ ( ".right-wrapper .day" ) . html ( value . date . day ) ; $ ( ".right-wrapper .month" ) . html ( value . date . month ) ; } if ( today . getTime ( ) < value . date . date_info . getTime ( ) ) { classToAdd = "selectable" ; } $ ( "tr.weedays th" ) . each ( function ( ) { var row = $ ( this ) ; if ( row . data ( "weekday" ) === weekday ) { column = row . data ( "column" ) ; return ; } } ) ; $ ( $ ( $ ( $ ( "tr.days" ) . get ( row ) ) . find ( "td" ) . get ( column ) ) . addClass ( classToAdd + " " + currentDay ) . html ( day ) ) ; currentDay = "" ; if ( column == 6 ) { row ++ ; } } ) ; $ ( "td.selectable" ) . click ( function ( ) { dateClickHandler ( $ ( this ) ) ; } ) ; } initCalender ( getMonth ( new Date ( ) ) ) ; var clickCounter = 0 ; $ ( ".fa-angle-double-right" ) . click ( function ( ) { $ ( ".right-wrapper" ) . toggleClass ( "is-active" ) ; $ ( this ) . toggleClass ( "is-active" ) ; } ) ; function dateClickHandler ( elem ) { var day1 = parseInt ( $ ( elem ) . html ( ) ) ; if ( clickCounter === 0 ) { $ ( "td.selectable" ) . each ( function ( ) { $ ( this ) . removeClass ( "active between hover" ) ; } ) ; } clickCounter ++ ; if ( clickCounter === 2 ) { $ ( "td.selectable" ) . each ( function ( ) { $ ( this ) . unbind ( 'mouseenter' ) . unbind ( 'mouseleave' ) ; } ) ; clickCounter = 0 ; return ; } $ ( elem ) . toggleClass ( "active" ) ; $ ( "td.selectable" ) . hover ( function ( ) { var day2 = parseInt ( $ ( this ) . html ( ) ) ; $ ( this ) . addClass ( "hover" ) ; $ ( "td.selectable" ) . each ( function ( ) { $ ( this ) . removeClass ( "between" ) ; } ) ; if ( day1 > day2 + 1 ) { $ ( "td.selectable" ) . each ( function ( ) { var dayBetween = parseInt ( $ ( this ) . html ( ) ) ; if ( dayBetween > day2 && dayBetween < day1 ) { $ ( this ) . addClass ( "between" ) ; } } ) ; } else if ( day1 < day2 + 1 ) { $ ( "td.selectable" ) . each ( function ( ) { var dayBetween = parseInt ( $ ( this ) . html ( ) ) ; if ( dayBetween > day1 && dayBetween < day2 ) { $ ( this ) . addClass ( "between" ) ; } } ) ; } } , function ( ) { $ ( this ) . removeClass ( "hover" ) ; } ) ; } $ ( ".fa-angle-left" ) . click ( function ( ) { getPrevMonth ( ) ; $ ( ".main" ) . addClass ( "is-rotated-left" ) ; setTimeout ( function ( ) { $ ( ".main" ) . removeClass ( "is-rotated-left" ) ; } , 195 ) ; } ) ; $ ( ".fa-angle-right" ) . click ( function ( ) { getNextMonth ( ) ; $ ( ".main" ) . addClass ( "is-rotated-right" ) ; setTimeout ( function ( ) { $ ( ".main" ) . removeClass ( "is-rotated-right" ) ; } , 195 ) ; } ) ;

That’s It. Now you have successfully created an HTML CSS JavaScript Calendar Program or an Animated jQuery Calendar. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.