fullcalendar日历控件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link type="text/css" rel='stylesheet' href='/css/Calendar/theme.css' />
<link type="text/css" href='/css/Calendar/fullcalendar.css' rel='stylesheet' />
<link type="text/css" href='/css/Calendar/fullcalendar.print.css' rel='stylesheet'
media='print' />
<script type="text/javascript" src='/js/Calendar/jquery-1.9.1.min.js'></script>
<script type="text/javascript" src='/js/Calendar/jquery-ui-1.10.2.custom.min.js'></script>
<script type="text/javascript" src='/js/Calendar/fullcalendar.min.js'></script>
<script type="text/javascript">
//为 前一月 后一月 本月 注册的click事件
function fnMthChange() {
changeTime(this.innerText);
}
//响应 前一月 后一月 本月操作
function changeTime(label) {
if (jQuery.trim(label) == "上一月") {
jQuery('#calendar').fullCalendar('prev');
} else if (jQuery.trim(label) == "下一月") {
jQuery('#calendar').fullCalendar('next');
}
}
//获取当前月份
function GetMonth() {
var view = jQuery('#calendar').fullCalendar('getView');
var month = $.fullCalendar.formatDate(view.start, "yyyy-MM");
return month;
}
//绑定数据
function bind() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
// theme: true,
editable: false,
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
today: ["今天"],
firstDay: 1,
buttonText: {
today: '本月',
month: '月',
week: '周',
day: '日',
prev: '上一月',
next: '下一月'
},
selectable: true,
viewDisplay: function (view) {
$.post("/CustomClass/H_JsonData.ashx", { action: "getdata", months: $.fullCalendar.formatDate(view.start, "yyyy-MM") }, function (data) {
$("#calendar").fullCalendar('removeEvents');
var result = jQuery.parseJSON(data);
$.each(result, function (index, trem) {
$("#calendar").fullCalendar('renderEvent', trem, true);
});
});
},
//单击事件项时触发
eventClick: function (calEvent, jsEvent, view) {
//打开编辑or修改窗口
returnValue = window.showModalDialog("/NewsManagement/CalendarModify.aspx?Calendarid=" + calEvent.id + "&number=" + Math.random(), window, "dialogWidth:800px;dialogHeight:600px;status:no;help:no;scroll:no;");
if (returnValue == "true") {
//重新渲染
$.post("/CustomClass/H_JsonData.ashx", { action: "getdata", months: GetMonth() }, function (data) {
$("#calendar").fullCalendar('removeEvents');
var result = jQuery.parseJSON(data);
$.each(result, function (index, trem) {
$("#calendar").fullCalendar('renderEvent', trem, true);
});
});
}
},
dayClick: function (date, allDay, jsEvent, view) {
returnValue = window.showModalDialog("/NewsManagement/CalendarModify.aspx?MEETINGDATE=" + $.fullCalendar.formatDate(date, "yyyy-MM-dd") + "&number=" + Math.random(), window, "dialogWidth:800px;dialogHeight:600px;status:no;help:no;scroll:no;");
if (returnValue == "true") {
//重新渲染
$.post("/CustomClass/H_JsonData.ashx", { action: "getdata", months: GetMonth() }, function (data) {
$("#calendar").fullCalendar('removeEvents');
var result = jQuery.parseJSON(data);
$.each(result, function (index, trem) {
$("#calendar").fullCalendar('renderEvent', trem, true);
});
});
}
}
});
//重新绑定click方法
jQuery('.fc-button-prev').unbind('click');
jQuery('.fc-button-next').unbind('click');
jQuery('.fc-button-prev').bind('click', fnMthChange);
jQuery('.fc-button-next').bind('click', fnMthChange);
}
$(document).ready(function () {
bind();
});
</script>
<style type="text/css">
body
{
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande" ,Helvetica,Arial,Verdana,sans-serif;
}
#calendar
{
width: 900px;
margin: 0 auto;
}
.fc-view table tr th
{
border: 1px solid #aed0ea;
background: #d7ebf9 url(images/ui-bg_glass_80_d7ebf9_1x400.png) 50% 50% repeat-x;
font-weight: bold;
color: #2779aa;
border-width: 1px 0 0 1px text-align: center;
padding: 0;
vertical-align: top;
}
.fc-view table tr td
{
border: 1px solid #dddddd;
background: #f2f5f7 url(images/ui-bg_highlight-hard_100_f2f5f7_1x100.png) 50% top repeat-x;
color: #362b36;
}
.fc-button
{
position: relative;
display: inline-block;
padding: 0 .6em;
overflow: hidden;
height: 1.9em;
line-height: 1.9em;
white-space: nowrap;
cursor: pointer;
border: 1px solid #aed0ea;
background: #d7ebf9 url(images/ui-bg_glass_80_d7ebf9_1x400.png) 50% 50% repeat-x;
font-weight: bold;
color: #2779aa;
}
.fc-button:hover
{
background: #f2f5f7 url(images/ui-bg_highlight-hard_100_f2f5f7_1x100.png) 50% top repeat-x;
}
</style>
</head>
<body>
<div id='calendar'>
</div>
</body>
</html>
