JS日程管理插件FullCalendar簡單實例

發(fā)布時間：2020-08-24 18:32:22 來源：腳本之家閱讀：664 作者：月光光欄目：web開發(fā)

在線演示源碼下載

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è)置選項和回調(diào) 
 }) 
 
});

然后保存并瀏覽頁面，你會發(fā)現(xiàn)頁面中已經(jīng)顯示一個很大的日歷表了。當(dāng)然這還只是一個初步的日歷，F(xiàn)ullCalendar的強(qiáng)大之處在于它提供了豐富的選項設(shè)置、方法及事件，可以很方便的擴(kuò)展，打造你想要的日歷表，先來做一下簡單了解。

選項（Options）

FullCalendar官方文檔中提供了豐富的操作選項設(shè)置，比如是否在日歷中顯示周末等等，使用方法：

$('#calendar').fullCalendar({ 
 weekends: false //不顯示周末，將會隱藏周六和周日 
});

查看更多選項

事件（EVents）

當(dāng)點擊或者拖動等事件發(fā)生時，可以調(diào)用相關(guān)函數(shù)，比如點擊某一天時，彈出提示框：

$('#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實例源碼下載：FullCalendar_demo

FullCalendar的官方網(wǎng)址：http://fullcalendar.io/docs/

向AI問一下細(xì)節(jié)

JS日程管理插件FullCalendar簡單實例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