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