Tad 教材網 - 線上書籍

:::

4-1 /templates/phone_book_adm_main_b3.html next

\[1042\] XOOPS模組開發進階
====================

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/39/4.pdf)

### 一、 小月曆挑選器

1. 官網：<http://www.my97.net/>
2. 請直接在樣板加入此行即可，tadtools雖然也有該套件的物件，但語法多很多。 ```
  <pre class="brush:xml;">
  <script type="text/javascript" src="<{$xoops_url}>/modules/tadtools/My97DatePicker/WdatePicker.js"></script>
  ```
3. 接著在要輸入日期的input欄位加上以下語法（大括號中的參數並非必要，且可調整）： ```
  <pre class="brush:xml;">
  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以上） ```
  <pre class="brush:php;">
  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設定，請用以下方法： ```
  <pre class="brush:php;">
  $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（當下畫面該月的起始及結束日期） ```
  <pre class="brush:php;">
  $start = date("Y-m-d", $_REQUEST['start'] / 1000);
  $end   = date("Y-m-d", $_REQUEST['end'] / 1000);
  ```
2. 單一事件格式範例： ```
  <pre class="brush:php;">
  $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/](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 ：文字顏色（非必須）

:::