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

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

直接贴代码：

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

1 楼 jiangzhong 2012-02-21

您好，请问能否帮忙发现这个的完整实例 jsp的学习学习下
853566855@qq.com 谢谢了

2 楼 234390216 2012-02-21

jiangzhong 写道

您好，请问能否帮忙发现这个的完整实例 jsp的学习学习下
853566855@qq.com 谢谢了

你好，上面的就是一个完整的jsp页面

3 楼 jiangzhong 2012-02-22

谢谢了我再研究研究

4 楼 234390216 2012-02-22

jiangzhong 写道

谢谢了我再研究研究

不客气

5 楼 jiangzhong 2012-02-22

运行不起来哎你也是长沙的吗

6 楼 234390216 2012-02-22

jiangzhong 写道

运行不起来哎你也是长沙的吗

7 楼 jiangzhong 2012-02-23

调试不出来对前台不是很熟

8 楼 234390216 2012-02-23

jiangzhong 写道

调试不出来对前台不是很熟

那你找身边的人帮帮吧

9 楼 234390216 2012-02-23

jiangzhong 写道

调试不出来对前台不是很熟

刚刚给你发了个邮件，我们可以一起探讨一下。

10 楼 angel1472583690 2012-08-01

你好。我想请问，回执出来的月历。会多了一行。比如2012的7月是1号到31号，可是它会绘制多一行。31号之后，还会显示到11号。本来是5行7列。结果显示6行7列。这个问题如何解决？

11 楼爱学习的傻瓜 2012-08-20

这个对我太有帮助了，谢谢 jquery-ui fullCalendar 可用来设计日程管理的控件

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

相关推荐