fullCalendar2.9排课

FullCalendar2.9排课 1、页面示例（效果图）

2、js文件内容

//create by cxy 2016-08 $(function () {

//初始化、 varjsonStr={name:\, class:\,

crew_startDate:\, crew_end_Date:'',

crew_classTime_Arr:[\,\,\,\,\,\14:40~15:20\,\,\] };

//生成日期控件 initFullCalendar(jsonStr);

//获取日期 function getdate() { varnow = new Date();

y = now.getFullYear(); m = now.getMonth() + 1; d = now.getDay(); m = m <10 ? \+ m : m; d = d <10 ? \+ d : d; return y + \+ m + \+ d; }

//初始化日历方法 function initFullCalendar(jsonStr) {

//varcrew_classTime_arr=new Array(); //varcrew_classTime_Arr=new Array(\5:40~16:20\ varcrew_classTime_Arr; varcrew_startDate= getdate();

//获取课节 $.each(jsonStr, function(key, value) {

crew_classTime_Arr=jsonStr[\]; crew_startDate=jsonStr[\]; });

//先清空已有控件内容 $('#calendar').fullCalendar('destroy');

//加载日历控件 $('#calendar').fullCalendar({

// defaultDate: '2016-07-12', defaultDate: crew_startDate,

defaultView:\, //默认显示周 // defaultView: 'timelineDay', height: 600, editable: true, customButtons: {

//自定义 按钮可以添加多个，自己命名 在header 部分调用即可 比如这里的myCustomButton myCustomButton: { text: '自定义按钮', click: function() { alert('点击自定义按钮!'); } } }, header: {

left: 'prev,next today, myCustomButton', center: 'title',

right: 'month,agendaWeek,agendaDay'

//right: 'month,agendaWeek,agendaDay,timelineFourDays' },

//views: { // timelineFourDays: { // type: 'timeline', // duration: { days: 4 } // } //}, allDaySlot:false,//是否显示全天 // titleFormat:'MMM D YYYY',//header日期显示格式 axisFormat: 'H:mm时',//修改日期前面显示内容默认为早上6点00分，改完后显示6:00时('H:mm时') slotDuration:'01:00:00', //时间间隔 // slotLabelFormat:'HH:mm',//左侧时间格式 slotLabelFormat:'第H课',

// slotLabelInterval:'00:20:00',//左侧标注时间间隔 crew_classTime_Arr:crew_classTime_Arr, scrollTime:'01:00:00', //滚动起始时间 displayEventTime:false, //默认不显示事件上的时间 // timeFormat: 'HH:mm',//事件上日期格式（默认事件不显示日期） minTime:'01:00:00', //最小开始时间 maxTime:'09:00:00',//最大开始时间 defaultTimedEventDuration:'01:00:00',//默认拖进事件 的时间间隔大小 // businessHours: {// 设置休息时间，不能排课的时间 // dow: [ 1, 2, 3, 4, 5 ],//每周日期 // start: '08:00', //开始 // end: '18:00' // 结束时间 // }, // contentHeight:500, // monthNames: [\一月\二月\三月\四月\五月\六月\七月\八月\九月\十月\十一月\十二月\// monthNamesShort: [\一月\二月\三月\四月\五月\六月\七月\八月\九月\十月\十一月\十二月\// dayNames: [\周日\周一\周二\周三\周四\周五\周六\// dayNamesShort: [\周日\\周一\\周二\\周三\\周四\\周五\周六\// today: [\今天\// firstDay: 1, buttonText: {

// today: '本月', month: '月', week: '周', day: '日'

// prev: '上一月', // next: '下一月' },

//点击一天时触发 dayClick: function (date, allDay, jsEvent, view) {

//当前日期 // alert(date); // alert(date.format('YYYY-MM-DD')); // alert(date.format('DD')); // if (typeof($(this).attr(\$(this).attr(\// $(this).css({'background-color': '#eaf4fa'}); // $(this).attr(\// showOperationDialog(\// } else { // $(this).css({'background-color': '#f8f8f8'}); // $(this).attr(\// $(this).find(\// } //添加事件 // vareventData; // if (title) { // eventData = { // title: title, // start: start, // end: end // }; // } // $('#calendar').fullCalendar('addEventSource',eventData); },

// 当点击某一个事件时触发此操作 eventClick: function (calEvent, jsEvent, view) {

