.

root/res/zui/lib/calendar/zui.calendar.js

@@ -0,0 +1,705 @@
+/*!
+ * ZUI: 日历 - v1.8.1 - 2018-01-18
+ * http://zui.sexy
+ * GitHub: https://github.com/easysoft/zui.git 
+ * Copyright (c) 2018 cnezsoft.com; Licensed MIT
+ */
+
+/* ========================================================================
+ * ZUI: calendar.js
+ * http://zui.sexy
+ * ========================================================================
+ * Copyright (c) 2014 cnezsoft.com; Licensed MIT
+ * ======================================================================== */
+
+(function($, window) {
+    'use strict';
+    var NAME = 'zui.calendar';
+    var NUMBER_TYPE_NAME = 'number';
+    var STRING_TYPE_NAME = 'string';
+    var UNDEFINED_TYPE_NAME = 'undefined';
+    var presetColors = {
+        "primary": 1,
+        "green": 2,
+        "red": 3,
+        "blue": 4,
+        "yellow": 5,
+        "brown": 6,
+        "purple": 7
+    };
+
+    var getNearbyLastWeekDay = function(date, lastWeek) {
+            lastWeek = lastWeek || 1;
+
+            var d = date.clone();
+            while(d.getDay() != lastWeek) {
+                d.addDays(-1);
+            }
+            d.clearTime();
+            return d;
+        },
+
+        getFirstDayOfMonth = function(date) {
+            var d = date.clone();
+            d.setDate(1);
+            return d;
+        },
+
+        calculateDays = function(start, end) {
+            var s = start.clone().clearTime();
+            var e = end.clone().clearTime();
+            return Math.round((e.getTime() - s.getTime()) / Date.ONEDAY_TICKS) + 1;
+        },
+
+        everyDayTo = function(start, end, callback) {
+            var a = start.clone();
+            var i = 0;
+            while(a <= end) {
+                callback(a.clone(), i++);
+                a.addDays(1);
+            }
+        };
+
+    var Calendar = function(element, options) {
+        this.name = NAME;
+        this.$ = $(element);
+        this.id = this.$.attr('id') || (NAME + $.zui.uuid());
+        this.$.attr('id', this.id);
+        this.storeName = NAME + '.' + this.id;
+
+        this.getOptions(options);
+        this.getLang();
+
+        this.data = this.options.data;
+        this.addCalendars(this.data.calendars);
+        this.addEvents(this.data.events);
+        this.sortEvents();
+
+        this.storeData = $.zui.store.pageGet(this.storeName, {
+            date: 'today',
+            view: 'month'
+        });
+
+        this.date = this.options.startDate || 'today';
+        this.view = this.options.startView || 'month';
+
+        this.$.toggleClass('limit-event-title', options.limitEventTitle);
+
+        if(this.options.withHeader) {
+            var $header = this.$.children('.calender-header');
+            if(!$header.length) {
+                $header = $('<header><div class="btn-toolbar"><div class="btn-group"><button type="button" class="btn btn-today">{today}</button></div><div class="btn-group"><button type="button" class="btn btn-prev"><i class="icon-chevron-left"></i></button><button type="button" class="btn btn-next"><i class="icon-chevron-right"></i></button></div><div class="btn-group"><span class="calendar-caption"></span></div></div></header>'.format(this.lang));
+                this.$.append($header);
+            }
+            this.$caption = $header.find('.calendar-caption');
+            this.$todayBtn = $header.find('.btn-today');
+            this.$header = $header;
+        }
+
+        var $views = this.$.children('.calendar-views');
+        if(!$views.length) {
+            $views = $('<div class="calendar-views"></div>');
+            this.$.append($views);
+        }
+        this.$views = $views;
+        this.$monthView = $views.children('.calendar-view.month');
+
+        this.display();
+
+        this.bindEvents();
+    };
+
+    // default options
+    Calendar.DEFAULTS = {
+        langs: {
+            zh_cn: {
+                weekNames: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+                today: '今天',
+                year: '{0}年',
+                month: '{0}月',
+                yearMonth: '{0}年{1}月'
+            },
+            zh_tw: {
+                weekNames: ['週一', '週二', '週三', '週四', '週五', '週六', '週日'],
+                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+                today: '今天',
+                year: '{0}年',
+                month: '{0}月',
+                yearMonth: '{0}年{1}月'
+            },
+            en: {
+                weekNames: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+                today: 'Today',
+                year: '{0}',
+                month: '{0}',
+                yearMonth: '{2}, {0}'
+            }
+        },
+        data: {
+            calendars: {
+                defaultCal: {
+                    color: '#229F24'
+                }
+            },
+            events: []
+        },
+        // startView: "month",  // default view when load complete
+        // startDate: 'today',  // default date when load complete
+        limitEventTitle: true,
+        storage: true,
+        withHeader: true,
+        dragThenDrop: true, // drag an event and drop at another day,
+        // hideEmptyWeekends: false // Auto hide empty weekends
+    };
+
+    // Sort events by start datetime
+    Calendar.prototype.sortEvents = function() {
+        var events = this.events;
+        if(!$.isArray(events)) {
+            events = [];
+        }
+
+        events.sort(function(a, b) {
+            return a.start < b.start ? 1 : (a.start > b.start ? (-1) : 0);
+        });
+
+        this.events = events;
+    };
+
+    Calendar.prototype.bindEvents = function() {
+        var $e = this.$,
+            self = this;
+
+        $e.on('click', '.btn-today', function() {
+            self.date = new Date();
+            self.display();
+            self.callEvent('clickTodayBtn');
+        }).on('click', '.btn-next', function() {
+            if(self.view === 'month') {
+                self.date.addMonths(1);
+            }
+            self.display();
+            self.callEvent('clickNextBtn');
+        }).on('click', '.btn-prev', function() {
+            if(self.view === 'month') {
+                self.date.addMonths(-1);
+            }
+            self.display();
+            self.callEvent('clickPrevBtn');
+        }).on('click', '.event', function(event) {
+            self.callEvent('clickEvent', {
+                element: this,
+                event: $(this).data('event'),
+                events: self.events
+            });
+            event.stopPropagation();
+        }).on('click', '.cell-day', function() {
+            self.callEvent('clickCell', {
+                element: this,
+                view: self.view,
+                date: new Date($(this).children('.day').attr('data-date')),
+                events: self.events
+            });
+        });
+    };
+
+    Calendar.prototype.addCalendars = function(calendars, silence) {
+        var that = this;
+        if(!that.calendars) that.calendars = {};
+
+        if($.isPlainObject(calendars)) {
+            calendars = [calendars];
+        }
+        $.each(calendars, function(index, cal) {
+            if(!silence && !that.callEvent('beforeAddCalendars', {
+                    newCalendar: cal,
+                    data: that.data
+                })) {
+                return;
+            }
+
+            if(!cal.color) cal.color = 'primary';
+            if(!presetColors[cal.color.toLowerCase()]) {
+                var c = new $.zui.Color(cal.color);
+                cal.textColor = c.contrast().hexStr();
+            } else {
+                cal.presetColor = true;
+            }
+            that.calendars[cal.name] = cal;
+        });
+
+        if(!silence) {
+            that.display();
+            that.callEvent('addCalendars', {
+                newCalendars: calendars,
+                data: that.data
+            });
+        }
+    };
+
+    Calendar.prototype.addEvents = function(events, silence) {
+        var that = this;
+        if(!that.events) that.events = [];
+
+        if($.isPlainObject(events)) {
+            events = [events];
+        }
+        $.each(events, function(index, e) {
+            if(!silence && !that.callEvent('beforeAddEvent', {
+                    newEvent: e,
+                    data: that.data
+                })) {
+                return;
+            }
+
+            var startType = typeof e.start;
+            var endType = typeof e.end;
+            if(startType === NUMBER_TYPE_NAME || startType === STRING_TYPE_NAME) {
+                e.start = new Date(e.start);
+            }
+            if(endType === NUMBER_TYPE_NAME || endType === STRING_TYPE_NAME) {
+                e.end = new Date(e.end);
+            }
+            if(typeof e.id === UNDEFINED_TYPE_NAME) {
+                e.id = $.zui.uuid();
+            }
+
+            if(e.allDay) {
+                e.start.clearTime();
+                e.end.clearTime().addDays(1).addMilliseconds(-1);
+            }
+
+            e.days = calculateDays(e.start, e.end);
+
+            that.events.push(e);
+        });
+
+        if(!silence) {
+            that.sortEvents();
+            that.display();
+            that.callEvent('addEvents', {
+                newEvents: events,
+                data: that.data
+            });
+        }
+    };
+
+    Calendar.prototype.getEvent = function(id) {
+        var events = this.events;
+        for(var i = 0; i < events.length; i++) {
+            if(events[i].id == id) {
+                return events[i];
+            }
+        }
+        return null;
+    };
+
+    Calendar.prototype.updateEvents = function(events) {
+        var eventsParams = {
+                data: this.data,
+                changes: []
+            },
+            that = this;
+
+        if($.isPlainObject(events)) {
+            events = [events];
+        }
+        var event, chgs, eventParam;
+        $.each(events, function(index, changes) {
+            event = changes.event;
+            chgs = changes.changes;
+            eventParam = {
+                event: event,
+                changes: []
+            };
+            if(typeof event === STRING_TYPE_NAME) {
+                event = that.getEvent(event);
+            }
+            if(event) {
+                if($.isPlainObject(chgs)) {
+                    chgs = [chgs];
+                }
+                $.each(changes, function(idx, chge) {
+                    if(that.callEvent('beforeChange', {
+                            event: event,
+                            change: chge.change,
+                            to: chge.to,
+                            from: event[chge.change]
+                        })) {
+                        eventParam.changes.push($.extend(true, {}, chge, {
+                            from: event[chge.change]
+                        }));
+                        event[chge.change] = chge.to;
+                    }
+                });
+            }
+            eventsParams.changes.push(eventParam);
+        });
+
+        that.sortEvents();
+        that.display();
+        that.callEvent('change', eventsParams);
+    };
+
+    Calendar.prototype.removeEvents = function(events) {
+        if(!$.isArray(events)) {
+            events = [events];
+        }
+        var id, event, idx, evts = this.events,
+            that = this,
+            removedEvents = [];
+        $.each(events, function(index, value) {
+            id = $.isPlainObject(value) ? value.id : value;
+            idx = -1;
+            for(var i = 0; i < evts.length; i++) {
+                if(evts[i].id == id) {
+                    idx = i;
+                    event = evts[i];
+                    break;
+                }
+            }
+
+            if(idx >= 0 && that.callEvent('beforeRemoveEvent', {
+                    event: event,
+                    eventId: id,
+                    data: that.data
+                })) {
+                evts.splice(idx, 1);
+                removedEvents.push(event);
+            }
+        });
+
+        that.sortEvents();
+        that.display();
+        that.callEvent('removeEvents', {
+            removedEvents: removedEvents,
+            data: that.data
+        });
+    };
+
+    Calendar.prototype.getOptions = function(options) {
+        this.options = $.extend({}, Calendar.DEFAULTS, this.$.data(), options);
+    };
+
+    Calendar.prototype.getLang = function() {
+        this.lang = this.options.langs[this.options.lang || ($.zui && $.zui.clientLang ? $.zui.clientLang() : 'zh-cn')];
+    };
+
+    Calendar.prototype.display = function(view, date) {
+        var that = this;
+        var viewType = typeof view;
+        var dateType = typeof date;
+
+        if(viewType === UNDEFINED_TYPE_NAME) {
+            view = that.view;
+        } else {
+            that.view = view;
+        }
+
+        if(dateType === UNDEFINED_TYPE_NAME) {
+            date = that.date;
+        } else {
+            that.date = date;
+        }
+
+        if(date === 'today') {
+            date = new Date();
+            that.date = date;
+        }
+
+        if(typeof date === STRING_TYPE_NAME) {
+            date = new Date(date);
+            that.date = date;
+        }
+
+        if(that.options.storage) {
+            $.zui.store.pageSet(that.storeName, {
+                date: date,
+                view: view
+            });
+        }
+
+        var eventPramas = {
+            view: view,
+            date: date
+        };
+        if(that.callEvent('beforeDisplay', eventPramas)) {
+            switch(view) {
+                case 'month':
+                    that.displayMonth(date);
+                    break;
+            }
+
+            that.callEvent('display', eventPramas);
+        }
+    };
+
+    Calendar.prototype.displayMonth = function(date) {
+        var that = this;
+        date = date || that.date;
+        var options = that.options,
+            lang = that.lang,
+            i,
+            $views = that.$views,
+            $e = that.$;
+
+        var $view = that.$monthView;
+        if(!$view.length) {
+            $view = $('<div class="calendar-view month"><table class="table table-bordered"><thead><tr class="week-head"></tr></thead><tbody class="month-days"></tbody></table></div>');
+
+            var $weekHead = $view.find('.week-head'),
+                $monthDays = $view.find('.month-days'),
+                $tr;
+
+            for(i = 0; i < 7; i++) {
+                $('<th>' + lang.weekNames[i] + '</th>').toggleClass('weekend-head', i >= 5).appendTo($weekHead);
+            }
+
+            for(i = 0; i < 6; i++) {
+                $tr = $('<tr class="week-days"></tr>');
+                for(var j = 0; j < 7; j++) {
+                    $('<td class="cell-day"><div class="day"><div class="heading"><span class="month"></span> <span class="number"></span></div><div class="content"><div class="events"></div></div></div></td>').toggleClass('weekend-day', j >= 5).appendTo($tr);
+                }
+                $monthDays.append($tr);
+            }
+
+            $views.append($view);
+            that.$monthView = $view;
+        }
+
+        var $weeks = $view.find('.week-days'),
+            $days = $view.find('.day'),
+            firstDayOfMonth = getFirstDayOfMonth(date),
+            // lastDayOfMonth = getLastDayOfMonth(date),
+            $week,
+            $day,
+            $cell,
+            year,
+            day,
+            month,
+            today = new Date();
+        var firstDay = getNearbyLastWeekDay(firstDayOfMonth),
+            thisYear = date.getFullYear(),
+            thisMonth = date.getMonth(),
+            todayMonth = today.getMonth(),
+            todayYear = today.getFullYear(),
+            todayDate = today.getDate();
+        var lastDay = firstDay.clone().addDays(6 * 7).addMilliseconds(-1),
+            printDate = firstDay.clone().addDays(1).addMilliseconds(-1);
+        var events = that.getEvents(firstDay, lastDay),
+            calendars = that.calendars,
+            printDateId, isFirstDayOfWeek, $event, cal, $dayEvents;
+
+        var isEmptyWeekends = true;
+        $weeks.each(function(weekIdx) {
+            $week = $(this);
+            $week.find('.day').each(function(dayIndex) {
+                isFirstDayOfWeek = dayIndex === 0;
+                $day = $(this);
+                $cell = $day.closest('.cell-day');
+                year = printDate.getFullYear();
+                day = printDate.getDate();
+                month = printDate.getMonth();
+                printDateId = printDate.toDateString();
+                $day.attr('data-date', printDateId);
+                $day.find('.heading > .number').text(day);
+
+                $day.find('.heading > .month')
+                    .toggle((weekIdx === 0 && dayIndex === 0) || day === 1)
+                    .text(((month === 0 && day === 1) ? (lang.year.format(year) + ' ') : '') + lang.monthNames[month]);
+                $cell.toggleClass('current-month', month === thisMonth);
+                $cell.toggleClass('current', (day === todayDate && month === todayMonth && year === todayYear));
+                $cell.toggleClass('past', printDate < today);
+                $cell.toggleClass('future', printDate > today);
+                $dayEvents = $day.find('.events').empty();
+
+                var dayEvents = events[printDateId];
+                if(dayEvents) {
+                    var eventsMap = dayEvents.events,
+                        stripCount = 0,
+                        e;
+                    for(i = 0; i <= dayEvents.maxPos; ++i) {
+                        e = eventsMap[i];
+                        if(!e || (e.placeholder && !isFirstDayOfWeek)) {
+                            stripCount++;
+                            continue;
+                        }
+                        if (isEmptyWeekends && dayIndex >= 5) {
+                            isEmptyWeekends = false;
+                        }
+                        $event = $('<div data-id="' + e.id + '" class="event" title="' + e.desc + '"><span class="time">' + e.start.format('hh:mm') + '</span> <span class="title">' + e.title + '</span></div>');
+                        $event.find('.time').toggle(!e.allDay);
+                        $event.data('event', e);
+                        $event.attr('data-days', e.days);
+
+                        if(e.calendar) {
+                            cal = calendars[e.calendar];
+                            if(cal) {
+                                if(cal.presetColor) {
+                                    $event.addClass('color-' + cal.color);
+                                } else {
+                                    $event.css({
+                                        'background-color': cal.color,
+                                        color: cal.textColor
+                                    });
+                                }
+                            }
+                        }
+
+                        if(e.days) {
+                            if(!e.placeholder) {
+                                $event.css('width', Math.min(7 - dayIndex, e.days) + '00%');
+                            } else if(isFirstDayOfWeek) {
+                                $event.css('width', Math.min(7, e.days - e.holderPos) + '00%');
+                            }
+                        }
+
+                        if(stripCount > 0) {
+                            $event.css('margin-top', stripCount * 22);
+                            stripCount = 0;
+                        }
+
+                        $dayEvents.append($event);
+                    }
+                }
+
+                printDate.addDays(1);
+            });
+        });
+        if (options.hideEmptyWeekends) {
+            $view.toggleClass('weekends-empty', isEmptyWeekends);
+        }
+
+        if(options.withHeader) {
+            that.$caption.text(lang.yearMonth.format(thisYear, thisMonth + 1, lang.monthNames[thisMonth]));
+            that.$todayBtn.toggleClass('disabled', thisMonth === todayMonth && thisYear === todayYear);
+        }
+
+        if(options.dragThenDrop) {
+            if(!$.fn.droppable) {
+                return console.error('Calendar dragThenDrop option requires droppable.js');
+            }
+            if(!$view.data('zui.droppable')) {
+                $view.droppable($.extend({
+                    target: '.cell-day',
+                    selector: '.event',
+                    flex: true,
+                    start: function() {
+                        that.$.addClass('event-dragging');
+                    },
+                    drop: function(e) {
+                        var et = e.element.data('event'),
+                            newDate = e.target.children('.day').attr('data-date');
+                        if(!et || !newDate) return;
+                        var startDate = et.start.clone();
+                        if(startDate.toDateString() != newDate) {
+                            newDate = new Date(newDate);
+                            newDate.setHours(startDate.getHours());
+                            newDate.setMinutes(startDate.getMinutes());
+                            newDate.setSeconds(startDate.getSeconds());
+
+                            if(that.callEvent('beforeChange', {
+                                    event: et,
+                                    change: 'start',
+                                    to: newDate
+                                })) {
+                                var oldEnd = et.end.clone();
+
+                                et.end.addMilliseconds(et.end.getTime() - startDate.getTime());
+                                et.start = newDate;
+
+                                that.display();
+
+                                that.callEvent('change', {
+                                    data: that.data,
+                                    changes: [{
+                                        event: et,
+                                        changes: [{
+                                            change: 'start',
+                                            from: startDate,
+                                            to: et.start
+                                        }, {
+                                            change: 'end',
+                                            from: oldEnd,
+                                            to: et.end
+                                        }]
+                                    }]
+                                });
+                            }
+                        }
+                    },
+                    finish: function() {
+                        that.$.removeClass('event-dragging');
+                    }
+                }, ($.isPlainObject(options.dragThenDrop)) ? options.dragThenDrop : null));
+            }
+        }
+    };
+
+    Calendar.prototype.getEvents = function(start, end) {
+        var events = {};
+        var calendars = this.calendars;
+        var addEventToDay = function(day, event, position) {
+            var dayId = day.toDateString();
+            var dayEvents = events[dayId];
+            if(!dayEvents) {
+                dayEvents = {
+                    maxPos: -1,
+                    events: {}
+                };
+            }
+
+            if(typeof position === 'undefined') {
+                for(var i = 0; i < 100; ++i) {
+                    if(!dayEvents.events[i]) {
+                        position = i;
+                        break;
+                    }
+                }
+            }
+
+            dayEvents.maxPos = Math.max(position, dayEvents.maxPos);
+            dayEvents.events[position] = event;
+            events[dayId] = dayEvents;
+            return position;
+        };
+        $.each(this.events, function(index, e) {
+            if(e.start >= start && e.start <= end) {
+                var position = addEventToDay(e.start, e);
+                if(e.days > 1) {
+                    var placeholder = $.extend({
+                        placeholder: true
+                    }, e);
+                    everyDayTo(e.start.clone().addDays(1), e.end, function(thisDay, i) {
+                        addEventToDay(thisDay.clone(), $.extend({
+                            holderPos: i
+                        }, placeholder), position);
+                    });
+                }
+            }
+        });
+        return events;
+    };
+
+    Calendar.prototype.callEvent = function(name, params) {
+        var result = this.$.callEvent(name + '.' + NAME, params, this);
+        return !(result.result !== undefined && (!result.result));
+    };
+
+    $.fn.calendar = function(option) {
+        return this.each(function() {
+            var $this = $(this);
+            var data = $this.data(NAME);
+            var options = typeof option == 'object' && option;
+
+            if(!data) $this.data(NAME, (data = new Calendar(this, options)));
+
+            if(typeof option == STRING_TYPE_NAME) data[option]();
+        });
+    };
+
+    $.fn.calendar.Constructor = Calendar;
+}(jQuery, window));
+