oa/public/static/assets/mbui/module/calendar.js

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 += '<li class="year-item active">'
					}
					else {
						s += '<li class="year-item">'
					}
					s += '<span class="year-check">' + (yearText - 10 + i) + '</span>'
					s += '<span >年</span>'
					s += '</li>'
				}
				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 += '<div class="calendar-body">';
			html += '<table class="calendar-table" cellspacing="0">'
			if (mode == "month") {
				html += me._createHeader();
			}
			html += me._createBody();
			html += '</table>'
			html += '</div>'
			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 += '<div class="calendar-header">'
			s += '<div class="calendar-select calendar-year-select" >'
			s += '<span class="calendar-year-text"> ' + year + '年</span >'
			s += '<ul id="dropdown-year" class="dropdown-year">'
			s += '</ul>'
			s += '</div> '

			if (mode == "month") {
				s += '<div class="calendar-select  calendar-month-select">'
				s += '<span class="calendar-month-text"> ' + month + '月</span >'
				//创建月份下拉
				s += '<ul class="dropdown-month">'
				for (var i = 1; i <= 12; i++) {
					s += '<li class="month-item">'
					s += '<span class="month-check">' + i + '</span>'
					s += '<span >月</span>'
					s += '</li>'
				}
				s += '</ul>'
				s += '</div > '
			}
			if (showModeBtn) {
				s += '<div class="calendar-select calendar-mode-select">'
				s += '<div class="btn-group">'
				if (mode == "month") {
					s += '<span  class="btn calendar-select-active">月</span>'
					s += '<span class="btn">年</span>'
				}
				else {
					s += '<span  class="btn">月</span>'
					s += '<span class="btn calendar-select-active">年</span>'
				}
				s += '</div>'
				s += '</div>'
			}
			s += '<i class="fa-angle-left calendar-pre"></i><i class="fa-angle-right calendar-next"></i>'
			s += '</div>'
			return s;
		},
		_createHeader: function () {
			var me = this, opts = me.options, weekMode = opts.weekMode;
			var s = '<thead><tr>'
			weekMode.forEach(function (item) {
				s += ' <th class="calendar-column-header" title="周' + item + '"><span class="calendar-column-header-inner">' + item + '</span></th>'
			})
			s += '</thead></tr>'
			return s;
		},
		_createBody: function () {
			var me = this;
			var s = ' <tbody class="calendar-tbody">'
			s += '</tbody>'
			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 += '<tr>'
				for (var l = 0; l < 3; l++) {
					renderMonth = i * 3 + l;
					if (month == renderMonth) {
						s += '<td title="' + year + '年' + (renderMonth + 1) + '月" class="calendar-cell calendar-thisMonth">';
					}
					else {
						s += '<td title="' + year + '年' + (renderMonth + 1) + '月" class="calendar-cell">';
					}
					s += '<div class="calendar-date">';
					s += '<div class="calendar-value">' + (renderMonth + 1) + '月';
					if (showEvent && viewData[renderMonth]) {
						if (viewData[renderMonth].length > 0) {
							s += '<div class="calendar-event"></div>';
						}
					}
					s += '</div>';
					s += '</div></td>';
				}
				s += '</tr>'
			}
			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 += '<tr>'
				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 += '<td title="' + year + '年' + month + '月' + date + '日" class="calendar-cell calendar-last-month-cell">';
					}
					else if (renderDate.getMonth() > newDate.getMonth()) {
						s += '<td title="' + year + '年' + month + '月' + date + '日" class="calendar-cell calendar-next-month-cell">';
					}
					else if (date == nowNum) {
						s += '<td title="' + year + '年' + month + '月' + date + '日" class="calendar-cell calendar-today">';
					}
					else {
						s += '<td title="' + year + '年' + month + '月' + date + '日" class="calendar-cell">';
					}
					s += '<div class="calendar-date">';
					s += '<div class="calendar-value">' + date;
					if (showEvent && viewData[date] && renderDate.getMonth() == newDate.getMonth()) {
						if (viewData[date].length > 0) {
							s += '<div class="calendar-event"></div>';
						}
					}
					s += '</div>';
					s += '</div></td>';
					renderDate.setDate(renderDate.getDate() + 1);
				}
				s += '</tr>'
			}
			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);
});