FullCalendar學習筆記1-入門
阿新 • • 發佈：2019-02-18
官網下載
解壓後修改了demos裡面basic-views的一些引數,完整HTML參考:<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <link href='../fullcalendar.min.css' rel='stylesheet' /> <link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' /> <script src='../lib/moment.min.js'></script> <script src='../lib/jquery.min.js'></script> <script src='../fullcalendar.min.js'></script> <!-- 載入中文語言包,必須放在fullcalendar.min.js的後面 --> <script src="../locale/zh-cn.js"></script> <script> $(document).ready(function () { $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,basicWeek,basicDay,listMonth' //對應日曆右上角的顯示模式切換按鈕:月/周/日/清單 }, // defaultDate: '2018-03-12', timeFormat: 'HH:mm', //定義表格中顯示的時間格式如：22：30，預設格式為HH(:mm)效果是整點的時候自動隱藏分鐘，例如23：00會顯示成23 displayEventEnd: true, //顯示事件的結束時間，預設是false aspectRatio: 1, //設定日曆單元格顯示的寬高比,數值越小越窄高 navLinks: true, // can click day/week names to navigate views eventLimit: true, // allow "more" link when too many events editable: true, //允許編輯 eventStartEditable: true, //允許直接在介面中編輯事件的開始時間 eventDurationEditable: true, //允許編輯事件的時長 eventClick: function (calEvent, jsEvent, view) { //單擊日曆中事件時觸發的函式,實現效果是獲取當前點選事件的標題,開始時間,結束時間傳給DOM控制元件 $("#event").val(calEvent.title); var starttime = moment(calEvent.start).format('YYYY-MM-DD HH:mm:ss'); //使用moment.js對時間進行格式化 var endtime = moment(calEvent.end).format('YYYY-MM-DD HH:mm:ss'); $("#starttime").val(starttime); $("#endtime").val(endtime); }, events: [ { id: 1, title: '張夢傑', start: '2018-05-14 23:00:00', end: '2018-05-14 23:30:00', }, { id: 2, title: '常遠', start: '2018-05-15 08:00:00', end: '2018-05-15 10:00:00', }, { id: 3, title: '劉嘉琦', start: '2018-05-15 10:00:00', end: '2018-05-15 12:00:00', }, { id: 3, title: '邵佳豪', start: '2018-05-15 14:00:00', end: '2018-05-15 16:00:00', }, { id: 4, title: '董益良', start: '2018-05-15 16:30:00', end: '2018-05-15 18:30:00', }, { id: 4, title: '張展驥', start: '2018-05-15 19:00:00', end: '2018-05-15 21:00:00', }, ] }); }); </script> <style> body { margin: 40px 10px; padding: 0; font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif; font-size: 14px; } #calendar { max-width: 900px; margin: 0 auto; } </style> </head> <body> <div style="width:750px;margin:20px auto"> <span>事件內容:</span> <input type="text" id="event"> <span>開始時間:</span> <input type="datetime" id="starttime"> <span>結束時間:</span> <input type="text" id="endtime"> </div> <div id='calendar'></div> </body> </html>
顯示效果：
