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.
357 lines
9.6 KiB
357 lines
9.6 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8'/>
|
|
<link href='css/fullcalendar.css' rel='stylesheet'/>
|
|
<link href='css/fullcalendar.print.css' rel='stylesheet' media='print'/>
|
|
<style>
|
|
body {
|
|
margin: 40px 10px;
|
|
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>
|
|
</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/jquery.min.js'></script>
|
|
<script src='js/moment.min.js'></script>
|
|
<script src='js/fullcalendar.js'></script>
|
|
<script src="js/locale/zh-cn.js"></script>
|
|
<script src="layer/layer.js"></script>
|
|
<script>
|
|
var events = [
|
|
{
|
|
id: 1001,
|
|
text: '张三',
|
|
title: '张三 - 早班',
|
|
backgroundColor: '#3a87ad',
|
|
start: '2018-02-01'
|
|
},
|
|
{
|
|
id: 1002,
|
|
text: '张三',
|
|
title: '张三 - 中班',
|
|
backgroundColor: '#82af6f',
|
|
start: '2018-02-02',
|
|
end: '2018-02-03'
|
|
},
|
|
{
|
|
id: 1003,
|
|
text: '张三',
|
|
title: '张三 - 晚班',
|
|
backgroundColor: '#d15b47',
|
|
start: '2018-02-04'
|
|
},
|
|
{
|
|
id: 1004,
|
|
text: '张三',
|
|
title: '张三 - 晚班',
|
|
backgroundColor: '#d15b47',
|
|
start: '2018-02-05'
|
|
},
|
|
{
|
|
id: 1005,
|
|
text: '张三',
|
|
title: '张三 - 晚班',
|
|
backgroundColor: '#d15b47',
|
|
start: '2018-02-06'
|
|
},
|
|
{
|
|
id: 1006,
|
|
text: '张三',
|
|
title: '张三 - 早班',
|
|
backgroundColor: '#3a87ad',
|
|
start: '2018-02-07',
|
|
end: '2018-02-07'
|
|
},
|
|
{
|
|
id: 10060,
|
|
text: '张三',
|
|
title: '张三 - 中班',
|
|
backgroundColor: '#82af6f',
|
|
start: '2018-02-07'
|
|
},
|
|
{
|
|
id: 1007,
|
|
text: '张三',
|
|
title: '张三 - 中班',
|
|
backgroundColor: '#82af6f',
|
|
start: '2018-02-15'
|
|
},
|
|
{
|
|
id: 1008,
|
|
text: '张三',
|
|
title: '张三 - 中班',
|
|
backgroundColor: '#82af6f',
|
|
start: '2018-02-16'
|
|
},
|
|
{
|
|
id: 1009,
|
|
text: '张三',
|
|
title: '张三 - 早班',
|
|
backgroundColor: '#3a87ad',
|
|
start: '2018-02-17'
|
|
},
|
|
{
|
|
id: 1010,
|
|
text: '张三',
|
|
title: '张三 - 早班',
|
|
backgroundColor: '#3a87ad',
|
|
start: '2018-02-25',
|
|
end: '2018-02-25'
|
|
}/*,
|
|
{
|
|
id: 1011,
|
|
title: '百度一下',
|
|
url: 'http://baidu.com/',
|
|
start: '2018-02-28'
|
|
}*/
|
|
];
|
|
|
|
$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: "agendaWeek", // 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: 3, // 限制一天中显示的事件数，默认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(" </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 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>
|
|
|