README

此扩展允许您在 Symfony3 中集成 FullCalendar.js 库。

要求

• FullCalendar.js v3.1.0
• Symfony v3.1+
• PHP v5.5+
• 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. 创建您的 Calendar Event 类

// src/AppBundle/Entity/EventCustom.php

<?php

namespace AppBundle\Entity;

use AncaRebeca\FullCalendarBundle\Model\FullCalendarEvent;

class CalendarEvent extends FullCalendarEvent
{
	// 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\FullCalendarEvent;
use AppBundle\Entity\CalendarEvent as MyCustomEvent;

class LoadDataListener
{
    /**
     * @param CalendarEvent $calendarEvent
     *
     * @return FullCalendarEvent[]
     */
    public function loadData(CalendarEvent $calendarEvent)
    {
    	 $startDate = $calendarEvent->getStart();
   		 $endDate = $calendarEvent->getEnd();
		 $filters = $calendarEvent->getFilters();
	
    	 //You may want do a custom query to populate the events
    	 
    	 $calendarEvent->addEvent(new MyCustomEvent('Event Title 1', new \DateTime()));
    	 $calendarEvent->addEvent(new MyCustomEvent('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 bin/console assets:install web

6. 默认定义路由

# app/config/routing.yml

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

扩展基本功能

扩展日历 JavaScript

如果您想自定义 FullCalendar JavaScript，可以将 fullcalendar.default-settings.js 复制到 YourBundle/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()
			}
		}
]

贡献和反馈

任何反馈和贡献都将非常受赞赏。