|
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 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 |
var calendar = $('#calendar').fullCalendar({ /** * 默認顯示的視圖 * month 一頁顯示一月, 日曆樣式 basicWeek 一頁顯示一周, 無特殊樣式 basicDay 一頁顯示一天, 無特殊樣式 agendaWeek 一頁顯示一周, 顯示詳細的24小時表格 agendaDay 一頁顯示一天, 顯示詳細的24小時表格 listYear 年列表（V3.*支持） listMonth 月列表（V3.*支持） listWeek 週列表（V3.*支持） listDay 日列表（V3.*支持） */ defaultView:"agendaWeek", //進入組件默認渲染的視圖，默認為month customButtons: {//自定義header屬性中按鈕[customButtons與header並用] myCustomButton: { text: 'custom!', click: function() { } } }, header: { left: 'prev,next today', //上一頁、下一頁、今天 center: 'title myCustomButton', //居中：時間範圍區間標題 right: 'month,agendaWeek,agendaDay,listWeek'//右邊：顯示哪些視圖 }, height : 600,//組件高度，默認aspectRatio即縱橫比；parent父容器大小；auto自動不帶滾動條； contentHeight : 200,//組件中的內容高度，默認aspectRatio即縱橫比；auto自動不帶滾動條；支持數字和函數返回像素； // aspectRatio : 2, //寬度:高度 比例，默認1.35，可自定義 handleWindowResize : false, //組件隨瀏覽器高寬變化自適應，默認true支持自適應 // windowResizeDelay : 200,//窗體自適應延遲多少毫秒 firstDay : 1, //視圖從每週幾開始，默認0為周日，1為周1， isRTL : false,//從右到左顯示模式，默認false // weekends : false,//是否在視圖中顯示週六、週日，默認true // hiddenDays: [ 1,5 ],//隱藏星期1、星期5 fixedWeekCount : false, //月視圖下，顯示6週（不夠的顯示下個月的）true；默認true weekNumbers : true, //是否在視圖左邊顯示這是第多少週，默認false // businessHours : {}//設置哪些時間段重點標記顏色 eventLimit: true,//數據條數太多時，限制各自裡顯示的數據條數（多餘的以“+2more”格式顯示），默認false不限制,支持輸入數字設定固定的顯示條數 // eventLimitClick : "day",//接eventLimit屬性，多餘的內容點擊事件，默認有一套彈窗格式，支持跳轉到不同視圖、也支持自定義function，詳情見官方文檔 viewRender : function(view,element){//在視圖被渲染時觸發（切換視圖也觸發） 參數view為視圖對象，參數element為Jquery的視圖Dom }, // viewDestroy : function(view, element){}, //類似viewRender，在視圖被銷毀時觸發 windowResize : function(){//瀏覽器窗體變化時觸發 }, // allDaySlot : false, //視圖在周視圖、日視圖頂部顯示“全天”信息，默認true顯示全天 allDayText : "全天", //自定義全天視圖的名稱 slotDuration : "01:00:00", //一格時間槽代表多長時間，默認00:30:00（30分鐘） slotLabelFormat : "H(:mm)a",//日期視圖左邊那一列顯示的每一格日期時間格式 slotLabelInterval : "02:00:00", //日期視圖左邊那一列多長間隔顯示一條日期文字(默認跟著slotDuration走的，可自定義) snapDuration : "05:00:00",//其實就是動態創建一個日程時，默認創建多長的時間塊 // scrollTime : "06:00:00",//多遠開始往下滾動，默認6小時 // minTime : "02:00:00",//週/日視圖左邊時間線顯示的最小日期，默認00:00:00 // maxTime : "08:00:00",//週/日視圖左邊時間線顯示的最大日期，默認24:00:00 slotEventOverlap : false,//相同時間段的多個日程視覺上是否允許重疊，默認true允許 // listDayFormat : false,//listview視圖下，每天的分割區，[左邊]的標題自定義，false表示無標題 // listDayAltFormat : false,//listview視圖下，每天的分割區，[右邊]的標題自定義，false表示無標題 noEventsMessage : "L沒數據啊", //listview視圖下，無數據時顯示提示 defaultDate : '2016-10-13',//默認顯示那一天的日期視圖 nowIndicator : true, //週/日視圖中顯示今天當前時間點（以紅線標記），默認false不顯示 // locale : "zh-cn", //國際化，前提引用fileinput_locale_zh.js // timeFormat : "h:mm", //全局的日期顯示格式(自定義成如12:00或12am等) // columnFormat : "", //頂部日期顯示格式 // titleFormat : "",//頂部title區域格式化 buttonText : {today:'今天',month:'月',week:'週',day:'日',listWeek:'列表'}, //對應頂部操作按鈕的名稱自定義 monthNames : ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //月份自定義命名 monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //月份縮略命名（英語比較實用：全稱January可設置縮略為Jan） dayNames: ["週日", "週一", "週二", "週三", "週四", "週五", "週六"], dayNamesShort: ["週日", "週一", "週二", "週三", "週四", 週五, "六"], weekNumberTitle : "週",//週的國際化,默認為"W" // displayEventTime : false,//每一個日程塊中是否顯示時間，默認true顯示 // displayEventEnd : true,//是否顯示日程塊中的“結束時間”，默認true，如果false則只顯示開始時間 eventLimitText : "更多", //當一塊區域內容太多以"+2 more"格式顯示時，這個more的名稱自定義（應該與eventLimit: true一併用） dayPopoverFormat : "YYYY年M月D日", //點開"+2 more"彈出的小窗口標題，與eventLimitClick可以結合用 navLinks : true,// “xx週”是否可以被點擊，默認false，如果為true則周視圖“週幾”被點擊之後進入日視圖。本地測試：沒什麼效果 // navLinkDayClick: function(date, jsEvent) { //依賴navLinks : true ， 點擊頂部“日”時觸發 // return true; // }, // navLinkWeekClick: function(weekStart, jsEvent) { //依賴navLinks : true ， 點擊頂部“週”時觸發 }, dayClick: function(date, jsEvent, view) {//空白的日期區，單擊時觸發 }, eventClick: function(calEvent, jsEvent, view) {//日程區塊，單擊時觸 return false; //return false可以阻止點擊後續事件發生（比如event中的url跳轉事件） }, eventMouseover: function(calEvent, jsEvent, view){//鼠標在日程區塊上時觸發 $(this).css('background-color', 'gray'); }, eventMouseout: function(calEvent, jsEvent, view){//鼠標從日程區塊離開時觸發 $(this).css('background-color', 'yellow'); }, selectable: true,//允許用戶可以長按鼠標選擇多個區域(比如月視圖，可以選中多天；日視圖可以選中多個小時)，默認false不能選擇多區域的 selectHelper: true,//接selectable，週/日視圖在選擇時是否預先畫出“日程區塊”的樣式出來 unselectAuto : true,//是否點擊頁面上的其他地方會導致當前的選擇被清除，默認true unselectCancel : "",//一種方法來指定元素，會忽略unselectauto選項，默認'' selectOverlap : true,//確定用戶是否被允許選擇被事件佔用的時間段，默認true可佔用時間段 // selectConstraint : ,//限制用戶選擇指定時間段的日程數據：an event ID, "businessHours", object selectAllow : function(selectInfo){ //精確的編程控制用戶可以選擇的地方，返回true則表示可選擇，false表示不可選擇 return true; }, select: function(start, end,jsEvent,view) { //點擊空白區域/選擇區域內容觸發 }, unselect : function(view, jsEvent){//選擇操作取消時觸發 }, /**Event Object配置start */ // allDayDefault : null,//是否默認將日程全部顯示在“全天”裡面(boolean or null)，默認為undefined，即根據event時間值智能判斷，這個屬性太強悍，不敢用 // startParam:"start",//Event Object中定義[開始時間]的變量，默認是start，可自定義變量名以防衝突 // endParam:"end", //Event Object中定義[結束時間]的變量，默認是end，可自定義變量名以防衝突 // timezoneParam : "timezone", //Event Object中定義[時區]的變量，默認是本地時區，可自定義變量名以防衝突，可更改時區如（ "America/Chicago" or "UTC"） lazyFetching : true, //是否啟用懶加載技術--即只取當前條件下的視圖數據，其它數據在切換時觸發，默認true只取當前視圖的，false是取全視圖的 defaultTimedEventDuration : "02:00:00", //在Event Object中如果沒有end參數時使用，如start=7:00pm，則該日程對象時間範圍就是7:00~9:00 defaultAllDayEventDuration : { days: 1 }, //默認1天是多長，（有的是採用工作時間模式，所以支持自定義） // forceEventDuration : false, //訴老夫無能為力，愣是沒搞懂什麼意思，默認false // eventDataTransform : function(eventData){return [events...]}, //當從第三方取數不規則時（如下面的JSON或google），可通過此鉤子函數進行數據整理，轉換為fullcalendar識別的event object loading : function(isLoading, view){ //視圖數據加載中、加載完成觸發 if(isLoading == true){ console.log("view:"+view+",開始加載"); }else if(isLoading == false){ console.log("view:"+view+",加載完成"); }else{ console.log("view:"+view+",除非天塌下來否則不會進這個分支"); } }, // nextDayThreshold : "09:00:00", //當一個事件的結束時間跨越到另一天，最短的時間，它必須為它的渲染，如果它在這一天。 eventOrder : "title", //多個相同的日程數據排序方式，String / Array / Function, 默認值: "title" eventRender : function(event, element, view) {//當Event對像開始渲染時觸發 }, // eventAfterRender : function( event, element, view ) { } //當Event對象結束渲染時觸發 eventAfterAllRender : function(view){ }, //當所有Event對象渲染完成時觸發 // eventDestroy : function( event, element, view ) { }//一個Event DOM銷毀時觸發 /**Event Object配置end */ /**Event Rendering配置(一些樣式等配置) start*/ // eventColor: '#378006', //不解釋，所有的日程區塊生效，如要對指定數據源生成參見EventSource，如要對指定Event生效，參見EventObject // eventBackgroundColor:"", //同上，不解釋 // eventBorderColor:"", //同上，不解釋 // eventTextColor:"" //同上，不解釋 /**Event Rendering配置 end*/ editable: true,//支持Event日程拖動修改，默認false eventStartEditable : true, //Event日程開始時間可以改變，默認true，如果是false其實就是指日程塊不能隨意拖動，只能上下拉伸改變他的endTime eventDurationEditable : false, //Event日程的開始結束時間距離是否可以改變，默認true，如果是false則表示開始結束時間範圍不能拉伸，只能拖拽 // dragRevertDuration : 500, //拖拽取消恢復花費時間，單位毫秒，這個就用默認的差不多了 dragOpacity:0.2,//拖拽時不透明度，0.0~1.0之間，數字越小越透明 dragScroll : true,//是否在拖拽時自動移動容器，默認true eventOverlap : true, //拖拽時是否重疊 eventConstraint : {//限制拖拽拖放的位置（即限制有些地方拖不進去）：an event ID, "businessHours", object start: '10:00', // a start time (10am in this example) end: '18:00', // an end time (6pm in this example) dow: [ 1, 2, 3, 4 ] // days of week. an array of zero-based day of week integers (0=Sunday) (Monday-Thursday in this example) }, longPressDelay : 1000, //面向可touch設備（如移動設備），長按多少毫秒即可拖動,默認1000毫秒（1S） eventDragStart : function(event, jsEvent, ui, view){//日程開始拖拽時觸發 }, eventDragStop : function(event, jsEvent, ui, view){//日程拖拽停止 }, eventDrop : function(event, delta, revertFunc, jsEvent, ui, view){ //日程拖拽停止並且已經拖拽到其它位置了 }, eventResizeStart : function( event, jsEvent, ui, view ) { //日程大小調整開始時觸發 }, eventResizeStop : function(event, jsEvent, ui, view){ //日程大小調整停止時觸發 }, eventResize : function(event, delta, revertFunc, jsEvent, ui, view){ //日程大小調整完成並已經執行更新時觸發 }, /* 訪問後台URL，動態返回JSON數據的形式，這種是直接集成了jQuery.ajax，其實並不靈活 events: { url: '/myfeed.php', type: 'POST', data: { custom_param1: 'something', custom_param2: 'somethingelse' }, error: function() { alert('there was an error while fetching events!'); }, color: 'yellow', // a non-ajax option textColor: 'black' // a non-ajax option }, */ /* 第二種：基於function的數據獲取，通常是在切換上一頁、下一頁、視圖切換時觸發，非常適合動態數據獲取 events: function(start, end, timezone, callback) { $.ajax({ url: 'myxmlfeed.php', dataType: 'xml', data: { // our hypothetical feed requires UNIX timestamps start: start.unix(), end: end.unix() }, success: function(doc) { var events = []; $(doc).find('event').each(function() { events.push({ title: $(this).attr('title'), start: $(this).attr('start') // will be parsed }); }); callback(events); } }); }, */ events: [//第三種：直接是數組的形式傳入 { title: 'All Day Event', start: '2016-10-13' }, { title: 'Long Event', start: '2016-10-07', end: '2016-10-10' }, { id: 991, title: 'Repeating Event', start: '2016-10-09T16:00:00' }, { id: 999, title: 'Repeating Event', start: '2016-10-16T16:00:00' }, { title: 'Conference', start: '2016-10-11', end: '2016-10-13' }, { title: 'Meeting', start: '2016-10-12T10:30:00', end: '2016-10-12T12:30:00' }, { title: 'Lunch', start: '2016-10-12T12:00:00' }, { title: 'Meeting', start: '2016-10-12T14:30:00' }, { title: 'Happy Hour', start: '2016-10-12T17:30:00' }, { title: 'Dinner', start: '2016-10-12T20:00:00' }, { title: 'Birthday Party', start: '2016-10-13T07:00:00' }, { title: 'Click for Google', url: 'http://google.com/', start: '2016-10-28' } ] /* 多數據源支持:場景可能是從多種模塊取數據，比如從會議取會議日程、從計劃取計劃日程，而且要求會議、計劃日程顏色顯示不一樣，那麼就可以用這種 eventSources: [ { events: function(start, end, timezone, callback){...}, color: 'black', // an option! textColor: 'yellow' // an option! }, { googleCalendarId: '[email protected]', color: 'yellow', // an option! textColor: 'black' // an option! } ] */ }); // 日期格式需要遵守fullCalendar引用的moment.js規則：https://fullcalendar.io/docs/utilities/Moment/ // Event Object 就是一個日程區塊，數據元，通常以數組的形式傳入option->events中 見 https://fullcalendar.io/docs/event_data/Event_Object/ // Event Source Object 不好理解，大概就是一組日程數據源對象吧，可以是一個events、也可以是JSON、還可以是Google Calendar的數據見https://fullcalendar.io/docs/event_data/Event_Source_Object / /* updateEvent更新一個日程對象 $('#calendar').fullCalendar({ eventClick: function(event, element) { event.title = "CLICKED!"; //更新日程對象信息 $('#calendar').fullCalendar('updateEvent', event); } }); */ // .fullCalendar( 'clientEvents' [, idOrFilter ] ) -> Array 從內存中篩選指定的event,[, idOrFilter ]==>省略號刪除全部、ID數組刪除有ID的日程、也可傳入Event對象，建議使用時詳細查看官方文檔 // .fullCalendar( 'removeEvents' [, idOrFilter ] ) 刪除日程，[, idOrFilter ]參見clientEvents，建議使用時詳細查看官方文檔 // .fullCalendar( 'refetchEvents' ) 刷新所有數據源的日曆視圖，建議使用時詳細查看官方文檔 // .fullCalendar( 'refetchEventSources', sources ) 刷新指定數據源的日曆視圖（與eventSource有關配合用），建議使用時詳細查看官方文檔 // .fullCalendar( 'addEventSource', source ) 動態添加一個數據源（與eventSource有關配合用），建議使用時詳細查看官方文檔 // .fullCalendar( 'removeEventSource', source ) 動態刪除一組數據源（與eventSource有關配合用），建議使用時詳細查看官方文檔 // .fullCalendar( 'removeEventSources', optionalSourcesArray ) 動態刪除多個數據源，如果optionalSourcesArray未指定則刪除全部，建議使用時詳細查看官方文檔 // .fullCalendar( 'getEventSources' ) 返回所有的數據源 // .fullCalendar( 'getEventSourceById', id ) 根據ID獲取數據源 // $('#calendar').fullCalendar('render'); 渲染日曆視圖 // $('#calendar').fullCalendar('destory'); 銷毀日曆視圖 // var view = $('#calendar').fullCalendar('getView'); //獲取當前視圖對象 // console.log("name:"+view.name+"|title:"+view.title+"|start:"+view.start+"|end:"+view.end+"|intervalStart:"+view.intervalStart+ "|intervalEnd:"+view.intervalEnd); // $('#calendar').fullCalendar('changeView', "month" ); //切換為其它視圖 // $('#calendar').fullCalendar('prev'); //切換到當前視圖的上一頁（類似於頂部的“<”箭頭） // $('#calendar').fullCalendar('next'); //切換到當前視圖的下一頁（類似於頂部的“>”箭頭） // $('#calendar').fullCalendar('prevYear') //切換到上一年 // $('#calendar').fullCalendar('nextYear') //切換到下一年 // $('#calendar').fullCalendar('today'); //日期視圖跳轉到“今天” // $('#calendar').fullCalendar( 'gotoDate', date ); //日期視圖跳轉到指定時間 // $('#calendar').fullCalendar( 'incrementDate', duration ); //日期視圖向前或向後移動固定的時間，duration可以為={ days:1, hours:23, minutes:59 } // var moment = $('#calendar').fullCalendar('getDate'); //獲取當前視圖的日期對象，（如果月視圖則返回月初到月末，週視圖返回周初到週末） // console.log("The current date of the calendar is " + moment.format()); // $('#calendar').fullCalendar( 'select', start, [ end ], [ resource ] ); //js動態選擇某個時間段的日程 // .fullCalendar( 'unselect' ); //js動態取消選擇的日程 // var locale = $('#calendar').fullCalendar('option', 'locale'); //option支持get，注：不僅限於locale，還包括其它option操作 // $('#calendar').fullCalendar('option', {locale: 'fr',isRTL: true}); //option支持set，注：不僅限於locale，還包括其它option操作 // var calendar = $('#calendar').fullCalendar('getCalendar'); //支持動態綁定/解綁fullcalendar中的事件 // calendar.on('dayClick', function(date, jsEvent, view) {console.log('clicked on ' + date.format());}); // .fullCalendar( 'renderEvent', event [, stick ] ); //渲染一個新的Event，建Demo select方法 // .fullCalendar( 'rerenderEvents' ) //渲染那所有的Event }); |