:::

7. 月曆功能

一、讓輸入框可以選擇日期、時間

1.網頁檔頭務必為:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery_ui_datepicker/jquery_ui_datepicker.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $('#date').datetime({
        userLang    : 'zh-TW',
        americanMode: false,
    });
});
</script>
<script src="js/jquery_ui_datepicker/i18n/ui.datepicker-zh-TW.js" type="text/javascript"></script>
<script src="js/jquery_ui_datepicker/timepicker_plug/timepicker.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="js/jquery_ui_datepicker/timepicker_plug/css/style.css">
<link rel="stylesheet" type="text/css" href="js/jquery_ui_datepicker/smothness/jquery_ui_datepicker.css">

 

二、整合fullcalendar 1.4全頁面月曆

<script src="js/fullcalendar/fullcalendar.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="js/fullcalendar/fullcalendar.css">
<script type="text/javascript">
$(function() {
    $('#calendar').fullCalendar({
      //相關參數
    })
});
</script>


1.相關參數:
(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

三、事件格式

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: 資料來源(非必須)


:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

17人線上 (5人在瀏覽線上書籍)

會員: 0

訪客: 17

更多…