fullcalendar扩展

于 2011-07-28 15:15:37 发布
阅读量129 收藏
点赞数
文章标签： jquery javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/allen0702/article/details/83977650
版权 



<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代码只是在上面的扩展

代码拙劣，能力有限希望对大家有所帮助
allen0702
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值