Ext.js日历组件

最新推荐文章于 2022-05-09 10:54:10 发布
最新推荐文章于 2022-05-09 10:54:10 发布
阅读量628 收藏
点赞数 1
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40980455/article/details/119203036
版权
本文档详细介绍了如何利用Ext.js的GridPanel构建一个日历组件，包括生成特定年份的日历表格，点击日期修改属性并改变颜色以提供用户提示。数据结构设计用于存储每个日期的状态和点击信息，同时提供了生成和组织数据的函数。最后展示了GridPanel配置和cellRenderer函数，用于展示和处理单元格的样式和提示信息。
摘要由CSDN通过智能技术生成

记录下Ext.js的日历组件的需求
1.通过js生成某年份的日历表格
2.点击表格可以修改该日期的某属性且变色给予客户相应的提示信息。
分析：打算采用Ext.js原生的GridPanel作为表格UI，因此只需要构造对应的数据结构格式即可。最终效果如下：
在这里插入图片描述
构造这样的表格在该Grid中需要的表头定义为

  columns: [{
                header: 年月月,
                align: 'left',
                columns: [
                    {
                        text: '星期一', dataIndex: 'mon', align: 'center', width: "10%",
                        renderer: function (value, metaData, record, rowIndex, colIndex, store,view) {
                           return  me.cellRenderer(value, metaData, record, rowIndex, colIndex, store,view)
                        }
                    },
                    {
                        text: '星期二', dataIndex: 'tus', align: 'center', width: "10%",
                        renderer: function (value, metaData, record, rowIndex, colIndex, store,view) {
                            return me.cellRenderer(value, metaData, record, rowIndex, colIndex, store,view)
                        }
                    },
                    {
                        text: '星期三', dataIndex: 'wed', align: 'center', width: "10%",
                        renderer: function (value, metaData, record, rowIndex, colIndex, store,view) {
                            return me.cellRenderer(value, metaData, record, rowIndex, colIndex, store,view)
                        }
                    },
                    {
                        text: '星期四', dataIndex: 'thu', align: 'center', width: "10%",
                        renderer: function (value, metaData, record, rowIndex, colIndex, store,view) {
                            return  me.cellRenderer(value, metaData, record, rowIndex, colIndex, store,view)
                        }
                    },
                    {
                        text: '星期五', dataIndex: 'fri', align: 'center', width: "10%",
                        renderer: function (value, metaData, record, rowIndex, colIndex, store,view) {
                            return me.cellRenderer(value, metaData, record, rowIndex, colIndex, store,view)
                        }
                    },
                    {
                        text: '星期六', dataIndex: 'sat', align: 'center', width: "10%",
                        renderer: function (value, metaData, record, rowIndex, colIndex, store,view) {
                            return me.cellRenderer(value, metaData, record, rowIndex, colIndex, store,view)
                        }
                    },
                    {
                        text: '星期日', dataIndex: 'sun', align: 'center', width: "10%",
                        renderer: function (value, metaData, record, rowIndex, colIndex, store,view) {
                            return me.cellRenderer(value, metaData, record, rowIndex, colIndex, store,view)
                        }
                    }
                ],
            }],

与上列表头对应的数据格式即为

[
	{
		"mon": 1,
		"tus": 2,
		"wed": 3,
		"thu": 4,
		"fri": 5,
		"sat": 6,
		"sun": 7,
	},
	{
		"mon": 8,
		"tus": 9,
		"wed": 10,
		"thu": 11,
		"fri": 12,
		"sat": 13,
		"sun": 14,
	}
]

但是如果还需要给grid的每一个cell进行判断值改变状态进行渲染亮色的话该数据结构是不足以满足的，因此定义如下数据结构格式

val为dayOfMonth的值，key为formatDate格式，status记录是工作日和非工作日，isClick记录当前是否发生更改
[
	{
		"mon": {
			"val": 1,
			"key": "2029-01-01",
			"status": 1,
			"isClick": 0
		},
		"tus": {
			"val": 2,
			"key": "2029-01-02",
			"status": 1,
			"isClick": 0
		},
		"wed": {
			"val": 3,
			"key": "2029-01-03",
			"status": 1,
			"isClick": 0
		},
		"thu": {
			"val": 4,
			"key": "2029-01-04",
			"status": 1,
			"isClick": 0
		},
		"fri": {
			"val": 5,
			"key": "2029-01-05",
			"status": 1,
			"isClick": 0
		},
		"sat": {
			"val": 6,
			"key": "2029-01-06",
			"status": 0,
			"isClick": 0
		},
		"sun": {
			"val": 7,
			"key": "2029-01-07",
			"status": 0,
			"isClick": 0
		},
		"month": "2029-01"
	}
]

