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

andyhu00

2011-05-18

直接贴代码：

<%@ 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>

fullcalendar html代码 string