求大神指教，关于jQuery fullcalendar日历控件问题
下面代码是fullcalendar官方的，我想问问大神，
$('#calendar').fullCalendar({
dayClick: function() { alert('a day has been clicked!'); }
});
这段代码怎么运用，页面实现点击日历弹出对话框？
<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() {
$('#external-events div.external-event').each(function() {
var eventObject = {
title: $.trim($(this).text())
};
$(this).data('eventObject', eventObject);
$(this).draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
});
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
drop: function(date, allDay) {
var originalEventObject = $(this).data('eventObject');
var copiedEventObject = $.extend({}, originalEventObject);
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
if ($('#drop-remove').is(':checked')) {
$(this).remove();
}
}
});
});
</script>
<style type='text/css'>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#wrap {
width: 1100px;
margin: 0 auto;
}
#external-events {
float: left;
width: 150px;
padding: 0 10px;
border: 1px solid #ccc;
background: #eee;
text-align: left;
}
#external-events h4 {
font-size: 16px;
margin-top: 0;
padding-top: 1em;
}
.external-event { /* try to mimick the look of a real event */
margin: 10px 0;
padding: 2px 4px;
background: #3366CC;
color: #fff;
font-size: .85em;
cursor: pointer;
}
#external-events p {
margin: 1.5em 0;
font-size: 11px;
color: #666;
}
#external-events p input {
margin: 0;
vertical-align: middle;
}
#calendar {
float: right;
width: 900px;
}
</style>
</head>
<body>
<div id='wrap'>
<div id ='external-events'>
<h4>日程事件（拖拽）</h4>
<div class ='external-event '>我的事件1</div>
<div class ='external-event '>我的事件2</div>
<div class ='external-event '>我的事件3</div>
<div class ='external-event '>我的事件4</div>
<div class ='external-event '>我的事件5</div>
<p>
<input type ="checkbox" id='drop-remove' /> <label for='drop-remove'>移动后删除</label>
</p>
</div>
<div id='calendar'></div>
<div style ='clear:both'></div>
</div>
</body>
</html>
[解决办法]
$('#calendar').fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
if (allDay) {
alert('Clicked on the entire day: ' + date);
}else{
alert('Clicked on the slot: ' + date);
}
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('Current view: ' + view.name);
// change the day's background color just for fun
$(this).css('background-color', 'red');
}
});
[解决办法]
可以看看官网的Demo，
http://arshaw.com/js/fullcalendar-1.5.4/demos/selectable.html
应该是这段
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
}