文章目录
- 1.添加日历组件代码
- 2.引入日历组件,创建了补签和取消签到,以及翻页显示的事件
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);
}
});
};