Review the code snippet available in this JSFiddle link, which demonstrates how to manipulate the DOM before and after rendering events.
<div style="border:solid 2px red;">
<div id='calendar'></div>
</div>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaDay',
editable: true,
events: [
{
id: 1,
title: "Meeting",
start: new Date(y, m, d, 9, 0),
end: new Date(y, m, d, 15, 0),
allDay: false}
],
eventRender: function(event, element, view) {
element.find('.fc-event-content').append('<div class="fc-sub-event">9am - 11:30am</div>');
element.find('.fc-event-content').append('<div class="fc-sub-event">11:30am - 1pm</div>');
element.find('.fc-event-content').append('<div class="fc-sub-event">1pm - 3pm</div>');
},
eventAfterRender: function(event, element, view) {
var eleHgt = element.height()/3.5;
$('.fc-sub-event').height(eleHgt);
}
});
});
</script>
Next, explore this alternative implementation by referring to the following code in the provided JSFiddle link. It showcases a method of formatting event data for a more generalized approach.
<div style="border:solid 2px red;">
<div id='calendar'></div>
</div>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaDay',
editable: true,
events: [
{
id: 1,
title: '<div class="fc-event-title">Meeting</div><div class="fc-sub-event">9am - 11:30am</div><div class="fc-sub-event">11:30am - 1pm</div><div class="fc-sub-event">1pm - 3pm</div>',
start: new Date(y, m, d, 9, 0),
end: new Date(y, m, d, 15, 0),
allDay: false}
],
eventRender: function(event, element, view) {
element.find('.fc-event-content').html(element.find('.fc-event-content').text());
},
eventAfterRender: function(event, element, view) {
var eleHgt = element.height()/3.5;
$('.fc-sub-event').height(eleHgt);
}
});
});
</script>