javascript - 如何自定义FullCalenderBundle的数据[Symfony4]

我在日历上方添加了一个选择表单，以选择用户并在Fullcalendar上显示其事件（例如，实体预订）

所以我的问题是，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);
        }
    }
}

calendar.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 %}

我已经做了很多尝试，但我做不到，谢谢您的帮助

最佳答案

您应该选择一个用户，然后执行类似的操作

$('#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();

关于javascript - 如何自定义FullCalenderBundle的数据[Symfony4]，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54882281/