Customising¶
Edit the template files. I do plan on doing template tags in the future for a better experience but this is just how it is for now.
All that you absolutely need is to load the wagtail_eventcalendar/css/fullcalendar.min.css
at the top of the page. You will need to load wagtail_eventcalendar/js/jquery.min.js
and wagtail_eventcalendar/js/moment.min.js
before wagtail_podcast/js/fullcalendar.min.js
static files in the wagtail_eventcalendar/event_calendar.html
and wagtail_eventcalendar/event_calendar_category.html
templates.
To actually render the calendar add the following:
<div id='calendar'></div>
<script type="text/javascript">
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {center: 'month,agendaWeek,upcoming'},
timeFormat: 'H(:mm)',
nowIndicator: true,
timezone: 'Africa/Johannesburg', //Change as necessary
eventColor: "#f8f9fa", //Change as necessary
eventTextColor: "#9c27b0", //Change as necessary
businessHours: [{
dow: [1, 2, 3, 4, 5],
start: '08:00',
end: '13:00'
}, //change as necessary
{
dow: [7],
start: '10:00',
end: '11:00'
}
],
views: {
upcoming: {
type: 'list',
duration: {months: 2},
buttonText: 'Upcoming', //translate as necessary
validRange: function (nowDate) {
return {
start: nowDate,
end: nowDate.clone().add(1, 'months')
};
}
}
},
// put your options and callbacks here
events: '{{ page.get_url }}events/'
})
});
</script>
There is plenty of customisation available of both how the calendar looks and functions, see: FullCalendar JS docs . In the above snippet of code you’ll see that i added come comment that give you a decent starting point.