fullcalendar php,php使用fullcalendar日历插件详解，fullcalendar日历

php使用fullcalendar日历插件详解，fullcalendar日历

最近做课程表的项目，找了好多个插件感觉都不好用，无意间看到了fullcalendar，还挺简单的，很方便，先贴一张项目页面

//获取当前日期

var myDate = new Date();

var defaultDate = myDate.getFullYear() +'-'+(myDate.getMonth()+1)+'-'+myDate.getDate()

$(document).ready(function() {

$('#calendar').fullCalendar({

header: { //顶部显示信息

left: 'prev,next today',

center: 'title',

right: 'month,agendaWeek,agendaDay,listMonth'

},

defaultDate: defaultDate, //默认显示日期

navLinks: true, // can click day/week names to navigate views

defaultView:'agendaWeek', //初始化时的默认视图默认显示周

allDaySlot: false, //是否显示all-day

slotLabelFormat:'H:mm', //左侧时间显示格式

minTime : '06:00:00', //左侧时间从几点开始

maxTime : '22:00:00', //左侧时间从几点结束

locale: 'zh-cn', //显示中文

selectable: true, //设置是否可被单击或者拖动选择

eventLimit: true, //如果数据过多超过日历格子显示的高度时，多出去的数据不会将格子挤开，而是显示为 +...more ，点击后才会完整显示所有的数据

// 点击课程信息事件，并弹窗

eventClick: function(calEvent, jsEvent, view) {

console.log('cycle_id:' + calEvent.id); //点击的课程周期id

console.log('sel_type:' + calEvent.sel_type); //点击的课程周期类型 1单次 2重复

// 弹出一个页面

layer.open({

type: 2,

title: '课程表信息',

shadeClose: true,

shade: [0.5, '#000'],

maxmin: true, //开启最大化最小化按钮

area: ['900px', '650px'],

content: "/school/Course_Table/cycleInfo.html?cycle_id="+calEvent.id,

end: function () {

// 刷新父窗口

location.reload();

}

});

},

// 点击空白区域，获取选择的日期时间范围，并弹窗

select: function(startDate, endDate) {

selDate = startDate.format('YYYY-MM-DD'); //选中的开始日期

layer.open({

type: 2,

title: '周期排课',

shadeClose: true,

shade: [0.5, '#000'],

maxmin: true, //开启最大化最小化按钮

area: ['900px', '650px'],

content: "/school/Course_Table/addCycle2.html?selDate="+selDate,

end: function () {

// 刷新父窗口

location.reload();

}

});

},

// 日期显示格式

views: {

month: {

titleFormat: 'YYYY年MM月'

},

agenda: {

titleFormat: 'YYYY年MM月DD日'

},

week: {

titleFormat: 'YYYY年MM月DD日'

},

},

// 鼠标移上的提示 使用bootstorp的提示

eventRender: function(eventObj, $el) {

$el.popover({

content: eventObj.description,

trigger: 'hover',

placement: 'top',

container: 'body'

});

},

// 获取要显示的数据 返回的是json格式

events: function(start,end,timezone, callback) {

$.ajax({

url: "{:url('courseTable')}",

dataType: 'json',

type:"POST",

success: function(data) {

if (data.status == 0) {

callback(data.msg);

}else{

layer.msg('网络错误');

}

},

error:function () {

layer.msg('网络错误');

}

});

}

});

});

body {

/*margin: 40px 10px;*/

padding: 0;

font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;

font-size: 14px;

}

#calendar {

max-width: 1200px;

margin: 0 auto;

}

//加载layui

layui.use(['layer','element','form'], function(){

var layer = layui.layer

,element = layui.element

,form = layui.form;

});