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)顯示一個(gè)很大的日歷表了。當(dāng)然這還只是一個(gè)初步的日歷，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ā)生時(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è)月視圖等，代碼可以這樣寫：
$('#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)文章
淺談JavaScript前端開發(fā)的MVC結(jié)構(gòu)與MVVM結(jié)構(gòu)
以AngularJS為代表的MVVM結(jié)構(gòu)框架或庫這兩年來在前端界真是火到不行,大有對抗傳統(tǒng)jQuery綁定思想的趨勢,這里我們結(jié)合傳統(tǒng)的MVC結(jié)構(gòu),來淺談JavaScript前端開發(fā)的MVC結(jié)構(gòu)與MVVM結(jié)構(gòu)2016-06-06
這篇文章主要為大家介紹了js類庫styled-components快速入門的教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
Highcharts學(xué)習(xí)之坐標(biāo)軸
今天講交互圖表Highcharts的坐標(biāo)軸，我們將對Highcharts圖表的坐標(biāo)軸組成、坐標(biāo)軸類型等進(jìn)行詳細(xì)系統(tǒng)講解。下面一起來看看。2016-08-08
這篇文章主要為大家介紹了JavaScript庫omit源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了如何使用可視化庫gojs及使用時(shí)的小技巧，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2022-01-01
本文為大家分享了5個(gè)不錯的javascript文件上傳插件，選擇一款功能強(qiáng)大使用簡單的上傳插件將為我們節(jié)省很多開發(fā)時(shí)間2018-09-09
基于d3.js實(shí)現(xiàn)實(shí)時(shí)刷新的折線圖
本文用實(shí)例演示如何用d3.js實(shí)現(xiàn)實(shí)時(shí)刷新的折線圖,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2016-08-08
使用RequireJS庫加載JavaScript模塊的實(shí)例教程
RequireJS庫的主旨就是一個(gè)js文件的模塊加載器,可以獨(dú)立于框架來進(jìn)行使用,這里我們整理了使用RequireJS庫加載JavaScript模塊的實(shí)例教程,需要的朋友可以參考下2016-06-06
Highcharts學(xué)習(xí)之?dāng)?shù)據(jù)列
數(shù)據(jù)列配置是 Highcharts 最復(fù)雜也是最靈活的配置，如果說 Highcharts 是靈活多變，細(xì)節(jié)可定制的話，那么數(shù)據(jù)列配置就是這個(gè)重要特性的核心。2016-08-08
這篇文章主要介紹了require.js深入了解,require.js特性介紹,本文講解了require.js和CommonJS的兼容、CDN回退、循環(huán)依賴、BaseUrl、JSONP等內(nèi)容,需要的朋友可以參考下2014-09-09