javascript - 如何自定义 FullCalendar Bundle 的数据 [Symfony 4]

Question

我在日历上方添加了一个选择表单来选择用户并在全日历上显示他的事件(例如实体预订)

所以我的问题是，FullCalenderBundle 的数据如何根据表单中选择的用户而改变？

这是一些文件，

FullCalenderListener.php

<?php

namespace App\EventListener;

use Doctrine\ORM\EntityManagerInterface;
use Doctrine\ORM\Mapping\Entity;
use App\Entity\Booking;
use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
use Symfony\Component\Security\Core\Security;
use Toiba\FullCalendarBundle\Entity\Event;
use Toiba\FullCalendarBundle\Event\CalendarEvent;

class FullCalendarListener
{
    /**
     * @var EntityManagerInterface
     */
    private $em;

    /**
     * @var UrlGeneratorInterface
     */
    private $router;

    private $security;

    public function __construct(EntityManagerInterface $em, UrlGeneratorInterface $router,Security $security)
    {
        $this->em = $em;
        $this->router = $router;
        $this->security = $security;
    }

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

        // Modify the query to fit to your entity and needs
        // Change b.beginAt by your start date in your custom entity
        $user = $this->security->getUser();

        $bookings = $this->em->getRepository(Booking::class)
            ->createQueryBuilder('b')
            ->where('b.Responsable = :responsable')
            ->setParameter('responsable', $user->getUsername())
            ->andWhere('b.beginAt 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();

        foreach($bookings as $booking) {

            // this create the events with your own entity (here booking entity) to populate calendar
            $bookingEvent = new Event(
                $booking->getTitle(),
                $booking->getBeginAt(),
                $booking->getEndAt() // If the end date is null or not defined, it creates a all day event
            );

            /*
             * Optional calendar event settings
             *
             * For more information see : Toiba\FullCalendarBundle\Entity\Event
             * and : https://fullcalendar.io/docs/event-object
             */
            // $bookingEvent->setUrl('http://www.google.com');
            // $bookingEvent->setBackgroundColor($booking->getColor());
            // $bookingEvent->setCustomField('borderColor', $booking->getColor());

            $bookingEvent->setUrl(
                $this->router->generate('booking_show', array(
                    'id' => $booking->getId(),
                ))
            );

            // finally, add the booking to the CalendarEvent for displaying on the calendar
            $calendar->addEvent($bookingEvent);
        }
    }
}

日历.html.twig

{% extends 'base.html.twig' %}


{% block body %}
    <div class="container">
        <div class="p-3 mb-2 bg-primary text-white">Choose a user</div>
        <div class="p-3 mb-2">{{ form(form) }}</div>
        <div class="bg-light">
            <a href="{{ path('booking_new') }}">Create new booking</a>
            {% include '@FullCalendar/Calendar/calendar.html.twig' %}
        </div>
    </div>

{% endblock %}

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

{% block javascripts %}
    {{ parent() }}
    <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/locale-all.js') }}"></script>

    <script type="text/javascript">

        $(function () {

            $('#calendar-holder').fullCalendar({
                height: 'parent',
                themeSystem: 'bootstrap4',
                locale: 'fr',
                header: {
                    left: 'prev, next, today',
                    center: 'title',
                    right: 'month, agendaWeek, agendaDay'
                },
                businessHours: {
                    start: '09:00',
                    end: '18:00',
                    dow: [1, 2, 3, 4, 5]
                },
                height: "auto",
                contentHeight: "auto",
                lazyFetching: true,
                navLinks: true,
                selectable: true,
                editable: true,
                eventDurationEditable: true,
                eventSources: [
                    {
                        url: "{{ path('fullcalendar_load_events') }}",
                        type: 'POST',
                        data:  {
                            filters: {}
                        },
                        error: function () {
                            alert('There was an error while fetching FullCalendar!');
                        }
                    }
                ]
            });
        });
    </script>
{% endblock %}

我试了很多方法还是不行，谢谢你的帮助

Answer 1

您应该创建一个选择的用户并执行类似的操作

$('#users').on('change', function() {
    var userId = this.value;

    $('#calendar-holder').fullCalendar({ 
        eventSources: [{
            url: "{{ path('fullcalendar_load_events') }}",
            type: 'POST',
            data:  {
                filters: {
                    user_id: userId,
                }
            },
            error: function () {
                alert('There was an error while fetching FullCalendar!');
            }
        }]
    });
    $('#calendar-holder').fullCalendar('refetchEvents');
});

在您的监听器中，您现在可以相应地更新查询

$bookings = $this->em->getRepository(Booking::class)
    ->createQueryBuilder('booking')
    ->where('booking.beginAt BETWEEN :startDate and :endDate')
    ->innerJoin('booking.user', 'user')
    ->andWhere('user.id = :userId')
    ->setParameter('userId', $filters['user_id'])
    ->setParameter('startDate', $startDate->format('Y-m-d H:i:s'))
    ->setParameter('endDate', $endDate->format('Y-m-d H:i:s'))
    ->getQuery()->getResult();