jquery-ui fullCalendar可用于设计日程管理的控件

来源：互联网发布：大数据精准搜索功能编辑：程序博客网时间：2024/04/26 06:54
本文介绍的是使用jQuery UI的fullCalendar控件实现日程管理的一个示例。
Jsp代码
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>  
<%@taglib prefix="s" uri="/struts-tags" %>  
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <base href="<%=basePath%>">  
      
    <title>个人日程表----天天</title>  
      
    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="This is my page">  
    <!--  
    <link rel="stylesheet" type="text/css" href="styles.css">  
    -->  
    <link rel="stylesheet" type="text/css" href="css/fullcalendar.css">  
    <style type="text/css">  
        html,body {  
            margin:0;  
            padding:0;  
            background: #ffddff;  
        }  
    </style>  
    <script type="text/javascript" src="js/jquery.js"></script>  
    <script type="text/javascript" src="js/fullcalendar.min.js"></script>  
    <script type="text/javascript">  
        $(document).ready(function() {  
            var date = new Date();  
            var d = date.getDate();  
            var m = date.getMonth();  
            var y = date.getFullYear();  
              
            var calendar = $('#calendar').fullCalendar({  
                header: {  
                    left: 'prev,next today',  
                    center: 'title',  
                    right: 'month,agendaWeek,agendaDay'  
                },  
                viewDisplay: function(view) {  
                    var viewStart = $.fullCalendar.formatDate(view.start,"yyyy-MM-dd");  
                    var viewName = view.name;  
                    //alert(viewStart+viewName);  
                    $("#calendar").fullCalendar('removeEvents');  
                    $.getJSON('schedule/containEvents',{start:viewStart,viewName:viewName},function(data) {  
                        for(var i=0;i<data.length;i++) {  
                            //alert(data[i].id);  
                            //alert(data[i].allDay);  
                            var obj = new Object();  
                            obj.id = data[i].id;  
                            obj.title = data[i].title;  
                            obj.allDay = data[i].allDay;  
                            obj.start = $.fullCalendar.parseDate(data[i].start/1000);  
                            obj.end = $.fullCalendar.parseDate(data[i].end/1000);  
                            //alert(data[i].start);  
                            //alert(obj.start);  
                            //alert($.fullCalendar.formatDate(obj.start,"yyyy-MM-dd HH:mm:ss"));  
                            $("#calendar").fullCalendar('renderEvent',obj,true);//把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示  
                        }  
                    });  
                },  
                selectable: true,  
                selectHelper: true,  
                select: function(start, end, allDay) {  
                    var title = prompt('请输入名称:');  
                    if (title) {  
                        calendar.fullCalendar('renderEvent',  
                            {  
                                title: title,  
                                start: start,  
                                end: end,  
                                allDay: allDay  
                            },  
                            true // make the event "stick"  
                        );//把刚输入的日程计划在页面上进行显示  
                        //alert($.fullCalendar.formatDate(start,'yyyy-MM-dd HH:mm:ss'));  
                        $.post("schedule/add",{//把刚输入的日程计划信息传到后台，保存到数据库  
                            title: title,  
                            start:($.fullCalendar.formatDate(start,'yyyy-MM-dd HH:mm:ss')) ,  
                            end:($.fullCalendar.formatDate(end,'yyyy-MM-dd HH:mm:ss')),  
                            allDay:allDay}  
                        );  
                    }  
                    calendar.fullCalendar('unselect');  
                },  
                editable: true,  
                //events:'/tiantian/schedule/containEvents'  
                events:[]//表示初始化时的数据，这里是空的，等前面的ajax请求返回后就会有新的数据在页面显示  
            });  
            //setTimeout("myinit()",1000);  
              
            //alert($.fullCalendar.parseDate(3600)+"ddddddddddd");  
        });  
    </script>  
  </head>  
    
  <body>  
    <div id="calendar"></div>  
  </body>  
</html>  
0 0