You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
382 lines
14 KiB
382 lines
14 KiB
11 months ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<!--<meta charset="utf-8" />-->
|
||
|
|
<link href="../../css/Extend/calendar/fullcalendar.css" rel="stylesheet" />
|
||
|
|
<link href="../../css/Extend/calendar/fullcalendar.print.css" rel="stylesheet" media='print' />
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
/*margin: 40px 10px;*/
|
||
|
|
margin: 10px 5px;
|
||
|
|
padding: 0;
|
||
|
|
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#calendar {
|
||
|
|
/*max-width: 900px;*/
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
#box {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-inline {
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.select {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
padding: 5px 0;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.label-success {
|
||
|
|
background-color: #82af6f;
|
||
|
|
}
|
||
|
|
|
||
|
|
.label-danger {
|
||
|
|
background-color: #d15b47;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id='calendar'></div>
|
||
|
|
<div id='box'>
|
||
|
|
<form class='form-inline'>
|
||
|
|
<select name='username' class='select'>
|
||
|
|
<option value='1'>张三</option>
|
||
|
|
<option value='2'>李四</option>
|
||
|
|
<option value='3'>王五</option>
|
||
|
|
<option value='4'>赵柳</option>
|
||
|
|
<option value='5'>梦琪</option>
|
||
|
|
</select>
|
||
|
|
<div class='radios'>
|
||
|
|
<label class='label_canlendar'>
|
||
|
|
<input class='ace' type='radio' value='#3a87ad' name='code' checked><span class='classes' style='color:#3a87ad'>早班</span>
|
||
|
|
</label>
|
||
|
|
<label class='label_canlendar'>
|
||
|
|
<input class='ace' type='radio' value='#82af6f' name='code'><span class='classes' style='color:#82af6f'>中班</span>
|
||
|
|
</label>
|
||
|
|
<label class='label_canlendar'>
|
||
|
|
<input class='ace' type='radio' value='#d15b47' name='code'><span class='classes' style='color:#d15b47'>晚班</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<script src="../../js/Extend/calendar/jquery.min.js"></script>
|
||
|
|
<script src="../../js/Extend/calendar/moment.min.js"></script>
|
||
|
|
<script src="../../js/Extend/calendar/fullcalendar.js"></script>
|
||
|
|
<script src="../../js/Extend/calendar/locale/zh-cn.js"></script>
|
||
|
|
<script src="../../js/Extend/layer/layer.js"></script>
|
||
|
|
<script>
|
||
|
|
var events = [
|
||
|
|
{
|
||
|
|
id: 1001,
|
||
|
|
text: '张三',
|
||
|
|
title: '张三 - 早班',
|
||
|
|
backgroundColor: '#3a87ad',
|
||
|
|
start: '2020-09-23',
|
||
|
|
end: '2020-09-30'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 1002,
|
||
|
|
text: '张三',
|
||
|
|
title: '张三 - 中班',
|
||
|
|
backgroundColor: '#82af6f',
|
||
|
|
start: '2020-09-02',
|
||
|
|
end: '2020-09-03'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 1003,
|
||
|
|
text: '张三',
|
||
|
|
title: '张三 - 晚班',
|
||
|
|
backgroundColor: '#d15b47',
|
||
|
|
start: '2020-02-04'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 1004,
|
||
|
|
text: '张三',
|
||
|
|
title: '张三 - 晚班',
|
||
|
|
backgroundColor: '#d15b47',
|
||
|
|
start: '2020-08-05'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 1005,
|
||
|
|
text: '张三',
|
||
|
|
title: '张三 - 晚班',
|
||
|
|
backgroundColor: '#d15b47',
|
||
|
|
start: '2020-09-06'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 1006,
|
||
|
|
text: '张三',
|
||
|
|
title: '张三 - 早班',
|
||
|
|
backgroundColor: '#3a87ad',
|
||
|
|
start: '2020-09-20',
|
||
|
|
end: '2020-09-25'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 10060,
|
||
|
|
text: '张三',
|
||
|
|
title: '张三 - 中班',
|
||
|
|
backgroundColor: '#82af6f',
|
||
|
|
start: '2020-09-07'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 10061,
|
||
|
|
text: '张三',
|
||
|
|
title: '张三 - 中班',
|
||
|
|
backgroundColor: '#d15b47',
|
||
|
|
start: '2020-09-08',
|
||
|
|
end:'2020-09-10'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 1007,
|
||
|
|
text: '张三',
|
||
|
|
title: '张三 - 中班',
|
||
|
|
backgroundColor: '#82af6f',
|
||
|
|
start: '2020-09-15'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 1008,
|
||
|
|
text: '张三',
|
||
|
|
title: '张三 - 中班',
|
||
|
|
backgroundColor: '#82af6f',
|
||
|
|
start: '2020-09-16'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 1009,
|
||
|
|
text: '张三',
|
||
|
|
title: '张三 - 早班',
|
||
|
|
backgroundColor: '#3a87ad',
|
||
|
|
start: '2020-09-17'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 1010,
|
||
|
|
text: '张三',
|
||
|
|
title: '张三 - 早班',
|
||
|
|
backgroundColor: '#3a87ad',
|
||
|
|
start: '2020-09-25',
|
||
|
|
end: '2020-09-25'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 1011,
|
||
|
|
title: '百度一下',
|
||
|
|
url: 'http://baidu.com/',
|
||
|
|
start: '2020-09-23',
|
||
|
|
end: '2020-09-30'
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
$box = $('#box');
|
||
|
|
$calendar = $('#calendar');
|
||
|
|
$calendar.fullCalendar('destroy');
|
||
|
|
|
||
|
|
var calendar = $calendar.fullCalendar({
|
||
|
|
header: {
|
||
|
|
left: 'month,agendaWeek,agendaDay',
|
||
|
|
center: '',
|
||
|
|
right: 'prev,next today'
|
||
|
|
},
|
||
|
|
buttonText: {
|
||
|
|
today: '今天'
|
||
|
|
},
|
||
|
|
locale: 'zh-cn',
|
||
|
|
defaultView: "month", // basicWeek listWeek agendaWeek
|
||
|
|
weekMode: 'liquid',
|
||
|
|
// weekNumbers: true,
|
||
|
|
// height: 'auto',
|
||
|
|
|
||
|
|
timeFormat: 'HH:mm',
|
||
|
|
defaultDate: '2018-02-24',
|
||
|
|
navLinks: true, // can click day/week names to navigate views
|
||
|
|
eventLimit: 10, // 限制一天中显示的事件数，默认false
|
||
|
|
allDayText: '排班情况', // 日历上显示全天的文本
|
||
|
|
selectable: true, // 允许用户通过单击或拖动选择日历中的对象，包括天和时间。
|
||
|
|
selectHelper: false, // 当点击或拖动选择时间时，显示默认加载的提示信息，该属性只在周/天视图里可用。
|
||
|
|
unselectAuto: true, // 当点击页面日历以外的位置时，自动取消当前的选中状态。
|
||
|
|
eventBackgroundColor: '#3a87ad', // 设置日程事件的背景色
|
||
|
|
events: events,
|
||
|
|
select: select,
|
||
|
|
eventClick: eventClick
|
||
|
|
});
|
||
|
|
|
||
|
|
// 添加排班
|
||
|
|
function select(start, end, allDay) {
|
||
|
|
layer.open({
|
||
|
|
type: 1,
|
||
|
|
shade: false,
|
||
|
|
content: $box,
|
||
|
|
title: '选择班次',
|
||
|
|
btn: ['确认', '关闭'],
|
||
|
|
btn1: function () {
|
||
|
|
layer.closeAll();
|
||
|
|
},
|
||
|
|
yes: addCallback
|
||
|
|
});
|
||
|
|
|
||
|
|
// 添加排班 - 弹窗回调
|
||
|
|
function addCallback() {
|
||
|
|
var bgColor = $box.find("input[name=code]:checked").val();
|
||
|
|
var title = $box.find("input[name=code]:checked").next().text();
|
||
|
|
var text = $box.find("option:selected").text();
|
||
|
|
|
||
|
|
var json = {
|
||
|
|
title: text + ' - ' + title,
|
||
|
|
text: text,
|
||
|
|
allDay: allDay,
|
||
|
|
backgroundColor: bgColor,
|
||
|
|
start: start.format('YYYY-MM-DD'),
|
||
|
|
end: end.format('YYYY-MM-DD')
|
||
|
|
};
|
||
|
|
|
||
|
|
// test
|
||
|
|
$('#calendar').fullCalendar('renderEvent', json, true);// 添加日历
|
||
|
|
|
||
|
|
// 添加排班 post
|
||
|
|
function addEvent(data) {
|
||
|
|
if (data.title == null || data.title == '') {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (checkStr(data.title) == false) {
|
||
|
|
alert("请不要输入非法字符！");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
$.post("Canlendar/postEvent", data, function (data) {
|
||
|
|
calendar.fullCalendar('renderEvent', json, true); // 添加日历
|
||
|
|
}, "json");
|
||
|
|
}
|
||
|
|
|
||
|
|
layer.closeAll();
|
||
|
|
}
|
||
|
|
|
||
|
|
calendar.fullCalendar('unselect');
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// 更新排班
|
||
|
|
function eventClick(calEvent, jsEvent, view) {
|
||
|
|
var code = calEvent.backgroundColor;
|
||
|
|
var form = [];
|
||
|
|
form.push("<form class='form-inline'>");
|
||
|
|
form.push(" <select name='username' class='select'>");
|
||
|
|
form.push(" <option value='1' " + (calEvent.text == '张三' ? 'selected' : calEvent.text) + ">张三</option>");
|
||
|
|
form.push(" <option value='2' " + (calEvent.text == '李四' ? 'selected' : calEvent.text) + ">李四</option>");
|
||
|
|
form.push(" <option value='3' " + (calEvent.text == '王五' ? 'selected' : calEvent.text) + ">王五</option>");
|
||
|
|
form.push(" <option value='4' " + (calEvent.text == '赵柳' ? 'selected' : calEvent.text) + ">赵柳</option>");
|
||
|
|
form.push(" <option value='5' " + (calEvent.text == '梦琪' ? 'selected' : calEvent.text) + ">梦琪</option>");
|
||
|
|
form.push(" </select>");
|
||
|
|
form.push(" <div class='radios'>");
|
||
|
|
form.push(" <label class='label_canlendar'><input type='radio' value='#3a87ad' name='code' " + (code == '#3a87ad' ? 'checked' : '') + "><span class='classes'style='color:#3a87ad'>早班</span></label>");
|
||
|
|
form.push(" <label class='label_canlendar'><input type='radio' value='#82af6f' name='code' " + (code == '#82af6f' ? 'checked' : '') + "><span class='classes'style='color:#82af6f'>中班</span></label>");
|
||
|
|
form.push(" <label class='label_canlendar'><input type='radio' value='#d15b47' name='code' " + (code == '#d15b47' ? 'checked' : '') + "><span class='classes'style='color:#d15b47'>晚班</span></label>");
|
||
|
|
form.push(" </div>");
|
||
|
|
form.push("</form>");
|
||
|
|
$box.html(form.join(''));
|
||
|
|
|
||
|
|
layer.open({
|
||
|
|
type: 1,
|
||
|
|
shade: false,
|
||
|
|
title: '当前班次：' + calEvent.title,
|
||
|
|
content: $box,
|
||
|
|
btn: ['确认', '删除', '关闭'],
|
||
|
|
btn2: function () {
|
||
|
|
delEvent(calEvent._id);// 删除排班
|
||
|
|
|
||
|
|
layer.closeAll();
|
||
|
|
},
|
||
|
|
btn3: function () {
|
||
|
|
layer.closeAll();
|
||
|
|
},
|
||
|
|
yes: updateCallback
|
||
|
|
});
|
||
|
|
|
||
|
|
// 更新排班 - 弹窗回调
|
||
|
|
function updateCallback() {
|
||
|
|
var bgColor = $box.find("input[name=code]:checked").val();
|
||
|
|
var title = $box.find("input[name=code]:checked").next().text();
|
||
|
|
var text = $box.find("option:selected").text();
|
||
|
|
|
||
|
|
calEvent.title = text + ' - ' + title;
|
||
|
|
calEvent.text = text;
|
||
|
|
calEvent.backgroundColor = bgColor;
|
||
|
|
|
||
|
|
// test
|
||
|
|
calendar.fullCalendar('updateEvent', calEvent); // 更新日历
|
||
|
|
|
||
|
|
// 更新排班 post
|
||
|
|
function editEvent(calEvent) {
|
||
|
|
if (calEvent.title == null || calEvent.title == '') {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (checkStr(calEvent.title) == false) {
|
||
|
|
alert("请不要输入非法字符！");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
$.post("Canlendar/postEvent", {
|
||
|
|
id: calEvent.id,
|
||
|
|
allDay: calEvent.allDay,
|
||
|
|
title: calEvent.title,
|
||
|
|
start: calEvent.start,
|
||
|
|
end: calEvent.end,
|
||
|
|
backgroundColor: calEvent.backgroundColor
|
||
|
|
}, function (data) {
|
||
|
|
calendar.fullCalendar('updateEvent', calEvent); // 更新日历
|
||
|
|
}, "json");
|
||
|
|
}
|
||
|
|
|
||
|
|
layer.closeAll();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// 删除排班
|
||
|
|
function delEvent(id) {
|
||
|
|
|
||
|
|
// test
|
||
|
|
calendar.fullCalendar("removeEvents", calEvent._id); // 删除日历
|
||
|
|
|
||
|
|
/*
|
||
|
|
$.post("Canlendar/delEvent", {id: id}, function(data) {
|
||
|
|
calendar.fullCalendar("removeEvents", calEvent._id); // 删除日历
|
||
|
|
alert('删除成功');
|
||
|
|
});*/
|
||
|
|
}
|
||
|
|
//function delEvent(calEvent,id) {
|
||
|
|
|
||
|
|
// // test
|
||
|
|
// calendar.fullCalendar("removeEvents", calEvent._id); // 删除日历
|
||
|
|
|
||
|
|
// /*
|
||
|
|
// $.post("Canlendar/delEvent", {id: id}, function(data) {
|
||
|
|
// calendar.fullCalendar("removeEvents", calEvent._id); // 删除日历
|
||
|
|
// alert('删除成功');
|
||
|
|
// });*/
|
||
|
|
//}
|
||
|
|
// 是否全天
|
||
|
|
function getAllDay(start, end) {
|
||
|
|
var start_his = start.indexOf("00:00:00");
|
||
|
|
var end_his = end.indexOf("00:00:00");
|
||
|
|
if (start_his == -1 || end_his == -1) {
|
||
|
|
return false;
|
||
|
|
} else {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 非法字符
|
||
|
|
function checkStr(str) {
|
||
|
|
var pattern = /[~#^$@%&!*'"]/gi;
|
||
|
|
if (pattern.test(str)) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|