效果圖javascript
html代碼，須要引入jquery，layui,fullCalendarcss
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fullCalendar</title> <link rel="stylesheet" href="fullcalendar-3.9.0/fullcalendar.print.css" media='print' /> <link rel="stylesheet" href="fullcalendar-3.9.0/fullcalendar.css" /> <!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>--> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.css"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.print.css"></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> <script src="layui/layui.all.js"></script> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <button class="layui-btn" onclick="render()">btn</button> <button class="layui-btn" onclick="destory()">destory</button> <div id='calendar'></div> </body> <script src="fullcalendar-3.9.0/lib/jquery.min.js"></script> <script src="fullcalendar-3.9.0/lib/moment.min.js"></script> <script src="fullcalendar-3.9.0/lib/jquery-ui.min.js"></script> <script src="fullcalendar-3.9.0/fullcalendar.js"></script> <script> $(document).ready(function() { $('#calendar').fullCalendar({ customButtons: { myCustomButton: { text: '自定義按鈕', click: function() { alert('點擊了自定義按鈕!'); } } }, //頭工具欄，三個位置，左中右，https://www.helloweba.net/javascript/447.html#fc-header 有固定參數。 header: { left: 'prev,next today myCustomButton', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: '2018-11', //默認時間， defaultView:'month', //默認視圖 editable: true,//能夠被編輯 weekNumbers:true,//顯示週數 selectable: true,//是否容許用戶單擊或者拖拽日曆中的天和時間隙。默認false。 firstDay: 1,//設置每週第一天，數字int型，默認0（週日） timezone: 'local',//時區 timeFormat: 'HH:mm:ss',//時間格式 eventLimit: true, // allow "more" link when too many events loading: function( isLoading, view ){ //暫時這裏沒有看到效果 console.log("loading回調",view) }, events: [ //日曆顯示的事件，數組形式顯示的 { title: 'All Day Event', start: '2018-11-01', color:'red'//不一樣事件不一樣顏色 }, { title: 'Long Event', start: '2018-11-07', end: '2018-11-10', colorl:'blue' }, { id: 999, title: 'Repeating Event', start: '2018-11-09T16:00:00', color:'#30ff18' }, { id: 999, title: 'Repeating Event', start: '2018-11-16T16:00:00' }, { title: 'Conference', start: '2018-11-11', end: '2018-11-13' }, { title: 'Meeting', start: '2018-11-12T10:30:00', end: '2018-11-12T12:30:00' }, { title: 'Lunch', start: '2018-11-12T12:00:00' }, { title: 'Meeting', start: '2018-11-12T14:30:00' }, { title: 'Happy Hour', start: '2018-11-12T17:30:00' }, { title: 'Dinner', start: '2018-11-12T20:00:00' }, { title: 'Birthday Party', start: '2018-11-13T07:00:00' }, { title: 'Click for Google', url: 'http://google.com/', start: '2018-11-28' } ], eventMouseover: function( event, jsEvent, view ) { //鼠標劃過的事件 layer.tips(event.title, this); }, eventMouseout:function( event, jsEvent, view ) { //鼠標離開的事件 var index = layer.tips(); layer.close(index); }, selectAllow : function(clickInfo) {//禁止點擊的控制,是否容許點擊false不讓點擊， 將用戶選擇限制到某些時間窗口。僅當selectable選項是激活狀態時可用。值爲事件id或對象。 var start = clickInfo.start.unix();//獲取點擊的開始時間 console.log("點擊是否允點擊"); //若是大於當前時間就讓點擊，不然就不讓點擊，提示 if(clickInfo.start >= new Date()){ return true; } //不讓點擊了 提示 layer.msg("選擇時間小於當前時間，不能夠點擊過去的時間"); return false; }, select:function(start, end, jsEvent) { //點擊日曆上的某個時間觸發的函數 //layer.msg("點擊時間控件" + JSON.stringify(jsEvent)); /* 執行順序，先執行selectAllow:判斷是否能夠點擊 而後執行select:點擊了時間空間出發的事件，這兩個控件其實感受在上邊的那個裏邊寫邏輯就能夠 若是能夠執行的事件，就在上邊那個裏邊直接寫，不能夠執行的，就直接提示反饋fase，這樣就不能夠點擊了。 */ layer.msg("點擊時間控件"); }, eventClick: function(eventObj) {//點擊日期控件上顯示的事件觸發的事件 layer.msg("我點擊的是：11" + eventObj.title ); console.log("我點擊的是",eventObj) }, }); }); /** * 從新渲染事件到日程控件上 * https://www.helloweba.net/javascript/454.html#fc-EventSourceObject */ function render(){ var json = '{"state":"ok","msg":"操做成功！","calendar":[{"id":1121,"title":"3344- 輔導輔導13 [ 津津]","start":"2018-11-22 15:30:00","remarks":"課程:3344- 輔導輔導13<br>校區:中心校區<br>教室:花樣教室<br>教師:米桂<br>時間:15:30:00-16:00:00<br>課時:1<br>上課學員姓名:津津","end":"2018-11-22 16:00:00"}]}'; var s = $.parseJSON( json ); $('#calendar').fullCalendar('renderEvents', s.calendar, true);//批量渲染事件到日程控件上 } /** * 移除日程插件上的事件 */ function destory(){ $("#calendar").fullCalendar('removeEvents'); } </script> </html>