FullCalendar日曆插件說明文檔

来源:http://www.cnblogs.com/zhangwc/archive/2017/01/04/6247806.html
-Advertisement-
Play Games

FullCalendar提供了豐富的屬性設置和方法調用，開發者可以根據FullCalendar提供的API快速完成一個日曆日程的開發，本文將FullCalendar的常用屬性和方法、回調函數等整理成中文文檔，以供參閱。當前版本1.6.4。 普通顯示設置 屬性 描述 預設值 header 設置日曆頭部 ...


FullCalendar提供了豐富的屬性設置和方法調用，開發者可以根據FullCalendar提供的API快速完成一個日曆日程的開發，本文將FullCalendar的常用屬性和方法、回調函數等整理成中文文檔，以供參閱。當前版本1.6.4。

普通顯示設置

屬性 描述 預設值
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時才有效，如果你調用了jQuery ui樣式但又不想使用它的圖標樣式，可以將此屬性設置為false { prev: 'circle-triangle-w', next: 'circle-triangle-e' }
firstDay 設置一周中顯示的第一天是哪天，周日是0，周一是1，類推。 0
isRTL 設置為ture時則日曆從右往左顯示，貌似是針對阿拉伯人設計的。 false
weekends 是否顯示周末，設為false則不顯示周六和周日。 true
hiddenDays 隱藏一周中的某一天或某幾天，數組形式，如隱藏周二和周五：[2,5]，預設不隱藏，除非weekends設置為false。 []
weekMode 在月視圖裡顯示周的模式，因為每月周數可能不同，所以月視圖高度不一定。
fixed：固定顯示6周高，日曆高度保持不變
liquid：不固定周數，高度隨周數變化
variable：不固定周數，但高度固定		 'fixed'
weekNumbers 是否在日曆中顯示周次(一年中的第幾周)，如果設置為true，則會在月視圖的左側、周視圖和日視圖的左上角顯示周數。 false
weekNumberCalculation 周次的顯示格式。 "iso"
height 設置日曆的高度，包括header日曆頭部，預設未設置，高度根據aspectRatio值自適應。  
contentHeight 設置日曆主體內容的高度，不包括header部分，預設未設置，高度根據aspectRatio值自適應。  
aspectRatio 設置日曆單元格寬度與高度的比例。 1.35
handleWindowResize 是否隨瀏覽器視窗大小變化而自動變化。 true
windowResize callback，當瀏覽器視窗變化時觸發function，使用：
$('#calendar').fullCalendar({
windowResize: function(view) {
alert('The calendar has adjusted to a window resize');
}
});
 
render method，綁定日曆到id上。
$('#id').fullCalendar('render');
destroy method，銷毀id日曆，把日曆回覆到初始化前狀態。
$('#id').fullCalendar('destroy');

視圖

FullCalendar提供五種可用視圖，包括month（月視圖），basicWeek（基本周視圖，左側不顯示具體時間），basicDay（基本日視圖，左側不顯示具體時間），agendaWeek（周視圖），agendaDay（日視圖）。

View視圖對象的屬性：

