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

来源:互联网 发布:king发布域名的软件 编辑:程序博客网 时间:2024/04/27 10:39

直接贴代码:

 

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