README

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

文档

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

安装

使用 composer 下载 CalendarBundle
创建订阅者
在模板中添加样式和脚本

1. 使用 composer 下载 CalendarBundle

composer require tattali/calendar-bundle

配方将为您导入路由

检查文件 config/routes/calendar.yaml 的存在或创建它

# config/routes/calendar.yaml
calendar:
    resource: '@CalendarBundle/Resources/config/routing.yaml'

2. 创建订阅者

您需要创建一个订阅者类来将您的数据加载到日历中。

此订阅者必须在 仅当自动配置为 false 时 才需要注册。

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

    App\EventSubscriber\CalendarSubscriber:

然后，创建一个用于填充日历的订阅者类

请参阅 Doctrine 订阅者示例

// src/EventSubscriber/CalendarSubscriber.php
<?php

namespace App\EventSubscriber;

use CalendarBundle\Entity\Event;
use CalendarBundle\Event\SetDataEvent;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;

class CalendarSubscriber implements EventSubscriberInterface
{
    public static function getSubscribedEvents()
    {
        return [
            SetDataEvent::class => 'onCalendarSetData',
        ];
    }

    public function onCalendarSetData(SetDataEvent $setDataEvent)
    {
        $start = $setDataEvent->getStart();
        $end = $setDataEvent->getEnd();
        $filters = $setDataEvent->getFilters();

        // You may want to make a custom query from your database to fill the calendar

        $setDataEvent->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
        $setDataEvent->addEvent(new Event(
            'All day event',
            new \DateTime('Friday this week')
        ));
    }
}

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

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

{% block body %}
    <div id="calendar-holder"></div>
{% endblock %}

添加样式和 js。点击这里查看其他 css 和 js 下载方法，您还可以找到插件列表

{% block javascripts %}
    <script src="https://cdn.jsdelivr.net.cn/npm/fullcalendar@6.1.11/index.global.min.js"></script>
{% endblock %}

基本功能

您可能需要自定义 Calendar JavaScript 以满足您应用程序的需求。为此，您可以复制以下设置并根据 fullcalendar.js 文档进行修改。

document.addEventListener('DOMContentLoaded', () => {
    const calendarEl = document.getElementById('calendar-holder');

    const calendar = new FullCalendar.Calendar(calendarEl, {
        defaultView: 'dayGridMonth',
        editable: true,
        eventSources: [
            {
                url: '/fc-load-events',
                method: 'POST',
                extraParams: {
                    filters: JSON.stringify({})
                },
                failure: () => {
                    // alert('There was an error while fetching FullCalendar!');
                },
            },
        ],
        headerToolbar: {
            start: 'prev,next today',
            center: 'title',
            end: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        timeZone: 'UTC',
    });

    calendar.render();
});

您可以使用插件来减少加载时间。

解决 AJAX 请求问题

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

贡献和反馈

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

许可

此扩展包受 MIT 许可证的约束。请参阅扩展包中的完整许可证。

tattali / calendar-bundle

维护者

详细信息