我有一些完整的日历和一些活动。当用户徘徊到特定事件时,它将显示有关事件的弹出窗口,其中包含在event.json中给出的标题和消息。我想要实现的是,在div中显示日历底部的最新即将发生的事件(5-6)。
这是代码
<html>
<head>
<link rel="stylesheet" type="text/css" href="fullcalendar.css">
<link rel="stylesheet" type="text/css" href="bootstrap-combined.min.css">
<link rel="stylesheet" type="text/css" href="cal.css">
</head>
<body>
<div id='calendar'></div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="fullcalendar.min.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<script type="text/javascript" src="ctrl.js"></script>
</body>
</html>
脚本:
$(window).load(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$.ajax({
type: "GET",
dataType: "json",
url: "kupArj.json",
success: function(data) {
eventData = data;
eventDataFn(eventData);
}
});
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function() {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
function eventDataFn(eventData) {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
eventRender: function(event, element) {
element.popover({
title: event.title,
placement: 'auto',
html: true,
trigger: 'hover',
animation: 'true',
content: event.msg
});
$('body').on('click', function(e) {
if (!element.is(e.target) && element.has(e.target).length === 0 && $('.popover').has(e.target).length === 0)
element.popover('hide');
});
},
events: eventData
});
}
});