Skip to content
Provides event calendar for your Symfony 4 project. Compatible with Doctrine ORM & ODM, and API like Google Calendar.
PHP HTML
Branch: master
Clone or download
Latest commit 989164a Oct 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Update doctrine-crud.md Oct 22, 2019
tests fix dispatcher BC Oct 20, 2019
.editorconfig smalls fixes Oct 20, 2019
.gitignore Update coverage folder Mar 24, 2019
.php_cs.dist Fix php cs configuration Mar 24, 2019
.travis.yml change nightly to 7.4 and allow failures for it Oct 2, 2019
LICENSE Initial commit Mar 23, 2019
README.md use event subscriber Oct 20, 2019
composer.json fix dispatcher BC Oct 20, 2019
phpcs.xml.dist smalls fixes Oct 20, 2019
phpunit.xml.dist fix deprecations Oct 5, 2019

README.md

CalendarBundle - FullCalendar.js integration

Scrutinizer Code Quality Code Coverage Build Status Total Downloads Latest Stable Version

This bundle allow you to integrate FullCalendar.js library in your Symfony 4 project.

Calendar image

  • Symfony 3.4+ or Symfony 4.0+
  • PHP v7.1+
  • No storage dependencies (Compatible with: Doctrine, MongoDB, CouchDB...)

Documentation

The source of the documentation is stored in the src/Resources/doc/ folder in this bundle

Installation

  1. Download CalendarBundle using composer
  2. Create the subscriber
  3. Add styles and scripts in your template

1. Download CalendarBundle using composer

$ composer require tattali/calendar-bundle

The recipe will import the routes for you

Check the existence of the file config/routes/calendar.yaml or create it

# config/routes/calendar.yaml
calendar:
    resource: "@CalendarBundle/Resources/config/routing.yaml"

2. Create the subscriber

You need to create a subscriber class to load your data into the calendar.

This subscriber must be registered only if autoconfigure is false.

# config/services.yaml
services:
    # ...

    App\EventSubscriber\CalendarSubscriber:

Then, create the subscriber class to fill the calendar

See the doctrine subscriber example

// src/EventSubscriber/CalendarSubscriber.php
<?php

namespace App\EventSubscriber;

use CalendarBundle\CalendarEvents;
use CalendarBundle\Entity\Event;
use CalendarBundle\Event\CalendarEvent;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;

class CalendarSubscriber implements EventSubscriberInterface
{
    public static function getSubscribedEvents()
    {
        return [
            CalendarEvents::SET_DATA => 'onCalendarSetData',
        ];
    }

    public function onCalendarSetData(CalendarEvent $calendar)
    {
        $start = $calendar->getStart();
        $end = $calendar->getEnd();
        $filters = $calendar->getFilters();

        // You may want to make a custom query from your database to fill the calendar

        $calendar->addEvent(new Event(
            'Event 1',
            new \DateTime('Tuesday this week'),
            new \DateTime('Wednesdays this week')
        ));

        // If the end date is null or not defined, it creates a all day event
        $calendar->addEvent(new Event(
            'All day event',
            new \DateTime('Friday this week')
        ));
    }
}

3. Add styles and scripts in your template

Include the html template were you want to display the calendar:

{% block body %}
    {% include '@Calendar/calendar.html' %}
{% endblock %}

Add styles and js. Click here to see other css and js download methods, you can also found the plugins list

{% block stylesheets %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.1.0/main.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.1.0/main.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@4.1.0/main.min.css">
{% endblock %}

{% block javascripts %}
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.1.0/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@4.1.0/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.1.0/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@4.1.0/main.min.js"></script>
{% endblock %}

Basic functionalities

You will probably want to customize the Calendar javascript to fit the needs of your application. To do this, you can copy the following settings and modify them by consulting the fullcalendar.js documentation. You can also look at the options.ts file as an option reference.

document.addEventListener('DOMContentLoaded', () => {
    var calendarEl = document.getElementById('calendar-holder');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        defaultView: 'dayGridMonth',
        editable: true,
        eventSources: [
            {
                url: "/fc-load-events",
                method: "POST",
                extraParams: {
                    filters: JSON.stringify({})
                },
                failure: () => {
                    // alert("There was an error while fetching FullCalendar!");
                },
            },
        ],
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay',
        },
        plugins: [ 'interaction', 'dayGrid', 'timeGrid' ], // https://fullcalendar.io/docs/plugin-index
        timeZone: 'UTC',
    });
    calendar.render();
});

Troubleshoot AJAX requests

  • To debug AJAX requests, show the Network monitor, then reload the page. Finally click on fc-load-events and select the Response or Preview tab
    • Firefox: Ctrl + Shift + E ( Command + Option + E on Mac )
    • Chrome: Ctrl + Shift + I ( Command + Option + I on Mac )

Contribute and feedback

Any feedback and contribution will be very appreciated.

License

This bundle is under the MIT license. See the complete license in the bundle

You can’t perform that action at this time.