mbui.define(['tool'], function (exports) { let tool = mbui.tool; var settings = { mode: "month", weekMode: ["一", "二", "三", "四", "五", "六", "日"], newDate: new Date(), width: null, height: null, shwoLunar: false, showModeBtn: true, showEvent: true, success: function (today) { console.log(today); }, mark: function (start_date, end_date) { console.log(start_date); console.log(end_date); } }; var Calendar = { init: function () { var me = this, el = me.el, opts = me.options; el.addClass("calendar"); opts.width = el.width(); opts.height = el.height(); typeof (opts.newDate) == "string" ? opts.newDate = me._getDateByString(opts.newDate) : ""; me._createCalendar(); //绑定事件 //changeMode el.on("click", ".calendar-mode-select .btn", function (e) { e.stopPropagation(); var modeText = $(this).text(); var mode = modeText == "月" ? "month" : "year"; me.changeMode(mode); }) //calendar-cell日期点击事件 el.on("click", ".calendar-cell", function (e) { e.stopPropagation(); $(".dropdown-month").removeClass("open"); $(".dropdown-year").removeClass("open"); var cellDate = $(this).attr("title"); var viewData = me.viewData; var year = parseInt(cellDate.split("年")[0]); var month = parseInt(cellDate.split("年")[1].split("月")[0]) - 1; var date = parseInt(cellDate.split("年")[1].split("月")[1].split("日")[0]); if (opts.mode == "year") { if (opts.cellClick) opts.cellClick(year + '-' + (month + 1)) } else if (opts.mode == "month" && month == opts.newDate.getMonth()) { if (me.options.cellClick) me.options.cellClick(year + '-' + (month + 1) + '-' + date); } }) //年份下拉 el.on("click", ".calendar-year-select", function (e) { e.stopPropagation(); $(".dropdown-month").removeClass("open"); $(".dropdown-year").toggleClass("open"); //创建下拉数据 var yearText = opts.newDate.getFullYear(); var s = ''; for (var i = 0; i < 21; i++) { if (i == 10) { s += '
  • ' } else { s += '
  • ' } s += '' + (yearText - 10 + i) + '' s += '' s += '
  • ' } me.el.find(".dropdown-year").html(s); }) //上一月 el.on("click", ".calendar-pre", function (e) { e.stopPropagation(); var year = opts.newDate.getFullYear(), month = opts.newDate.getMonth() + 1; month--; if (month < 1) { year = year - 1; month = 12; } opts.newDate.setFullYear(year); var beforeDate = opts.newDate.getDate(); opts.newDate.setMonth(month - 1); var afterDate = opts.newDate.getDate(); //处理日期30号,切换到2月不存在30号 if (beforeDate != afterDate) { opts.newDate.setDate(opts.newDate.getDate() - 1); } opts.mode == "month" ? me._refreshCalendar(opts.newDate) : me._refreshYearCalendar(opts.newDate); $(".calendar-month-text").text(month + "月"); $(".calendar-year-text").text(year + "年"); }) //下一月 el.on("click", ".calendar-next", function (e) { e.stopPropagation(); var year = opts.newDate.getFullYear(), month = opts.newDate.getMonth() + 1; month++; if (month > 12) { year = year + 1; month = 1; } opts.newDate.setFullYear(year); var beforeDate = opts.newDate.getDate(); opts.newDate.setMonth(month - 1); var afterDate = opts.newDate.getDate(); //处理日期30号,切换到2月不存在30号 if (beforeDate != afterDate) { opts.newDate.setDate(opts.newDate.getDate() - 1); } opts.mode == "month" ? me._refreshCalendar(opts.newDate) : me._refreshYearCalendar(opts.newDate); $(".calendar-month-text").text(month + "月"); $(".calendar-year-text").text(year + "年"); }) //年份改变 el.on("click", ".year-item", function (e) { e.stopPropagation(); $(".dropdown-year").removeClass("open"); var yearText = $(this).text(); var yearNum = yearText.split("年")[0]; if (yearNum == opts.newDate.getFullYear()) return; opts.newDate.setFullYear(yearNum); opts.mode == "month" ? me._refreshCalendar(opts.newDate) : me._refreshYearCalendar(opts.newDate); $(".calendar-year-text").text(yearText); }) //月份下拉 el.on("click", ".calendar-month-select", function (e) { e.stopPropagation(); $(".dropdown-year").removeClass("open"); $(".dropdown-month").toggleClass("open"); }) //月份改变 el.on("click", ".month-item", function (e) { e.stopPropagation(); $(".dropdown-month").removeClass("open"); var monthText = $(this).text(); var monthNum = monthText.split("月")[0]; if (monthNum == (opts.newDate.getMonth() + 1)) return; var beforeDate = opts.newDate.getDate(); opts.newDate.setMonth(monthNum - 1); var afterDate = opts.newDate.getDate(); //处理日期30号,切换到2月不存在30号 if (beforeDate != afterDate) { opts.newDate.setDate(opts.newDate.getDate() - 1); } me._refreshCalendar(opts.newDate); $(".calendar-month-text").text(monthText); }) $(document.body).on("click", function (e) { $(".dropdown-month").removeClass("open"); $(".dropdown-year").removeClass("open"); }) }, //公开方法 changeMode: function (mode) { var me = this; if (mode == me.options.mode) return; me.options.mode = mode; me._createCalendar(); }, getViewDate: function (viewDate) { var me = this, opts = me.options, mode = opts.mode, data = opts.data; if (!data || data.length == 0) return []; var viewData = {}, modeYear = viewDate.getFullYear(), modeMonth = null; if (mode == "month") { modeMonth = viewDate.getMonth() }; //筛选视图数据并转化未对象 要不要转化为属性 for (var i = 0; i < data.length; i++) { var item = data[i]; var start = me._getDateByString(item.startDate); var year = start.getFullYear(); var month = start.getMonth(); var date = start.getDate(); if (modeMonth && year == modeYear && modeMonth == month) { if (!viewData[date]) viewData[date] = []; viewData[date].push(item); } else if (!modeMonth && year == modeYear) { if (!viewData[month]) viewData[month] = []; viewData[month].push(item); } } return viewData; }, _getDateByString: function (stringDate) { var me = this; var year = stringDate.split("-")[0]; var month = parseInt(stringDate.split("-")[1]) - 1; var date = stringDate.split("-")[2]; return new Date(year, month, date); }, //私有方法 _createCalendar: function () { var me = this; var dateMode = me.options.mode; me._createView(); }, _createView: function () { var me = this, el = me.el, opts = me.options, mode = opts.mode, newDate = opts.newDate, html = ''; html += me._createToolbar(); html += '
    '; html += '' if (mode == "month") { html += me._createHeader(); } html += me._createBody(); html += '
    ' html += '
    ' el.html(html); if (mode == "month") { me._refreshCalendar(newDate); } else { me._refreshYearCalendar(newDate); } if (me.options.success) me.options.success(newDate); }, _createToolbar: function () { var me = this, newDare = me.options.newDate, mode = me.options.mode, showModeBtn = me.options.showModeBtn, s = ''; var year = newDare.getFullYear(); var month = newDare.getMonth() + 1; s += '
    ' s += '
    ' s += ' ' + year + '年' s += '' s += '
    ' if (mode == "month") { s += '
    ' s += ' ' + month + '月' //创建月份下拉 s += '' s += '
    ' } if (showModeBtn) { s += '
    ' s += '
    ' if (mode == "month") { s += '' s += '' } else { s += '' s += '' } s += '
    ' s += '
    ' } s += '' s += '
    ' return s; }, _createHeader: function () { var me = this, opts = me.options, weekMode = opts.weekMode; var s = '' weekMode.forEach(function (item) { s += ' ' + item + '' }) s += '' return s; }, _createBody: function () { var me = this; var s = ' ' s += '' return s; }, _refreshYearCalendar: function (newDate) { var me = this, showEvent = me.options.showEvent, s = ''; //每次都重新获取会不会影响性能 me.viewData = viewData = me.getViewDate(newDate); var year = newDate.getFullYear(), month = newDate.getMonth(); //四行三列 for (var i = 0; i < 4; i++) { s += '' for (var l = 0; l < 3; l++) { renderMonth = i * 3 + l; if (month == renderMonth) { s += ''; } else { s += ''; } s += '
    '; s += '
    ' + (renderMonth + 1) + '月'; if (showEvent && viewData[renderMonth]) { if (viewData[renderMonth].length > 0) { s += '
    '; } } s += '
    '; s += '
    '; } s += '' } me.el.find(".calendar-tbody").html(s); }, _refreshCalendar: function (newDate) { var me = this, showEvent = me.options.showEvent, s = ''; me.viewData = viewData = me.getViewDate(newDate); var _newDate = me._cloneDate(newDate); //当前date var nowNum = _newDate.getDate(); //第一天周几 _newDate.setDate(1); var weekDay = _newDate.getDay() == 0 ? 7 : _newDate.getDay(); //视图第一天 var viewDate = me._cloneDate(_newDate); viewDate.setDate(viewDate.getDate() - weekDay + 1); //当前第几周/行 (暂不处理) var spileDate = (newDate.getTime() - viewDate.getTime()) / (1000 * 60 * 60 * 24); renderDate = me._cloneDate(viewDate); var start_date, end_date; //固定六行 for (var i = 0; i < 6; i++) { s += '' for (var l = 0; l < 7; l++) { var year = renderDate.getFullYear(); var month = renderDate.getMonth() + 1; var date = renderDate.getDate(); if (i == 0 && l == 0) { start_date = year + '-' + month + '-' + date; } end_date = year + '-' + month + '-' + date; if (renderDate.getMonth() < newDate.getMonth()) { s += ''; } else if (renderDate.getMonth() > newDate.getMonth()) { s += ''; } else if (date == nowNum) { s += ''; } else { s += ''; } s += '
    '; s += '
    ' + date; if (showEvent && viewData[date] && renderDate.getMonth() == newDate.getMonth()) { if (viewData[date].length > 0) { s += '
    '; } } s += '
    '; s += '
    '; renderDate.setDate(renderDate.getDate() + 1); } s += '' } me.el.find(".calendar-tbody").html(s); if (me.options.mark) me.options.mark(start_date, end_date); }, _cloneDate: function (date) { return new Date(date.getFullYear(), date.getMonth(), date.getDate()); } } var calendar = function (element, options) { Calendar.el = $('#' + element); Calendar.options = $.extend(true, {}, settings, options); Calendar.init(); } // 输出接口 exports('calendar', calendar); });