1.添加日历组件代码

首先找到自己项目中对应的Ext的目录,并将日历组件添加到calendar这个目录下,我的是KwDatePicker.js

日历组件代码如下:

Ext.define('Ext.calendar.KwDatePicker', {
    extend: "Ext.picker.Date",
    alias: "widget.kwdatepicker",
    width: 242,
    numWeeks: 6, //每屏要显示的周数

    renderTpl: [
        '<div id="{id}-innerEl" data-ref="innerEl">',
        '<div class="{baseCls}-header">',
        '<div id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-prev {baseCls}-arrow" role="button" title="{prevText}"></div>',
        '<div id="{id}-middleBtnEl" data-ref="middleBtnEl" class="{baseCls}-month" role="heading">{%this.renderMonthBtn(values, out)%}</div>',
        '<div id="{id}-nextEl" data-ref="nextEl" class="{baseCls}-next {baseCls}-arrow" role="button" title="{nextText}"></div>',
        '</div>',
        '<table role="grid" id="{id}-eventEl" data-ref="eventEl" class="{baseCls}-inner" {%',
        // If the DatePicker is focusable, make its eventEl tabbable.
        // Note that we're looking at the `focusable` property because
        // calling `isFocusable()` will always return false at that point
        // as the picker is not yet rendered.
        'if (values.$comp.focusable) {out.push("tabindex=\\\"0\\\"");}',
        '%} cellspacing="0">',
        '<thead><tr role="row">',
        '<th role="columnheader" class="x-datepicker-column-header" aria-label="{.}">',
        '<div role="presentation" class="x-datepicker-week">周</div>',
        '</th>',
        '<tpl for="dayNames">',
        '<th role="columnheader" class="{parent.baseCls}-column-header" aria-label="{.}">',
        '<div role="presentation" class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>',
        '</th>',
        '</tpl>',
        '</tr></thead>',
        '<tbody><tr role="row">',
        '<tpl for="days">',
        '{#:this.isEndOfWeek}',
        '{#:this.isBeginOfWeek}',
        '<td role="gridcell">',
        '<div hidefocus="on" class="{parent.baseCls}-date"></div>',
        '</td>',
        '</tpl>',
        '</tr></tbody>',
        '</table>',
        '<tpl if="showToday">',
        '<div id="{id}-footerEl" data-ref="footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>',
        '</tpl>',
        '</div>',
        {
            firstInitial: function (value) {
                return Ext.picker.Date.prototype.getDayInitial(value);
            },
            isEndOfWeek: function (value) {
                // convert from 1 based index to 0 based
                // by decrementing value once.
                value--;
                var end = value % 7 === 0 && value !== 0;
                return end ? '</tr><tr role="row">' : '';
            },
            isBeginOfWeek: function (value) {
                var end = (value === 1 || (value - 1) % 7 === 0);
                return end ? '<td role="weekcell"><div hidefocus="on" class="x-datepicker-week"></div></td>' : '';

            },
            renderTodayBtn: function (values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
            },
            renderMonthBtn: function (values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
            }
        }
    ],
    fullUpdate: function (date) {
        var me = this;
        me.callParent(arguments);

        var weekTextNodes = me.weekTextNodes;
        var firstDateOfMonth = Ext.Date.getFirstDateOfMonth(date); //获取当月第一天日期
        //var firstDayOfMonth = Ext.Date.getFirstDayOfMonth(date); //获取当月第一天星期 0-6
        //var firstWeekOfMonth = Ext.Date.getWeekOfYear(firstDateOfMonth); //当月第一天的周数

        for (j = 0; j < me.numWeeks; j++) {
            var weekNum = Ext.Date.getWeekOfYear(new Date(firstDateOfMonth.getTime() + j * 7 * 24 * 60 * 60 * 1000));
            weekTextNodes[j].innerHTML = weekNum.toString();
        }
    },
    onRender: function (container) {
        var me = this;
        me.callParent(arguments);

        me.cells = me.eventEl.select('tbody td[role="gridcell"]');
        me.textNodes = me.eventEl.query('tbody td[role="gridcell"] div');

        me.weekCells = me.eventEl.select('tbody td[role="weekcell"]');
        me.weekTextNodes = me.eventEl.query('tbody td[role="weekcell"] div');

        me.eventEl.set({'aria-labelledby': me.monthBtn.id});
        me.mon(me.eventEl, {
            scope: me,
            mousewheel: me.handleMouseWheel,
            click: {
                fn: me.handleDateClick,
                delegate: 'div.' + me.baseCls + '-date'
            }
        });
    }
});

