我是使用fullCalendar从数据库渲染事件的新手。我的目的是显示一个包含我的酒店预订详细信息的日历。日历将只显示数据。
这是原始剧本。我不知道应该把调用事件放在哪里，以便从数据库中调用数据。
<script type="text/javascript">
// DO NOT REMOVE : GLOBAL FUNCTIONS!
$(document).ready(function () {
"use strict";
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var hdr = {
left: 'title',
center: 'month,agendaWeek,agendaDay',
right: 'prev,today,next'
};
var initDrag = function (e) {
// 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(e.children().text()), // use the element's text as the event title
description: $.trim(e.children('span').attr('data-description')),
icon: $.trim(e.children('span').attr('data-icon')),
className: $.trim(e.children('span').attr('class')) // use the element's children as the event class
};
// store the Event Object in the DOM element so we can get to it later
e.data('eventObject', eventObject);
// make the event draggable using jQuery UI
e.draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
};
var addEvent = function (title, priority, description, icon) {
title = title.length === 0 ? "Untitled Event" : title;
description = description.length === 0 ? "No Description" : description;
icon = icon.length === 0 ? " " : icon;
priority = priority.length === 0 ? "label label-default" : priority;
var html = $('<li><span class="' + priority + '" data-description="' + description + '" data-icon="' +
icon + '">' + title + '</span></li>').prependTo('ul#external-events').hide().fadeIn();
$("#event-container").effect("highlight", 800);
initDrag(html);
};
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events > li').each(function () {
initDrag($(this));
});
$('#add-event').click(function () {
var title = $('#title').val(),
priority = $('input:radio[name=priority]:checked').val(),
description = $('#description').val(),
icon = $('input:radio[name=iconselect]:checked').val();
addEvent(title, priority, description, icon);
});
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
header: hdr,
buttonText: {
prev: '<i class="fa fa-chevron-left"></i>',
next: '<i class="fa fa-chevron-right"></i>'
},
// defaultView: 'agendaWeek',
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function (date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
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');
},
events: [{
title: 'All Day Event',
start: new Date(y, m, 1),
description: 'long description',
className: ["event", "bg-color-greenLight"],
icon: 'fa-check'
}, {
title: 'Long Event',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 2),
className: ["event", "bg-color-red"],
icon: 'fa-lock'
}, {
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d - 3, 16, 0),
allDay: false,
className: ["event", "bg-color-blue"],
icon: 'fa-clock-o'
}, {
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d + 4, 16, 0),
allDay: false,
className: ["event", "bg-color-blue"],
icon: 'fa-clock-o'
}, {
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false,
className: ["event", "bg-color-darken"]
}, {
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false,
className: ["event", "bg-color-darken"]
}, {
title: 'Birthday Party',
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: false,
className: ["event", "bg-color-darken"]
}, {
title: 'Smartadmin Open Day',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
className: ["event", "bg-color-darken"]
}],
eventRender: function (event, element, icon) {
if (!event.description == "") {
element.find('.fc-event-title').append("<br/><span class='ultra-light'>" + event.description +
"</span>");
}
if (!event.icon == "") {
element.find('.fc-event-title').append("<i class='air air-top-right fa " + event.icon +
" '></i>");
}
},
windowResize: function (event, ui) {
$('#calendar').fullCalendar('render');
}
});
/* hide default buttons */
$('.fc-header-right, .fc-header-center').hide();
$('#calendar-buttons #btn-prev').click(function () {
$('.fc-button-prev').click();
return false;
});
$('#calendar-buttons #btn-next').click(function () {
$('.fc-button-next').click();
return false;
});
$('#calendar-buttons #btn-today').click(function () {
$('.fc-button-today').click();
return false;
});
$('#mt').click(function () {
$('#calendar').fullCalendar('changeView', 'month');
});
$('#ag').click(function () {
$('#calendar').fullCalendar('changeView', 'agendaWeek');
});
$('#td').click(function () {
$('#calendar').fullCalendar('changeView', 'agendaDay');
});
})
</script>
}
目前，您已通过日历的events属性将事件定义为静态数组，这是在使用$('#calendar').fullCalendar...代码设置日历时定义的。要获取动态数据，例如从远程服务器获取数据，您有两个主要选项，如fullCalendar文档中所示。
1) "events"作为JSON提要：https://fullcalendar.io/docs/event_data/events_json_feed/
使用此选项，您只需指定资源的URL，该资源将以fullCalendar期望的格式返回事件，并且可以使用fullCalendar自动发送的参数按时间段筛选事件。
您可以简单地指定提要如下：
events: '/myfeed.php'
它需要能够响应两个GET参数start和end，并根据这些日期过滤返回的列表。上面的文档提供了一个参数值的示例。
如果需要，您还可以选择其他一些选项，但文档再次很好地解释了这些选项。
2) "事件"作为一个函数：https://fullcalendar.io/docs/event_data/events_function/
从本质上讲，在这里，您可以做任何您喜欢的事情来检索数据——可能会涉及ajax调用，但可能会涉及一些定制，或者您可以在将事件返回到fullCalendar之前在客户端处理一些事件。这真的取决于你。但本质上，你将事件定义为一个函数，比如：
events: myGetEventsFunction
然后你可以提供一个回调函数，参数在上面的文档中给出：
function myGetEventsFunction(start, end, timezone, callback) {
...
为您提供了start和end，它们将与日历上当前显示的日期范围相对应，如果您需要，还提供了时区，以及callback，这是一个用于将事件返回到fullCalendar的功能-再次，有关如何使用它的详细示例，请参阅上述文档。
每当用户更改日历视图或更改日期范围时，这些选项中的任何一个都会导致代码运行。
本教程帮助了我。
基本上，您需要有一个表来存储每个事件的id、开始、结束和标题。然后，您需要对从表中检索到的数据进行json编码，并通过Ajax将其提供给日历。