直接贴代码：
<%@ 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还可以与其他库（如jQuery UI，Moment.js）配合使用，增强其功能。它支持JSON、Ajax等多种数据源，可以与服务器进行异步交互。此外，通过编写自定义插件，可以实现更多高级特性，如拖放...
总结，js和jQuery为开发者提供了丰富的日程表和时间控件解决方案，通过这些工具，可以构建出直观、高效的日程管理应用。了解和掌握这些知识点，对于前端开发者来说至关重要，能帮助他们创建出更高质量的Web应用程序...
- **FullCalendar**：不仅是一个日历控件，还是一个完整的日程管理工具，支持日、周、月视图，事件拖放，多语言等特性。 - **Clndr.js**：轻量级且灵活的日历插件，适合定制化需求。 4. **使用步骤**： - 引入...
5. **FullCalendar**：不仅是一个日期选择器，还是一个完整的日历组件，可以用于展示事件和日程安排。 **三、jQuery UI Datepicker的使用** 以jQuery UI Datepicker为例，它的使用步骤如下： 1. 引入jQuery和...
为了实现这样的功能，开发者可能使用了诸如Android的CalendarView或iOS的EventKit框架等原生控件，或者是利用JavaScript库如FullCalendar、jQuery UI Datepicker等在Web开发中创建自定义的日历组件。开发者需要考虑...
此外，fullcalendar兼容各种浏览器，包括IE8+，并且支持Bootstrap、jQuery UI等前端框架，使其在实际项目中应用广泛。 二、主要功能与特性 1. **多视图显示**：fullcalendar提供了日、周、月、年等多种视图，用户...
在JavaScript编程领域，日历控件是经常被用于网页应用中的一个重要组件，它允许用户方便地选择日期，常用于事件管理、预约系统或者日期输入等场景。本篇将详细介绍四个JavaScript日历控件，帮助你更好地理解和应用...
2. **FullCalendar**：这是一个全功能的JavaScript日历库，特别适合处理复杂的事件安排和日程管理。FullCalendar不仅能显示日、周、月视图，还能进行拖放操作，支持后台数据源，如JSON或数据库。 3. **Bootstrap ...
20. **FullCalendar**：一个全面的日历组件，支持事件管理、拖放操作和多视图显示，适用于日程管理应用。 21. **Day.js Picker**：轻量级的日期时间选择器，类似Moment.js，但更小更简单。 22. **Spectrum ...
这种控件在网页应用中十分常见，例如在预订系统、日程管理或者时间记录等场景。 jQuery日历控件的源码解析可以分为以下几个关键部分： 1. **HTML结构**：首先，创建一个基本的HTML元素，如`<input>`或`<div>`，...
JavaScript日历控件是网页开发中常用的一种交互元素，它为用户提供了一个直观的方式来选择日期，常见于表单输入、事件安排或时间管理等场景。在本文中，我们将深入探讨几种美观且实用的JavaScript日历控件及其代码...
- 日历控件是网页界面中的一种UI元素，用于显示日期并让用户进行选择。 - 它通常通过JavaScript动态生成，与HTML和CSS紧密结合，提供良好的用户体验。 - 日历控件可以有多种展现形式，如弹出式、嵌入式、滑动选择...
JavaScript日历控件是网页开发中常见的一种交互元素，它为用户提供了一个直观的方式来选择日期，常用于表单填充、事件安排或时间管理等场景。在本文中，我们将深入探讨这款经典实用的JavaScript日历控件，了解其核心...
在IT领域，日历控件是用户界面设计中不可或缺的一部分，尤其在开发具有时间管理功能的应用程序时。本文将深入探讨四种优秀的日历控件，它们不仅实用，而且具有广泛的应用场景。 1. **jQuery UI Datepicker** ...
日历控件是网页应用中常见的一种组件，通常用于用户输入日期或选择日期的场景，如预订系统、日程安排或者事件管理等。JavaScript 和 jQuery 提供了丰富的日历插件和自定义解决方案，使开发者能够快速地集成日历功能...
在IT领域，日历控件是一种常见的用户界面组件，它被广泛应用于各种应用程序，如日程管理、事件安排、时间规划等。日历控件通常包含一个可视化的日历布局，用户可以通过它来查看日期、选择日期或者设置特定日期的事件...
日历控件的实现方式多样，可以通过原生JavaScript编写，也可以借助第三方库如jQuery UI、FullCalendar、Pickadate.js等实现。 1. 原生JavaScript实现日历控件： 使用原生JS编写日历控件需要考虑DOM操作、事件处理...
【日历日程表jsp】是一个基于Java Web技术（JSP和Servlet）开发的日历应用程序，主要用于管理和规划个人或团队的日程安排。该程序提供了一个交互式的日历界面，用户可以方便地添加、删除和查看日程，同时限制只能...
你可以使用像jQuery UI、FullCalendar这样的库，或者自己编写脚本来实现更复杂的逻辑。 - **CSS**：CSS用于美化日历的外观，包括颜色、布局、字体等。可以使用预处理器如Sass或Less来提高代码的可维护性。 3. **...
- **jQuery UI Datepicker**: jQuery UI库中的Datepicker插件是最常用且功能丰富的日历控件之一，支持多种国际化的日期格式，有多种主题可供选择，还可以自定义日期范围和日期选择器的样式。 - **FullCalendar**: ...