<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>假日列表</title>
<link href="../Statistic/lz/layui/css/layui.css" type="text/css" rel="stylesheet" />
<script src="../Statistic/lz/layui/layui.js" type="text/javascript"></script>
<link href="contextMenu.css" type="text/css" rel="stylesheet" />
<style>
.laydate-set-ym{font-size: xx-large;}
.laydate-day-mark{font-size: xx-large; height: 100%; padding-top: 20px;} /*节日 文字大小*/
.laydate-day-holidays:before { font-size: large; color: red;} /*日期左上角的假期标 显示的字体大小 */
#laydate-calender .layui-laydate-main{width:700px;}
#laydate-calender .layui-laydate-content td,#test-n1 .layui-laydate-content th{width:100px;height: 50px;line-height:50px;}
</style>
</head>
<body>
<%--https://gitee.com/hewenjun97014247/layui-calendar-plugin--%>
<form id="form1" runat="server">
<div class="layui-inline" id="test-n1"></div>
<div class="layui-inline laydate-calender-box">
<div class="layui-input-inline" id="laydate-calender"></div>
</div>
</form>
<script>
layui.extend({
contextMenu: '/Holiday/contextMenu'
});
layui.use(['jquery', 'contextMenu','laydate','layer'], function () {
var $ = layui.jquery;
var laydate = layui.laydate;
var layer = layui.layer;
/*
laydate.render({
elem: '#test-n1'
, position: 'static'
});
*/
var init_date = new Date().toISOString().slice(0, 10); // 返回格式：YYYY-MM-DDTHH:mm:ss.sssZ 再次截取返回格式：YYYY-MM-DD作为初始日期
var year = '';// 年份
var yearMonth = '';//年月作为请求后台的参数
var mark = {};// 标注数据
var holidays = [
['2023-12-2', '2023-12-9', '2023-12-10', '2023-12-16', '2023-12-17', '2023-12-24', '2023-12-30', '2023-12-31'],//休息日，默认所有日期都是上班日，因此只需维护休息日即可
[] //默认所有日期都是上班日，因此不给默认上班日期
];
loadCalender('#laydate-calender');// 主方法：加载laydate日历及标记数据
function loadCalender(elem) {
loadDateNoteData();// 加载日历标注数据
loadLayDate(elem);// 加载laydate日历
}
function loadDateNoteData() {
if (init_date) {
year = init_date.split('-')[0];
}
let data = { year: year };
// TODO:请求后台当年的节假日数据，这里演示用假数据：
mark = {};
holidays = [
// 休息日
[],
// 加班日
[]
];
}
function loadLayDate(elem) {
// 先移除原节点再重新添加，避免重复渲染
let date_parent = $(elem).parent();
$(elem).remove();
date_parent.append('<div class="layui-input-inline" id="laydate-calender"></div>');
// 渲染日历
laydate.render({
elem: elem,
weekStart: 1,// 设置周一为起始周
position: 'static',// 展开面板
// calendar: true,// 显示传统节日
btns: ['now'],// 底部按钮
// theme: 'grid',// 格子主题
mark: mark,// 自定义标注
min:'<%= DateTime.Now.ToString("yyyy-MM-dd")%>',
value: init_date,// 初始值
holidays: holidays,// 节假日|加班
ready: function (date) {
initDateRightMenu("#laydate-calender");// 初始化右键菜单
},
done: function (value, date, endDate) {// 选择后的回调
$(".ul-context-menu").hide();// 点击事件，隐藏右键菜单
switchYear(value);
},
change: function (value, date) {// 切换日期的回调
switchYear(value);
}
});
}
// 切换年份
function switchYear(value) {
new_year = value.split('-')[0];
if (year !== new_year) {
init_date = value;
loadCalender('#laydate-calender');// 重新加载该年份的日历、标注数据
}
}
// 给layui日历添加右键标注功能
function initDateRightMenu(laydate_elem) {
// 先移除原右键菜单再重新添加，避免重复渲染
$(".ul-context-menu").remove();
// 初始化菜单
$(laydate_elem + " .layui-laydate-content td").contextMenu({
width: 80, // width
itemHeight: 30, // 菜单项height
bgColor: "#fff", // 背景颜色
color: "#777", // 字体颜色
fontSize: 14, // 字体大小
hoverBgColor: "#16baaa", // hover背景颜色
hoverColor: "#fff", // hover背景颜色
target: function (ele) { // 当前元素
let menu_box = $(".ul-context-menu");
let li_node = menu_box.children('li');
let type_class = ele.find("span").attr('class');
let date_type = 'normal';
if (type_class) {
li_node.eq(0).hide();
li_node.eq(1).hide();
li_node.eq(2).hide();
li_node.eq(3).show();
if (type_class === "laydate-day-mark") {
date_type = 'note';
}
if (type_class === "laydate-day-holidays") {
date_type = 'rest';
if (ele.find("span").attr('type') === "work") {
date_type = 'work';
}
}
} else {
li_node.eq(0).show();
li_node.eq(1).show();
li_node.eq(2).show();
li_node.eq(3).hide();
}
menu_box.attr("data-value", ele.attr("lay-ymd"));
menu_box.attr("data-type", date_type);
},
menu: [// 菜单项及回调
{
text: "休假",
icon: '<i class="layui-icon layui-icon-time" style="margin-right: -5px;"></i>',
callback: function (ele) {
init_date = ele.parent().attr("data-value");
if (sendNoteRequest('rest')) {
holidays[0].push(init_date);
loadLayDate(laydate_elem);
}
}
},
{
text: "加班",
icon: '<i class="layui-icon-chart-screen" style="margin-right: -5px;"></i>',
callback: function (ele) {
init_date = ele.parent().attr("data-value");
if (sendNoteRequest('work')) {
holidays[1].push(init_date);
loadLayDate(laydate_elem);
}
}
},
{
text: "其他",
icon: '<i class="layui-icon layui-icon-add-1" style="margin-right: -5px;"></i>',
callback: function (ele) {
init_date = ele.parent().attr("data-value");
layer.prompt({ title: '请输入标注内容（1~3个字符）' }, function (note, index, elem) {
if (note === '') return elem.focus();
if (note.length > 3) {
layer.alert('标注只能填写1到3位字符', { title: '温馨提示' });
return false;
}
if (sendNoteRequest('note', note)) {
layer.close(index);
// 添加自定义标记
mark[init_date] = note;
loadLayDate(laydate_elem);
}
});
}
},
{
text: "移除",
icon: '<i class="layui-icon layui-icon-delete" style="margin-right: -5px;"></i>',
callback: function (ele) {
init_date = ele.parent().attr("data-value");
let date_type = ele.parent().attr("data-type");
if (sendNoteRequest('delete')) {
// 移除日期标记数据
removeNote(date_type);
loadLayDate(laydate_elem);
}
}
}
]
});
}
// 移除日期标注
function removeNote(type) {
if (type === 'rest') {
holidays[0] = holidays[0].filter(function (item) {
return item !== init_date
});
}
if (type === 'work') {
holidays[1] = holidays[1].filter(function (item) {
return item !== init_date
});
}
if (type === 'note') {
delete mark[init_date];
}
}
// 标注请求方法
function sendNoteRequest(type, note) {
let status = 0;
note = note || '';
let data = { 'holiday': init_date, 'type': type, 'note': note };// type：rest work note delete
console.log(data);
// TODO: 请求后台接口，标记数据：
status = 1;// 这里测试，直接返回1
return status;
}
});
</script>
</body>
</html>
.ul-context-menu {
list-style: none;
position: absolute;
top: 0;
left: 0;
z-index: 99999999;
padding: 5px 0;
min-width: 80px;
margin: 0;
display: none;
font-family: "微软雅黑";
font-size: 14px;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .15);
box-sizing: border-box;
border-radius: 4px;
-webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.ul-context-menu .ui-context-menu-item {
margin: 0;
padding: 0;
}
.ul-context-menu .ui-context-menu-item a {
display: block;
padding: 0 10px;
color: #333;
white-space: nowrap;
text-decoration: none;
}
.ul-context-menu .ui-context-menu-item a:hover {
text-decoration: none;
color: #262626;
}
.ul-context-menu .ui-context-menu-item .icon {
width: 16px;
height: 16px;
margin-right: 8px;
vertical-align: sub;
border: 0;
}
layui.define('jquery', function (exports) {
"use strict";
var $ = layui.jquery;
!function (t, n, e, i) {
var o = function (t, n) {
this.init(t, n)
};
o.prototype = {
init: function (t, n) {
this.ele = t, this.defaults = {
menu: [{
text: "菜单一", callback: function (t) {
}
}, {
text: "菜单二", callback: function (t) {
}
}],
target: function (t) {
},
width: 100,
itemHeight: 28,
bgColor: "#fff",
color: "#333",
fontSize: 14,
hoverBgColor: "#f5f5f5",
hoverColor: "#fff"
}, this.opts = e.extend(!0, {}, this.defaults, n), this.random = (new Date).getTime() + parseInt(1e3 * Math.random()), this.eventBind()
}, renderMenu: function () {
var t = this, n = "#uiContextMenu_" + this.random;
if (!(e(n).length > 0)) {
var t = this, i = '<ul class="ul-context-menu" id="uiContextMenu_' + this.random + '">';
e.each(this.opts.menu, function (t, n) {
n.icon ? i += '<li class="ui-context-menu-item"><a href="javascript:void(0);"><i class="layui-icon">' + n.icon + '</i><span style="margin-left: 10px;">' + n.text + "</span></a></li>" : i += '<li class="ui-context-menu-item"><a href="javascript:void(0);"><span>' + n.text + "</span></a></li>"
}), i += "</ul>", e("body").append(i).find(".ul-context-menu").hide(), this.initStyle(n), e(n).on("click", ".ui-context-menu-item", function (n) {
t.menuItemClick(e(this)), n.stopPropagation()
})
}
}, initStyle: function (t) {
var n = this.opts;
e(t).css({
width: n.width,
backgroundColor: n.bgColor
}).find(".ui-context-menu-item a").css({
color: n.color,
fontSize: n.fontSize,
height: n.itemHeight,
lineHeight: n.itemHeight + "px"
}).hover(function () {
e(this).css({ backgroundColor: n.hoverBgColor, color: n.hoverColor })
}, function () {
e(this).css({ backgroundColor: n.bgColor, color: n.color })
})
}, menuItemClick: function (t) {
var n = this, e = t.index();
t.parent(".ul-context-menu").hide(), n.opts.menu[e].callback && "function" == typeof n.opts.menu[e].callback && n.opts.menu[e].callback(t)
}, setPosition: function (t) {
var n = this.opts;
var obj_h = n.menu.length * n.itemHeight + 12;
var obj_w = n.width;
var max_x = $(window).width();
var max_y = $(window).height();
var this_x = t.clientX;
var this_y = t.clientY;
var x = t.clientX + 2;
var y = t.clientY + 2;
if (max_x - this_x < (obj_w - 2)) {
x = max_x - obj_w;
}
if (max_y - this_y < (obj_h - 2)) {
y = max_y - obj_h;
}
e("#uiContextMenu_" + this.random).css({ left: x, top: y }).show()
}, eventBind: function () {
var t = this;
this.ele.on("contextmenu", function (n) {
n.preventDefault(), t.renderMenu(), t.setPosition(n), t.opts.target && "function" == typeof t.opts.target && t.opts.target(e(this))
}), e(n).on("click", function () {
e(".ul-context-menu").hide()
})
}
}, e.fn.contextMenu = function (t) {
return new o(this, t), this
}
}(window, document, $);
exports('contextMenu');
});
浙公网安备 33010602011771号