toughspider-lay-calendar
/
layCalendarDemo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>layCalendar使用演示程序</title>
	<link rel="stylesheet" href="https://unpkg.com/layui@2.6.8/dist/css/layui.css">
	<link href="./jquerycontextmenu/jquery.contextMenu.css" rel="stylesheet" />
    <link href="./layCalendar.css" rel="stylesheet" />
	<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
	<script src="https://unpkg.com/layui@2.6.8/dist/layui.js"></script>
	<script type="text/javascript" src="./jquerycontextmenu/jquery.contextMenu.js"></script>
</head>
<body style="padding-top:5px;">
	<div class="layui-card">
    <div class="layui-card-header">
        演示程序
    </div>
    <div class="layui-card-body">
        <div id="calendar1" lay-filter="calendar"></div>
    </div>
</div>
<script type="text/javascript" language="javascript">
    layui.config({
		base: './',
		version: true
	}).use(['jquery', 'layer', 'layCalendar'], function () {
		var $ = layui.$;
		var layer = layui.layer;
		var layCalendar = layui.layCalendar;
		var active={
			add:function(data){
				layer.msg(JSON.stringify(data));
			},
			modify:function(data){
				layer.msg(JSON.stringify(data));
			},
			delete:function(data){
				layer.msg(JSON.stringify(data));
			}
		};
		//假日类型配置项目
		var cfg = [{ 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' }] }];
		layCalendar.render({
        elem: '#calendar1',//控件ID
        holidayurl: 'reqdata.json',//获取假日
        holidayType: cfg,
        menucallback: function (itemKey, data) {
            active[itemKey].call(this, data);//右键菜单调用方法
			//刷新
			//layCalendar.reload('calendar');
        }
    });
	});

</script>
</body>
</html>