使用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,让其自己触发事件就可以了;而不是再写一遍初始化,那样是没有效果的!!!!!!