屬性 描述
name 包括month,basicWeek,basicDay,agendaWeek,agendaDay
title 標題內容(例如"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，取得視圖對象信息，如獲取當前視圖的標題內容：
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視圖下左側的時間顯示格式，預設顯示如：5:30pm 'h(:mm)tt'
slotMinutes 在agenda的視圖中, 兩個時間之間的間隔(分鐘) 30
defaultEventMinutes 事件預設的時間執行長度，如果事件對象沒有指定執行多長時間，則預設執行兩個小時 120
firstHour 當切換到agenda時，初始滾動條滾動到的時間位置，預設在6點鐘的位置 6
minTime 設置顯示的時間從幾點開始 0
maxTime 設置顯示的時間從幾天結束 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(天數)向前移動5天。
getDate method，返回當前日曆中的日期

文本與時間定製

你可以根據項目需求設置日曆顯示的文本信息，如中文的月份等。

屬性 描述 預設值
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"

滑鼠單擊和滑過

以下列出的是當滑鼠單擊或者滑過日曆中的某個元素時，回調的函數callback。

屬性 描述
dayClick 當單擊日曆中的某一天時，觸發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 當點擊日曆中的某一日程（事件）時，觸發此操作，用法：
$('#calendar').fullCalendar({
dayClick: function(event, jsEvent, view) {
do something...
}
});
event是日程（事件）對象，jsEvent是個javascript事件，view是當前視圖對象。
eventMouseover
eventMouseout		 滑鼠划過和離開的事件，用法和參數同上

選擇操作

屬性 描述 預設值
selectable 是否允許用戶通過單擊或拖動選擇日曆中的對象，包括天和時間。 false
selectHelper 當點擊或拖動選擇時間時，顯示預設載入的提示信息，該屬性只在周/天視圖裡可用。 false
unselectAuto 當點擊頁面日曆以外的位置時，是否自動取消當前的選中狀態。 true
unselectCancel 指定哪些元素不會清空當前的選中，以JQUERY選擇器的方式指定 '#someId'。 ''
select callback，被選中的函數回調，使用方法：
function( startDate, endDate, allDay, jsEvent, view )
startDate：被選中區域的開始時間
endDate：被選中區域的結束時間
allDay：是否為全天事件
startDate：jascript對象
startDate：當前視圖對象
 
unselect callback，選中被取消時的回調，使用方法：
function( view, jsEvent )
select method，選中某個時間，使用方法：
$('#calendar').fullCalendar( 'select', startDate, endDate, allDay )
unselect method，取消選中，使用方法：
$('#calendar').fullCalendar( 'unselect' )

日程事件數據

FullCalendar最重要的部分，設置用於日程事件相關信息。

Event Object，事件對象，用來存儲一個日曆事件信息的標準對象，只有title和start是必須的

屬性 描述
id 可選，事件唯一標識，重覆的事件具有相同的id
title 必須，事件在日曆上顯示的title
allDay 可選，true or false，是否是全天事件。
start 必須，事件的開始時間。
end 可選，結束時間。
url 可選，當指定後，事件被點擊將打開對應url。
className 指定事件的樣式。
editable 事件是否可編輯，可編輯是指可以移動, 改變大小等。
source 指向次event的eventsource對象。
color 背景和邊框顏色。
backgroundColor 背景顏色。
borderColor 邊框顏色。
textColor 文本顏色。

事件源對象

事件源即日曆中的數據來源，FullCalendar提供了數組、函數調用、以及JSON數據的形式，當然也可以通過Google Calendar feed獲取數據介面。helloweba.com後面會有文章專門介紹事件數據的操作，包括數據的查詢、寫入、更新和刪除操作。

以下是Event事件相關的參數屬性說明。

屬性 描述 預設值
eventSources 事件源，存儲數組對象，可以是Arrays/Functions/URLs。  
allDayDefault 是否為全天日程事件，顯示這一天中所做的事情。 true
ignoreTimezone 是否忽略時區。 true
startParam 在使用URL方式獲取events數據源的時候, 自動插入到URL中的參數, 表示當前需要抓取的日程事件的起始時間。 'start'
endParam 和startParam參數意義相同, 表示要抓取的日程事件的終止時間。 'end'
lazyFetching 是否從緩存信息獲取event。比如從月視圖切換到周視圖。 true
eventDataTransform callback，將外部數據源轉換成Fullcalendar可以處理的數據
loading callback，日曆開始載入的時候，isLoading參數為true觸發一次，日曆載入完畢，isLoading參數為false觸發一次，用法：
function(isLoading, view)
updateEvent method，更新日曆空間中的一個日程事件，如果是重覆的日程事件，則都更新。用法：
$('#calendar').fullCalendar( 'updateEvent', event )
clientEvents method，返回FullCalendar已經存儲到客戶端的CalEvents對象數組， 第二個參數和removeEvents方法的第二個參數意義相同， 只不過在過濾器中， 如果返回true， 則該CalEvent對象將被加入到返回的數組中。
removeEvents method，從日曆中刪除一個日程事件. 第二個參數可以不填， 可以填id， 可以是一個過濾器(一個函數， 接受CalEvent對象作為參數)。用法：
$('#calendar').fullCalendar( 'removeEvents' [, idOrFilter ] )
refetchEvents method，重新抓取所有的日程事件源上的日程事件並渲染它們。
addEventSource method，添加一個日程事件源，添加之後， FullCalendar會馬上從該源獲取日程事件， 並載入到日曆中。第二個參數和定義Calendar時候使用的url參數一致。
removeEventSource method，移除一個日程事件源，該源上獲取得到的日程時間也將被馬上從日曆中移除。

事件渲染

 

屬性 描述
eventColor
eventBackgroundColor
eventBorderColor
eventTextColor		 設置日程事件的背景色和邊框色，以及文本顏色。可以使用任意支持css的顏色方式，如 #f00, #ff0000, rgb(255,0,0), or red。
eventRender callback，當日程事件渲染時觸發，用法：
function(calEvent, element, view)
eventAfterRender callback，當日程事件被渲染後觸發，用法：
function( event, element, view ) { }
eventDestroy callback，當日程事件移出時觸發，用法：
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，日程事件被拖動之前和之後觸發。這裡的拖動不一定是一個有效的拖動，只要日程事件的控制項被拖著動了，事件就觸發。 可以從該對象中獲取位移，位置等數據。用法： function( event, jsEvent, ui, view ) { }
eventDrop callback，當拖拽完成並且時間改變時觸發，用法：
function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { }
ayDelta 保存日程向前或者向後移動了多少天
minuteDelta 這個值只有在agenda視圖有效，移動的時間
allDay 如果是月視圖，或者是agenda視圖的全天日程，此值為true,否則為false
eventResizeStart, 
eventResizeStop		 callback，在一個日程事件改變大小之前之後發生(不一定要改變成功)，用法：
function( event, jsEvent, ui, view ) { }
eventResize callback，在日程事件改變大小併成功後調用, 參數和eventDrop參數用法一致。用法：
function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) { }

