溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
JS日程管理插件FullCalendar提供了豐富的屬性設置和方法調(diào)用，開發(fā)者可以根據(jù)FullCalendar提供的API快速完成一個日歷日程的開發(fā)，本文將FullCalendar的常用屬性和方法、回調(diào)函數(shù)等整理成中文文檔，以供參閱
普通顯示設置
| 屬性 | 描述 | 默認值 |
| header | 設置日歷頭部信息。 如果設置為false，則不顯示頭部信息。包括left，center,right左中右三個位置，每個位置都可以對應以下不同的配置： title: 顯示當前月份/周/日信息 prev: 用于切換到上一月/周/日視圖的按鈕 next: 用于切換到下一月/周/日視圖的按鈕 prevYear：用于切換到上一年視圖的按鈕 nextYear：用于切換到下一年視圖的按鈕 |
{ left: 'title', center: '', right: 'today prev,next' } |
| theme | 是否允許使用jquery的ui主題，如果設置為true，則需要加載jQuery ui相關css和js文件。 | false |
| buttonIcons | 設置header中使用的prev, next等變量對應按鈕的樣式，只有當theme為true時才有效，如果你調(diào)用了jQuery ui樣式但又不想使用它的圖標樣式，可以將此屬性設置為false | { prev: 'circle-triangle-w', next: 'circle-triangle-e' } |
| firstDay | 設置一周中顯示的第一天是哪天，周日是0，周一是1，類推。 | 0 |
| isRTL | 設置為ture時則日歷從右往左顯示，貌似是針對阿拉伯人設計的。 | false |
| weekends | 是否顯示周末，設為false則不顯示周六和周日。 | true |
| hiddenDays | 隱藏一周中的某一天或某幾天，數(shù)組形式，如隱藏周二和周五：[2,5]，默認不隱藏，除非weekends設置為false。 | [] |
| weekMode | 在月視圖里顯示周的模式，因為每月周數(shù)可能不同，所以月視圖高度不一定。 fixed：固定顯示6周高，日歷高度保持不變 liquid：不固定周數(shù)，高度隨周數(shù)變化 variable：不固定周數(shù)，但高度固定 |
'fixed' |
| weekNumbers | 是否在日歷中顯示周次(一年中的第幾周)，如果設置為true，則會在月視圖的左側(cè)、周視圖和日視圖的左上角顯示周數(shù)。 | false |
| weekNumberCalculation | 周次的顯示格式。 | "iso" |
| height | 設置日歷的高度，包括header日歷頭部，默認未設置，高度根據(jù)aspectRatio值自適應。 | |
| contentHeight | 設置日歷主體內(nèi)容的高度，不包括header部分，默認未設置，高度根據(jù)aspectRatio值自適應。 | |
| aspectRatio | 設置日歷單元格寬度與高度的比例。 | 1.35 |
| handleWindowResize | 是否隨瀏覽器窗口大小變化而自動變化。 | true |
| windowResize | callback，當瀏覽器窗口變化時觸發(fā)function，使用： $('#calendar').fullCalendar({ windowResize: function(view) { alert('The calendar has adjusted to a window resize'); } }); |
|
| render | method，綁定日歷到id上。 $('#id').fullCalendar('render'); |
|
| destroy | method，銷毀id日歷，把日歷回復到初始化前狀態(tài)。 $('#id').fullCalendar('destroy'); |
|
視圖
FullCalendar提供五種可用視圖，包括month（月視圖），basicWeek（基本周視圖，左側(cè)不顯示具體時間），basicDay（基本日視圖，左側(cè)不顯示具體時間），agendaWeek（周視圖），agendaDay（日視圖）。
View視圖對象的屬性：
| 屬性 | 描述 |
| name | 包括month,basicWeek,basicDay,agendaWeek,agendaDay |
| title | 標題內(nèi)容(例如"2013年9月" or "Sep 7 - 13 2013") |
| start | Date類型, 該view下的第一天 |
| end | Date類型, 該view下的最后一天. 由于是一個閉合的值, 所以, 比如在month view下, 10月這個月份, 那么end對應的應該是11月的第一天 |
| visStart | Date類型. 在該view下第一個可以訪問的day. month view下, 該值是當月的第一天, week view下, 則通常和start一致 |
| visEnd | Date類型, 最后一個可訪問的day |
View其他屬性和方法
| 屬性 | 描述 | 默認值 |
| defaultView | 日歷初始化時默認視圖 | 'month' |
| getView | method，取得視圖對象信息，如獲取當前視圖的標題內(nèi)容： var view = $('#calendar').fullCalendar('getView'); alert("The view's title is " + view.title); |
|
| changeView | method，切換視圖 .fullCalendar('changeView',viewName) viewName為5種視圖中的一種 |
|
日程選項
以下選項設置適用于agendaWeek和agendaDay視圖里。
| 屬性 | 描述 | 默認值 |
| allDaySlot | 在agenda視圖模式下，是否在日歷上方顯示all-day(全天) | true |
| allDayText | 定義日歷上方顯示全天信息的文本 | 'all-day' |
| axisFormat | 設置日歷agenda視圖下左側(cè)的時間顯示格式，默認顯示如：5:30pm | 'h(:mm)tt' |
| slotMinutes | 在agenda的視圖中, 兩個時間之間的間隔(分鐘) | 30 |
| defaultEventMinutes | 事件默認的時間執(zhí)行長度，如果事件對象沒有指定執(zhí)行多長時間，則默認執(zhí)行兩個小時 | 120 |
| firstHour | 當切換到agenda時，初始滾動條滾動到的時間位置，默認在6點鐘的位置 | 6 |
| minTime | 設置顯示的時間從幾點開始 | 0 |
| maxTime | 設置顯示的時間從幾天結(jié)束 | 24 |
| slotEventOverlap | 設置視圖中的事件顯示是否可以重疊覆蓋 | true |
當前日期設置
| 屬性 | 描述 | 默認值 |
| year | 設置日歷年份，必須為4位如：2013，如果不設置則默認為當前年份 | |
| month | 設置初始化日歷的月份，從0開始，如果年份和月份都未指定，則從一月開始。 | |
| date | 設置日歷初始化時的日期，只有在周視圖和日視圖中有效 | |
| prev | method，進入到上一月（周、天）視圖 $('#calendar').fullCalendar('prev'); |
|
| next | method，進入到下一月（周、天）視圖 $('#calendar').fullCalendar('next'); |
|
| prevYear | method，進入上一年視圖 | |
| nextYear | method，進入下一年視圖 | |
| today | method，進入當天 | |
| gotoDate | method，指定進入日歷中的某一天 $('#calendar').fullCalendar( 'gotoDate', year [, month, [ date ]] ) |
|
| incrementDate | method， 以當前時間為軸, 將日歷向前, 或向后移動指定長度的時間, 比如: $('#calendar').fullCalendar(‘incrementDate', -3, 2, -5)就表示將日歷年份向前移動3年, 月份向后移動2月, day(天數(shù))向前移動5天。 | |
| getDate | method，返回當前日歷中的日期 | |
文本與時間定制
你可以根據(jù)項目需求設置日歷顯示的文本信息，如中文的月份等。
| 屬性 | 描述 | 默認值 |
| timeFormat | 設置顯示的日程事件的時間格式，如timeFormat: 'H:mm' 則顯示24小時制的像10:30 | {agenda: ‘h:mm{ - h:mm}} |
| columnFormat | 設置顯示日歷每列表頭信息的格式文本，默認： { month: 'ddd', // Mon week: 'ddd M/d', // Mon 9/7 day: 'dddd M/d' // Monday 9/7 } |
見描述 |
| titleFormat | 設置用于顯示日歷頭部的文本信息，默認： { month: 'MMMM yyyy', // September 2013 week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}", // Sep 7 - 13 2013 day: 'dddd, MMM d, yyyy' // Tuesday, Sep 8, 2013 } |
見描述 |
| buttonText | 設置日歷頭部各按鈕的顯示文本信息，默認： { prev: '‹', // ‹ next: '›', // › prevYear: '«', // « nextYear: '»', // » today: 'today', month: 'month', week: 'week', day: 'day' } |
見描述 |
| monthNames | 月份全稱，默認： ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] |
見描述 |
| monthNamesShort | 月份名稱簡寫，默認：['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] | 見描述 |
| dayNames | 星期全稱，默認：['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] | 見描述 |
| dayNamesShort | 星期名稱簡寫，默認：['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] | 見描述 |
| weekNumberTitle | 周次，即一年中的第幾周 | "W" |
鼠標單擊和滑過
以下列出的是當鼠標單擊或者滑過日歷中的某個元素時，回調(diào)的函數(shù)callback。
| 屬性 | 描述 |
| dayClick | 當單擊日歷中的某一天時，觸發(fā)callback，用法： $('#calendar').fullCalendar({ dayClick: function(date, allDay, jsEvent, view) { do something... } }); date是點擊的day的時間(如果在agenda view, 還包含時間)，在月view下點擊一天時，allDay是true，在agenda模式下，點擊all-day的窄條時，allDay是true，點擊其他的agenda view下的day則為false，jsEvent就是一個普通的javascript事件，包含的是click事件的基礎信息。 |
| eventClick | 當點擊日歷中的某一日程（事件）時，觸發(fā)此操作，用法： $('#calendar').fullCalendar({ dayClick: function(event, jsEvent, view) { do something... } }); event是日程（事件）對象，jsEvent是個javascript事件，view是當前視圖對象。 |
| eventMouseover eventMouseout |
鼠標劃過和離開的事件，用法和參數(shù)同上 |
選擇操作
| 屬性 | 描述 | 默認值 |
| selectable | 是否允許用戶通過單擊或拖動選擇日歷中的對象，包括天和時間。 | false |
| selectHelper | 當點擊或拖動選擇時間時，顯示默認加載的提示信息，該屬性只在周/天視圖里可用。 | false |
| unselectAuto | 當點擊頁面日歷以外的位置時，是否自動取消當前的選中狀態(tài)。 | true |
| unselectCancel | 指定哪些元素不會清空當前的選中，以JQUERY選擇器的方式指定 '#someId'。 | '' |
| select | callback，被選中的函數(shù)回調(diào)，使用方法： function( startDate, endDate, allDay, jsEvent, view ) startDate：被選中區(qū)域的開始時間 endDate：被選中區(qū)域的結(jié)束時間 allDay：是否為全天事件 startDate：jascript對象 startDate：當前視圖對象 |
|
| unselect | callback，選中被取消時的回調(diào)，使用方法： function( view, jsEvent ) |
|
| select | method，選中某個時間，使用方法： $('#calendar').fullCalendar( 'select', startDate, endDate, allDay ) |
|
| unselect | method，取消選中，使用方法： $('#calendar').fullCalendar( 'unselect' ) |
|
日程事件數(shù)據(jù)
FullCalendar最重要的部分，設置用于日程事件相關信息。
Event Object，事件對象，用來存儲一個日歷事件信息的標準對象，只有title和start是必須的
| 屬性 | 描述 |
| id | 可選，事件唯一標識，重復的事件具有相同的id |
| title | 必須，事件在日歷上顯示的title |
| allDay | 可選，true or false，是否是全天事件。 |
| start | 必須，事件的開始時間。 |
| end | 可選，結(jié)束時間。 |
| url | 可選，當指定后，事件被點擊將打開對應url。 |
| className | 指定事件的樣式。 |
| editable | 事件是否可編輯，可編輯是指可以移動, 改變大小等。 |
| source | 指向次event的eventsource對象。 |
| color | 背景和邊框顏色。 |
| backgroundColor | 背景顏色。 |
| borderColor | 邊框顏色。 |
| textColor | 文本顏色。 |
事件源對象
事件源即日歷中的數(shù)據(jù)來源，F(xiàn)ullCalendar提供了數(shù)組、函數(shù)調(diào)用、以及JSON數(shù)據(jù)的形式，當然也可以通過Google Calendar feed獲取數(shù)據(jù)接口。jb51.net后面會有文章專門介紹事件數(shù)據(jù)的操作，包括數(shù)據(jù)的查詢、寫入、更新和刪除操作。
以下是Event事件相關的參數(shù)屬性說明。
| 屬性 | 描述 | 默認值 |
| eventSources | 事件源，存儲數(shù)組對象，可以是Arrays/Functions/URLs。 | |
| allDayDefault | 是否為全天日程事件，顯示這一天中所做的事情。 | true |
| ignoreTimezone | 是否忽略時區(qū)。 | true |
| startParam | 在使用URL方式獲取events數(shù)據(jù)源的時候, 自動插入到URL中的參數(shù), 表示當前需要抓取的日程事件的起始時間。 | 'start' |
| endParam | 和startParam參數(shù)意義相同, 表示要抓取的日程事件的終止時間。 | 'end' |
| lazyFetching | 是否從緩存信息獲取event。比如從月視圖切換到周視圖。 | true |
| eventDataTransform | callback，將外部數(shù)據(jù)源轉(zhuǎn)換成Fullcalendar可以處理的數(shù)據(jù) | |
| loading | callback，日歷開始加載的時候，isLoading參數(shù)為true觸發(fā)一次，日歷加載完畢，isLoading參數(shù)為false觸發(fā)一次，用法： function(isLoading, view) |
|
| updateEvent | method，更新日歷空間中的一個日程事件，如果是重復的日程事件，則都更新。用法： $('#calendar').fullCalendar( 'updateEvent', event ) |
|
| clientEvents | method，返回FullCalendar已經(jīng)存儲到客戶端的CalEvents對象數(shù)組， 第二個參數(shù)和removeEvents方法的第二個參數(shù)意義相同， 只不過在過濾器中， 如果返回true， 則該CalEvent對象將被加入到返回的數(shù)組中。 | |
| removeEvents | method，從日歷中刪除一個日程事件. 第二個參數(shù)可以不填， 可以填id， 可以是一個過濾器(一個函數(shù)， 接受CalEvent對象作為參數(shù))。用法： $('#calendar').fullCalendar( 'removeEvents' [, idOrFilter ] ) |
|
| refetchEvents | method，重新抓取所有的日程事件源上的日程事件并渲染它們。 | |
| addEventSource | method，添加一個日程事件源，添加之后， FullCalendar會馬上從該源獲取日程事件， 并加載到日歷中。第二個參數(shù)和定義Calendar時候使用的url參數(shù)一致。 | |
| removeEventSource | method，移除一個日程事件源，該源上獲取得到的日程時間也將被馬上從日歷中移除。 | |
事件渲染
| 屬性 | 描述 |
| eventColor eventBackgroundColor eventBorderColor eventTextColor |
設置日程事件的背景色和邊框色，以及文本顏色?？梢允褂萌我庵С謈ss的顏色方式，如 #f00, #ff0000, rgb(255,0,0), or red。 |
| eventRender | callback，當日程事件渲染時觸發(fā)，用法： function(calEvent, element, view) |
| eventAfterRender | callback，當日程事件被渲染后觸發(fā)，用法： function( event, element, view ) { } |
| eventDestroy | callback，當日程事件移出時觸發(fā)，用法： function( event, element, view ) { } |
| renderEvent | method，一旦日歷重新取得日程源，則原有日程將消失，當指定stick為true時，日程將永久的保存到日歷上。 |
| rerenderEvents | method，重新渲染所有事件。 |
日程事件拖動和縮放
拖動和縮放功能依賴于jQuery ui的draggable和resizable，所以在使用時要提前加載jQuery ui相關插件。
| 屬性 | 描述 | 默認值 |
| editable | 是否可編輯，即進行可拖動和縮放操作。 | false |
| eventStartEditable | 是否讓事件在開始時就可以拖動。 | true |
| dragRevertDuration | 如果拖拽不成功，多久回復原狀，毫秒 | 500 |
| dragOpacity | 拖動時候的不透明度。 { agenda:.5 //對于agenda試圖 '':1.0 //其他視圖 } |
見描述 |
| eventDragStart, eventDragStop |
callback，日程事件被拖動之前和之后觸發(fā)。這里的拖動不一定是一個有效的拖動，只要日程事件的控件被拖著動了，事件就觸發(fā)。 可以從該對象中獲取位移，位置等數(shù)據(jù)。用法： function( event, jsEvent, ui, view ) { } | |
| eventDrop | callback，當拖拽完成并且時間改變時觸發(fā)，用法： function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { } ayDelta 保存日程向前或者向后移動了多少天 minuteDelta 這個值只有在agenda視圖有效，移動的時間 allDay 如果是月視圖，或者是agenda視圖的全天日程，此值為true,否則為false |
|
| eventResizeStart, eventResizeStop |
callback，在一個日程事件改變大小之前之后發(fā)生(不一定要改變成功)，用法： function( event, jsEvent, ui, view ) { } |
|
| eventResize | callback，在日程事件改變大小并成功后調(diào)用, 參數(shù)和eventDrop參數(shù)用法一致。用法： function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) { } |
|
日期工具
| 函數(shù) | 描述 |
| formatDate | 格式化日期，通過指定的格式格式化一個日期，返回一個字符串。options選項是一個對象，其中設置本地化變量支持的屬性值. 比如{ monthNames : ['一月'，'二月'，……]，dayNames: ['周日'，'周一'，…..]}，用法： $.fullCalendar.formatDate( date，formatString [,options ] ) |
| formatDates | 一次格式化兩個日期，和上一個格式化日期類似，只不過，這里在formatString中使用大括號{…}來描述第二個日期的格式化方式。用法： $.fullCalendar.formatDates( date1，date2，formatString [,options ] ) |
| parseDate | 解析日期，將一個字符串格式成一個javascript的Date對象，這個string可以是ISO8601，IETF，UNIX時間戳三種格式。用法: $.fullCalendar.parseDate( string ) |
| parseISO8601 | 將一個ISO8601字符串轉(zhuǎn)換成一個javascript 的Date對象。用法： $.fullCalendar.parseISO8601( string [,ignoreTimezone ] ) |
以上是FullCalendar插件的基本屬性與方法，您可以查看文章JS日程管理插件FullCalendar簡單實例進行實際操作
參考文獻：
官方文檔：https://fullcalendar.io/docs/
FullCalendar 官方文檔翻譯：fullCalendar中文API官方文檔
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
