2. 程式人生 > >FullCalendar日曆外掛使用說明

FullCalendar日曆外掛使用說明

阿新 • • 發佈：2019-01-21

1. 準備工作

js

<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
<link href="~/Scripts/fullcalendar/fullcalendar.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/fullcalendar/moment.min.js"></script>
<script src="~/Scripts/fullcalendar/fullcalendar.js"></script>
<script src="~/Scripts/fullcalendar/lang/zh-cn.js"></script>
 
<pre name="code" class="javascript"><script>
	$(document).ready(function() {
		$('#calendar').fullCalendar({
		});
	});
</script>
html 
<div id='calendar'></div>

2. 說明文件

參考：http://blog.csdn.net/lgg201/article/details/4818941 http://www.cnblogs.com/allon6318/p/3421205.html
http://www.helloweba.com/view-blog-231.html
官網文件（選v2）： http://fullcalendar.io/docs/ 

普通顯示設定

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

相關推薦

fullcalendar 日曆外掛3.9.0遇到的坑

var calendar; (function ($) { var language = getCookie("userLanguage"); calendar = $('#calendar').fullCalendar({ firstDay: 0,//設定一

php使用fullcalendar日曆外掛

最近做課程表的專案，找了好多個外掛感覺都不好用，無意間看到了fullcalendar，還挺簡單的，很方便，先貼一張專案頁面 <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <!--

fullcalendar日曆外掛使用手冊

我是在angularjs框架下使用的，看到下面的程式碼不要一味照搬，不過差別不大，依葫蘆畫瓢即可。 引用 //安裝angular-ui-calendar外掛，目前最新版本是1.0.2，預設該外掛依賴的fullcalendar是2.7.1版本，我實際使

FullCalendar日曆外掛使用說明

1. 準備工作 js <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" /> <link href="~/Scripts/fullcalendar/fullca

fullcalendar日曆外掛的使用並實現增刪改查

1、剛進去預設顯示當前月份，查出資料庫的資料並展示，今天是2018年1月19號，所以我給上過的課次顏色變為灰色，而沒上過的課次變為橙色 2、點選特定的日期，新增課次： 點選未上過的課次進行編輯或刪除： 以及課次的拖動，如將1月22號的“08:00-09:00 高數一班”拖動到1月29號：

使用FullCalendar庫，製作活動日曆外掛

概要 本篇介紹使用FullCalendar庫可在kintone列表頁面上進行檢視、建立活動日曆。 可實現kintone標準日曆列表無法實現的如下功能(2016年5月8日的更新版)。 可隨意切換按月／按周／按日顯示的日曆。 在日曆上可更改活動的日期與時間。 從活動的開始到結束的整個

兩款超好用js日曆外掛（fullcalendar和zabuto_calendar）

$('#calendar_arrangement').fullCalendar({             header: {                 left: 'prev today next ',                 center: 'title',                

jQuery外掛實戰之fullcalendar（日曆外掛）Demo

jQuery的外掛非常多，應用的場景也非常豐富，今天我這裡給大家介紹一款非常實用的日曆頁面開發外掛 - fullcalendar，目前最新版本是1.5.1，使用這款外掛能夠快速幫助你快速程式設計實現基於web的日曆檢視功能，大家可能都使用過outlook的日曆項功能，使用日

基於jQuery日曆外掛製作日曆

這篇文章主要介紹了基於jQuery日曆外掛製作日曆的相關資料,需要的朋友可以參考下 來看下最終效果圖吧： 是長得醜了一點，不要吐槽我-。- 首先來說說這個日曆主要的製作邏輯吧： ·一個月份最多有31天，需要一個7X6的表格去裝載 ·如果知道了某個月份1號是星期幾，這個月份有多少天，一個迴圈就可以顯示某個月的

zaneData PC端日曆外掛

zaneData是一個完全由原生javascript封裝的PC端日曆外掛，不依賴任何第三方外掛，功能全面，使用簡單. 使用方式 瀏覽器端使用 <!-- 引入相應的js和css --> <link href="./dist/zane-calendar

小程式日曆外掛的使用

大家下午好，萍子又來了，今天來分享一個常用的需求，那就是日曆的外掛的使用。大家都知道，在平時開發的過程中，使用前人寫好的一些外掛可以有效的提高開發效率，也給自己省了很多事，確實有些功能自己去寫也稍稍麻煩了一下。最近我們產品給我提的需求就有那麼一條，讓我在小程式中寫一個日曆出來，還要求需要

又一款牛逼哄哄的日曆外掛jeDate橫空出世

原文：http://www.jayui.com/jedate/index.html 下載：http://download.csdn.net/detail/cometwo/9393326 選擇理由 jeDate除了包含日期範圍限制、開始日期設定、自定義日期格式、時間戳轉換、當天的前

前臺 - 日曆外掛

有一個封裝好的外掛以及例子，自己一看就明白   下載地址 連結：https://pan.baidu.com/s/1XEyARv1Dr9fqG1uyibn6qQ  提取碼：7d33  備註：獲得 layDate 檔案包後，解壓並將 laydate 整個資

JQuery日曆外掛My97DatePicker日期範圍限制

My97DatePicker是一個非常優秀的日曆外掛，不僅支援多種呼叫模式，還支援日期範圍限制。 常規的呼叫比較簡單，如下所示： 1 <input class="Wdate" id="d1" onclick="Wda

JQ支援的日曆外掛My97DatePicker

支援的瀏覽器 IE 6.0+ , Firefox 2.0+ , Chrome, Opera 9.5+ , Safari 3.0+ 及以上多版本瀏覽器 1.常規呼叫 <input id="d11

獲取日曆外掛的值

本文使用的是layui的日曆外掛，原理差不多。 HTML部分程式碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title&

jQuery日曆外掛編寫jquery.calendar.js

jQuery日曆外掛編寫(jquery.calendar.js)： 目前比較難解決的問題是： 1、面板問題，雖然可以自定義面板，但是使用起來還是有一定的困難。 樣式預覽： 預設面板1： 自定義面板2：(深藍) 自定義面板3：(大紅) 自定義面板4:炫酷黑 呼叫：

react Ant Design 日曆外掛input導致移動裝置彈出鍵盤問題

今天專案修改日曆外掛，改好部署手機後發現，選擇日期後，input會獲得焦點，導致鍵盤彈出，會擋住日曆外掛，總之頁面很難看。查了api等等，都沒有想過屬性可以設定input。我的想法是，disable掉input。但是問題是js怎麼能拿到input呢？日曆外掛部分，在日曆觸發彈

bootstrap-datepicker日曆外掛 與bootstrapValidator驗證同時使用時無效

一、前言 使用bootstrap-datepicker和bootstrapValidator也有一段時間了，在工作中發現兩者同時使用時會出現的一種問題，當選擇完日期後，並不會正確校驗該欄位。為了更加直觀的展現問題，上圖一張。 可以看出，當選擇完日期後，校驗結果並沒有達

實用外掛（九）手機日曆外掛——Mobiscroll

1、點我下載 2、使用方法： <!--日曆外掛3個css--> <link href="../Mobiscroll/mobiscroll.android-ics-2.5.2.