2013年3月1日 星期五

用 jQuery 製作行事曆- FullCalendar

fullcalendar

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

外掛網址
FullCalendar

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

引入外掛後參考他的程式碼,就會自己產生一個月曆進來
  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
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...