该数据生成函数如下所示：

generateDataArr: function (year) {
        if (typeof year == 'undefined') {
            return [];
        }
        var me = this;
        var dateArr = [];
        for (var i = 1; i <= 12; i++) {
            var minDate = Ext.Date.parseDate(year +
                "-" + XEQJS.common.Util.padLeft(i + "", 2, "0") +
                "-01", "Y-m-d");
            var maxDate = Ext.Date.add(Ext.Date.add(minDate, Ext.Date.MONTH, 1), Ext.Date.DAY, -1);
            var tempDate = minDate;
            var obj = {
                "mon": {},
                "tus": {},
                "wed": {},
                "thu": {},
                "fri": {},
                "sat": {},
                "sun": {},
                "month": Ext.Date.format(minDate, 'Y-m'),
            };
            for (var j = 1; j <= maxDate.getDate(); j++) {
                var el = {
                    "val": tempDate.getDate(),
                    "key": Ext.Date.format(tempDate, 'Y-m-d'),
                    "status": 0,
                    "isClick":0,//当前单元格是否点击进行修改，0未点击，1点击
                }
                switch (tempDate.getDay()) {
                    case 1:
                        el.status = 1;
                        Ext.apply(obj.mon, el);
                        break;
                    case 2:
                        el.status = 1;
                        Ext.apply(obj.tus, el);
                        break;
                    case 3:
                        el.status = 1;
                        Ext.apply(obj.wed, el);
                        break;
                    case 4:
                        el.status = 1;
                        Ext.apply(obj.thu, el);
                        break;
                    case 5:
                        el.status = 1;
                        Ext.apply(obj.fri, el);
                        break;
                    case 6:
                        Ext.apply(obj.sat, el);
                        break;
                    case 0:
                        Ext.apply(obj.sun, el);
                        break;
                }
                if (tempDate.getDay() == 0 || Ext.Date.format(tempDate, 'Y-m-d') == Ext.Date.format(maxDate, 'Y-m-d')) {
                    dateArr.push(obj);
                    obj = {
                        "mon": {},
                        "tus": {},
                        "wed": {},
                        "thu": {},
                        "fri": {},
                        "sat": {},
                        "sun": {},
                        "month": Ext.Date.format(minDate, 'Y-m'),
                    };
                }
                tempDate = Ext.Date.add(tempDate, Ext.Date.DAY, 1);
            }
        }
        return dateArr;
    }

12个月的日历数据全部生成完毕，但是我们按照月份进行生成还需进行更改归类每个月份，代码如下：

regularCalendarDateCollect: function (dateArr) {
        var regularCollect = new Map();
        for (var i = 0; i < dateArr.length; i++) {
            collector = regularCollect.get(dateArr[i].month);
            if (typeof collector == 'undefined' || collector == null) {
                var dates = [];
                regularCollect.set(dateArr[i].month, dates);
                collector = regularCollect.get(dateArr[i].month);
            }
            collector.push(dateArr[i]);
        }
        return regularCollect;
    },

Grid与store模板如下：

