This bundle allow you to integrate FullCalendar.js library in your Symfony3.
Installation process:
$> composer require ancarebeca/full-calendar-bundle
// app/AppKernel.php
public function registerBundles()
{
return array(
// ...
new AncaRebeca\FullCalendarBundle\FullCalendarBundle(),
);
}
// src/AppBundle/Entity/EventCustom.php
<?php
namespace AppBundle\Entity;
use AncaRebeca\FullCalendarBundle\Model\FullCalendarEvent;
class CalendarEvent extends FullCalendarEvent
{
// Your fields
}
You need to create your listener/subscriber class in order to load your events data in the calendar.
// service.yml
services:
app_bundle.service.listener:
class: AppBundle\Listener\LoadDataListener
tags:
- { name: 'kernel.event_listener', event: 'fullcalendar.set_data', method: loadData }
This listener is called when the event 'fullcalendar.set_data' is launched, for this reason you will need add this in your service.yml.
// src/AppBundle/Listener/LoadDataListener.php
<?php
namespace AppBundle\Listener;
use AncaRebeca\FullCalendarBundle\Model\FullCalendarEvent;
use AppBundle\Entity\CalendarEvent as MyCustomEvent;
class LoadDataListener
{
/**
* @param CalendarEvent $calendarEvent
*
* @return FullCalendarEvent[]
*/
public function loadData(CalendarEvent $calendarEvent)
{
$startDate = $calendarEvent->getStart();
$endDate = $calendarEvent->getEnd();
$filters = $calendarEvent->getFilters();
//You may want do a custom query to populate the events
$calendarEvent->addEvent(new MyCustomEvent('Event Title 1', new \DateTime()));
$calendarEvent->addEvent(new MyCustomEvent('Event Title 2', new \DateTime()));
}
}
Add html template to display the calendar:
{% block body %}
{% include '@FullCalendar/Calendar/calendar.html.twig' %}
{% endblock %}
Add styles:
{% block stylesheets %}
<link rel="stylesheet" href="https://github.com/ancarebeca/FullCalendarBundle/blob/master/{{ asset('bundles/fullcalendar/css/fullcalendar/fullcalendar.min.css') }}" />
{% endblock %}
Add javascript:
{% block javascripts %}
<script type="text/javascript" src="https://github.com/ancarebeca/FullCalendarBundle/raw/master/{{ asset('bundles/fullcalendar/js/fullcalendar/lib/jquery.min.js') }}"></script>
<script type="text/javascript" src="https://github.com/ancarebeca/FullCalendarBundle/raw/master/{{ asset('bundles/fullcalendar/js/fullcalendar/lib/moment.min.js') }}"></script>
<script type="text/javascript" src="https://github.com/ancarebeca/FullCalendarBundle/raw/master/{{ asset('bundles/fullcalendar/js/fullcalendar/fullcalendar.min.js') }}"></script>
<script type="text/javascript" src="https://github.com/ancarebeca/FullCalendarBundle/raw/master/{{ asset('bundles/fullcalendar/js/fullcalendar/fullcalendar.default-settings.js') }}"></script>
{% endblock %}
Install assets
$> php bin/console assets:install web
# app/config/routing.yml
ancarebeca_fullcalendar:
resource: "@FullCalendarBundle/Resources/config/routing.yml"
If you want to customize the FullCalendar javascript you can copy the fullcalendar.default-settings.js in YourBundle/Resources/public/js, and add your own logic:
$(function () {
$('#calendar-holder').fullCalendar({
header: {
left: 'prev, next',
center: 'title',
right: 'month, agendaWeek, agendaDay'
},
timezone: ('Europe/London'),
businessHours: {
start: '09:00',
end: '17:30',
dow: [1, 2, 3, 4, 5]
},
allDaySlot: false,
defaultView: 'agendaWeek',
lazyFetching: true,
firstDay: 1,
selectable: true,
timeFormat: {
agenda: 'h:mmt',
'': 'h:mmt'
},
columnFormat:{
month: 'ddd',
week: 'ddd D/M',
day: 'dddd'
},
editable: true,
eventDurationEditable: true,
eventSources: [
{
url: /full-calendar/load,
type: 'POST',
data: {
filters: { param: foo }
}
error: function() {
//alert()
}
}
]
Any feedback and contribution will be very appreciated.