用 jQuery 製作行事曆- FullCalendar

想做類似googla calendar那樣方便的行事曆嗎? 用這個外掛幫你解決。

外掛網址
FullCalendar

這支外掛真的很強，除了幫你做到很多想的到的功能外，也有設計列印用的css，所以除了可以看到漂亮的UI外，也不用擔心要列印出來的時候，會因為顏色太多變的醜醜的。

引入外掛後參考他的程式碼，就會自己產生一個月曆進來

view plaincopy to clipboardprint

1. var date = new Date();   
2. var d = date.getDate();   
3. var m = date.getMonth();   
4. var y = date.getFullYear();   
5.            
6. $('#calendar').fullCalendar({   
7.     header: {   
8.         left: 'prev,next today',   
9.         center: 'title',   
10.         right: 'month,agendaWeek,agendaDay'  
11.     },   
12.     editable: true,   
13.     weekMode: 'variable',   
14.     events: [   
15.         {   
16.             title: 'All Day Event',   
17.             start: new Date(y, m, 1)   
18.         },   
19.         {   
20.             title: 'Long Event',   
21.             start: new Date(y, m, d-5),   
22.             end: new Date(y, m, d-2)   
23.         },   
24.         {   
25.             id: 999,   
26.             title: 'Repeating Event',   
27.             start: new Date(y, m, d-3, 16, 0),   
28.             allDay: false  
29.         },   
30.         {   
31.             id: 999,   
32.             title: 'Repeating Event',   
33.             start: new Date(y, m, d+4, 16, 0),   
34.             allDay: false  
35.         },   
36.         {   
37.             title: 'Meeting',   
38.             start: new Date(y, m, d, 10, 30),   
39.             allDay: false  
40.         },   
41.         {   
42.             title: 'Lunch',   
43.             start: new Date(y, m, d, 12, 0),   
44.             end: new Date(y, m, d, 14, 0),   
45.             allDay: false  
46.         },   
47.         {   
48.             title: 'Birthday Party',   
49.             start: new Date(y, m, d+1, 19, 0),   
50.             end: new Date(y, m, d+1, 22, 30),   
51.             allDay: false  
52.         },   
53.         {   
54.             title: 'Click for Google',   
55.             start: new Date(y, m, 28),   
56.             end: new Date(y, m, 29),   
57.             url: 'http://google.com/'  
58.         }   
59.     ]   
60. });  

大致可以看的出來有許多地方可以設定，而行事曆上的記事則是用json格式把值給丟進去，就會自動在行事曆上標示出來了。

要知道怎麼使用，也有很詳細的文件說明
Document