adesigns / calendar-bundle
此包允许您将 jQuery FullCalendar 插件集成到您的 Symfony2 应用程序中。
Requires
- doctrine/collections: >=1.0
- friendsofsymfony/jsrouting-bundle: ~1.1
- symfony/symfony: ~2.1
This package is auto-updated.
Last update: 2024-08-29 03:35:15 UTC
README
此包允许您将 jQuery FullCalendar 插件集成到您的 Symfony2 应用程序中。
安装后,此包将使用事件监听器从您的应用程序中的任何包加载事件。
安装
在安装之前,请注意此包依赖于 FOSJsRouting 包以暴露日历 AJAX 事件加载路由。在继续之前,请确保已安装并配置了 FOSJsRouting 包。
通过 Composer(Symfony 2.1+)
在您的 composer.json
文件中添加以下行
composer require adesigns/calendar-bundle
在 app/AppKernel.php
中注册包
// app/AppKernel.php public function registerBundles() { return array( // ... new ADesigns\CalendarBundle\ADesignsCalendarBundle(), ); }
在 app/config/routing.yml
中注册路由
# app/config/routing.yml adesigns_calendar: resource: "@ADesignsCalendarBundle/Resources/config/routing.xml"
发布资产
$ php app/console assets:install web
使用方法
将所需的样式表和 JavaScript 添加到您的布局中
样式表
<link rel="stylesheet" href="{{ asset('bundles/adesignscalendar/css/fullcalendar/fullcalendar.css') }}" />
JavaScript
<script type="text/javascript" src="{{ asset('bundles/adesignscalendar/js/jquery/jquery-1.8.2.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/adesignscalendar/js/fullcalendar/jquery.fullcalendar.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/adesignscalendar/js/calendar-settings.js') }}"></script>
然后,在您希望显示日历的模板中,添加以下 twig
{% include 'ADesignsCalendarBundle::calendar.html.twig' %}
添加事件
此包最棒的部分是您可以从应用程序的任何部分添加事件到日历。日历通过 AJAX 加载事件,并派发一个事件从应用程序加载日历事件。
当请求加载给定开始/结束时间的事件时,此包将派发一个 calendar.load_events
事件。添加事件监听器是一个简单的两步过程
在您的包中创建一个事件监听器类
// src/Acme/DemoBundle/EventListener/CalendarEventListener.php namespace Acme\DemoBundle\EventListener; use ADesigns\CalendarBundle\Event\CalendarEvent; use ADesigns\CalendarBundle\Entity\EventEntity; use Doctrine\ORM\EntityManager; class CalendarEventListener { private $entityManager; public function __construct(EntityManager $entityManager) { $this->entityManager = $entityManager; } public function loadEvents(CalendarEvent $calendarEvent) { $startDate = $calendarEvent->getStartDatetime(); $endDate = $calendarEvent->getEndDatetime(); // The original request so you can get filters from the calendar // Use the filter in your query for example $request = $calendarEvent->getRequest(); $filter = $request->get('filter'); // load events using your custom logic here, // for instance, retrieving events from a repository $companyEvents = $this->entityManager->getRepository('AcmeDemoBundle:MyCompanyEvents') ->createQueryBuilder('company_events') ->where('company_events.event_datetime BETWEEN :startDate and :endDate') ->setParameter('startDate', $startDate->format('Y-m-d H:i:s')) ->setParameter('endDate', $endDate->format('Y-m-d H:i:s')) ->getQuery()->getResult(); // $companyEvents and $companyEvent in this example // represent entities from your database, NOT instances of EventEntity // within this bundle. // // Create EventEntity instances and populate it's properties with data // from your own entities/database values. foreach($companyEvents as $companyEvent) { // create an event with a start/end time, or an all day event if ($companyEvent->getAllDayEvent() === false) { $eventEntity = new EventEntity($companyEvent->getTitle(), $companyEvent->getStartDatetime(), $companyEvent->getEndDatetime()); } else { $eventEntity = new EventEntity($companyEvent->getTitle(), $companyEvent->getStartDatetime(), null, true); } //optional calendar event settings $eventEntity->setAllDay(true); // default is false, set to true if this is an all day event $eventEntity->setBgColor('#FF0000'); //set the background color of the event's label $eventEntity->setFgColor('#FFFFFF'); //set the foreground color of the event's label $eventEntity->setUrl('http://www.google.com'); // url to send user to when event label is clicked $eventEntity->setCssClass('my-custom-class'); // a custom class you may want to apply to event labels //finally, add the event to the CalendarEvent for displaying on the calendar $calendarEvent->addEvent($eventEntity); } } }
日历上每个事件的附加属性和自定义可以在 Entity/EventEntity 类中找到。
然后,将监听器添加到您的服务中
<?xml version="1.0" ?> <container xmlns="https://symfony.com.cn/schema/dic/services"> <services> <service id="acme.demobundle.calendar_listener" class="Acme\DemoBundle\EventListener\CalendarEventListener"> <argument type="service" id="doctrine.orm.entity_manager" /> <tag name="kernel.event_listener" event="calendar.load_events" method="loadEvents" /> </service> </services> </container>
这样就可以了!当 ADesignsCalendarBundle::calendar.html.twig
模板被渲染时,任何在当前月/日/年的事件都会从您的应用程序中提取出来。
扩展日历 JavaScript
您可能想自定义 FullCalendar JavaScript 以满足应用程序的需求。为了做到这一点,您可以将 Resources/public/js 中的 calendar-settings.js 复制并修改以满足您的需求。例如,您可以在 eventSources 方法中添加额外的参数来向事件监听器传递自定义过滤器。
eventSources: [ { url: Routing.generate('fullcalendar_loader'), type: 'POST', // A way to add custom filters to your event listeners data: { filter: 'my_custom_filter_param' }, error: function() { //alert('There was an error while fetching Google Calendar!'); } } ]