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

2022-01-22 00:00:00 jquery javascript symfony twig fullcalendar

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

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

所以我的问题是,在表单中选择的用户如何更改 FullCalenderBundle 的数据?

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

这是一些文件,

FullCalenderListener.php

FullCalenderListener.php

<?php

namespace AppEventListener;

use DoctrineORMEntityManagerInterface;
use DoctrineORMMappingEntity;
use AppEntityBooking;
use SymfonyComponentRoutingGeneratorUrlGeneratorInterface;
use SymfonyComponentSecurityCoreSecurity;
use ToibaFullCalendarBundleEntityEvent;
use ToibaFullCalendarBundleEventCalendarEvent;

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 : ToibaFullCalendarBundleEntityEvent
             * 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

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

推荐答案

你应该选择你的用户并做这样的事情

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

相关文章