Full Calendar Bundle Laravel Package

Getting Started

Minimal Setup

1. Install the Bundle

   composer require ancarebeca/full-calendar-bundle
   

2. Enable the Bundle Add to config/bundles.php:

   return [
       // ...
       AncaRebeca\FullCalendarBundle\FullCalendarBundle::class => ['all' => true],
   ];
   

3. Create a Custom Event Class Extend FullCalendarEvent in your entity:

   // src/Entity/CalendarEvent.php
   namespace App\Entity;
   
   use AncaRebeca\FullCalendarBundle\Model\FullCalendarEvent;
   
   class CalendarEvent extends FullCalendarEvent
   {
       // Add custom fields (e.g., title, description, etc.)
   }
   

4. Create a Data Loader Listener Implement a service to fetch events:

   // src/EventListener/CalendarDataListener.php
   namespace App\EventListener;
   
   use AncaRebeca\FullCalendarBundle\Model\FullCalendarEvent;
   use App\Entity\CalendarEvent;
   
   class CalendarDataListener
   {
       public function loadData(FullCalendarEvent $event)
       {
           $events = $this->fetchEventsFromDatabase(); // Your logic
           foreach ($events as $dbEvent) {
               $event->addEvent(new CalendarEvent(
                   $dbEvent->getTitle(),
                   $dbEvent->getStartDate(),
                   $dbEvent->getEndDate()
               ));
           }
       }
   }
   

   Register the listener in config/services.yaml:

   services:
       App\EventListener\CalendarDataListener:
           tags:
               - { name: 'kernel.event_listener', event: 'fullcalendar.set_data', method: 'loadData' }
   

5. Add Assets to Twig Include in your template (templates/base.html.twig):

   {% block stylesheets %}
       <link rel="stylesheet" href="{{ asset('bundles/fullcalendar/css/fullcalendar.min.css') }}">
   {% endblock %}
   
   {% block javascripts %}
       <script src="{{ asset('bundles/fullcalendar/js/fullcalendar/lib/jquery.min.js') }}"></script>
       <script src="{{ asset('bundles/fullcalendar/js/fullcalendar/lib/moment.min.js') }}"></script>
       <script src="{{ asset('bundles/fullcalendar/js/fullcalendar/fullcalendar.min.js') }}"></script>
       <script src="{{ asset('bundles/fullcalendar/js/fullcalendar/fullcalendar.default-settings.js') }}"></script>
   {% endblock %}
   

6. Render the Calendar Add to your template:

   {% include '@FullCalendar/Calendar/calendar.html.twig' %}
   

7. Install Assets

   php bin/console assets:install public
   

Implementation Patterns

Common Workflows

1. Dynamic Event Loading Use the fullcalendar.set_data event to fetch events dynamically (e.g., via AJAX):

   // In your listener
   public function loadData(FullCalendarEvent $event)
   {
       $start = $event->getStart()->format('Y-m-d');
       $end = $event->getEnd()->format('Y-m-d');
   
       $events = $entityManager->getRepository(CalendarEvent::class)
           ->findByDateRange($start, $end);
   
       foreach ($events as $eventEntity) {
           $fcEvent = new CalendarEvent(
               $eventEntity->getTitle(),
               $eventEntity->getStart(),
               $eventEntity->getEnd()
           );
           $fcEvent->setAllDay($eventEntity->isAllDay());
           $fcEvent->setBackgroundColor('#3788d8');
           $event->addEvent($fcEvent);
       }
   }
   

2. Customizing Calendar Views Override the default JavaScript settings by copying fullcalendar.default-settings.js to your bundle’s Resources/public/js/ and extend it:

   // YourBundle/Resources/public/js/fullcalendar.custom.js
   $(document).ready(function() {
       $('#calendar').fullCalendar({
           header: {
               left: 'prev,next today',
               center: 'title',
               right: 'month,agendaWeek,agendaDay'
           },
           editable: true,
           eventClick: function(event) {
               // Custom logic (e.g., open a modal)
               alert('Event clicked: ' + event.title);
           }
       });
   });
   

3. Integration with Forms Use Symfony Forms to create/edit events:

   {{ form_start(form) }}
       {{ form_row(form.title) }}
       {{ form_row(form.start) }}
       {{ form_row(form.end) }}
       <button type="submit">Save Event</button>
   {{ form_end(form) }}
   

   Handle form submission in your controller to persist the event.

4. Timezone Handling Ensure timezone consistency by setting the timezone option in JavaScript:

   timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
   

   Or force a specific timezone in your PHP logic:

   $event->setStart(new \DateTime($startDate, new \DateTimeZone('Europe/London')));
   

5. Lazy Loading Enable lazyFetching: true in JavaScript to load events on-demand:

   eventSources: [
       {
           url: '/full-calendar/load',
           type: 'POST',
           data: {
               start: function() { return $('#calendar').fullCalendar('getView').start.getTime(); },
               end: function() { return $('#calendar').fullCalendar('getView').end.getTime(); }
           }
       }
   ]
   

Gotchas and Tips

Pitfalls

1. Outdated Dependencies

   • The bundle is last updated for Symfony 3.1 and FullCalendar.js v3.1.0. For newer versions:
     • Use a CDN for FullCalendar.js (e.g., <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>).
     • Override JavaScript assets in your bundle’s Resources/public/ directory.
   • Workaround: Extend the bundle or fork it to support newer versions.

2. Asset Paths

   • The bundle assumes assets are installed in web/bundles/fullcalendar/. If using Symfony Flex or custom paths:
     • Override the asset paths in Twig:

       <link rel="stylesheet" href="{{ asset('build/css/fullcalendar.min.css') }}">
       

     • Or configure assets in config/packages/asset.yaml.

3. Event Data Serialization

   • Ensure your custom CalendarEvent implements __toString() or provides a getTitle() method for display in the calendar.
   • Fix: Add a getter for the title:

     public function getTitle(): string
     {
         return $this->title;
     }
     

4. Listener Timing

   • The fullcalendar.set_data event fires before rendering the calendar. If events don’t appear:
     • Verify the listener is tagged correctly in services.yaml.
     • Check for PHP errors in the listener method.

5. DateTime Formatting

   • FullCalendar expects timestamps in milliseconds or ISO strings. Convert PHP \DateTime objects:

     $event->setStart($dateTime->getTimestamp() * 1000); // Milliseconds
     

     Or use ISO format:

     $event->setStart($dateTime->format('Y-m-d\TH:i:s'));
     

6. Routing Conflicts

   • The bundle adds routes under /full-calendar/. If you customize the route:
     • Update the eventSources.url in JavaScript to match your route (e.g., /api/events).

7. CORS Issues (AJAX)

   • If loading events via AJAX from a different domain, ensure CORS headers are set in your Symfony controller:

     use Symfony\Component\HttpFoundation\ResponseHeaderBag;
     
     $response = new Response(json_encode($events));
     $response->headers->set('Access-Control-Allow-Origin', '*');
     return $response;
     

Tips

1. Debugging Event Data

   • Dump the event data in your listener to verify structure:

     public function loadData(FullCalendarEvent $event)
     {
         dump($event->getStart(), $event->getEnd(), $event->getFilters());
     }
     

   • Use browser dev tools to inspect the AJAX payload sent to /full-calendar/load.

2. Custom Event Colors

   • Dynamically set colors based on event properties:

     $event->setBackgroundColor($this->getColorByType($eventEntity->getType()));
     

     Define a helper method:

     private function getColorByType(string $type): string
     {
         return match ($type) {
             'meeting' => '#3788d8',
             'holiday' => '#f7b733',
             default => '#4CAF50',
         };
     }
     

3