:::

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 :文字顏色(非必須)

:::

搜尋

QR Code 區塊

https%3A%2F%2Fwww.tad0616.net%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D39%26tbdsn%3D1206

書籍目錄

展開 | 闔起

線上使用者

44人線上 (6人在瀏覽線上書籍)

會員: 0

訪客: 44

更多…