Is there any way to dynamically change event template in FullCalendar?
Update. What I want is to specify new event html (e. g. in eventRender callback) and make FullCalendar to use it for my event rendering. Something like this:
eventRender: function(event, element, view) {
var template = '<div class="customEvent"></div>';
return $.parse(template);
}
Tried the sample above - didn't work.
although it is not specified on the fullcalender site, it is necessary to assign a value to the "allday" parameter to be able to add new events dynamically. If you set this value to "false", it will not add the event to the AllDay row. If you do "true" it will add to the AllDay row. Save this answer.
Visiting the URL of a JSON feed is one of the ways FullCalendar fetches Event Objects. This action occurs when the user clicks prev/next or changes calendar views. FullCalendar will determine the date-range it needs events for and will pass that information along in GET parameters.
An “event source” is anything that provides FullCalendar with data about events. It can be a simple array, an event-generating function that you define, a URL to a json feed, or a Google Calendar feed. Event Objects can have “options” associated with them.
You can change the color of all events on the calendar like so: var calendar = new Calendar(calendarEl, { events: [ // my event data ], eventColor: '#378006' }); You can use any of the CSS color formats such #f00 , #ff0000 , rgb(255,0,0) , or red .
You can add meta information on the event, like classes, and style accordingly:
events: [{
title: 'Blue Event',
start: '2014-06-01',
description: 'Lorem ipsum lorem ipsum',
class: 'blue main'
}]
And the CSS:
.fc-event.blue {}
.fc-event.main {}
On eventRender
insert the classes with
eventRender: function (event, element) {
element.addClass(event.class)
}
And append more content like:
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With