Developed with love by KnpLabs Hire us for your project!
36

CalendarBundle

by tattali

Provides event calendar for your Symfony 4 project. Compatible with Doctrine ORM & ODM, and API like Google Calendar.

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.

  • 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
```yaml

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.
```yaml

config/services.yaml

services:
# ...

App\EventSubscriber\CalendarSubscriber:

Then, create the subscriber class to fill the calendar

See the [doctrine subscriber example](src/Resources/doc/doctrine-crud.md#full-subscriber)

```php
// 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.
```js
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

MIT License

Copyright (c) 2018

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
  • Merge pull request #17 from tattali/deprecations
    By web-flow, 1 day ago
  • fix doc
    By tattali, 1 day ago
  • typo
    By tattali, 1 day ago
  • smalls fixes
    By tattali, 1 day ago
  • use event subscriber
    By tattali, 1 day ago
  • fix dispatcher BC
    By tattali, 1 day ago
  • fix deprecations
    By tattali, 16 days ago
  • Merge pull request #16 from tattali/freezy-sk-docblocks
    By web-flow, 16 days ago
  • Merge pull request #15 from freezy-sk/travis
    By web-flow, 16 days ago
  • fix docblocks
    By tattali, 16 days ago
  • change nightly to 7.4 and allow failures for it
    By , 19 days ago
  • remove useless docblocks
    By tattali, 19 days ago
  • test against matrix of all php versions and symfony versions supported by library
    By freezy-sk, 20 days ago
  • docs for calendar event
    By freezy-sk, 21 days ago
  • docs for event entity
    By freezy-sk, 21 days ago
  • Update es6-encore.md
    By web-flow, 1 month ago
  • Update es6-encore.md
    By web-flow, 1 month ago
  • Update es6-encore.md
    By web-flow, 1 month ago
  • Update es6-encore.md
    By web-flow, 1 month ago
  • Update es6-encore.md
    By web-flow, 1 month ago
  • Update es6-encore.md
    By web-flow, 1 month ago
  • Update README.md
    By web-flow, 1 month ago
  • Update doctrine-crud.md
    By web-flow, 1 month ago
  • Update es6-encore.md
    By web-flow, 1 month ago
  • Create es6-encore.md
    By web-flow, 1 month ago
  • treebuilder deprecation
    By tattali, 2 months ago
  • Merge branch 'master' of github.com:tattali/CalendarBundle
    By tattali, 2 months ago
  • treebuilder deprecation
    By tattali, 2 months ago
  • Update doctrine-crud.md
    By web-flow, 5 months ago
  • Update README.md
    By web-flow, 5 months ago