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

简介: 直接贴代码:   个人日程表----天天 html,body { margin:0; padding:0; background: #ffddff; } $(document).

直接贴代码:

 

<%@ 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
相关文章
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
410 0
|
8月前
|
【Qt UI】QT 窗口/控件置顶方法详解
【Qt UI】QT 窗口/控件置顶方法详解
576 0
【Qt UI相关】Qt设置窗体或控件的背景色透明
【Qt UI相关】Qt设置窗体或控件的背景色透明
841 0
一款开源免费美观的WinForm UI控件库
一款开源免费美观的WinForm UI控件库
548 9
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
一款开源、免费、美观的 Avalonia UI 原生控件库 - Semi Avalonia
一款开源、免费、美观的 Avalonia UI 原生控件库 - Semi Avalonia
33 10
推荐3款开源、美观且免费的WinForm UI控件库
推荐3款开源、美观且免费的WinForm UI控件库
282 6
基于Material Design风格开源、免费的WinForms UI控件库
基于Material Design风格开源、免费的WinForms UI控件库!
分享3款开源、免费的Avalonia UI控件库
分享3款开源、免费的Avalonia UI控件库
281 0