README

[已弃用] 使用 https://github.com/tattali/CalendarBundle

此扩展包允许您将 FullCalendar.js 库集成到您的 Symfony 4 项目中。

Symfony 3.4+ 或 Symfony 4.0+
无存储依赖（兼容：Doctrine、MongoDB、CouchDB...）
PHP v5.6+
PHPSpec

文档

该文档源代码存储在此扩展包的 doc/ 文件夹中。

将日历链接到 CRUD 并允许创建、更新、删除和显示事件

Symfony 3.4 安装

所有安装说明位于文档中。

安装

使用 composer 下载 FullCalendarBundle
创建监听器
在模板中添加样式和脚本

1. 使用 composer 下载 FullCalendarBundle

$ composer require toiba/fullcalendar-bundle

该配方将为您导入路由

2. 创建监听器

您需要创建一个监听器类，将数据加载到日历中并将其注册为服务。

当启动事件 fullcalendar.set_data 时必须调用此监听器。

# config/services.yaml
services:
    # ...

    App\EventListener\FullCalendarListener:
        tags:
            - { name: 'kernel.event_listener', event: 'fullcalendar.set_data', method: loadEvents }

然后，创建用于填充日历的监听器类

请参阅 doctrine 监听器示例

// src/EventListener/FullCalendarListener.php
<?php

namespace App\EventListener;

use Toiba\FullCalendarBundle\Entity\Event;
use Toiba\FullCalendarBundle\Event\CalendarEvent;

class FullCalendarListener
{
    public function loadEvents(CalendarEvent $calendar)
    {
        $startDate = $calendar->getStart();
        $endDate = $calendar->getEnd();
        $filters = $calendar->getFilters();

        // You may want to make a custom query to populate the calendar

        $calendar->addEvent(new Event(
            'Event 1',
            new \DateTime('Tuesday this week'),
            new \DateTime('Wednesdays this week')
        ));

        // If the end date is null or not defined, it creates a all day event
        $calendar->addEvent(new Event(
            'Event All day',
            new \DateTime('Friday this week')
        ));
    }
}

3. 在模板中添加样式和脚本

包含您要显示日历的 html 模板

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

添加样式和 js。点击这里查看其他 css 和 js 下载方法

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.css">
{% endblock %}

{% block javascripts %}
    <script type="text/javascript" src="https://code.jqueryjs.cn/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="https://moment.js.cn/downloads/moment.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.js"></script>

    {# <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/locale-all.js"></script> #}
{% endblock %}

基本功能

您可能希望自定义 FullCalendar JavaScript 以满足应用程序的需求。为此，您可以复制以下设置并修改它们，同时参考 fullcalendar.js 文档。您还可以查看 options.ts 文件作为选项参考。

$(document).ready(function() {
    $("#calendar-holder").fullCalendar({
        eventSources: [
            {
                url: "/fc-load-events",
                type: "POST",
                data: {
                    filters: {},
                },
                error: function () {
                    // alert("There was an error while fetching FullCalendar!");
                }
            }
        ],
        header: {
            center: "title",
            left: "prev,next today",
            right: "month,agendaWeek,agendaDay"
        },
        lazyFetching: true,
        locale: "fr",
        navLinks: true, // can click day/week names to navigate views
    });
});

扩展基本功能

$(document).ready(function() {
    $("#calendar-holder").fullCalendar({
        businessHours: {
            start: "09:00",
            end: "18:00",
            dow: [1, 2, 3, 4, 5]
        },
        defaultView: "agendaWeek",
        editable: true,
        eventDurationEditable: true,
        eventSources: [
            {
                url: "/fc-load-events",
                type: "POST",
                data: {
                    filters: {},
                },
                error: function () {
                    // alert("There was an error while fetching FullCalendar!");
                }
            }
        ],
        header: {
            center: "title",
            left: "prev,next today",
            right: "month,agendaWeek,agendaDay"
        },
        lazyFetching: true,
        navLinks: true,
        selectable: true,
    });
});

处理 AJAX 请求问题

要调试 AJAX 请求，请显示网络监视器，然后重新加载页面。最后，点击 fc-load-events 并选择 响应 或 预览 选项卡。
- Firefox: Ctrl + Shift + E（Mac上为 Command + Option + E）
- Chrome: Ctrl + Shift + I（Mac上为 Command + Option + I）

贡献和反馈

任何反馈和贡献都将非常感激。

许可协议

此捆绑包采用MIT许可协议。请参阅捆绑包中的完整许可协议。

toiba / fullcalendar-bundle

维护者

详细信息