4. 大小月曆應用

一、小月曆挑選器

官網：http://www.my97.net/

請直接在樣板加入此行即可，tadtools雖然也有該套件的物件，但語法多很多。

<script type="text/javascript" src="<{$xoops_url}>/modules/tadtools/My97DatePicker/WdatePicker.js"></script>

接著在要輸入日期的input欄位加上以下語法（大括號中的參數並非必要，且可調整）：
```
onClick="WdatePicker({dateFmt:'yyyy-MM-dd', startDate:'%y-%M-%d'})"
```
在input中加上 class='Wdate' 可以加上一個小月曆圖示
其常用的參數如下，更多參數請看：http://www.my97.net/dp/demo/index.htm
- (1) 民國年：dateFmt:'民國yyy年MM月dd日'
- (2) 含時間：dateFmt:'yyyy-MM-dd HH:mm:ss'
- (3) 起始日期：startDate:'1980-05-01' 或 %y-%M-%d %H:%m:%s
- (4) 星期一為第一天：firstDayOfWeek:1
- (5) 最小日期：minDate:'2012-10-24' 或 %y-%M-{%d+2} %H:%m:%s
- (6) 最大日期：maxDate:'2012-10-25'
- (7) 週休禁止：disabledDays:[0,6]
- (8) 顯示週數：isShowWeek:true
- (9) 日期框唯讀：readOnly: true
- (10) 取消週末高亮度：highLineWeekDay: false
- (11) 顯示清空按鈕：isShowClear: false
- (12) 雙月曆：doubleCalendar:true

二、類Google大月曆

官網：http://fullcalendar.io/

直接從 tadtools引用（需2.7.7以上）

if (!file_exists(XOOPS_ROOT_PATH . "/modules/tadtools/fullcalendar.php")) {
    redirect_header("http://www.tad0616.net/modules/tad_uploader/index.php?of_cat_sn=50", 3, _TAD_NEED_TADTOOLS);
}
include_once XOOPS_ROOT_PATH . "/modules/tadtools/fullcalendar.php";
$fullcalendar = new fullcalendar();
$fullcalendar_code = $fullcalendar->render('#calendar', 'get_event.php');
$xoopsTpl->assign('fullcalendar_code', $fullcalendar_code);

若要加入js設定，請用以下方法：
```
$fullcalendar->add_js_parameter('year', 1973);
$fullcalendar->add_js_parameter('month', 6);
$fullcalendar->add_js_parameter('defaultView', 'agendaWeek');
```
- (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: ['日','一','二','三','四','五','六'],

三、擷取日期事件

月曆每切換一個月，會傳回$start以及$end（當下畫面該月的起始及結束日期）
```
$start = date("Y-m-d", $_REQUEST['start'] / 1000);
$end   = date("Y-m-d", $_REQUEST['end'] / 1000);
```

單一事件格式範例：

$myEvents[$i]['id']        = $all['sn'];
$myEvents[$i]['title']     = $all['name'];
$myEvents[$i]['url']       = "index.php?sn={$all['sn']}";
$myEvents[$i]['start']     = $all['birthday'];
$myEvents[$i]['allDay']    = true;
$myEvents[$i]['className'] = "fc-event";

詳細事件參數：http://fullcalendar.io/docs/event_data/Event_Object/
最後請利用json_encode($myEvents) 來轉為json格式並印出來。
- (1) id: 事件辨識名稱，值為整數或字串。（非必須）
- (2) title: 事件名稱（必須）
- (3) allDay: 是否為全日事件（非必須）
- (4) start: 事件開始日期（必須）。
- (5) end: 事件結束日期（非必須）
- (6) url: 點選連結網址（非必須）
- (7) className: Class樣式名稱（非必須）
- (8) editable: 是否可移動或改變大小（非必須）
- (9) startEditable: 是否可改變事件起始日期（非必須）
- (10) durationEditable：是否可改變事件長度（非必須）
- (11) rendering：是否允許是件交替呈現（非必須）
- (12) overlap：是否允許是件交疊呈現（非必須）
- (13) source: 事件資料來源（非必須）
- (14) color ：顏色（非必須）
- (15) backgroundColor ：背景顏色（非必須）
- (16) borderColor ：邊框顏色（非必須）
- (17) textColor ：文字顏色（非必須）