4. 大小月曆應用

一、 小月曆挑選器

1. 官網：http://www.my97.net/
2. 請直接在樣板加入此行即可，tadtools雖然也有該套件的物件，但語法多很多。

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

3. 接著在要輸入日期的input欄位加上以下語法（大括號中的參數並非必要，且可調整）：

   onClick="WdatePicker({dateFmt:'yyyy-MM-dd', startDate:'%y-%M-%d'})"

4. 在input中加上 class='Wdate' 可以加上一個小月曆圖示
5. 其常用的參數如下，更多參數請看：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大月曆

1. 官網：http://fullcalendar.io/
2. 直接從 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);

3. 若要加入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: ['日','一','二','三','四','五','六'],

三、 擷取日期事件

1. 月曆每切換一個月，會傳回$start以及$end（當下畫面該月的起始及結束日期）

   $start = date("Y-m-d", $_REQUEST['start'] / 1000);
   $end   = date("Y-m-d", $_REQUEST['end'] / 1000);

2. 單一事件格式範例：

   $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";

3. 詳細事件參數：http://fullcalendar.io/docs/event_data/Event_Object/
4. 最後請利用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 ：文字顏色（非必須）