// alert(calEvent.id); // $(this).css('border-color', 'red'); showOperationDialog(\, \); //删除事件 // $('#calendar').fullCalendar('removeEvents',\},

//当鼠标悬停在一个事件上触发此操作 eventMouseover: function(calEvent, jsEvent, view) {

//varfstart = $.fullCalendar.formatDate(calEvent.start, \ //var fend = $.fullCalendar.formatDate(calEvent.end, \ //$(this).attr('title', fstart + \ // 鼠标悬浮到title的时候可以设置展现哪些信息 $(this).attr('data-toggle', \); $(this).attr('data-placement', \);

varnewTitle=calEvent.title.replace(/fc-schedule-td-p/g,\).replace(\nt-blue\,\);

//$(this).attr('title', \$(this).css('font-weight', 'normal');

//用jqueyUI 的tooltip ,图层被遮挡，改为 layer tips //$(\ //layer.tips(newTitle,this, { // tips: [2, '#3192cb'] //}); layer.tips(newTitle,this, { tips: [2, '#3192cb'] });

//$(\ // $(this).tooltip({ // effect: 'toggle', // cancelDefault: true // }); },

//当鼠标从一个事件上移开触发此操作 eventMouseout: function (event, jsEvent, view) { },

droppable: true, //允许拖拽放置 //drop: function() { // if ($('#drop-remove').is(':checked')) { // $(this).remove();

// } //}, //drop: function(date, allDay) { drop: function( date, jsEvent, ui, resourceId ) {

if ($('#drop-remove').is(':checked')) { $(this).remove(); }

},

eventReceive:function(event){

//根据event.title内容，修改拖拽后的样式 //alert(event.title); event.className.push(\);

event.title= '

'+ '

' +

'

',

//event.title= '

' + //'

', $('#calendar').fullCalendar('renderEvent', event, true);//重新加载此事件 },

//设置title为html eventRender: function (event, element) {

//titile值改为html ,直接修改后，缩放不起作用，fc-content中少了子div(.fc-bg .fc-title fc-resizer ) //element.html(event.title); element.find(\).html(event.title);//cxy修改后的，不确定会不会有其他问题 },

//浏览器大小改变是触发 eventResize: function(event,dayDelta,minuteDelta,revertFunc) {

},

//拖拽之后触发（仅限控件内部事件） eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {

//alert(event.id); },

//事件被拖动之后触发 eventDragStop: function(event,jsEvent,ui,view) {

//alert(event.id); alert(123); },

//事件被拖动之前触发 eventDragStart: function(event,jsEvent,ui,view) {

//alert(event.id); // alert(234); },

//事件数据 events: [ { id:'test1',

//resourceId: 'b', title: '

' + '

', start: '2016-08-02 02:00', end: '2016-08-02 03:00', color: '#efffe3', textColor:'#444' },

{ id:'test2',

//resourceId: 'b', title: '

' + '

' +

'

', start: '2016-08-03 01:00', end: '2016-08-03 02:00', overlap: false,

//rendering: 'background', color: '#eedefb', textColor:'#444' },

{ id:'test3',

//resourceId: 'b', title: '

' + '

' +

'

', start: '2016-08-03 02:00', end: '2016-08-03 03:00', color: '#fcf7e5', textColor:'#444'

},

{ id:'test4',

//resourceId: 'b', title: '

' + '

' +

'

',

start: '2016-08-04 01:00', end: '2016-08-04 02:00', color: '#edf7fa', textColor:'#444' },

//颜色背景设置 // { // id: 'availableForMeeting', // start: '2016-08-02 08:00', // end: '2016-08-02 08:45', // rendering: 'background' // } ],

//动态取数据例子 // events: function (start, end, timezone, callback) { // $.ajax({ // type: \// url: '/routine/myschedules', // dataType: 'json', // data: {start: \+ start, end: \+ end, filter: $(\// success: function (doc) { var events = []; for (vari = 0; i'; // neihtml += ''; // neihtml += ''; // neihtml += '

' + b.content + '

'; // neihtml += ''; // neihtml += ''; // } varwaihtml = \for (vari = 0; i'; // waihtml += ''; // waihtml += ''; // waihtml += '

' + a.type + '

'; // waihtml += ''; //选择，可选择区域 selectable: true, selectHelper: true,

select: function(start, end) { vartitle = prompt('Event Title:'); vareventData; if (title) { eventData= { title: title, start: start, end: end

};

$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true }

$('#calendar').fullCalendar('unselect');

}

});

