| Issue 2028: | Add an HTML id to event DIVs | |
| 1 person starred this issue and may be notified of changes. | Back to list |
By adding an HTML id to event DIVs one can attach (for example) Bootstrap popovers to an event and unobtrusively show additional information on any event. I generated a unique DIV id by combining the default DIV name "fc-event" and suffix it with the primary key of my events, like "fc-event-229" which would point to an event in my database with primary key 229.
See attached screenshot.
The changes I made:
- changed function buildHTMLForSegment to add a unique DIV id based on the event primary key:
if (url) {
html += "<a href='" + htmlEscape(url) + "'";
}else{
// begin modification (add HTML id to segment DIV
html += "<div id='fc-event-" + segment.event.pk + "'";
// end modification
// original:
// html += "<div";
// end original
}
- added the following line of code to functions prev(), prevYear(), next(), nextYear() to clean up any popovers which were not closed by the user upon navigating the calendar:
$("div").filter(".popover").remove();
Upon retrieval of your events, add the popovers with your custom data:
$.ajax({
type: 'POST',
url: 'get-bookings',
data: {properties: JSON.stringify(selectedProperties)},
success: function (events_as_json_data) {
$("#calendar").fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: "prevYear,nextYear"
},
firstDay: 6,
editable: false,
events: events_as_json_data,
eventClick: function(calEvent, jsEvent, view) {
id = "fc-event-" + calEvent.pk
$("#" + id).popover({
"title": "<i class='icon-user'></i> " + calEvent.title,
"content": "<table>...add your custom data....</table>"
"trigger": "manual",
"placement": "top",
"container": "body",
"html": true
});
// Toggle the popover.
$("#" + id).popover("toggle");
}
});
}
});
Jun 7, 2014
Project Member
#1
adamrs...@gmail.com
Status:
Done
|
|
| ► Sign in to add a comment |