jquery日历插件 途牛_jQuery日历插件FullCalendar中文版

插件描述：FullCalendar是一个jQuery插件，提供全尺寸像事例中的拖拽日历。

使用方法：

1、body中插入以下html代码

2、引入文件

3、配置代码$(function() {

var get = '2020-05-14';

//$("#calendar").fullCalendar({

var calendar = $('#calendar').fullCalendar({

header: { //设置日历头部信息，false，则不显示头部信息。包括left，center,right左中右三个位置

left: 'prev,next, today', //上一个、下一个、今天

center: 'title', //标题

right: 'month,agendaWeek,agendaDay,listMonth' //月、周、日、日程列表

},

locale: 'zh-cn', //?没用？

timeFormat: 'HH:mm', //日程事件的时间格式

//      timeFormat: 'HH:mm{ - H:mm}',{agenda: ‘h:mm{ - h:mm}}

buttonText: { //各按钮的显示文本信息

today: '今天',

month: '月',

agendaWeek: '周',

agendaDay: '日',

listMonth: '日程',

},

//      columnFormat: {

//       month: 'dddd',

//       week: 'dddd M-d',

//       day: 'dddd M-d'

//   },

//titleFormat: {

//       month: 'yyyy年 MMMM月',

//       week: "[yyyy年] MMMM月d日 { '―' [yyyy年] MMMM月d日}",

//       day: 'yyyy年 MMMM月d日 dddd',

//   },

monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], //月份全称

monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], //月份简写

dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //周全称

dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //周简写

noEventsMessage: "当月无数据", //listview视图下，无数据提示

allDayText: "全天", //自定义全天视图的名称

allDaySlot: false, //是否在周日历上方显示全天

//      allDayDefault: false,//是否为全天日程事件，显示这一天中所做的事情

slotDuration: "00:30:00", //一格时间槽代表多长时间，默认00:30:00(30分钟)

slotLabelFormat: "H(:mm)a", //日期视图左边那一列显示的每一格日期时间格式

slotLabelInterval: "01:00:00", //日期视图左边那一列多长间隔显示一条日期文字(默认跟着slotDuration走的，可自定义)

snapDuration: "01:00:00", //其实就是动态创建一个日程时，默认创建多长的时间块

firstDay: 1, //一周中显示的第一天是哪天，周日是0，周一是1，类推

hiddenDays: [], //隐藏一周中的某一天或某几天，数组形式，如隐藏周二和周五：[2,5]，默认不隐藏，除非weekends设置为false。

weekends: true, //是否显示周六和周日，设为false则不显示周六和周日。默认值为true

weekMode: 'fixed', //月视图里显示周的模式，因每月周数不同月视图高度不定。fixed：固定显示6周高，日历高度保持不变liquid：不固定周数，高度随周数变化variable：不固定周数，但高度固定

weekNumbers: false, //是否在日历中显示周次(一年中的第几周)，如果设置为true，则会在月视图的左侧、周视图和日视图的左上角显示周数。

weekNumberCalculation: 'iso', //周次的显示格式。

height: 800, //设置日历的高度，包括header日历头部，默认未设置，高度根据aspectRatio值自适应。

//      contentHeight: 600,//设置日历主体内容的高度，不包括header部分，默认未设置，高度根据aspectRatio值自适应。

handleWindowResize: true, //是否随浏览器窗口大小变化而自动变化。

defaultView: 'month', //初始化时默认视图，默认是月month，agendaWeek是周，agendaDay是当天

//      slotEventOverlap: false,//事件是否可以重叠覆盖

defaultDate: get, //默认显示那一天的日期视图getDates(true)2020-05-10

nowIndicator: true, //周/日视图中显示今天当前时间点(以红线标记)，默认false不显示

eventLimit: false, //数据条数太多时，限制显示条数(多余的以“+2more”格式显示)，默认false不限制,支持输入数字设定固定的显示条数

eventLimitText: "更多", //当一块区域内容太多以"+2 more"格式显示时，这个more的名称自定义(应该与eventLimit: true一并用)

dayPopoverFormat: "YYYY年M月d日", //点开"+2 more"弹出的小窗口标题，与eventLimitClick可以结合用

render: function(view) { //method,绑定日历到id上。$('#id').fullCalendar('render');

console.log('render', view)

},

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

//$.ajax({

//type : "",

//url : "",

//dateType:'json',

//data:{

//'id': id,

//  'status': status,

//'startTime': status,

//  'endTime': endTime,

//  'duration': duration,

//  '': ,

//},

//success : function(data) {

//callback(data);

//if (data != null && data.length > 0) {

//   for(var i= 0; i 

//   //状态判断？？？

//   //颜色区分？？？

//   }

//},

//});

//},

//events: {

//url: 'json/events.json',

//error: function () {

//              alert("000");

//          }

//},

events: [

{

"title": "可以直接加跳转链接",

"start": "2020-05-13T09:00:00",

"end": "2020-05-13T14:00:00",

"duration": "03:00",

"url": "https://www.baidu.com/",

"className": "green"

}, {

"title": "标题123",

"start": "2020-05-13T12:00:00",

"end": "2020-05-14T13:00:00",

"duration": "05:00",

"className": "yellow"

}, {

"title": "标题456",

"start": "2020-05-16T10:30:00",

"end": "2020-05-16T12:30:00",

"className": "red"

}...

],

dayClick: function(date, allDay, jsEvent, view) { //空白的日期区点击

//        alert($.fullCalendar.formatDate(date, "YYYY-MM-DD"));

//      console.log('Clicked on: ' + date.format());

},

eventClick: function(event, jsEvent) { //日程事件点击

alert(event.title + event.start.format() + '______' + event.end.format() + '_______' + " ??详情");

//状态判断

//权限限制

},

eventMouseover: function() {}, //鼠标划过和离开的事件，用法和参数同上

eventMouseout: function() {},

selectable: true, //是否允许通过单击或拖动选择日历中的对象，包括天和时间

selectHelper: true, //当点击或拖动选择时间时，是否预先画出“日程区块”的样式显示默认加载的提示信息，该属性只在周/天视图里可用

selectMirror: true, //镜像

selectOverlap: false, //是否允许选择被事件占用的时间段，默认true可占用时间段

selectAllow: function(selectInfo) { //精确的控制可以选择的地方，返回true则表示可选择，false表示不可选择

console.log("start:" + selectInfo.start.format() + "|end:" + selectInfo.end.format() + "|resourceId:" + selectInfo.resourceId);

return true;

},

select: function(start, end, allDay) { //点击空白区域/选择区域内容触发

//       window.location.href= 'apply.html?start=' + start.format() + '?end=' + end.format();

var title = prompt(start.format() + '????' + end.format() + '标题标题:');

if (title) {

calendar.fullCalendar('renderEvent', { //一旦日历重新取得日程源，则原有日程将消失，当指定stick为true时，日程将永久的保存到日历上

title: title,

start: start,

end: end,

allDay: allDay,

//rendering: 'background',

block: true,

}, true); //为true时，日程将永久的保存到日历上，让事件“持久”

}

//       calendar.unselect()

},

//select: function(startDate, endDate, allDay, jsEvent, view ) {//被选中

startDate：被选中区域的开始时间

endDate：被选中区域的结束时间

allDay：是否为全天事件

jsEvent：jascript对象

view：当前视图对象

//var selectStart = $.fullCalendar.formatDate(startDate,'YYYY-MM-DD HH:mm');

//var selectEnd =$.fullCalendar.formatDate(endDate,'YYYY-MM-DD HH:mm');

//alert(selectStart + ' 至 ' + selectEnd);

//$("#calendar").fullCalendar('renderEvent',true);

//},

unselect: function(view, jsEvent) { //选择取消时触发

console.log("");

console.log("view:" + view);

},

lazyFetching: true, //是否启用懒加载技术--即只取当前条件下的视图数据，其它数据在切换时触发，默认true只取当前视图的，false是取全视图的

defaultTimedEventDuration: "02:00:00", //在Event Object中如果没有end参数时使用，如start=7:00pm，则该日程对象时间范围就是7:00~9:00

defaultAllDayEventDuration: {

days: 1

}, //默认1天是多长，(有的是采用工作时间模式，所以支持自定义)

//loading: function(isLoading, view) {

//      document.getElementById('加载').style.display =

//        isLoading ? 'block' : 'none';

//console.log("");

//       if(isLoading == true){

//           console.log("view:"+view+",开始加载");

//       }else if(isLoading == false){

//           console.log("view:"+view+",加载完成");

//       }else{

//           console.log("view:"+view+",除非天塌下来否则不会进这个分支");

//       }

//    },

editable: true, //支持日程拖动修改，默认false

//      eventStartEditable : true,      //日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTime

//      eventDurationEditable : false,  //日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽

dragOpacity: 0.2, //拖拽时不透明度，0.0~1.0之间，数字越小越透明

dragScroll: true, //是否在拖拽时自动移动容器，默认true

eventOverlap: true, //拖拽时是否重叠

eventConstraint: { //限制拖拽拖放的位置(即限制有些地方拖不进去)t

//          start: '10:00',     //开始时间10点

//          end: '18:00',       //结束时间18点

dow: [1, 2, 3, 4, 5, 6, 0] //0是周日，1是周一，以此类推

},

longPressDelay: 1000, //移动设备，长按多少毫秒即可拖动,默认1000毫秒(1S)

eventDragStart: function(event, jsEvent, ui, view) { //日程开始拖拽时触发

//          console.log("eventDragStart():"+event.title);

},

eventDragStop: function(event, jsEvent, ui, view) { //日程拖拽停止时触发

//          console.log("eventDragStop():"+event.title);

},

event: function(event, dayDelta, delta, revertFunc, jsEvent, ui, view) { //日程拖拽停止，并且时间改变时触发，ayDelta日程前后移动了多少天

//          console.log("event():"+event.title);

console.log('event被执行，Event的title是：', event.title);

if (dayDelta._days != 0) {

console.log('event被执行，Event的start和end时间改变了：', dayDelta._days + '天！');

} else if (dayDelta._milliseconds != 0) {

console.log('event被执行，Event的start和end时间改变了：', dayDelta._milliseconds / 1000 + '秒！');

} else {

console.log('event被执行，Event的start和end时间没有改变！');

}

//revertFunc();

},

eventResizeStart: function(event, jsEvent, ui, view) { //日程大小调整开始时触发

//          console.log("eventResizeStart():"+event.title);

},

eventResizeStop: function(event, jsEvent, ui, view) { //日程大小调整停止时触发

//          console.log("eventResizeStop():"+event.title);

},

eventResize: function(event, delta, revertFunc, jsEvent, ui, view) { //日程大小调整完成并已经执行更新时触发

//          console.log("eventResize():"+event.title);

},

});

//  calendar.render();

//  calendar.refetchEvents();//重新抓取所有事件，刷新

})