项目中用到了日程展现的内容，采用日历的方式进行了展现，为此采用了FullCalendar插件在基础上进行了开发。效果真的是不错，具体文档请见官网： http://arshaw.com/fullcalendar/docs/，中文翻译详见：http://blog.csdn.net/lgg201/article/details/4818941
由于该部分结合了MY97datepicker日期控件设计到了对fullcalendar 按钮的重新绑定问题。采用jquery的事件绑定机制。
关于MY97datepicker 详见 http://www.my97.net/dp/demo/index.htm
先来个效果图：
直接贴上代码：
需要导入的CSS与js文件列表
<link rel='stylesheet' type='text/css' href='fullcalendar/theme.css' />
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='jquery/jquery-1.5.2.min.js'></script>
<script type='text/javascript' src='jquery/jquery-ui-1.8.11.custom.min.js'></script>
<script type='text/javascript' src='fullcalendar.min.js'></script>
<script type='text/javascript'><!--
var allProjects = new Array();
var hostname = location.hostname;
/*dayclick绑定的函数*/
function showCurrentDayProjects(datetime){
$("#projectlist").empty()
var j = 0
$("#selectDayClick").empty().append(datetime.pattern("yyyy-MM-dd"));
for(var i=0 ;i<allProjects.delRepeat().length;i++){
if (allProjects[i].startDateLong <= datetime.getTime() && allProjects[i].endDateLong >= datetime.getTime()){
$("#projectlist").append("<li><span class='first'>"+(++j)+")</span><span class='second'>"+allProjects[i].projectName+"</span><span class='third'><a href=xxxurl?id="+allProjects[i].id+"'>详情</a></span></li>")
}
}
}
Array.prototype.delRepeat=function(){
var newArray=new Array();
var len=this.length;
for (var i=0;i<len ;i++){
for(var j=i+1;j<len;j++){
if(this[i].id===this[j].id){
j=++i;
}
}
newArray.push(this[i]);
}
return newArray;
}
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var d = new Date();
$("#selecteddate").attr("value",date.pattern("yyyy-MM"));
var calendar = $('#calendar').fullCalendar({
theme: false,
editable:false,
header: {
left: '',
center: 'prev, today next ',
right: 'month' //right: 'month,agendaWeek,agendaDay'
},
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
today: ["今天"],
firstDay: 1,
buttonText: {
today: '本月',
month: '月',
week: '周',
day: '日',
prev: '上一月',
next: '下一月'
},
editable: false,
currentTimezone: 'Asia/Beijing',
eventClick: function(event) {
if($("#eventInfo").css("display")=="none")
{
alert(event.projectName)
var x = window.event.x;
var y = window.event.y;
//alert(x + "<>" + y );
$("#eventInfo").css("display", "block");
$("#eventInfo").css("top",200);
$("#eventInfo").css("left",300);
$("#name").html(event.name);
$("#time").html(event.time);
$("#location").html(event.location);
$("#participants").html(event.participants);
$("#manager").html(event.manager);
}
else
{
$("#eventInfo").css("display", "none");
}
return false;
},
eventMouseover:function(event){
$("#eventInfo").css("display", "block");
$("#eventInfo").css("top",200);
$("#eventInfo").css("left",300);
$("#name").html(event.projectName);
$("#time").html(event.start.pattern("yyyy-MM-dd") +"至"+event.end.pattern("yyyy-MM-dd"));
$("#location").html(event.location);
$("#participants").html(event.participants);
$("#manager").html(event.manager);
$("#eventInfo").show();
},
eventMouseout:function(event){
$("#eventInfo").hide();
},
dayClick: function(date, allDay, jsEvent, view ){
showCurrentDayProjects(date);
},
selectable: false,
selectHelper: false,
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: false,
//events:'/tiantian/schedule/containEvents'
events:[]//表示初始化时的数据，这里是空的，等前面的ajax请求返回后就会有新的数据在页面显示
});
// 重新注册 左上角三个按钮 ： 功能按钮
jQuery('.fc-button-prev').unbind('click');
jQuery('.fc-button-next').unbind('click');
jQuery('.fc-button-prev').bind('click', fnMthChange);
jQuery('.fc-button-next').bind('click', fnMthChange);
jQuery('.fc-button-today').bind('click', fnMthChange);
function fnMthChange() {
changeTime(this.innerText);
if (jQuery('#calendar').fullCalendar('getView').name == "month") {
showTime();
}
}
function perMonth(){
var date = $("#selecteddate").attr("value",date);
var year = date.split("-")[0];
var month = date.split("-")[1];
if(month >1 ){
month = month -1
$("#selecteddate").attr("value",year +"-" +month)
}else{
year = year - 1
month = 12;
$("#selecteddate").attr("value",year +"-" +month)
}
}
function nextMonth(){
var date = $("#selecteddate").attr("value",date)
var year = date.split("-")[0];
var month = date.split("-")[1];
if(month <12 ){
month = Number(month) + 1
$("#selecteddate").attr("value",year +"-" +month)
}else{
year = Number(year) + 1
month = 1;
$("#selecteddate").attr("value",year +"-" +month)
}
}
function thisMyMonth(){
var d = new Date();
// alert("今天星期"+"天一二三四五六".charAt(new Date(d).getDay()));
$("#selecteddate").attr("value",d.pattern("yyyy-MM"));
}
function changeTime(label) {
if (jQuery.trim(label) == "上一月") {
jQuery('#calendar').fullCalendar('prev');
perMonth();
} else if (jQuery.trim(label) == "下一月") {
jQuery('#calendar').fullCalendar('next');
nextMonth();
} else if (jQuery.trim(label) == "本月") {
jQuery('#calendar').fullCalendar('today');
thisMyMonth();
}
}
showTime();
});
function showTime() {
var view = jQuery('#calendar').fullCalendar('getView');
var start = toStrDateTime(view.start); // view.calendar.formatDate(view.start,
// 'u2');
var end = toStrDateTime(view.end);// view.calendar.formatDate(view.end,
// 'u2');
// 查询
var viewStart = $.fullCalendar.formatDate(view.start,"yyyy-MM-dd");
var viewviewName = view.name;
var onlyshowMe = $("#onlyMeTask").attr("checked");
//alert(viewStart+viewName);
//alert(viewStart);
var datetime = new Date().getTime();
$("#calendar").fullCalendar('removeEvents');
for(var i= allProjects.length -1 ;i>0 ;i--){
allProjects.pop();
}
$.getJSON('xxxurl',{onlyMeTask:onlyshowMe,underYear:'2011',underMonth:'12',start:viewStart,datetime:datetime},function(data) {
var j = 0;
$("#fullmonthprojects").empty();
for(var i=0;i<data.length;i++) {
if(data[i].fullMoon == 1 ){
$("#fullmonthprojects").append("<li><span class='first'>"+(++j)+")</span><span class='second'>"+data[i].projectName+"</span><span class='third'><a href='xxxurl?id="+data[i].id+"'>详情</a></span></li>");
continue;
}
allProjects.push(data[i])
//alert(data[i].id);
var obj = new Object();
obj.id = data[i].id;
obj.title = data[i].shortName;
obj.projectName = data[i].projectName;
//obj.allDay = data[i].allDay;
obj.start = new Date(data[i].startDateLong) //$.fullCalendar.parseDate(data[i].startDateLong/1000);
obj.end = new Date(data[i].endDateLong)//$.fullCalendar.parseDate(data[i].end/1000);
obj.backgroundColor = data[i].projectColor;
obj.location = data[i].meetingAddress;
//alert(data[i].start);
//alert(obj.start);
//alert($.fullCalendar.formatDate(obj.start,"yyyy-MM-dd HH:mm:ss"));
$("#calendar").fullCalendar('renderEvent',obj,true);//把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示
}
});
}
function toStrDateTime(object) {
var view = jQuery('#calendar').fullCalendar('getView');
var str = view.calendar.formatDate(object, 'u');
str = str.replace("T", " ");
str = str.replace("Z", "");
return str;
}
function closeEventInfo()
{
$("#eventInfo").css("display","none");
}
function gotoDate(){
var selectdstr = $("#selecteddate").val();
var selectdate = $.fullCalendar.parseDate(selectdstr, "yyyy-mm-dd");
$('#calendar').fullCalendar( 'gotoDate', selectdate.getFullYear(), selectdate.getMonth(), selectdate.getDate());
}
-->
1 楼
jiangzhong
2012-02-23
请问这个可以给我学习下吗？
我的邮箱：853566855@qq.com
先谢谢了
我的邮箱：853566855@qq.com
先谢谢了
2 楼
lovexz365
2012-02-23
这个插件可以下载一个，具体的代码我都贴出来了，就是后台自己在返回个Json格式的数据就可以啦
有问题可以交流啊
有问题可以交流啊
3 楼
jiangzhong
2012-02-23
我下载了 调试不出来
请求到Action数据都有了 但是就是显示不出来
events:"day_init.do"我是这样请求的 这里放静态的数据是可以显示的
请求到Action数据都有了 但是就是显示不出来
events:"day_init.do"我是这样请求的 这里放静态的数据是可以显示的
4 楼
deanwen
2012-02-27
发份给我学习下呗 ， 谢谢， 好人一生平安
306706769@qq.com
306706769@qq.com
5 楼
jiangzhong
2012-03-21
您好 您能否提供body里面的div呢
一个一个去找 有点麻烦
一个一个去找 有点麻烦
6 楼
lovexz365
2012-03-22
body 中的div 很简单的就是一个div
<div id='calendar'> </div>
7 楼
citysun3000
2012-05-21
看到你写的这个示例是用户点击日期后填写内容，然后马上就存到库里。如果要再修改，还得再存。
我想实现的是页面上有一个保存按钮，点击后把当月的所有事件保存到库里，但是如何获取当前月的所有事件data，麻烦给个示例，谢谢。
我想实现的是页面上有一个保存按钮，点击后把当月的所有事件保存到库里，但是如何获取当前月的所有事件data，麻烦给个示例，谢谢。
8 楼
lovexz365
2012-06-18
citysun3000 写道
看到你写的这个示例是用户点击日期后填写内容，然后马上就存到库里。如果要再修改，还得再存。
我想实现的是页面上有一个保存按钮，点击后把当月的所有事件保存到库里，但是如何获取当前月的所有事件data，麻烦给个示例，谢谢。
我想实现的是页面上有一个保存按钮，点击后把当月的所有事件保存到库里，但是如何获取当前月的所有事件data，麻烦给个示例，谢谢。
这个功能我还真的没做过，不过你可以试试对象中有个event数组，你可以试着通过对象取一下，应该会解决你的问题。