直接贴代码：
<%@ 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做的日程管理，有代码
主要介绍了在Vue项目中用fullcalendar制作日程表，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用了jquery日历插件FullCalendar，使用通过PHP程序调用了MYSQL的数据库，实现HTML静态页在线AJAX新建日程，修改、删除日程序，本集成了中国人的农历，采用了UTF8的编码，根目录里带有SQL数据库，下载后导入你的...
通过Fullcalendar，你可以做出一个完全类似google日历的程序。 它使用起来不难，因为它是基于jQuery UI的，继承了简单用法的特征。
日程安排：jQuery的日历插件 FullCalendar Java MySQL
jQuery日历插件FullCalendar 演示地址：http://www.jq22.com/jquery-info278
fullCalendar+fancybox+struts2实现的日程安排效果。 前台采用fullCalendar实现日历效果，同一天可以增加多个日程安排，当效果超过配置的最大数量时，将会隐藏多余的日程安排，通过单击超链接显示... jquery-ui-1.10
我的议程项目 迷你项目，包括带有ReactJs和NodeJs和MongoDB的fullcalendar和jquery-ui可拖动插件。
fullcalendar日历控件，可以直接到官网下载，里面是js包和例子
将Jquery日历控件fullCalendar中将dayClick改为双击或单击事件的方法，此方法也可以用于更改日历控件的其他api的事件
Laravel开发-laravel-fullcalendar-scheduler 完整日历计划程序模块的Laravel组件
Laravel开发-laravel-fullcalendar 完整日历包的Laravel组件
NULL 博文链接：https://zzc1684.iteye.com/blog/2258307
fullcalendar-scheduler-master
Vue中使用Fullcalendar日历开发日程安排代码完整版(项目示例)
FullCalendar用来做日程管理功能非常强大，但是唯一不足的地方是没有将中国农历历法加进去，今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中，从而增强其实用性。 HTML 首先是要载入...
在线演示 源码下载 ...如果您还想要拖动日程的功能，那么还需要加入jQuery ui插件。 <link rel="stylesheet" type="text/css" href="css/fullcalendar.css" rel="external nofollow" > [removed][removed]
fullcalendar 日历 控件 知识点集合
laravel-fullcalendar, Laravel FullCalendar.io helper Laravel 5完整日历 helper 为 Laravel 4.2提供了英镑的收费： 使用 laravel-4 分支( )这是一个简单的helper 包，可以在 Laravel 应用程序中生成 http://full