html代码生产工具可排班,demo.html · Gairo/fullcalendar_日历排班 - Gitee.com

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;

}

张三

李四

王五

class='classes' style='color:#3a87ad'>早班

class='classes' style='color:#82af6f'>中班

class='classes' style='color:#d15b47'>晚班

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.push(" ");

form.push(" 张三");

form.push(" 李四");

form.push(" 王五");

form.push(" ");

form.push("

");

form.push(" 早班");

form.push(" 中班");

form.push(" 晚班");

form.push("

");

form.push("

");

$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;

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史