JS日程管理插件FullCalendar簡(jiǎn)單實(shí)例
HTML
首先第一步就是在需要調(diào)用FullCalendar日程插件的頁(yè)面中載入必要的javascript和css文件，包括jQuery庫(kù)文件，F(xiàn)ullCalendar插件以及FullCalendar樣式表。如果您還想要拖動(dòng)日程的功能，那么還需要加入jQuery ui插件。
<link rel="stylesheet" type="text/css" href="css/fullcalendar.css" rel="external nofollow" > <script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery-ui-1.10.2.custom.min.js"></script> <script src="js/fullcalendar.min.js"></script>
然后，在頁(yè)面的body里加入div#calendar，用來(lái)放置日歷主體。
<div id='calendar'></div>
jQuery
現(xiàn)在我們需要在頁(yè)面加載完成后，調(diào)用FullCalendar插件初始化日歷，使用jQuery代碼：
$(document).ready(function() {
//頁(yè)面加載完初始化日歷
$('#calendar').fullCalendar({
//設(shè)置選項(xiàng)和回調(diào)
})
});
然后保存并瀏覽頁(yè)面，你會(huì)發(fā)現(xiàn)頁(yè)面中已經(jīng)顯示一個(gè)很大的日歷表了。當(dāng)然這還只是一個(gè)初步的日歷，F(xiàn)ullCalendar的強(qiáng)大之處在于它提供了豐富的選項(xiàng)設(shè)置、方法及事件，可以很方便的擴(kuò)展，打造你想要的日歷表，先來(lái)做一下簡(jiǎn)單了解。
選項(xiàng)（Options）
FullCalendar官方文檔中提供了豐富的操作選項(xiàng)設(shè)置，比如是否在日歷中顯示周末等等，使用方法：
$('#calendar').fullCalendar({
weekends: false //不顯示周末，將會(huì)隱藏周六和周日
});
事件（EVents）
當(dāng)點(diǎn)擊或者拖動(dòng)等事件發(fā)生時(shí)，可以調(diào)用相關(guān)函數(shù)，比如點(diǎn)擊某一天時(shí)，彈出提示框：
$('#calendar').fullCalendar({
dayClick: function() {
alert('a day has been clicked!');
}
});
方法（Methods）
FullCalendar提供了很多方法可以調(diào)用，諸如進(jìn)入下一個(gè)月視圖等，代碼可以這樣寫(xiě)：
$('#calendar').fullCalendar('next');
以上代碼調(diào)用了next方法后，日歷視圖切換到下一月（周、日）的視圖。
本文簡(jiǎn)單介紹了下JS日程管理插件FullCalendar的使用，更多詳細(xì)使用方法請(qǐng)查看文章：JS日程管理插件FullCalendar中文說(shuō)明文檔
本例需要引用的相關(guān)插件：
jQuery下載地址：jQuery v3.0
jQuery ui下載地址：jQuery UI v1.8.18
FullCalendar插件下載地址：FullCalendar
FullCalendar實(shí)例源碼下載：FullCalendar_demo
FullCalendar的官方網(wǎng)址：http://fullcalendar.io/docs/
相關(guān)文章
這篇文章主要介紹了如何使用可視化庫(kù)gojs及使用時(shí)的小技巧，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2022-01-01
這篇文章主要為大家介紹了JavaScript庫(kù)omit源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
本篇將先介紹創(chuàng)建較為常用的物體：網(wǎng)格，然后介紹如何修改物體的屬性。下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)。2016-08-08
Three.js學(xué)習(xí)之文字形狀及自定義形狀
今天小編帶大家學(xué)習(xí)的是Three.js的文字形狀與自定義形狀，文章內(nèi)容很詳細(xì)，對(duì)大家學(xué)習(xí)Three.js或許有幫助，下面一起來(lái)看看吧。2016-08-08
node.js中的socket.io入門(mén)實(shí)例
這篇文章主要介紹了node.js中的socket.io入門(mén)實(shí)例,并對(duì)websocket等反向ajax技術(shù)做了介紹,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了require.js深入了解,require.js特性介紹,本文講解了require.js和CommonJS的兼容、CDN回退、循環(huán)依賴(lài)、BaseUrl、JSONP等內(nèi)容,需要的朋友可以參考下2014-09-09
Highcharts是一個(gè)用純JavaScript編寫(xiě)的一個(gè)圖表庫(kù)，之前小編發(fā)了一篇介紹Highcharts的文章，那么本文將進(jìn)一步的介紹Highcharts的基本屬性，有需要的可以參考學(xué)習(xí)。2016-08-08
Highcharts學(xué)習(xí)之?dāng)?shù)據(jù)列
數(shù)據(jù)列配置是 Highcharts 最復(fù)雜也是最靈活的配置，如果說(shuō) Highcharts 是靈活多變，細(xì)節(jié)可定制的話，那么數(shù)據(jù)列配置就是這個(gè)重要特性的核心。2016-08-08
本文利用實(shí)例代碼詳細(xì)介紹了一些Three.js中的幾何形狀的實(shí)現(xiàn)過(guò)程，包括立方體、平面與球體，有需要的朋友們可以學(xué)習(xí)下。2016-08-08
本文為大家分享了5個(gè)不錯(cuò)的javascript文件上傳插件，選擇一款功能強(qiáng)大使用簡(jiǎn)單的上傳插件將為我們節(jié)省很多開(kāi)發(fā)時(shí)間2018-09-09