JS日程管理插件FullCalendar簡單實例
HTML
首先第一步就是在需要調用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)在我們需要在頁面加載完成后，調用FullCalendar插件初始化日歷，使用jQuery代碼：
$(document).ready(function() {
//頁面加載完初始化日歷
$('#calendar').fullCalendar({
//設置選項和回調
})
});
然后保存并瀏覽頁面，你會發(fā)現(xiàn)頁面中已經顯示一個很大的日歷表了。當然這還只是一個初步的日歷，F(xiàn)ullCalendar的強大之處在于它提供了豐富的選項設置、方法及事件，可以很方便的擴展，打造你想要的日歷表，先來做一下簡單了解。
選項（Options）
FullCalendar官方文檔中提供了豐富的操作選項設置，比如是否在日歷中顯示周末等等，使用方法：
$('#calendar').fullCalendar({
weekends: false //不顯示周末，將會隱藏周六和周日
});
事件（EVents）
當點擊或者拖動等事件發(fā)生時，可以調用相關函數(shù)，比如點擊某一天時，彈出提示框：
$('#calendar').fullCalendar({
dayClick: function() {
alert('a day has been clicked!');
}
});
方法（Methods）
FullCalendar提供了很多方法可以調用，諸如進入下一個月視圖等，代碼可以這樣寫：
$('#calendar').fullCalendar('next');
以上代碼調用了next方法后，日歷視圖切換到下一月（周、日）的視圖。
本文簡單介紹了下JS日程管理插件FullCalendar的使用，更多詳細使用方法請查看文章：JS日程管理插件FullCalendar中文說明文檔
本例需要引用的相關插件：
jQuery下載地址：jQuery v3.0
jQuery ui下載地址：jQuery UI v1.8.18
FullCalendar插件下載地址：FullCalendar
FullCalendar實例源碼下載：FullCalendar_demo
FullCalendar的官方網(wǎng)址：http://fullcalendar.io/docs/
相關文章
淺談JavaScript前端開發(fā)的MVC結構與MVVM結構
以AngularJS為代表的MVVM結構框架或庫這兩年來在前端界真是火到不行,大有對抗傳統(tǒng)jQuery綁定思想的趨勢,這里我們結合傳統(tǒng)的MVC結構,來淺談JavaScript前端開發(fā)的MVC結構與MVVM結構2016-06-06
這篇文章主要為大家介紹了js類庫styled-components快速入門的教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
今天講交互圖表Highcharts的坐標軸，我們將對Highcharts圖表的坐標軸組成、坐標軸類型等進行詳細系統(tǒng)講解。下面一起來看看。2016-08-08
這篇文章主要為大家介紹了JavaScript庫omit源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了如何使用可視化庫gojs及使用時的小技巧，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2022-01-01
本文為大家分享了5個不錯的javascript文件上傳插件，選擇一款功能強大使用簡單的上傳插件將為我們節(jié)省很多開發(fā)時間2018-09-09
本文用實例演示如何用d3.js實現(xiàn)實時刷新的折線圖,非常具有實用價值,需要的朋友可以參考下。2016-08-08
使用RequireJS庫加載JavaScript模塊的實例教程
RequireJS庫的主旨就是一個js文件的模塊加載器,可以獨立于框架來進行使用,這里我們整理了使用RequireJS庫加載JavaScript模塊的實例教程,需要的朋友可以參考下2016-06-06
數(shù)據(jù)列配置是 Highcharts 最復雜也是最靈活的配置，如果說 Highcharts 是靈活多變，細節(jié)可定制的話，那么數(shù)據(jù)列配置就是這個重要特性的核心。2016-08-08
這篇文章主要介紹了require.js深入了解,require.js特性介紹,本文講解了require.js和CommonJS的兼容、CDN回退、循環(huán)依賴、BaseUrl、JSONP等內容,需要的朋友可以參考下2014-09-09