How to Customize Data FullcalendarBundle from a SUBMIT form

后端 未结 2 1293
旧时难觅i
旧时难觅i 2021-01-21 07:01

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

相关标签:
2条回答
  • 2021-01-21 07:21

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

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

    Change event.USER to event.User and it will work.

    Simple demo:

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

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


    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.

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

    protected $User;
    

    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;
    

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

    0 讨论(0)
  • 2021-01-21 07:31

    you can also put your user id in the filters object

    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!');
            }
        }
    ],
    

    And retrieve the value in the $filters array of your listener, then update the query to fit your needs

    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);
        }
    }
    
    0 讨论(0)
提交回复
热议问题