adesigns/calendar-bundle

此包允许您将 jQuery FullCalendar 插件集成到您的 Symfony2 应用程序中。

安装次数: 184,295

依赖项: 0

建议者: 0

安全: 0

星标: 97

关注者: 15

分支: 60

开放问题: 15

类型:symfony-bundle

1.2-beta 2014-07-28 13:28 UTC

This package is auto-updated.

Last update: 2024-08-29 03:35:15 UTC


README

Latest Stable Version Total Downloads Latest Unstable Version License

此包允许您将 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!');
            }
        }
]