toiba / fullcalendar-bundle
[DEPRECATED] Use https://github.com/tattali/CalendarBundle
Installs: 34 110
Dependents: 0
Suggesters: 0
Security: 0
Stars: 17
Watchers: 3
Forks: 44
Open Issues: 0
Type:symfony-bundle
Requires
- php: ^5.5|^7.0
- symfony/framework-bundle: ^3.4|^4.0
Requires (Dev)
- phpspec/phpspec: ^2.5
README
[DEPRECATED] Use https://github.com/tattali/CalendarBundle
This bundle allow you to integrate FullCalendar.js library in your Symfony 4 project.
- Symfony 3.4+ or Symfony 4.0+
- No storage dependencies (Compatible with: Doctrine, MongoDB, CouchDB...)
- PHP v5.6+
- PHPSpec
Documentation
The source of the documentation is stored in the doc/
folder in this bundle :
Link the calendar to a CRUD and allow create, update, delete & show events
All the installation instructions are located in the documentation.
Installation
- Download FullCalendarBundle using composer
- Create the listener
- Add styles and scripts in your template
1. Download FullCalendarBundle using composer
$ composer require toiba/fullcalendar-bundle
The recipe will import the routes for you
2. Create the listener
You need to create a listener class to load your data into the calendar and register it as a service.
This listener must be called when the event fullcalendar.set_data
is launched.
# config/services.yaml services: # ... App\EventListener\FullCalendarListener: tags: - { name: 'kernel.event_listener', event: 'fullcalendar.set_data', method: loadEvents }
Then, create the listener class to populate the calendar
See the doctrine listener example
// src/EventListener/FullCalendarListener.php <?php namespace App\EventListener; use Toiba\FullCalendarBundle\Entity\Event; use Toiba\FullCalendarBundle\Event\CalendarEvent; class FullCalendarListener { public function loadEvents(CalendarEvent $calendar) { $startDate = $calendar->getStart(); $endDate = $calendar->getEnd(); $filters = $calendar->getFilters(); // You may want to make a custom query to populate 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( 'Event All day', 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 '@FullCalendar/Calendar/calendar.html.twig' %} {% endblock %}
Add styles and js. Click here to see other css and js download methods
{% block stylesheets %} <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.css"> {% endblock %} {% block javascripts %} <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="https://momentjs.com/downloads/moment.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.js"></script> {# <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/locale-all.js"></script> #} {% endblock %}
Basic functionalities
You will probably want to customize the FullCalendar 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).ready(function() { $("#calendar-holder").fullCalendar({ eventSources: [ { url: "/fc-load-events", type: "POST", data: { filters: {}, }, error: function () { // alert("There was an error while fetching FullCalendar!"); } } ], header: { center: "title", left: "prev,next today", right: "month,agendaWeek,agendaDay" }, lazyFetching: true, locale: "fr", navLinks: true, // can click day/week names to navigate views }); });
Extending Basic functionalities
$(document).ready(function() { $("#calendar-holder").fullCalendar({ businessHours: { start: "09:00", end: "18:00", dow: [1, 2, 3, 4, 5] }, defaultView: "agendaWeek", editable: true, eventDurationEditable: true, eventSources: [ { url: "/fc-load-events", type: "POST", data: { filters: {}, }, error: function () { // alert("There was an error while fetching FullCalendar!"); } } ], header: { center: "title", left: "prev,next today", right: "month,agendaWeek,agendaDay" }, lazyFetching: true, navLinks: true, selectable: true, }); });
Troubleshoot AJAX requests
- To debug AJAX requests, show the Network monitor, then reload the page. Finally click on
fc-load-events
and select theResponse
orPreview
tab- Firefox:
Ctrl + Shift + E
(Command + Option + E
on Mac ) - Chrome:
Ctrl + Shift + I
(Command + Option + I
on Mac )
- Firefox:
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