使用fullcanlendar 完成課程排期 表單提交重新渲染
使用 fullcanlendar完成課程排期效果如下:
![這裏寫圖片描述] 
![這裏寫圖片描述] 
新建項目
html代碼
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>fullcalendar</title>
<link rel="stylesheet" href="css/fullcalendar.css">
<link rel="stylesheet" href="css/fullcalendar.print.css">
<script type="application/javascript" src="js/jquery.js"></script>
<script type="application/javascript" src="js/moment.js"></script>
<script type="application/javascript" src="js/fullcalendar.js"></script>
<script type="application/javascript" src="js/zh-cn.js"></script>
</head>
<body>
<div>
<a href="http://www.hiwiki.cn/">www.hiwiki.cn </a>
</div>
<!--定義一個容器 讓fullcalendar渲染-->
<div id='league-calendar'>
</div>
</body>
</html>js代碼
/**
* Created by wanglei on 17-11-29.
* QQ:1157852461
*/
$(document).ready(function () {
var $calendar=$('#league-calendar'),
$searchForm=$('#searchForm'),
$code=$searchForm.find('input[name=code]');
//表單提交
$searchForm.on('submit',function(){
$calendar.fullCalendar('refetchEvents');//主動觸發
return false;
});
//日曆初始化
$calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,listWeek'
},
fixedWeekCount:false,
handleWindowResize:false,
locale: 'zh-cn',
height: 850,
formatDates:"YYYY-MM-DD hh:mm:ss",
buttonIcons: true, // 圖標顯示
weekNumbers: false, //顯示第幾周，false-不顯示
weekMode:'liquid',
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, //
events: function(start,end,timezone, callback) {//事件回調觸發渲染
var url='js/data.json';
if($code.val()){
url= $code.val()=='2'?'js/data2.json':'js/data.json';
}else{
alert('請輸入1或者2來模擬');
return false;
}
$.get(url, function(data){
var events = [];
$.each(data.data,function(i,v) {
events.push({
title:v.course+" \n "+v.coach+" _ "+v.place,
url:'http://www.hiwiki.cn/',
start:v.date+" "+v.beginTime ,
end: v.date+" "+v.endTime,
textColor:'#333',
backgroundColor:'#fff',
borderColor: '#fff'
})
});
callback(events);
});
}
});
});3種渲染模式
events (as an array)
events (as a json feed)
events (as a function)
This is triggered when the user clicks prev/next or switches views.
當想要用表單提交搜索,只需要refetchEvents,讓其自己觸發事件就可以了;而不是再寫一遍初始化,那樣是沒有效果的!!!!!!