szabogyula / full-calendar-bundle
Symfony2 integration with the library FullCalendar.js
Installs: 414
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 2
Forks: 38
Type:symfony-bundle
Requires
- symfony/flex: ^1.3.1
Requires (Dev)
- phpspec/phpspec: ^2.2
This package is auto-updated.
Last update: 2024-10-29 05:04:40 UTC
README
This bundle allow you to integrate FullCalendar.js library in your Symfony2.
Requirements
- FullCalendar.js v2.3.2
- Symfony v2.3+
- PHP v5.3+
- PHPSpec
Installation
Installation process:
- Download FullCalendarBundle using composer
- Enable bundle
- Create your Event class
- Create your listener
- Add styles and scripts in your template
- Add Routing
1. Download FullCalendarBundle using composer
$> composer require ancarebeca/full-calendar-bundle
2. Enable bundle
// app/AppKernel.php public function registerBundles() { return array( // ... new AncaRebeca\FullCalendarBundle\FullCalendarBundle(), ); }
3. Create your Calendar Event class
// src/AppBundle/Entity/EventCustom.php <?php namespace AppBundle\Entity; use AncaRebeca\FullCalendarBundle\Model\Event as BaseEvent; class CalendarEvent extends BaseEvent { // Your fields }
4. Create your listener
You need to create your listener/subscriber class in order to load your events data in the calendar.
// service.yml services: app_bundle.service.listener: class: AppBundle\Listener\LoadDataListener tags: - { name: 'kernel.event_listener', event: 'fullcalendar.set_data', method: loadData }
This listener is called when the event 'fullcalendar.set_data' is launched, for this reason you will need add this in your service.yml.
// src/AppBundle/Listener/LoadDataListener.php <?php namespace AppBundle\Listener; use AncaRebeca\FullCalendarBundle\Model\Event; class LoadDataListener { /** * @param CalendarEvent $calendarEvent * * @return EventInterface[] */ public function loadData(CalendarEvent $calendarEvent) { $startDate = $calendarEvent->getStartDatetime(); $endDate = $calendarEvent->getEndDatetime(); $filters = $calendarEvent->getFilters(); //You may want do a custom query to populate the events $calendarEvent->addEvent(new Event('Event Title 1', new \DateTime()); $calendarEvent->addEvent(new Event('Event Title 2', new \DateTime())); } }
### 5. Add styles and scripts in your template
Add html template to display the calendar:
{% block body %} {% include '@FullCalendar/Calendar/calendar.html.twig' %} {% endblock %}
Add styles:
{% block stylesheets %} <link rel="stylesheet" href="{{ asset('bundles/fullcalendar/css/fullcalendar/fullcalendar.min.css') }}" /> {% endblock %}
Add javascript:
{% block javascripts %} <script type="text/javascript" src="{{ asset('bundles/fullcalendar/js/fullcalendar/lib/jquery.min.js') }}"></script> <script type="text/javascript" src="{{ asset('bundles/fullcalendar/js/fullcalendar/lib/moment.min.js') }}"></script> <script type="text/javascript" src="{{ asset('bundles/fullcalendar/js/fullcalendar/fullcalendar.min.js') }}"></script> <script type="text/javascript" src="{{ asset('bundles/fullcalendar/js/fullcalendar/fullcalendar.default-settings.js') }}"></script> {% endblock %}
Install assets
$> php app/console assets:install web
6. Define routes by default
# app/config/config.yml ancarebeca_fullcalendar: resource: "@FullCalendarBundle/Resources/config/routing.yml"
Extending Basic functionalities
Extending the Calendar Javascript
If you want to customize the FullCalendar javascript you can copy the fullcalendar.default-settings.js in Resources/public/js, and add your own logic:
$(function () { $('#calendar-holder').fullCalendar({ header: { left: 'prev, next', center: 'title', right: 'month, agendaWeek, agendaDay' }, timezone: ('Europe/London'), businessHours: { start: '09:00', end: '17:30', dow: [1, 2, 3, 4, 5] }, allDaySlot: false, defaultView: 'agendaWeek', lazyFetching: true, firstDay: 1, selectable: true, timeFormat: { agenda: 'h:mmt', '': 'h:mmt' }, columnFormat:{ month: 'ddd', week: 'ddd D/M', day: 'dddd' }, editable: true, eventDurationEditable: true, eventSources: [ { url: /full-calendar/load, type: 'POST', data: { filters: { param: foo } } error: function() { //alert() } } ]
Contribute and feedback
Any feedback and contribution will be very appreciated.