README

此包允许您在 Symfony2 中集成 FullCalendar.js 库。

要求

• FullCalendar.js v2.3.2
• Symfony v2.3+
• PHP v5.3+
• PHPSpec

安装

安装过程

1. 使用 composer 下载 FullCalendarBundle
2. 启用包
3. 创建您的 Event 类
4. 创建您的监听器
5. 在您的模板中添加样式和脚本
6. 添加路由

1. 使用 composer 下载 FullCalendarBundle

$> composer require ancarebeca/full-calendar-bundle

2. 启用包

// app/AppKernel.php

public function registerBundles()
{
    return array(
        // ...
        new AncaRebeca\FullCalendarBundle\FullCalendarBundle(),
    );
}

3. 创建您的日历事件类

// src/AppBundle/Entity/EventCustom.php

<?php

namespace AppBundle\Entity;

use AncaRebeca\FullCalendarBundle\Model\Event as BaseEvent;

class CalendarEvent extends BaseEvent
{
	// Your fields 
}

4. 创建您的监听器

您需要创建监听器/订阅者类，以便在日历中加载事件数据。

// service.yml
services:
   app_bundle.service.listener:
        class: AppBundle\Listener\LoadDataListener
	tags:
   		- { name: 'kernel.event_listener', event: 'fullcalendar.set_data', method: loadData }

当启动事件 'fullcalendar.set_data' 时，将调用此监听器，因此您需要将其添加到 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. 在模板中添加样式和脚本

添加 HTML 模板以显示日历

{% block body %}
    {% include '@FullCalendar/Calendar/calendar.html.twig' %}
{% endblock %}

添加样式

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('bundles/fullcalendar/css/fullcalendar/fullcalendar.min.css') }}" />
{% endblock %}

添加 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 %}

安装资源

$> php app/console assets:install web

6. 默认定义路由

# app/config/config.yml

ancarebeca_fullcalendar:
    resource: "@FullCalendarBundle/Resources/config/routing.yml"

扩展基本功能

扩展日历 JavaScript

如果您想自定义 FullCalendar JavaScript，可以将 fullcalendar.default-settings.js 复制到 Resources/public/js，并添加自己的逻辑。

$(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()
			}
		}
]

贡献和反馈

任何反馈和贡献都将非常受欢迎。