https://pustaka-sarawak.com/2k19/js/responsive-calendar.js

1// Generated by CoffeeScript 1.6.1
2
3/*!
4  # Responsive Celendar widget script
5  # by w3widgets
6  #
7  # Author: Lukasz Kokoszkiewicz
8  #
9  # Copyright © w3widgets 2013 All Rights Reserved
10*/
11
12
13(function() {
14
15  (function($) {
16    "use strict";
17    var Calendar, opts, spy;
18    Calendar = function(element, options) {
19      var time;
20      this.$element = element;
21      this.options = options;
22      this.weekDays = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
23      this.time = new Date();
24      this.currentYear = this.time.getFullYear();
25      this.currentMonth = this.time.getMonth();
26      if (this.options.time) {
27        time = this.splitDateString(this.options.time);
28        this.currentYear = time.year;
29        this.currentMonth = time.month;
30      }
31      this.initialDraw();
32      return null;
33    };
34    Calendar.prototype = {
35      addLeadingZero: function(num) {
36        if (num < 10) {
37          return "0" + num;
38        } else {
39          return "" + num;
40        }
41      },
42      applyTransition: function($el, transition) {
43        $el.css('transition', transition);
44        $el.css('-ms-transition', '-ms-' + transition);
45        $el.css('-moz-transition', '-moz-' + transition);
46        return $el.css('-webkit-transition', '-webkit-' + transition);
47      },
48      applyBackfaceVisibility: function($el) {
49        $el.css('backface-visibility', 'hidden');
50        $el.css('-ms-backface-visibility', 'hidden');
51        $el.css('-moz-backface-visibility', 'hidden');
52        return $el.css('-webkit-backface-visibility', 'hidden');
53      },
54      applyTransform: function($el, transform) {
55        $el.css('transform', transform);
56        $el.css('-ms-transform', transform);
57        $el.css('-moz-transform', transform);
58        return $el.css('-webkit-transform', transform);
59      },
60      splitDateString: function(dateString) {
61        var day, month, time, year;
62        time = dateString.split('-');
63        year = parseInt(time[0]);
64        month = parseInt(time[1] - 1);
65        day = parseInt(time[2]);
66        return time = {
67          year: year,
68          month: month,
69          day: day
70        };
71      },
72      initialDraw: function() {
73        return this.drawDays(this.currentYear, this.currentMonth);
74      },
75      editDays: function(events) {
76        var dateString, day, dayEvents, time, _results;
77        _results = [];
78        for (dateString in events) {
79          dayEvents = events[dateString];
80          this.options.events[dateString] = events[dateString];
81          time = this.splitDateString(dateString);
82          day = this.$element.find('[data-year="' + time.year + '"][data-month="' + (time.month + 1) + '"][data-day="' + time.day + '"]').parent('.day');
83          day.removeClass('active');
84          day.find('.badge').remove();
85          day.find('a').removeAttr('href');
86          if (this.currentMonth === time.month || this.options.activateNonCurrentMonths) {
87            _results.push(this.makeActive(day, dayEvents));
88          } else {
89            _results.push(void 0);
90          }
91        }
92        return _results;
93      },
94      clearDays: function(days) {
95        var dateString, day, time, _i, _len, _results;
96        _results = [];
97        for (_i = 0, _len = days.length; _i < _len; _i++) {
98          dateString = days[_i];
99          delete this.options.events[dateString];
100          time = this.splitDateString(dateString);
101          day = this.$element.find('[data-year="' + time.year + '"][data-month="' + (time.month + 1) + '"][data-day="' + time.day + '"]').parent('.day');
102          day.removeClass('active');
103          day.find('.badge').remove();
104          _results.push(day.find('a').removeAttr('href'));
105        }
106        return _results;
107      },
108      clearAll: function() {
109        var day, days, i, _i, _len, _results;
110        this.options.events = {};
111        days = this.$element.find('[data-group="days"] .day');
112        _results = [];
113        for (i = _i = 0, _len = days.length; _i < _len; i = ++_i) {
114          day = days[i];
115          $(day).removeClass('active');
116          $(day).find('.badge').remove();
117          _results.push($(day).find('a').removeAttr('href'));
118        }
119        return _results;
120      },
121      setMonthYear: function(dateString) {
122        var time;
123        time = this.splitDateString(dateString);
124        this.currentMonth = this.drawDays(time.year, time.month);
125        return this.currentYear = time.year;
126      },
127      prev: function() {
128        if (this.currentMonth - 1 < 0) {
129          this.currentYear = this.currentYear - 1;
130          this.currentMonth = 11;
131        } else {
132          this.currentMonth = this.currentMonth - 1;
133        }
134        this.drawDays(this.currentYear, this.currentMonth);
135        if (this.options.onMonthChange) {
136          this.options.onMonthChange.call(this);
137        }
138        return null;
139      },
140      next: function() {
141        if (this.currentMonth + 1 > 11) {
142          this.currentYear = this.currentYear + 1;
143          this.currentMonth = 0;
144        } else {
145          this.currentMonth = this.currentMonth + 1;
146        }
147        this.drawDays(this.currentYear, this.currentMonth);
148        if (this.options.onMonthChange) {
149          this.options.onMonthChange.call(this);
150        }
151        return null;
152      },
153      curr: function() {
154        this.currentYear = this.time.getFullYear();
155        this.currentMonth = this.time.getMonth();
156        this.drawDays(this.currentYear, this.currentMonth);
157        if (this.options.onMonthChange) {
158          this.options.onMonthChange.call(this);
159        }
160        return null;
161      },
162      addOthers: function(day, dayEvents) {
163        var badge;
164        if (typeof dayEvents === "object") {
165          if (dayEvents.number != null) {
166            badge = $("<span></span>").html(dayEvents.number).addClass("badge");
167            if (dayEvents.badgeClass != null) {
168              badge.addClass(dayEvents.badgeClass);
169            }
170            day.append(badge);
171          }
172          if (dayEvents.url) {
173            day.find("a").attr("href", dayEvents.url);
174          }
175        }
176        return day;
177      },
178      makeActive: function(day, dayEvents) {
179        var classes, eventClass, i, _i, _len;
180        if (dayEvents) {
181          if (dayEvents["class"]) {
182            classes = dayEvents["class"].split(" ");
183            for (i = _i = 0, _len = classes.length; _i < _len; i = ++_i) {
184              eventClass = classes[i];
185              day.addClass(eventClass);
186            }
187          } else {
188            day.addClass("active");
189          }
190          day = this.addOthers(day, dayEvents);
191        }
192        return day;
193      },
194      getDaysInMonth: function(year, month) {
195        return new Date(year, month + 1, 0).getDate();
196      },
197      drawDay: function(lastDayOfMonth, yearNum, monthNum, dayNum, i) {
198        var calcDate, dateNow, dateString, day, dayDate, pastFutureClass;
199        day = $("<div></div>").addClass("day");
200        dateNow = new Date();
201        dateNow.setHours(0, 0, 0, 0);
202        dayDate = new Date(yearNum, monthNum - 1, dayNum);
203        if (dayDate.getTime() < dateNow.getTime()) {
204          pastFutureClass = "past";
205        } else if (dayDate.getTime() === dateNow.getTime()) {
206          pastFutureClass = "today";
207        } else {
208          pastFutureClass = "future";
209        }
210        day.addClass(this.weekDays[i % 7]);
211        day.addClass(pastFutureClass);
212        dateString = yearNum + "-" + this.addLeadingZero(monthNum) + "-" + this.addLeadingZero(dayNum);
213        if (dayNum <= 0 || dayNum > lastDayOfMonth) {
214          calcDate = new Date(yearNum, monthNum - 1, dayNum);
215          dayNum = calcDate.getDate();
216          monthNum = calcDate.getMonth() + 1;
217          yearNum = calcDate.getFullYear();
218          day.addClass("not-current").addClass(pastFutureClass);
219          if (this.options.activateNonCurrentMonths) {
220            dateString = yearNum + "-" + this.addLeadingZero(monthNum) + "-" + this.addLeadingZero(dayNum);
221          }
222        }
223        day.append($("<a>" + dayNum + "</a>").attr("data-day", dayNum).attr("data-month", monthNum).attr("data-year", yearNum));
224        if (this.options.monthChangeAnimation) {
225          this.applyTransform(day, 'rotateY(180deg)');
226          this.applyBackfaceVisibility(day);
227        }
228        day = this.makeActive(day, this.options.events[dateString]);
229        return this.$element.find('[data-group="days"]').append(day);
230      },
231      drawDays: function(year, month) {
232        var currentMonth, day, dayBase, days, delay, draw, firstDayOfMonth, i, lastDayOfMonth, loopBase, monthNum, multiplier, thisRef, time, timeout, yearNum, _i, _len;
233        thisRef = this;
234        time = new Date(year, month);
235        currentMonth = time.getMonth();
236        monthNum = time.getMonth() + 1;
237        yearNum = time.getFullYear();
238        time.setDate(1);
239        firstDayOfMonth = this.options.startFromSunday ? time.getDay() + 1 : time.getDay() || 7;
240        lastDayOfMonth = this.getDaysInMonth(year, month);
241        timeout = 0;
242        if (this.options.monthChangeAnimation) {
243          days = this.$element.find('[data-group="days"] .day');
244          for (i = _i = 0, _len = days.length; _i < _len; i = ++_i) {
245            day = days[i];

246            delay = i * 0.01;
247            this.applyTransition($(day), 'transform .5s ease ' + delay + 's');
248            this.applyTransform($(day), 'rotateY(180deg)');
249            this.applyBackfaceVisibility($(day));
250            timeout = (delay + 0.1) * 1000;
251          }
252        }
253        dayBase = 2;
254        if (this.options.allRows) {
255          loopBase = 42;
256        } else {
257          multiplier = Math.ceil((firstDayOfMonth - (dayBase - 1) + lastDayOfMonth) / 7);
258          loopBase = multiplier * 7;
259        }
260        this.$element.find("[data-head-year]").html(time.getFullYear());
261        this.$element.find("[data-head-month]").html(this.options.translateMonths[time.getMonth()]);
262        draw = function() {
263          var dayNum, setEvents;
264          thisRef.$element.find('[data-group="days"]').empty();
265          dayNum = dayBase - firstDayOfMonth;
266          i = thisRef.options.startFromSunday ? 0 : 1;
267          while (dayNum < loopBase - firstDayOfMonth + dayBase) {
268            thisRef.drawDay(lastDayOfMonth, yearNum, monthNum, dayNum, i);
269            dayNum = dayNum + 1;
270            i = i + 1;
271          }
272          setEvents = function() {
273            var _j, _len1;
274            days = thisRef.$element.find('[data-group="days"] .day');
275            for (i = _j = 0, _len1 = days.length; _j < _len1; i = ++_j) {
276              day = days[i];
277              thisRef.applyTransition($(day), 'transform .5s ease ' + (i * 0.01) + 's');
278              thisRef.applyTransform($(day), 'rotateY(0deg)');
279            }
280            if (thisRef.options.onDayClick) {
281              thisRef.$element.find('[data-group="days"] .day a').click(function() {
282                return thisRef.options.onDayClick.call(this, thisRef.options.events);
283              });
284            }
285            if (thisRef.options.onDayHover) {
286              thisRef.$element.find('[data-group="days"] .day a').hover(function() {
287                return thisRef.options.onDayHover.call(this, thisRef.options.events);
288              });
289            }
290            if (thisRef.options.onActiveDayClick) {
291              thisRef.$element.find('[data-group="days"] .day.active a').click(function() {
292                return thisRef.options.onActiveDayClick.call(this, thisRef.options.events);
293              });
294            }
295            if (thisRef.options.onActiveDayHover) {
296              return thisRef.$element.find('[data-group="days"] .day.active a').hover(function() {
297                return thisRef.options.onActiveDayHover.call(this, thisRef.options.events);
298              });
299            }
300          };
301          return setTimeout(setEvents, 0);
302        };
303        setTimeout(draw, timeout);
304        return currentMonth;
305      }
306    };
307    $.fn.responsiveCalendar = function(option, params) {
308      var init, options, publicFunc;
309      options = $.extend({}, $.fn.responsiveCalendar.defaults, typeof option === 'object' && option);
310      publicFunc = {
311        next: 'next',
312        prev: 'prev',
313        edit: 'editDays',
314        clear: 'clearDays',
315        clearAll: 'clearAll',
316        getYearMonth: 'getYearMonth',
317        jump: 'jump',
318        curr: 'curr'
319      };
320      init = function($this) {
321        var data;
322        options = $.metadata ? $.extend({}, options, $this.metadata()) : options;
323        $this.data('calendar', (data = new Calendar($this, options)));
324        if (options.onInit) {
325          options.onInit.call(data);
326        }
327        return $this.find("[data-go]").click(function() {
328          if ($(this).data("go") === "prev") {
329            data.prev();
330          }
331          if ($(this).data("go") === "next") {
332            return data.next();
333          }
334        });
335      };
336      return this.each(function() {
337        var $this, data;
338        $this = $(this);
339        data = $this.data('calendar');
340        if (!data) {
341          init($this);
342        } else if (typeof option === 'string') {
343          if (publicFunc[option] != null) {
344            data[publicFunc[option]](params);
345          } else {
346            data.setMonthYear(option);
347          }
348        } else if (typeof option === 'number') {
349          data.jump(Math.abs(option) + 1);
350        }
351        return null;
352      });
353    };
354    $.fn.responsiveCalendar.defaults = {
355      translateMonths: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "

355November", "December"],
356      events: {},
357      time: void 0,
358      allRows: true,
359      startFromSunday: false,
360      activateNonCurrentMonths: false,
361      monthChangeAnimation: true,
362      onInit: void 0,
363      onDayClick: void 0,
364      onDayHover: void 0,
365      onActiveDayClick: void 0,
366      onActiveDayHover: void 0,
367      onMonthChange: void 0
368    };
369    spy = $('[data-spy="responsive-calendar"]');
370    if (spy.length) {
371      opts = {};
372      if ((spy.data('translate-months')) != null) {
373        opts.translateMonths = spy.data('translate-months').split(',');
374      }
375      if ((spy.data('time')) != null) {
376        opts.time = spy.data('time');
377      }
378      if ((spy.data('all-rows')) != null) {
379        opts.allRows = spy.data('all-rows');
380      }
381      if ((spy.data('start-from-sunday')) != null) {
382        opts.startFromSunday = spy.data('start-from-sunday');
383      }
384      if ((spy.data('activate-non-current-months')) != null) {
385        opts.activateNonCurrentMonths = spy.data('activate-non-current-months');
386      }
387      if ((spy.data('month-change-animation')) != null) {
388        opts.monthChangeAnimation = spy.data('month-change-animation');
389      }
390      return spy.responsiveCalendar(opts);
391    }
392  })(jQuery);
393
394}).call(this);