插件描述：FullCalendar是一个jQuery插件，提供全尺寸像事例中的拖拽日历。
使用方法：
1、body中插入以下html代码
1 | <div id="calendar"></div> |
2、引入文件
1 2 3 4 5 6 7 8 | <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><link rel="stylesheet" type="text/css" href="css/fullcalendar.css" /><link rel="stylesheet" type="text/css" href="css/index.css"/><script type="text/javascript" src="js/bootstrap.min.js" ></script><script type="text/javascript" src="js/moment.min.js" ></script><!-- 日期处理时间工具 --><script type="text/javascript" src="js/fullcalendar.min.js" ></script><script type="text/javascript" src="js/index.js" ></script> |
3、配置代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 | $(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 < data.length; 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", "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("");特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！ 本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！ 如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
|