This bundle allow you to integrate FullCalendar.js library in your Symfony 5.4 to 8 project.
The source of the documentation is stored in the docs/ folder in this bundle
composer require tattali/calendar-bundleImport the routes:
# config/routes/calendar.yaml
calendar:
resource: '@CalendarBundle/config/routing.yaml'Create a subscriber to populate calendar data:
// src/EventSubscriber/CalendarSubscriber.php
<?php
namespace App\EventSubscriber;
use CalendarBundle\Entity\Event;
use CalendarBundle\Event\SetDataEvent;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;
class CalendarSubscriber implements EventSubscriberInterface
{
public static function getSubscribedEvents(): array
{
return [
SetDataEvent::class => 'onCalendarSetData',
];
}
public function onCalendarSetData(SetDataEvent $setDataEvent): void
{
$start = $setDataEvent->getStart();
$end = $setDataEvent->getEnd();
$filters = $setDataEvent->getFilters();
// You may want to make a custom query from your database to fill the calendar
$setDataEvent->addEvent(new Event(
'Event title',
new \DateTime('Tuesday this week'),
new \DateTime('Wednesday this week')
));
// If the end date is null or not defined, it creates a all day event
$setDataEvent->addEvent(new Event(
'All day event',
new \DateTime('Friday this week')
));
}
}Add the calendar to your template:
{% block body %}
<div id="calendar-holder"></div>
{% endblock %}
{% block javascripts %}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
new FullCalendar.Calendar(document.getElementById('calendar-holder'), {
initialView: 'dayGridMonth',
eventSources: [{
url: '/fc-load-events',
method: 'POST',
extraParams: { filters: JSON.stringify({}) }
}]
}).render();
});
</script>
{% endblock %}- Configuration - Caching, JSON depth limit, routing
- Doctrine CRUD - Create, update, delete events with Doctrine
- Webpack Encore - ES6 module setup
- Multi-calendar - Multiple calendars on one page
- Security - Securing the endpoint
Debug AJAX requests using browser Network monitor (Ctrl+Shift+E Firefox, Ctrl+Shift+I Chrome).
MIT - See LICENSE