Styjun

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

THIS is some of code:

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

UPDATE 1 :

I have have changed the code to :

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

AppEnityEvent

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

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

Sample event data:

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

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.

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