// //重新设置日历的某些属性 // $('#calendar').fullCalendar('option', { //// lang: 'fr', //// isRTL: true, // slotLabelFormat:'第H课', // }); });

$(function(){

$('#external-events .fc-event').each(function() {

$(this).data('event', { title: $.trim($(this).text()), stick: true });

$(this).draggable({ zIndex: 999, revert: true, revertDuration: 0 }); }); });

2、css代码

.fc-top { margin-top: 5px; width: 100%; }

.fc-top-title{ line-height: 18px; margin:2px 0; font-size: 14px; }

.fc-top-detail{ line-height: 18px; margin:5px; padding: 8px; background: #f8f8f8;

border-left: 7px solid #3192cb;

/*border-radius: 3px;*/ }

.external-events { padding: 0 8px;

border: 1px solid #ccc; background: #eee; text-align: left; }

.external-events h4 { font-size: 16px;

margin-top: 0; padding-top: 1em; }

.external-events .fc-event { margin: 5px 0; cursor: pointer; }

/*.external-events p {*/ /*margin: 1.5em 0;*/ /*font-size: 11px;*/ /*color: #666;*/ /*}*/ /*.external-events p input {*/ /*margin: 0;*/ /*vertical-align: middle;*/ /*}*/ .external-events-box{ }

.external-events-box>li>h5{ background: #f8f8f8; border: 1px solid #d5d5d5;

/*border-radius:5px ;*/ padding: 6px; cursor: pointer; }

.external-events-box .hbg{ background:#3192cb ; color: #fff; }

.external-events-box>li>ul{ display: none; }

/*.external-events-box>li:first-child h5{*/ /*background:#3192cb ;*/ /*color: #fff;*/ /*}*/ /*.external-events-box>li:first-childul{*/ /*display: block;*/ /*}*/ .fc-view .tooltip.right.tooltip-arrow { border-right-color: #3192cb; }

.fc-view .tooltip-inner { background-color: #3192cb; }

.fc-view .tooltip-inner h5 { font-size: 12px; color: #fff;

white-space: nowrap; padding: 10px 10px0 10px; }

.fc-view .tooltip.in { filter: alpha(opacity=100); opacity: 1; }

.fc-schedule-td-p{ margin: 3px 0; padding: 0;

display:block;/*内联对象需加*/ width:120px;

word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/ }

.fc-schedule-td-p-title{ margin: 3px 0; padding: 0; text-align: left; }

.fc-event{ margin: 1px 0; }

.fc-toolbar h2{

font-size: 20px; }

.fc-axis{

text-align: center!important; }

/******************************************对应颜色**********************************************/ /*ffeff4 粉 f7fff2 绿 f2fffe 青 fffaf2黄 f2f6ff/*课前准备 颜色无*/ /*补考类 颜色无*/ /*毕业类 颜色无*/ .bg-crew{

background: #ffffff!important; border: none!important; color: #444!important; }

/*服务类 颜色蓝*/ .bg-crew-service{

background: #d6e7ff !important; border: none!important; color: #444!important; }

/*应急类 颜色橙*/ .bg-crew-yingji{

background: #fff3cb !important; border: none!important; color: #444!important; }

/*医疗类 颜色绿*/ .bg-crew-yiliao{

background: #edffe1 !important; border: none!important; color: #444!important; }

/*保安类 颜色黄*/ .bg-crew-baoan{

background: #f9ffca !important; border: none!important; color: #444!important; }

紫 fcf2ff*/ /*其他类 颜色紫*/ .bg-crew-other{

background: #ffe8e8 !important; border: none!important; color: #444!important; }

.event-item{

color: #777!important; padding: 5px 3px; }

3、html代码

href=\/>

href=\/>

首页 > 排课

选择课程

应急类

行规范-客舱安全管理(1/4)

运行规范-安全规则和指导方针

运行规范-乘务员工作指导和要求

运行规范-旅客管理

服务类

法律法规

职业形象-化妆

职业形象-礼仪

职业形象-形体

职业形象-实操考核

医疗类

应急医疗

保安

保安

补考类

应急实操补考

服务实操补考

理论补考

从列表中删除

×

课程编辑

选择教员

选择教室

删除

关闭

保存

本文来源：https://www.bwwdw.com/article/dwnp.html