fullcalendar扩展
<link rel='stylesheet' type='text/css' href='http://localhost:8080/plugins/resources/js/fullcalendar-1.4.10/fullcalendar.css' />
<script type='text/javascript' src='http://localhost:8080/plugins/resources/js/fullcalendar-1.4.10/jquery-1.4.4.min.js'></script>
<script type='text/javascript' src='http://localhost:8080/plugins/resources/js/fullcalendar-1.4.10/jquery-ui-1.8.6.custom.min.js'></script>
<script type='text/javascript' src='http://localhost:8080/plugins/resources/js/fullcalendar-1.4.10/fullcalendar.js'></script>
<HTML><HEAD><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link type="text/css" rel="StyleSheet" media="all" href="/plugins/resources/css/global.css" />
<script type='text/javascript' src='/plugins/resources/js/common.js'> </script>
<script type='text/javascript' src='/plugins/resources/js/validator.js'> </script>
<script type='text/javascript' src='/plugins/resources/js/iwidget.js'> </script>
<script type='text/javascript' src='/plugins/resources/js/xgrid.js'> </script>
<script type='text/javascript' src='/plugins/resources/js/xTree.js'> </script>
<script type='text/javascript' src='/plugins/resources/js/ireport.js'> </script>
<script type='text/javascript' src='/plugins/resources/js/My97DatePicker/WdatePicker.js'> </script>
<script type='text/javascript' src='/plugins/resources/js/locale_zh_CN.js'> </script>
</HEAD><BODY>
<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;
}
</style>
<script type='text/javascript'>
//$h 因为和$冲突所以 jQuery的$全部替换成jQuery
$h.onReady(function(){
var calendar = jQuery('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay){
var args = {};
args.action = "new";
args.calendar = jQuery.fullCalendar;
args.start = start;
args.end = end;
args.allDay = allDay;
var re = window.showModalDialog("dialog", args, "status=no;help=no;");
//var title = prompt('Event Title:', 'New Event');
if (re) {
$d.execute( "ini","createEvents",{events:re},function(data){
calendar.fullCalendar('renderEvent',
{
cid:data,
title: re.title,
context: re.context,
start: jQuery.fullCalendar.parseDate(re.s),
end: jQuery.fullCalendar.parseDate(re.e),
allDay: re.allDay
}, true
);
});
}
calendar.fullCalendar('unselect');
},
editable: true,
events: [],
eventClick: function(calEvent, jsEvent, view){
var args = {};
args.action = "update";
args.calEvent = calEvent;
args.jsEvent = jsEvent;
args.view = view;
var re = window.showModalDialog("dialog", args, "status=no;help=no;");
if (re) {
re.start = jQuery.fullCalendar.parseDate(re.s);
re._start = re.start;
if (re.e) {
re.end = jQuery.fullCalendar.parseDate(re.e);
re._end = re.end;
}
//re.allDay=false;
delete re.s;
delete re.e;
if (re.returnType == "btnModify") {
re.starttime=toStrDateTime(re.start);//view.calendar.formatDate(re.start, 'u2');
if(re.end)
re.endtime=toStrDateTime(re.end);//view.calendar.formatDate(re.end, 'u2');
var ev = {};
ev.title = re.title;
ev.context=re.context;
ev.starttime=re.starttime;
ev.endtime=re.endtime;
ev.uid=re.uid;
ev.allDay=re.allDay;
ev.cid=re.cid;
//修改
$d.execute( "ini","updateEvents",{events:ev},function(data){
view.calendar.updateEvent(re);
});
}
else {
//删除
$d.execute( "ini","removeEvents",{id:re.cid},function(data){
view.calendar.removeEvents(re._id);
});
}
delete re.returnType;
}
}
});
//重新注册 左上角三个按钮
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);
jQuery('.fc-button-today').bind('click',fnMthChange);
function fnMthChange (){
changeTime(this.innerText);
if(jQuery('#calendar').fullCalendar('getView').name=="month"){
showTime();
}
}
function changeTime(label){
if(jQuery.trim(label)=="◄"){
jQuery('#calendar').fullCalendar('prev');
}else if(jQuery.trim(label)=="►"){
jQuery('#calendar').fullCalendar('next');
}else if(jQuery.trim(label)=="today"){
jQuery('#calendar').fullCalendar('today');
}
}
function showTime(){
var view = jQuery('#calendar').fullCalendar('getView');
var start = toStrDateTime(view.start); //view.calendar.formatDate(view.start, 'u2');
var end = toStrDateTime(view.end);//view.calendar.formatDate(view.end, 'u2');
//查询
$d.execute( "ini","getEvents",{start:start,end:end},function(data){
eval(data);
result=result.convert();
jQuery('#calendar').fullCalendar('removeEvents');
for(var i=0;i<result.length;i++){
result[i].allDay=result[i].allday;
jQuery('#calendar').fullCalendar('renderEvent',result[i]);
}
});
}
showTime();
});
function toStrDateTime(object){
var view = jQuery('#calendar').fullCalendar('getView');
var str = view.calendar.formatDate(object, 'u');
str = str.replace("T", " ");
str = str.replace("Z", "");
return str;
}
</script>
<div id='calendar'></div>
<script type="text/javascript">
$h.init({locale:'zh_CN',path:'/plugins',app:'poc',id:'0,dev,dev'});
</script>
</BODY></HTML>dialog代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<c:page scroll="false" application="poc">
<script type="text/javascript">
var args;
function toStrDateTime(object){
var str = args.calendar.formatDate(object, 'u');
str = str.replace("T", " ");
str = str.replace("Z", "");
return str;
}
window.onload = function(){
args = window.dialogArguments;
var allDay;
var calendar;
var title;
var context;
var start;
var end;
if (args.action == "new") {
allDay = args.allDay;
calendar = args.calendar;
title = '未命名';
context = "";
start = toStrDateTime(args.start);//calendar.formatDate(args.start, 'u2');
end = toStrDateTime(args.end);//calendar.formatDate(args.end, 'u2');
document.getElementById("btnDel").disabled="disabled";
}
else {
allDay = args.calEvent.allDay;
title = args.calEvent.title;
context = args.calEvent.context;
start = args.view.calendar.formatDate(args.calEvent.start, 'u2');
end = args.view.calendar.formatDate(args.calEvent.end, 'u2');
}
var nodes = document.getElementsByName("allDay");
if (allDay) {
nodes[0].checked = "checked";
}
else {
nodes[1].checked = "checked";
}
document.getElementById("title").value = title;
document.getElementById("context").value = context;
document.getElementById("iptS").value = start;
if(nodes[0].checked)
document.getElementById("iptE").value = '';
else{
document.getElementById("iptE").value = end;
}
}
function doClick(tag){
var sS = document.getElementById("iptS").value;
var sE = document.getElementById("iptE").value;
var bS = check(sS);
var bE = sE == "" || check(sE);
if (bS && bE) {
args.calEvent = args.calEvent || {};
args.calEvent.s = document.getElementById("iptS").value;
args.calEvent.e = document.getElementById("iptE").value;
args.calEvent.title = document.getElementById("title").value;
args.calEvent.context = document.getElementById("context").value;
var nodes = document.getElementsByName("allDay");
if (nodes[0].checked) {
args.calEvent.allDay = true;
}
else {
args.calEvent.allDay = false;
}
args.calEvent.returnType = tag.id;
window.returnValue = args.calEvent;
self.close();
}
else {
if (!bS)
//document.getElementById("iptS").nextSibling.innerText = "ERROR";
document.getElementById("iptS").parentNode.getElementsByTagName("label")[0].innerText = "ERROR";
if (!bE)
//document.getElementById("iptE").nextSibling.innerText = "ERROR";
document.getElementById("iptE").parentNode.getElementsByTagName("label")[0].innerText = "ERROR";
window.returnValue = null;
}
}
function check(str){
var re = /(^[1-2][0-9][0-9][0-9]-(\d{2})-(\d{2})$)|(^[1-2][0-9][0-9][0-9]-(\d{2})-(\d{2})\s(\d{2}):(\d{2})$)|(^[1-2][0-9][0-9][0-9]-(\d{2})-(\d{2})\s(\d{2}):(\d{2}):(\d{2})$)/i;
var flag = re.test(str);
/*
if (flag) {
var arr = re.exec(str);
var tmp = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i].length > 4 || arr[i] == "")
continue;
else
tmp.push(arr[i]);
}
if (parseInt(tmp[0]) < 1 || parseInt(tmp[0]) > 12) {
flag = false;
}
if (parseInt(tmp[1]) < 1 || parseInt(tmp[1]) > 31) {
flag = false;
}
}
*/
return flag;
}
</script>
<style type="text/css">
body {
font-size: 9px;
}
</style>
<table cellpadding=2 cellspacing=0>
<tr>
<td>
是否整天：
</td>
<td>
<input id="allDay" name="allDay" type="radio" checked="checked" value="1" onclick="document.getElementById('iptE').value='';">是<input id="allDay" name="allDay" type="radio" value="0">否
</td>
</tr>
<tr>
<td>
开始时间：
</td>
<td>
<input id="iptS" name="iptS">
<label>
</label>
</td>
</tr>
<tr>
<td>
结束时间：
</td>
<td>
<input id="iptE" name="iptE">
<label>
</label>
</td>
</tr>
<tr>
<td>
<label id="labtitle" name="labtitle">
标题：
</label>
</td>
<td>
<input id="title" name="title" size="50"/>
</td>
</tr>
<tr>
<td style="vertical-align:top">
<label id="labcontext" name="labcontext" style="vertical-align:top;">
内容：
</label>
</td>
<td>
<textarea id="context" name="context" cols="40" rows="20">
</textarea>
</td>
</tr>
<tr>
<td colspan=2>
<input id="btnModify" name="btnModify" type="button" onclick="doClick(this);" value="提交"/><input id="btnDel" name="btnDel" type="button" onclick="doClick(this);" value="删除"/><input type="button" onclick="self.close();" value="关闭"/>
</td>
</tr>
</table>
</c:page>CREATE TABLE [dbo].[calendar]( [id] [int] IDENTITY(1,1) NOT NULL, [title] [varchar](500) NULL, [context] [varchar](8000) NULL, [StartTime] [datetime] NULL, [EndTime] [datetime] NULL, [uid] [int] NULL, [allDay] [bit] NULL, PRIMARY KEY CLUSTERED ( [id] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] GO
扩展了ENENTS内容
增加按月查询功能
增加修改删除需要改成你自己使用的库，我用的是自己公司的框架
没有修改fc代码只是在上面的扩展
代码拙劣，能力有限希望对大家有所帮助
相关推荐
t0ckh 2012-01-02
zyb00yaonuli 2011-10-12
xuewenke 2011-06-23
andyhu00 2011-05-18
XiaoSpring 2011-04-13
XHQT0 2017-01-07
melissahexiu 2011-04-06
89291445 2011-04-06
展翅飞翔phpBoy00 2019-03-06