My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 2028: Add an HTML id to event DIVs
1 person starred this issue and may be notified of changes. Back to list
Status:  Done
Owner:  ----
Closed:  Jun 2014


Sign in to add a comment
 
Reported by rogier.s...@gmail.com, Oct 28, 2013
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");
				}
			});
		}
	});


Screen Shot 2013-10-28 at 22.18.35.png
176 KB   View   Download
Jun 7, 2014
Project Member #1 adamrs...@gmail.com
i'd prefer to not make this built-in behavior and instead let developers achieve this through the `eventRender` callback.
Status: Done
Sign in to add a comment

Powered by Google Project Hosting