https://kerala.gov.in/assets/webassets/calender/mini-event-calendar.js

1(function ($) {
2  var calenderTpl = `
3		<div id="calTitle">
4			<button type="button" class="month-mover prev">
5				<svg fill="#FFFFFF" height="30" viewBox="0 8 26 30" width="30" xmlns="http://www.w3.org/2000/svg">
6					<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
7				</svg>
8			</button>
9			<div id="monthYear"></div>
10			<button type="button" class="month-mover next">
11				<svg fill="#FFFFFF" height="30" viewBox="0 8 26 30" width="30" xmlns="http://www.w3.org/2000/svg">
12					<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
13				</svg>
14			</button>
15		</div>
16		<div>
17			<div id="calThead"></div>
18			<div id="calTbody"></div>
19		</div>
20		<div id="calTFooter">
21			<h3 id="eventTitle">No events today.</h3>
22			<a href="javascript:void(0);" id="calLink">ALL EVENTS</a>
23		</div>
24	`;
25  var weekDaysFromSunday =
26    "<div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>";
27  var weekDaysFromMonday =
28    "<div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div><div>S</div>";
29  var shortMonths = [
30    "Jan",
31    "Feb",
32    "Mar",
33    "Apr",
34    "May",
35    "Jun",
36    "Jul",
37    "Aug",
38    "Sep",
39    "Oct",
40    "Nov",
41    "Dec",
42  ];
43
44  $.fn.miniEventCalendar = $.fn.MEC = function (options) {
45    var settings = $.extend(
46      {
47        calendar_link: "",
48        events: [],
49        from_monday: false,
50        onMonthChanged: null,
51      },
52      options
53    );
54
55    var miniCalendar = this;
56
57    miniCalendar.addClass("mini-cal").html(calenderTpl);
58
59    var thead = miniCalendar.find("#calThead");
60    var tbody = miniCalendar.find("#calTbody");
61    var calTitle = miniCalendar.find("#monthYear");
62    var calFooter = miniCalendar.find("#calTFooter");
63    var eventTitle = miniCalendar.find("#eventTitle");
64    var eventsLink = miniCalendar.find("#calLink");
65
66    var today = new Date();
67    var curMonth = today.getMonth();
68    var curYear = today.getFullYear();
69
70    eventTitle.text("No events today.");
71    eventsLink.text("ALL EVENTS");
72    eventsLink.attr("href", settings.calendar_link);
73
74    if (settings.from_monday) thead.html(weekDaysFromMonday);
75    else thead.html(weekDaysFromSunday);
76
77    if (!settings.calendar_link.length && !settings.events.length)
78      calFooter.css("display", "none");
79
80    miniCalendar.find(".month-mover").each(function () {
81      var mover = $(this);
82      mover.bind("click", function (e) {
83        e.preventDefault();
84        if (mover.hasClass("next")) viewNextMonth();
85        else viewPrevMonth();
86      });
87    });
88
89    miniCalendar.on("click touchstart", ".a-date", function (e) {
90      e.preventDefault();
91      $(".a-date").removeClass("focused");
92      if (!$(this).hasClass("blurred")) {
93        showEvent($(this).data("event"));
94        $(this).focus();
95        $(this).addClass("focused");
96      }
97    });
98
99    function populateCalendar(month, year, onInit) {
100      tbody.html("");
101      calTitle.text(shortMonths[month] + " " + year);
102      eventTitle.text("Click day to see event");
103      eventsLink.text("All Events");
104      eventsLink.attr("href", "#");
105
106      curMonth = month;
107      curYear = year;
108
109      var ldate = new Date(year, month);
110      var dt = new Date(ldate);
111      var weekDay = dt.getDay();
112
113      if (settings.from_monday) weekDay = dt.getDay() > 0 ? dt.getDay() - 1 : 6;
114
115      if (ldate.getDate() === 1) tbody.append(lastDaysOfPrevMonth(weekDay));
116
117      while (ldate.getMonth() === month) {
118        dt = new Date(ldate);
119
120        var isToday = areSameDate(ldate, new Date());
121        var event = null;
122        var eventIndex = settings.events.findIndex(function (ev) {
123          return areSameDate(dt, new Date(ev.date));
124        });
125
126        if (eventIndex != -1) {
127          event = settings.events[eventIndex];
128
129          if (onInit && isToday) showEvent(event);
130        }
131
132        tbody.append(
133          dateTpl(false, ldate.getDate(), isToday, event, onInit && isToday)
134        );
135
136        ldate.setDate(ldate.getDate() + 1);
137
138        var bufferDays = 43 - miniCalendar.find(".a-date").length;
139
140        if (ldate.getMonth() != month) {
141          for (var i = 1; i < bufferDays; i++) {
142            tbody.append(dateTpl(true, i));
143          }
144        }
145      }
146
147      if (settings.onMonthChanged) {
148        settings.onMonthChanged(month, year);
149      }
150      marksaturdays(year, month, 14);
151      //marksaturdays(year, month, 28);
152      marksundays(year, month);
153    }
154
155    function lastDaysOfPrevMonth(day) {
156      if (curMonth > 0) {
157        var monthIdx = curMonth - 1;
158        var yearIdx = curYear;
159      } else {
160        if (curMonth < 11) {
161          var monthIdx = 0;
162          var yearIdx = curYear + 1;
163        } else {
164          var monthIdx = 11;
165          var yearIdx = curYear - 1;
166        }
167      }
168
169      var prevMonth = getMonthDays(monthIdx, yearIdx);
170      var lastDays = "";
171      for (var i = day; i > 0; i--)
172        lastDays += dateTpl(true, prevMonth[prevMonth.length - i]);
173
174      return lastDays;
175    }
176
177    function dateTpl(blurred, date, isToday, event, isSelected) {
178      var tpl = "<div class='a-date blurred'><span>" + date + "</span></div>";
179
180      if (!blurred) {
181        var hasEvent = event && event !== null;
182        var cls = isToday ? "current " : "";
183        cls += hasEvent && isSelected ? "focused " : "";
184        cls += hasEvent ? "event " : "";
185
186        hasEvent ? (Etype = event.type) : (Etype = "");
187        if (Etype == "Full holiday") Etype = "fullholiday";
188        if (Etype == "Gazetted holiday") Etype = "gazettedholiday";
189        if (Etype == "Restricted holiday") Etype = "restrictedholiday";
190
191        var tpl =
192          "<button type='button'class='a-date " +
193          cls +
194          " " +
195          Etype +
196          " for" +
197          date +
198          "thday'' data-event='" +
199          JSON.stringify(event) +
200          "'><span>" +
201          date +
202          "</span></button>";
203      }
204
205      return tpl;
206    }
207
208    function showEvent(event) {
209      if (event && event !== null && event !== undefined) {
210        eventTitle.text(event.title);
211        if (event.link != undefined) {
212          eventsLink.text("VIEW EVENT");
213          eventsLink.attr("href", event.link);
214        }
215      } else {
216        eventTitle.text("No events on this day.");
217        eventsLink.text("ALL EVENTS");
218        eventsLink.attr("href", settings.calendar_link);
219      }
220    }
221
222    function viewNextMonth() {
223      var nextMonth = curMonth < 11 ? curMonth + 1 : 0;
224      var nextYear = curMonth < 11 ? curYear : curYear + 1;
225
226      populateCalendar(nextMonth, nextYear);
227    }
228
229    function viewPrevMonth() {
230      var prevMonth = curMonth > 0 ? curMonth - 1 : 11;
231      var prevYear = curMonth > 0 ? curYear : curYear - 1;
232
233      populateCalendar(prevMonth, prevYear);
234    }
235
236    function areSameDate(d1, d2) {
237      return (
238        d1.getFullYear() == d2.getFullYear() &&
239        d1.getMonth() == d2.getMonth() &&
240        d1.getDate() == d2.getDate()
241      );
242    }
243
244    function getMonthDays(month, year) {
245      var date = new Date(year, month, 1);
246      var days = [];
247      while (date.getMonth() === month) {
248        days.push(date.getDate());
249        date.setDate(date.getDate() + 1);
250      }
251      return days;
252    }
253
254    populateCalendar(curMonth, curYear, true);
255
256    return miniCalendar;
257  };
258})(jQuery);
259
260function marksaturdays(year, month, num) {
261  var date = new Date(year, month, 1, 0, 0, 0, 0);
262  date.setDate(num - date.getDay());
263  var str = date.getDate();
264  jQuery(".for" + str.toString() + "thday").addClass("weekend");
265}
266
267function marksundays(year, month) {
268  var getTot = daysInMonth(month + 1, year);
269
270  var sat = new Array();
271  var sun = new Array();
272
273  for (var i = 1; i <= getTot; i++) {
274    var newDate = new Date(year, month, i);
275
276    if (newDate.getDay() == 0) {
277      jQuery(".for" + i + "thday").addClass("sunday");
278    }
279  }
280}
281
282function daysInMonth(month, year) {
283  return new Date(year, month, 0).getDate();
284}