<html>
<head>
<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='../fullcalendar/jquery-1.5.2.min.js'></script>
<script type='text/javascript' src='../fullcalendar/jquery-ui-1.8.11.custom.min.js'></script>
<script type='text/javascript' src='../fullcalendar/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'
},
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
today: ["今天"],
firstDay: 1,
buttonText: {
today: '今天',
month: '月',
week: '周',
day: '日',
prev: '上一个月',
next: '下一个月'
}, allDaySlot: true,
selectable: true,
selectHelper: true,
aspectRatio: 2.7,
editable: false,
allDayDefault: true,
editable: true,
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
],
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 h:mm:ss')) ,
end:($.fullCalendar.formatDate(end,'yyyy-MM-dd h:mm:ss')),
allDay:allDay}
);
}
calendar.fullCalendar('unselect');
},
editable: true,
//events:'/tiantian/schedule/containEvents'
events:[]//表示初始化时的数据，这里是空的，等前面的ajax请求返回后就会有新的数据在页面显示
});
//setTimeout("myinit()",1000);
//alert($.fullCalendar.parseDate(3600)+"ddddddddddd");
});
</script> <style type="text/css">
html,body {
margin:0;
padding:0;
background: #ffddff;
}
</style></head>
<body>
<div id='calendar'></div>
</body>
</html>弹出的对话框是默认的，我想问问各位大神，要弹出下图的对话框该怎么写，二楼附图
events:[],//表示初始化时的数据，这里是空的，等前面的ajax请求返回后就会有新的数据
eventClick: function(calEvent, jsEvent, view) {
$(this).css('border-color', 'red');
InitPopup(calEvent.id, calEvent.title, calEvent.start, calEvent.end, calEvent.allDay);//弹出层
}
关于InitPopup()方法就自己构造了
function InitPopup(Id, content, sDate, eDate, allDay) {
//给相关input标签赋值
}
大神，input可以具体写几个吗？格式怎么写....
姓名：<input type="text" id="name" /><br />
邮编：<input type="text" id="post" /><br />
地址：<input type="text" id="addr" />
</div>
<div id='calendar'></div>select: function (start, end, allDay) {
$("#dvInput").dialog({ buttons: [{ text: "Ok", click: function () {
var name = $('#name').val(), addr = $('#addr').val(), post = $('#post').val()
, title = '姓名：' + name + '<br/>邮编：' + post + '<br/>地址：' + addr;
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');
$(this).dialog("close");
}
}]
}); /* var title = prompt('请输入名称:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title + 'fff',
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');*/
},
弹出窗口你根据你想要的样子div或者table拼接一个撒，我说的是编辑日历事件（标示Id、标题、内容、起止事件、内容），添加的话，你想放几个input就放几个啊，提交时ajax提交到后台就是了！
大神，照着你的方法用了
<html>
<head>
<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='../fullcalendar/jquery-1.5.2.min.js'></script>
<script type='text/javascript' src='../fullcalendar/jquery-ui-1.8.11.custom.min.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar.min.js'></script>
<script type ='text/javascript' src ='../jquery1.8.16/jquery.ui.dialog.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'
},
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
today: ["今天"],
firstDay: 1,
buttonText: {
today: '今天',
month: '月',
week: '周',
day: '日',
prev: '上一个月',
next: '下一个月'
},
allDaySlot: true,
selectable: true,
selectHelper: true,
aspectRatio: 2.7,
editable: false,
allDayDefault: true,
editable: true,
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
],
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);
$("#calendar").fullCalendar('renderEvent',obj,true);//把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示
}
});
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
$("#dvInput").dialog({ buttons: [{ text: "Ok", click: function () {
var name = $('#name').val(), addr = $('#addr').val(), post = $('#post').val()
, title = '姓名：' + name + '<br/>邮编：' + post + '<br/>地址：' + addr;
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');
$(this).dialog("close");
}
}]
});
/*
var title = prompt('请输入名称:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title + 'fff',
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');*/
} });
</script> <style type="text/css">
html,body {
margin:0;
padding:0;
background: #ffddff;
}
</style></head>
<body>
<div id="dvInput" title ="请输入内容" style ="display :none">
姓名：<input type ="text" id="name" /><br />
邮编：<input type ="text" id="post" /><br />
地址：<input type ="text" id ="addr" /><br />
</div>
<div id='calendar'></div>
</body>
</html>页面出不来....