Ext.define("KwDateField", {
    extend: "Ext.form.field.Date",
    alias: "widget.kwdatefield",

    createPicker: function () {
        var me = this,
            format = Ext.String.format;

        // Create floating Picker BoundList. It will acquire a floatParent by looking up
        // its ancestor hierarchy (Pickers use their pickerField property as an upward link)
        // for a floating component.
        return new KwDatePicker({
            pickerField: me,
            floating: true,
            focusable: false, // Key events are listened from the input field which is never blurred
            hidden: true,
            minDate: me.minValue,
            maxDate: me.maxValue,
            disabledDatesRE: me.disabledDatesRE,
            disabledDatesText: me.disabledDatesText,
            disabledDays: me.disabledDays,
            disabledDaysText: me.disabledDaysText,
            format: me.format,
            showToday: me.showToday,
            startDay: me.startDay,
            minText: format(me.minText, me.formatDate(me.minValue)),
            maxText: format(me.maxText, me.formatDate(me.maxValue)),
            listeners: {
                scope: me,
                select: me.onSelect
            },
            keyNavConfig: {
                esc: function () {
                    me.collapse();
                }
            }
        });
    }
});

2.引入日历组件,创建了补签和取消签到,以及翻页显示的事件

var calendar = Ext.create('Ext.calendar.KwDatePicker', {
									width: 500,
									height: 400,
									store: {
										fields: ['date'],
										data: dateString.map(function(date) {
											return { date: date}; //date是向后端发送请求返回给前端的数据
										})
									}
								});
								calendar.on({
									//当前月份
									afterrender: function() {
										// 页面加载后执行一次样式更新
										updateCellStyles();

										// 翻页: 获取日历组件的前一个月和后一个月按钮
										var prevBtn = calendar.prevEl;
										var nextBtn = calendar.nextEl;

										prevBtn.on('click', function() {
											updateCellStyles();
										});

										nextBtn.on('click', function() {
											updateCellStyles();
										});
									},
									//补签/取消签到
									select: function(calendar, date, cell, e) {
										var formattedDate = Ext.Date.format(date, 'Y-m-d');
										if (dateString.includes(formattedDate)) {
											// 用户已经签到，需要取消签到
											cancelSign(memberId, formattedDate);
										} else {
											// 用户未签到，需要补签
											makeUpSign(memberId, formattedDate);
										}
									}
								});
								var window = Ext.create('Ext.window.Window', {
									title: '签到日历',
									layout: 'fit',
									items: [calendar],
									width: 500,
									height: 400,
									modal: true,
									listeners: {
										close: function () {
											window.destroy();
										}
									}
								});
								window.show();
							//更新日期的显示
							function updateCellStyles() {
									Ext.Ajax.request({
										url: 'api/member/sign',
										method: 'POST',
										params: {
											memberId: memberId
										},
										success: function (response, opts) {
											var data=Ext.decode(response.responseText);
											var dateValue = data.list.map(item => new Date(item.createtime));
											var value = dateValue.map(date => Ext.Date.format(date, 'Y-m-d'));
											setTimeout(function() {
												var cells = calendar.eventEl.select('tbody td[role="gridcell"]');
												cells.each(function(cell) {
													var dateText = cell.down('.x-datepicker-date').dom.dateValue;
													var dateObj = new Date(dateText);
													var formattedDate = Ext.Date.format(dateObj, 'Y-m-d');
													var isIncluded = value.includes(formattedDate);
													if (isIncluded) {
														cell.down('.x-datepicker-date').dom.style.color = 'black';
													} else {
														cell.down('.x-datepicker-date').dom.style.color = '#cbcbcb';
													}
												});
											}, 1000);
										}
									});
								};