CalendarTemplateGrid: function (obj) {
        var me=this;
        var curMonthDayStore = Ext.create('Ext.data.Store', {

            fields: ['mon', 'tus', 'wed', 'thu', 'fri', 'sat', 'sun'],
            data: {'root': obj.datesArr},
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'root'
                }
            }
        });
        var curMonthDayPanel = Ext.create('Ext.grid.Panel', {
            margin: '5 0 5 0',
            columnWidth: 0.25,
            autoScroll: true,
            store: curMonthDayStore,
            disabled:true,
            forceFit: true,
            selModel: {
                selType: 'cellmodel'
            },
            selType: 'cellmodel',
            columns: [{
                header: obj.month,
                align: 'left',
                columns: [
                    {
                        text: '星期一', dataIndex: 'mon', align: 'center', width: "10%",
                        renderer: function (value, metaData, record, rowIndex, colIndex, store,view) {
                           return  me.cellRenderer(value, metaData, record, rowIndex, colIndex, store,view)
                        }
                    },
                    {
                        text: '星期二', dataIndex: 'tus', align: 'center', width: "10%",
                        renderer: function (value, metaData, record, rowIndex, colIndex, store,view) {
                            return me.cellRenderer(value, metaData, record, rowIndex, colIndex, store,view)
                        }
                    },
                    {
                        text: '星期三', dataIndex: 'wed', align: 'center', width: "10%",
                        renderer: function (value, metaData, record, rowIndex, colIndex, store,view) {
                            return me.cellRenderer(value, metaData, record, rowIndex, colIndex, store,view)
                        }
                    },
                    {
                        text: '星期四', dataIndex: 'thu', align: 'center', width: "10%",
                        renderer: function (value, metaData, record, rowIndex, colIndex, store,view) {
                            return  me.cellRenderer(value, metaData, record, rowIndex, colIndex, store,view)
                        }
                    },
                    {
                        text: '星期五', dataIndex: 'fri', align: 'center', width: "10%",
                        renderer: function (value, metaData, record, rowIndex, colIndex, store,view) {
                            return me.cellRenderer(value, metaData, record, rowIndex, colIndex, store,view)
                        }
                    },
                    {
                        text: '星期六', dataIndex: 'sat', align: 'center', width: "10%",
                        renderer: function (value, metaData, record, rowIndex, colIndex, store,view) {
                            return me.cellRenderer(value, metaData, record, rowIndex, colIndex, store,view)
                        }
                    },
                    {
                        text: '星期日', dataIndex: 'sun', align: 'center', width: "10%",
                        renderer: function (value, metaData, record, rowIndex, colIndex, store,view) {
                            return me.cellRenderer(value, metaData, record, rowIndex, colIndex, store,view)
                        }
                    }
                ],
            }],
            listeners: {
                cellclick: function (grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
                  
                }
            }
        });
        return curMonthDayPanel;
    },

  cellRenderer: function (value, metaData, record, rowIndex, colIndex, store,view) {
        Ext.tip.QuickTipManager.init();
      
            if (value.status == 1) {
                metaData.tdAttr = " data-qtip = '"+value.key+"'";
                metaData.tdCls="a";
            }else if(value.status == 0){
                metaData.tdAttr = " data-qtip = '"+value.key+"'";
            }
            if(value.isClick == 1){
                metaData.tdAttr = " data-qtip = '"+value.key+"本次变更'";
                metaData.tdCls="b";
            }
        return value.val;
    },

.x-grid-cell.a
{
    background-color: #7fd09a;
}
.x-grid-cell.b
{
    background-color: #69efc5;
}
.x-grid-cell.c
{
    background-color: rgba(132, 141, 136, 0.82);
}

放一起即可组装出一个日历gridPanel了

