本文介绍了javaweb项目fullcalendar日历插件使用的示例代码,分享给大家,具体如下:
使用fullcalendar需要引用的文件
1.css文件
2.js文件
1
2
3
|
<link href= "${base}/assets/global/plugins/fullcalendar/fullcalendar.min.css" rel= "external nofollow" rel= "stylesheet" type= "text/css" /> <script src= "${base}/assets/global/plugins/fullcalendar/fullcalendar.min.js" type= "text/javascript" ></script> |
生成日历主界面
fullcalendar·里有个events属性,可以从数据库查询数据动态添加事项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
events: function(start,end,timezone, callback) { //当前日期 var date = this .getdate().format( 'yyyy-mm-dd' ); $.ajax({ url: ctx + "/teach/attend-getcalendareventsbyclazzid.do" , datatype: 'json' , data: { calendarclazzid : function(){ return calendarclazzid; }, date : date }, success: function(result) { var events = []; $.each(result,function(index,r){ var begintime = r.datetime.substring( 0 , 11 ) + r.begintime.substring( 11 , 20 ); var endtime = r.datetime.substring( 0 , 11 ) + r.endtime.substring( 11 , 20 ); if (r.numbers != 0 ) { events.push({ title : r.numbers + "人缺勤" , id : r.id, start : begintime, end : endtime, backgroundcolor : r.numbers >= 3 ? metronic.getbrandcolor( 'red' ) :metronic.getbrandcolor( 'yellow' ) }); } else { events.push({ title : "全部出勤" , id : r.id, start : begintime, end : endtime, backgroundcolor : metronic.getbrandcolor( 'green' ) }); } }) callback(events); } }); }, |
可以给传递到后台的参数重新赋值,并刷新页面事项,可以调用如下代码:
1
|
$( '#calendar' ).fullcalendar( 'refetchevents' ); |
没选择班级之前默认日历界面
选择不同的班级,ajax会根据不同的班级id以及当前日期到后台查询事项并刷新\
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:http://blog.csdn.net/ezreal_geng/article/details/77648350