Dynamic Event Template in FullCalendar

Question

Is there a way to dynamically change an event template in FullCalendar?

Update . I want to specify a new html event (for example, in the eventRender callback) and make FullCalendar to use it. Something like that:

eventRender: function(event, element, view) { var template = '<div class="customEvent"></div>'; return $.parse(template); } 

I tried the sample above - it did not work.

Answer 1

The eventRender callback function can modify an element, return a new DOM element that will be used for rendering instead , or it can return false, which prevents the event from being rendered at all.

http://fullcalendar.io/docs/event_rendering/eventRender/

Example here: http://jsfiddle.net/3E8nk/506/

 $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: '2014-06-12', editable: true, eventRender: function(event, element, view) { return $('<div>' + event.title + '</div>'); }, events: [ { title: 'All Day Event', start: '2014-06-01' }, { title: 'Long Event', start: '2014-06-07', end: '2014-06-10' }, { id: 999, title: 'Repeating Event', start: '2014-06-09T16:00:00' }, { id: 999, title: 'Repeating Event', start: '2014-06-16T16:00:00' }, { title: 'Meeting', start: '2014-06-12T10:30:00', end: '2014-06-12T12:30:00' }, { title: 'Lunch', start: '2014-06-12T12:00:00' }, { title: 'Birthday Party', start: '2014-06-13T07:00:00' }, { title: 'Click for Google', url: 'http://google.com/', start: '2014-06-28' }, ] }); 

Answer 2

You can add meta-information about the event, for example, classes and style:

 events: [{ title: 'Blue Event', start: '2014-06-01', description: 'Lorem ipsum lorem ipsum', class: 'blue main' }] 

And CSS:

 .fc-event.blue {} .fc-event.main {} 

In eventRender enter classes with

 eventRender: function (event, element) { element.addClass(event.class) } 

And add more content, for example:

 if (event.description) { element.find('.fc-event-inner') .append("<div class='desc'>" + event.description + "</div>"); } 

 $(document).ready(function () { $('#calendar').fullCalendar({ header: { left: '', center: '', right: '' }, defaultDate: '2014-06-12', eventRender: function (event, element) { if (event.description) { element.find('.fc-event-inner') .append("<div class='desc'>" + event.description) + "</div>"; } element.addClass(event.class) }, events: [{ title: 'Blue Event', start: '2014-06-01', description: 'Lorem ipsum lorem ipsum', class: 'blue main' }, { title: 'More Blue', start: '2014-06-01', description: 'More lorem ipsum', class: 'blue main' }, { title: 'Long Event', start: '2014-06-07', end: '2014-06-10', class: 'red main' }, { title: 'Meeting', start: '2014-06-12T10:30:00', end: '2014-06-12T12:30:00', class: 'blue main' }, { title: 'Lunch', start: '2014-06-12T12:00:00', class: 'blue main' }, { title: 'Birthday Party', start: '2014-06-13T07:00:00', class: 'red main' }, ], }); }); 

 body { background-color: #eaefb5; font-family: sans-serif; } .fc-event-time, .fc-event-title { padding: 0 1px; float: left; clear: none; margin-right: 10px; } .fc-event.main { border: 5px solid #bbb; margin: 5px; padding: 3px } .fc-event.red { background-color: #f85032; } .fc-event.red .fc-event-title { font-family: Tahoma; font-size: 1.2em } .fc-event.blue { background: #87e0fd; background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #87e0fd), color-stop(40%, #53cbf1), color-stop(100%, #05abe0)); background: -webkit-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); background: -o-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); background: -ms-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); background: linear-gradient(to bottom, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#87e0fd', endColorstr='#05abe0', GradientType=0); } .fc-event.blue .fc-event-title { font-size: 2em; color: #EEE; text-shadow: 2px 2px 4px #300000; } .fc-event.blue .desc { font-size:.8em; float:left; clear:both; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.3/fullcalendar.css"> <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script> <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.3/fullcalendar.min.js"></script> <div id="calendar"></div> 

Answer 3

Use the eventRender function (callback) to modify the event template. Here's how you can add a hint to an event:

 eventRender: function(event, element, view) { element.qtip({ content: event.description }); } 

With this function, you can fully customize any detail of the displayed event, including adding a completely new event template. For more information, check out the documentation: http://fullcalendar.io/docs/event_rendering/eventRender/

Answer 4

You can add new information such as

 eventRender: function( event, element, view ) { element.find('.fc-title').append('<span class="yourCSS"></span> '); } 

Answer 5

In v4 FullCalendar, the arguments have changed ( https://fullcalendar.io/docs/eventRender )

 eventRender: function(info) { var node = document.createElement('div'); node.append(document.createTextNode(info.event.title)); return node; } 

If you want to prevent event rendering, just return false

 eventRender: function(info) { return false; }