almost 6 years ago

最近想開發一個紀錄用的行事曆,結合內部的系統,在網路上找了一下,發現這個樣板和操作模式很適合我

官方網站
http://arshaw.com/fullcalendar/
網站上都有清楚說明實作的資訊,下載的檔案中也有Demo可以直接查看

講講他的實作方法
先將下載後的檔案中的css與js檔,放置在你欲放置的目錄位置

接下來在網頁內使用

<link rel='stylesheet' type='text/css' href='/js/fullcalendar/fullcalendar.css' />
<script type="text/javascript" src="js/fullcalendar/fullcalendar.min.js"></script>
<script src="/js/fullcalendar/jquery-ui.custom.min.js"></script>
<script src="/js/fullcalendar/gcal.js"></script><!--結合Google使用-->

在script中呼叫使用

$(document).ready(function() {
    
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        
        $('#calendar').fullCalendar({
            editable: true,
            events: [
                {
                    title: 'All Day Event',
                    start: new Date(y, m, 1)
                },
                {
                    title: 'Long Event',
                    start: new Date(y, m, d-5),
                    end: new Date(y, m, d-2)
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d-3, 16, 0),
                    allDay: false
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d+4, 16, 0),
                    allDay: false
                },
                {
                    title: 'Meeting',
                    start: new Date(y, m, d, 10, 30),
                    allDay: false
                },
                {
                    title: 'Lunch',
                    start: new Date(y, m, d, 12, 0),
                    end: new Date(y, m, d, 14, 0),
                    allDay: false
                },
                {
                    title: 'Birthday Party',
                    start: new Date(y, m, d+1, 19, 0),
                    end: new Date(y, m, d+1, 22, 30),
                    allDay: false
                },
                {
                    title: 'Click for Google',
                    start: new Date(y, m, 28),
                    end: new Date(y, m, 29),
                    url: 'http://google.com/'
                }
            ]
        });
        
    });

在HTML內將你要放置行事曆的位置加入

<div id='calendar'></div>

這樣子應該就會出現一個目前的行事曆了

接下來要說明他提供的幾個事件
1.修改文字與格式(Text/Time Customization)
請先參考這邊的說明http://arshaw.com/fullcalendar/docs/text/

按照網站上的說明,應該可以自主完成所有關於在內部顯示的文字及格式的調整,這部分就不多說明

2.event object
http://arshaw.com/fullcalendar/docs/event_data/Event_Object/

這個部分是行事曆最主要操作的,不管拖曳來拖曳去,都是在操作這個object
所以只要能夠搞定這個這一塊,你就能夠隨心所欲的去建立或者拖拉,從外部拖曳進入也不是問題
.title: 在方塊之中顯示的文字
.id: 每一個唯一值的編號,須注意,若有兩個以上相同ID的物件,則會一起被拖曳與加長時間等等狀況
.url : 當點擊後欲連結的URL位置,搭配event_click 可以改為window.open
.start : 格式是 new Date(Y,M,D,H,m)
.end : 格式與start相同
這次我做的部分只有用到這些,其他的都是使用default

3.events
http://arshaw.com/fullcalendar/docs/event_data/events_array/
資料的來源,可以是array,JSON,XML等等,這邊沒太大問題,就是選擇或者輸入你的資料來源就是了

4.觸發事件(Event Dragging & Resizing)
http://arshaw.com/fullcalendar/docs/event_ui/

可以透過function(event) 取得 event.id,event.title,這些參數

5.拖曳外部的物件進入行事曆
http://arshaw.com/fullcalendar/docs/dropping/
可以先在外部建立好div區塊,提供拖曳進入行事曆中

6.結合資料庫
這部分他就沒有提供文章了,不過沒有結合儲存工具,修改或者調整也沒有意義
建議可以參酌你需要的欄位去開設

-------------結論
這篇文章只是介紹一下這個jquery套件,大概花了一個假日白天,就能實作到結合資料庫的部分
結合資料庫後我的介面大致上變成這樣

← C#中Ashx 泛型處理常式取得Session Javascript location.href 在 Chrome中無效 →
 
comments powered by Disqus