Как настроить Data FullcalendarBundle из формы SUBMIT

Question

я добавил форму выбора над FullCalendar, чтобы выбрать пользователя и показать его события

вопрос в том, как загрузить события пользователя, выбранного в календаре

ЭТОкода:

В Calender.html.twig

{% block javascripts %}
{{ parent() }}

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

ОБНОВЛЕНИЕ 1:

Я изменилкод для:

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


{% block body %}
    <div class="container">
        <select id="school_selector">
            <option value="User1">User1</option>
            <option value="User2">User2</option>
            <option value="User3">User3</option>
        </select>

        <div class="p-3 mb-2 bg-primary text-white">Calendrier des entretiens</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!');
                        }
                    }
                ],
                eventRender: function eventRender( event, element, view ) {
                    return ['', event.USER].indexOf($('#school_selector').val()) >= 0
                }
            });
            $('#school_selector').on('change',function(){
                $('#calendar-holder').fullCalendar('rerenderEvents');

            })
        });
    </script>
{% endblock %}

App \ Enity \ Event

<?php

namespace App\Entity;

class Event extends \Toiba\FullCalendarBundle\Entity\Event
{

    /**
     * @var string
     */
    protected $User;


    /**
     * @param string $User
     */
    public function __construct($title, \DateTime $start, \DateTime $end = null,$User)
    {
        parent::__construct($title,$start,$end);
        $this->User=$User;
    }


    /**
     * @return string
     */
    public function getUser()
    {
        return $this->User;
    }

    /**
     * @param string $User
     */
    public function setUser($User)
    {
        $this->User = $User;
    }


}

App \ EventListener \ FullCalendarListener (loadEvents)

 public function loadEvents(CalendarEvent $calendar)
    {

        $startDate = $calendar->getStart();
        $endDate = $calendar->getEnd();
        $filters = $calendar->getFilters();

        $bookings = $this->em->getRepository(Booking::class)
            ->createQueryBuilder('b')
            ->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) {

            $bookingEvent = new Event(
                $booking->getTitle(),
                $booking->getBeginAt(),
                $booking->getEndAt(),// If the end date is null or not defined, it creates a all day event
                $booking->getUser()
            );

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

Я ПОПРОБОВАЛ это, но ничего не отображается :(

Ps: Событие объекта имеет идентификатор, begin_at, title, end_at, user // User = Имя пользователя

Пример данных события:

[ 
  { title: 'Event1', start: '2019-03-01', end: '2019-03-02', User: 'User1', }, 
  { title: 'Event2', start: '2019-03-04', end: '2019-03-05', User: 'User2', }, 
]

Answer 1

вы также можете поместить свой идентификатор пользователя в filters объект

eventSources: [
    {
        url: "{{ path('fullcalendar_load_events') }}",
        type: 'POST',
        data:  {
            filters: {
                user_id: "{{ app.user.id }}",
            },
        },
        error: function () {
            alert('There was an error while fetching FullCalendar!');
        }
    }
],

и получить значение в массиве $filters вашего слушателя, а затем обновить запрос в соответствии с вашими потребностями

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

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

    foreach($bookings as $booking) {

        $bookingEvent = new Event(
            $booking->getTitle(),
            $booking->getBeginAt(),
            $booking->getEndAt(),// If the end date is null or not defined, it creates a all day event
            $booking->getUser()
        );

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

Answer 2

Проблема проста - имена свойств JavaScript чувствительны к регистру.

Поэтому event.USER не будет соответствовать свойству User в ваших данных.

Изменить event.USER до event.User и все будет работать.

Простая демонстрация:

var events = [{
  title: 'Event1',
  start: '2019-03-01',
  end: '2019-03-02',
  User: 'User1'
}, {
  title: 'Event2',
  start: '2019-03-01',
  end: '2019-03-02',
  User: 'User2'
}];

events.forEach(eventRender);

function eventRender(event) {
  console.log ("Testing: " + JSON.stringify(event));
  console.log("Bad code: " + (['', event.USER].indexOf("User1") >= 0));
  console.log("Good code: " + (['', event.User].indexOf("User1") >= 0));
}

А вот демонстрация кода в действии в рамках fullCalendar: http://jsfiddle.net/mw7okq9v/

---

Еще один момент: хотя предоставленный образец данных JSON включает в себяв свойстве User неясно, точно ли оно отражает текущее состояние того, что на самом деле выводит ваш код.

В своем классе Event вы указали это свойство как "защищенное".т.е.

protected $User;

Это предотвратит включение свойства при сериализации объекта в JSON.Я думаю, вам нужно будет сделать его общедоступным:

public $User;

, чтобы сервер выводил это свойство как часть события JSON.