注意:日历控件的右键菜单依赖于jquery.contextMenu.js组件
组件属性说明 elem:必需项 使用jq选择器
holidayType:假日的类型 默认值为 [{ id:0, menuitem: [{ key:'add', name:'添加假日', icon:'add' }] }, { id:1, name:'节假日', caption:'假', daycolor:'#000000', color:'#f52e2e', menuitem: [{ key:'modify', name:'修改假日', icon:'edit' }, { key:'delete', name:'删除假日', icon:'delete' }] }, { id:2, name:'补班', caption:'班', daycolor:'#FF0000', color:'#cbcbcb', menuitem: [{ key:'modify', name:'修改假日', icon:'edit' }, { key:'delete', name:'删除假日', icon:'delete' }] }] id表示假日类型 name表示假日类型的名称 caption表示在日历中显示的标识文字 daycolor表示日期文字的颜色 color表示caption标识文字的颜色 menuitem表示该日期类型显示的右键菜单 key 菜单的键值 name 菜单显示的名称 icon 菜单显示的图标
holidayurl:查询月份假日信息的请求地址 GET模式 参数为month=yyyy-MM,返回的数据格式为{Success:true,Data:[],Msg:null},Success表示请求数据是否成功,Data为假日信息的列表.
value:默认当前显示的月份 格式为yyyy-MM
menucallback: function (itemkey, obj){} 菜单的回调方法 itemKey 表示菜单的key值,obj表示返回的日期对象 obj数据的结构 Date 触发菜单的日期 格式为yyyy-MM-dd DateType 日期类型 对应holidayType的id值 HolidayID 假期的后台ID号 BeginDate 假期的开始时间 格式 yyyy-MM-dd HH:mm:ss EndDate 假期的结束时间 格式 yyyy-MM-dd HH:mm:ss
假日信息数据格式 { ID:'1',//假日对应的ID值 DateType:1,//假期类型 对应holidayType的id值 BeginDate:'2021-01-01 00:00:00',//开始日期 EndDate:'2021-01-03 23:59:59'//结束日期 范围时间使用 }
============================================================= 调用示例 html 引用css
引用js <script type="text/javascript" src="~/lib/jquerycontextmenu/jquery.contextMenu.js"></script>js layui.use(['jquery', 'layCalendar'], function () { var $ = layui.$; var layCalendar = layui.layCalendar; 初始化控件 layCalendar.render({ elem: '#calendar1', holidayurl: '/HolidayInfo/GetHolidayByMonth', menucallback: function (itemKey, data) {
}
}); 刷新控件 layCalendar.reload('calendar'); });
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型