How to customize the Data of FullCalenderBundle [S

问题:

I have added a select form above the calendar to select an user and show his events(entity booking for example)on the Fullcalendar

so my question is, how the data of FullCalenderBundle change by the user selected in the form?

this is some of files,

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

I have tried so much and i can't do it, thank you for your help

回答1:

You should create a select of your users and do something like this

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

in your listener you can now update the query accordingly

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