米修斯的橘子
关注
专栏目录
ExtJS生成日历组件
qq_48581332的博客
08-05 182
首先找到自己项目中对应的Ext的目录,并将日历组件添加到calendar这个目录下,我的是KwDatePicker.js。
ExtJS Date(日期)对象常用函数
热门推荐
达拉斯母牛
10-31 1万+
Ext.Date英文API http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Date Ext.Date是一个单例类，封装了一系列日期操作函数，扩展JavaScript Date的功能，下面列出一些常用的功能。 Ext.Date.add(date, interval, value) 给date增加或减少时间，这个函数不改变原有Date对象的值，而是返回一
CalendarMatrix:EXTJS 增强型日历组件，用于自定义样式的日历网格。 支持只读、范围选择、多选、单日期选择
06-21
日历矩阵 EXTJS 增强型日历组件，用于自定义样式的日历网格。 支持只读、范围选择、多选和单日期选择。 CalendarMatrix 是一个 EXTJS 5.x 组件，它扩展了 Ext.picker.Date 以在 Sencha 的日期选择器组件的实现中提供难以置信的灵活性。 此组件将与早期版本的 EXTJS 一起使用，并稍作修改。 以下示例包含在演示和随附的 CalendarMatrixDemo 项目（还包括架构 3.2 项目）中： MarketWatch 风格期权到期只读日历和图例 多“随机”日期选择示例 单个日期选择弹出窗口展示了许多高级功能，包括：国际语言支持、每个日期单元格内的自定义 HTML、自定义周末样式、自定义禁用日期 TripAdvisor、Trivago、Expedia 和 Travelocity 风格的日期范围选择器示例 Forms、Grids（行编辑和单元格编
ExtJS 日历控件 demo (modern版本)
03-13
ExtJS6 modern版 日历控件的demo,可以 搜索文章 “ExtJS 日历Calendar 控件 使用”来参考使用
Ext-日历面板
小小白
05-09 413
使用JS创建年视图的日历面板 方法： 项目引入jquery.calendar.js 和jquery.calendar.css文件 页面使用js方法创建控件 自定义接口实现数据存储（略） 效果： 关键代码： //页面 Ext.define('BindingGrid.view.Pms.HolidayManagement.HolidayManMain', { extend: 'Ext.panel.Panel', xtype: 'HolidayManMain', ...
ext js calendar 日历
09-05
ext js calendar 日历ext js calendar 日历ext js calendar 日历
ExtJs6.5 日历导航+日历月视图面板.rar
03-27
ExtJs6的 mordern 版的【日历导航+月视图控件】里面的ajax部分需要自己根据自身系统的框架进行处理，详细的一些细节还没处理，整体逻辑可以参考。
ext.js 6.2.0版本
最新发布
09-24
丰富的 UI 组件：Ext JS 提供了超过 150 个预构建的 UI 组件，包括表格、表单、树形视图、日历、图表等。 主题和自定义：框架支持多种内置主题，并且可以自定义 CSS 来创建独特的外观和风格。 响应式布局：Ext JS ...
ext6.5.3上的日历Ext.calendar包
06-01
`calendar.js`是这个包的主要JavaScript文件，它包含了EXTJS日历组件的所有逻辑。EXTJS是一个基于组件的JavaScript框架，以创建富客户端应用程序而闻名。在`calendar.js`中，你可以找到关于日历视图、事件处理、时间...
EXT.form组件
10-26
EXT.form组件是EXT JS库中用于构建表单界面的核心组件集合。这些组件提供了一系列丰富的控件，用于创建具有不同功能的交互式表单。在EXT JS中，表单组件不仅包含基本的输入字段，还支持复杂的输入类型和验证机制。 ...
ExtJs中定制日历控件——带下拉列表
linglinglu的专栏
06-13 3036
效果图: 日历组件部分代码： /*********************日历组件部分**************************** begin */ var dateArray = new Array(); var printDateArray = function(){ }; /** 班次数据源 */ var classStore = ne
真正的Extjs 4.2 支持时间选择的日历扩展
04-19
NULL 博文链接：https://gogo1217.iteye.com/blog/1856265
Ext的日历组件ExtCalendar.zip
07-17
Ext Calendar 是 ExtJS 的一个功能非常强大的日历显示组件，支持包括 IE、Firefox、Safari、Chrome 和 Opera 浏览器。 类结构图如下所示： 运行效果图如下： 标签：ExtCalendar
extjs4.2日历时间控件
07-04
根据extjs4.2的日历控件，扩充日历时间控件，可以选择日期，时间。经过多次测试效果良好。已经用在项目中了。
Extjs6 日历记事本
03-20
Extjs6通过iframe嵌入使用，因为项目庞大，只摘取了主要代码，大家参考使用。 实现了简单的日历的记事功能，可获取、添加、修改等~ 大家可以参考我的简书：https://www.jianshu.com/p/90f701e24e68
calendar控件使用 extjs_extjs年月选择日历及通用js同步ajax调用返回json object
weixin_28829479的博客
02-06 205
前段做报表，要按年月统计结果，之前的报表用的都是这种年月选择框：，这在弹框里很难看，我在网上查找了很多资料，找到了别人重写的datepicker方法，开始测试没发现什么问题，后来再上线后发现只要到月底，选择偶数月份失去焦点时，输入框里的月份会自动加1，别人数这是extjs的bug，但是总不能因为是bug就不做吧，后来终于在网上查找到了插件代码，才搞定： 1：ext3版本插件插件代码：Ext.ux....
ExtJS 日历Calendar 控件 使用
拒绝成猿的程序员
03-13 6462
ExtJS6 提供了日历控件，但是官网的demo贼坑，只讲了ajax使用，经过不懈努力地，无头苍蝇式尝试，终于摸到了使用门槛。 首先 在具体项目里，引用calendar的包。 其次 设定好calendar的store，这个很重要。因为，整个日历控件，最主要的就是store对应的事务。你在日历控件上看到的如下图中，每一条，都是一个event 这里采用的store是 memory 内...
[Extjs]带提醒功能的日历
红流
01-22 5170
  /**//** * @author zfzheng * 带提醒功能的日历 */Ext.namespace("My");My.Calendar = Ext.extend(Ext.DatePicker, ...{ todayText         : "今天", minText           : "最小日期之前", maxText           : "最大日期之后", d
ExtJs定制日历控件——自动加载更新(日历控件显示)
linglinglu的专栏
10-17 1410
将定制的日历控件放到一个Panel里显示，其结构如下： , { border: true, id: 'page', animCollapse : true, width: 1050, height: 560, style: 'margin-left: 10;', checkboxToggle: true, layout:
Ext JS 复杂日历控件实现与解析
"这篇文章除了介绍Ext JS中的大型日历控件，还探讨了如何集成和定制这种复杂的组件，以及CalendarPanel的主要结构和组件。作者Brian Moeskau在2010年9月8日分享了关于ExtJS 3.3版本中的CalendarComponent的见解。" ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值