:::

9. fullcalendar月曆應用

一、 fullcalendar全月曆

  1. 官網:http://arshaw.com/fullcalendar (請將fullcalendar目錄傳至class)
  2. 需搭配jquery,若有用到拖拉或調整大小功能時,則需引入jquery ui
  3. 一般只要引入fullcalendar.css及fullcalendar.js檔即可,gcal.js則是要結合Google行事曆才需要用的。
  4. 基本用法:
  5. <script src='class/fullcalendar/fullcalendar.js' type='text/javascript'></script>
    <link rel='stylesheet' type='text/css' href='class/fullcalendar/fullcalendar.css'>
    <script src='class/fullcalendar/gcal.js' type='text/javascript'></script>
    <script type='text/javascript'>
    $(function() {
        $('#calendar').fullCalendar({
          //相關參數
        })
    });
    </script>
    <div id='calendar'></div>

二、 相關參數:

  1. 起始年月日:year: 1973, month: 6, date: 16
  2. 呈現模式:defaultView:'month' (單月=month , 單周=basicWeek , 單日=basicDay , 單周議程=agendaWeek , 單日議程=agendaDay)
  3. 標題呈現:header: { left:'title', center:'', right:'today prev,next' } (選項有:today,title,prev,next,prevYear,nextYear )
  4. 按鈕文字:buttonText:{today:'今天',prev:'上個月',next:'下個月'}
  5. 高度比例設定:aspectRatio: 1.35(比例越大,高度越小)
  6. 周顯示模式:weekMode:'fixed'(固定秀六週=fixed,顯示實際週數=liquid,顯示實際週數=variable)
  7. 顯示all day欄位:allDaySlot: true(僅在agendaWeek或agendaDay有效)
  8. 定義all day文字:allDayText: '整日'
  9. 起始小時:firstHour: 8
  10. 時間間隔:slotMinutes: 30
  11. 標題格式:titleFormat: {  month: 'yyyy年MMM'  }
  12. 月份全名:monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
  13. 月份簡寫:monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
  14. 星期全名:dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
  15. 星期簡寫:dayNamesShort: ['日','一','二','三','四','五','六'],
  16. 直接加入google行事曆事件:events: 'https://www.google.com/calendar/feeds/taiwan__zh_tw%40holiday.calendar.google.com/public/basic'

三、 事件格式:

  1. 可用如下PHP陣列格式,再用json_encode($myEvents) 來轉為json格式:
    $myEvents[$i]['id']=$sn;
    $myEvents[$i]['title']=$event;
    $myEvents[$i]['start']=strtotime($date);
    • (1)  id: 事件辨識名稱,值為整數或字串。
    • (2)  title: 事件名稱
    • (3)  allDay: 是否為全日事件(非必須)
    • (4)  date: 事件開始日期(同start),支援IETF格式(如:Wed, 18 Oct 2009 13:00:00 EST)、ISO8601格式(如:2009-11-05T13:15:30Z)、或者時間戳記。
    • (5)  start: 事件開始日期(同date)
    • (6)  end: 事件結束日期(非必須)
    • (7)  url: 點選連結網址(非必須)
    • (8)  className: Class樣式名稱(非必須)
    • (9)  editable: 是否可移動或改變大小(非必須)
    • (10)  source: 資料來源(非必須)

 


:::

搜尋

QR Code 區塊

https%3A%2F%2Fmail.tad0616.cp22.secserverpros.com%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbdsn%3D774%26tbsn%3D26

書籍目錄

展開 | 闔起

線上使用者

359人線上 (150人在瀏覽線上書籍)

會員: 0

訪客: 359

更多…