如何从提交表单自定义数据 FullcalendarBundle

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

我在 FullCalendar 上方添加了一个选择表单来选择用户并显示他的事件

i have added a select form above the FullCalendar to select an user and show his events

问题是如何加载用户在日历中选择的事件

the question is how to load the events of the user selected in the calendar

这是一些代码:

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

应用实体事件

<?php

namespace AppEntity;

class Event extends ToibaFullCalendarBundleEntityEvent
{

    /**
     * @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;
    }


}

AppEventListenerFullCalendarListener ( loadEvents )

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

我试过这个，但什么都没有显示:(

I HAVE TRIED this one, but nothing is display :(

Ps:实体Event有id、begin_at、title、end_at、user//用户= 用户名

Ps: The entity Event have id, begin_at, title, end_at, user // User= Name of 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', }, 
]

推荐答案

问题很简单 - JavaScript 属性名称区分大小写.

The problem is a simple one - JavaScript property names are case-sensitive.

因此，event.USER 将与您数据中的 User 属性不匹配.

Therefore, event.USER will not match the User property in your data.

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

And here's a demo of the code in action within fullCalendar: http://jsfiddle.net/mw7okq9v/

还有一点:尽管您提供的 JSON 数据示例包含 User 属性，但尚不清楚这是否准确反映了您的代码实际输出的当前状态.

One further point: Although your provided JSON data sample includes the User property, it's unclear whether this accurately reflects the current state of what your code is actually outputting.

在您的 Event 类中，您已将此属性指定为受保护".即

In your Event class, you have specified this property as "protected". i.e.

protected $User;

这将防止在对象序列化为 JSON 时包含该属性.我认为您需要将其公开:

This will prevent the property being included when the object is serialised to JSON. I think you will need to make it public:

public $User;

以便服务器将此属性作为事件 JSON 的一部分输出.

so that the server will output this property as part of the event JSON.

相关文章