pvlksn/calendar

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

安装: 5

依赖: 0

建议者: 0

安全: 0

星标: 0

关注者: 0

分支: 0

公开问题: 0

类型:symfony-bundle

5.2 2023-07-17 20:59 UTC

This package is not auto-updated.

Last update: 2024-09-25 00:29:51 UTC


README

Latest Stable Version Total Downloads Latest Unstable Version License

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

安装后,此包将使用事件监听器从您的应用程序中的任何包加载事件。

!!! 基于 adesigns/calendar-bundle !!!

安装

在安装之前,请注意,此包依赖于 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.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/adesignscalendar/js/fullcalendar/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!');
            }
        }
]