基於fullcalendar製做的日程管理小demo

1、項目地址：

https://github.com/linqian123...

2、項目功能概述：

該項目是基於fullcalendar而製做的日程管理，fullcalendar是一個基於jquery的日曆插件，在該項目中，咱們能夠在日曆上編輯咱們的日程，並將日程經過日視圖、周視圖、月視圖的方式來進行展現，也能夠經過選擇時間段來展現咱們的日程。該項目使用artDialog來製做彈出框的效果，使用wickedpicker和bootstrap-datapicker來做爲咱們的時間選擇插件，還選擇了jquery-ui當中的slider來製做設置時間段的滑塊效果。

該項目雖然沒有創建後臺數據庫，只是用了兩個php文件來暫時的存儲咱們編輯的日程，但在運行該項目的時候，仍然須要將其放在本地服務器的環境下。由於咱們編輯完日程後，是經過ajax的方式提交給後臺，而後再從後臺取數據渲染更新到咱們的日曆上，不過因爲沒有把日程數據存到數據庫，故刷新頁面以後，咱們編輯的日程會消失。

代碼當中涉及ajax交互數據的這兩個後臺文件的地址分別爲http://localhost/fullcalendar/detail.php和http://localhost/fullcalendar/events.php。故在運行該項目時，先把該項目文件夾的名字改成fullcalendar，而後再將其放在本地服務器的環境當中。

3、項目細節展現：

咱們的日程管理日曆當中的月視圖、周視圖、日視圖分別爲：

當咱們點擊標題欄左側的設置按鈕，會彈出以下的彈出框，能夠經過滑塊來設置時間段（以小時爲單位），在肯定以後就完成了咱們的周視圖和日視圖當中天天展現的時間段的設置。

當咱們點擊標題欄右側的查詢按鈕，會彈出以下的彈出框：

咱們在月視圖、周視圖、日視圖當中用鼠標點擊某一天會彈出以下的彈框，咱們能夠在此編輯那天的日程，在此不進行更多詳情的填寫，點擊肯定以後，就會在日程視圖上呈現。

若是須要填寫更詳細的日程內容，能夠點擊上述彈出框當中的完整編輯按鈕，則會彈出新建日程頁面。（咱們點擊日曆標題欄右側的新建按鈕也會彈出以下彈框）。在該彈框當中咱們以事務內容的編輯爲準，忽略事務標題，在這裏咱們能夠選擇更詳盡的日程時間段，能夠設置開始和結束時間段。當咱們勾選全天時，則後邊的時刻點消失；當勾選結束時間的時候，纔會顯示結束時間的設置；當勾選重複的時候，纔會提供重複類型的選擇，當咱們在下拉列表當中選擇不一樣的重複類型的時候，下面對應的重複時間會有不一樣的展現。當編輯完成，點擊肯定以後，日程事件就會展現在日曆上了。

咱們用鼠標點擊日曆上某一個已建日程時，會彈出以下彈框，點擊編輯則會進入編輯界面，對該日程事件進行編輯，肯定後則日程更改，點擊刪除，則能夠刪除該日程。