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 h:mm:ss')) ,
end:($.fullCalendar.formatDate(end,'yyyy-MM-dd h: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>
<%@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 h:mm:ss')) ,
end:($.fullCalendar.formatDate(end,'yyyy-MM-dd h: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>