日期工具

函數 描述
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字元串轉換成一個javascript 的Date對象。用法：
$.fullCalendar.parseISO8601( string [,ignoreTimezone ] )

參考文獻：

官方文檔：http://arshaw.com/fullcalendar/docs/

FullCalendar 官方文檔翻：http://www.cnblogs.com/mycoding/archive/2011/05/20/2052152.html

fullCalendar:中文API： http://blog.sina.com.cn/s/blog_9475b1c101012c5f.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • C# 對象實例化 用json保存 泛型類 可以很方便的保存程式設置
    1 using Newtonsoft.Json; 2 using System; 3 using System.Collections.Generic; 4 using System.IO; 5 using System.Linq; 6 using System.Text; 7 using Syst ...
  • 微信小程式開發心得
    微信小程式也已出來有一段時間了，最近寫了幾款微信小程式項目，今天來說說感受。 首先開發一款微信小程式，最主要的就是針對於公司來運營的，因為，在申請appid(微信小程式ID號)時候，需要填寫相關的公司認證信息如，營業執照等 再次就是用一個未曾開通過公眾號的QQ號或微信號來註冊一個微信小程式號。 最後 ...
  • Asp.Net Core + Dapper + Repository 模式 + TDD 學習筆記
    0x00 前言 之前一直使用的是 EF ，做了一個簡單的小項目後發現 EF 的表現並不是很好，就比如聯表查詢，因為現在的 EF Core 也沒有啥好用的分析工具，所以也不知道該怎麼寫 Linq 生成出來的 Sql 效率比較高，於是這次的期末大作業決定使用性能強勁、輕便小巧的 ORM —— Dappe ...
  • unity 3d 解析 json
    官網案例傳送門 我這裡不過是借花獻佛,案例官網就有. ...
  • HTML5實現文件斷點續傳
    HTML5的FILE api，有一個slice方法，可以將BLOB對象進行分割。前端通過FileList對象獲取到相應的文件，按照指定的分割方式將大文件分段，然後一段一段地傳給後端，後端再按順序一段段將文件進行拼接。 斷點續傳原理 目前比較常用的斷點續傳的方法有兩種，一種是通過websocket介面 ...
  • 使用EF CodeFirst 創建資料庫
    EntityFramework 在VS2015添加新建項時,選擇數據->ADO.NET 實體數據模型,有一下選項 來自資料庫的EF設計器,這個就是我們最常用的EntityFramework設計模型了,選擇它,然後根據設計好的資料庫,就會生成一個edmx文件,和一個資料庫上下文,然後我們就可以不用寫s ...
  • 生成二維碼的開源工具對比（附源碼了呀！）
    某天發現生成二維碼的工具（zxing）運行的很慢，於是乎上網上尋找生成二維碼的工具，發現常見的開源工具有如下三種： Zxing（zxing.dll） ThoughtWorks（ThoughtWorks.QRCode.dll） QrCodeNet（Gma.QrCodeNet.Encoding.dll） ...
  • ASP.NET中畫圖形驗證碼
    1 context.Response.ContentType = "image/jpeg"; 2 //生成隨機的中文驗證碼 3 string yzm = "人口手大小多少上中下男女天地會反清復明楊中科小寶雙兒命名空間語現在明天來多個的我山東河北南固安北京南昌東海西安是沙河高教園學" 4 ... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類