Handle request from select box about calendarbundle

[tattali]

Hi can you share your event subcriber please ?

[Skatsarov123]

<?php

namespace App\EventSubscriber;

use App\Repository\BookingRepository;
use CalendarBundle\CalendarEvents;
use CalendarBundle\Entity\Event;
use CalendarBundle\Event\CalendarEvent;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Generator\UrlGeneratorInterface;


class CalendarSubscriber extends AbstractController implements EventSubscriberInterface
{
    private BookingRepository $bookingRepository;
    private UrlGeneratorInterface $router;

    public function __construct(
        BookingRepository $bookingRepository,
        UrlGeneratorInterface $router
    )
    {
        $this->bookingRepository = $bookingRepository;
        $this->router = $router;
    }
    public static function getSubscribedEvents()
    {
        return [
            CalendarEvents::SET_DATA => 'onCalendarSetData',
        ];
    }
    /**
     * @param CalendarEvent $calendar
     * @param Request $request
     * @return Response
     */

    public function onCalendarSetData( CalendarEvent $calendar,Request $request):Response
    {
        // Modify the query to fit to your entity and needs
        // Change booking.beginAt by your start date property

        $status = $request->get('statusChoice');
        if ($status === '0') {
            $bookings = $this->bookingRepository->findBy(['author' => $this->getUser(), 'status' => '0']);

        } else {
            $bookings = $this->bookingRepository->findBy(['author' => $this->getUser()]);
        }
        foreach ($bookings as $booking) {

            // this  create the events with your data (here booking data) to fill calendar
            $bookingEvent = new Event(
                $booking->getTitle(),
                $booking->getloadingDate(),
                $booking->getUnloadingDate(),
                $filters = $calendar->getFilters(),
            );

            /*
             * Add custom options to events
             *
             * For more information see: https://fullcalendar.io/docs/event-object
             * and: https://github.com/fullcalendar/fullcalendar/blob/master/src/core/options.ts
             */
            if ($booking->getStatus() != 0) {
                $bookingEvent->setOptions([
                    'backgroundColor' => 'grey',
                    'borderColor' => 'grey',
                ]);
            } else {
                $bookingEvent->setOptions([
                    'backgroundColor' => 'matblue',
                    'borderColor' => 'matblue',

                ]);
            }
            $bookingEvent->addOption(
                'url',
                $this->router->generate('booking_show', [
                    'id' => $booking->getId(),
                ])
            );

            // finally, add the event to the CalendarEvent to fill the calendar
            $calendar->addEvent($bookingEvent);
        }
    }
}

[tattali]

And your entity booking

[Skatsarov123]

namespace App\Entity;

use Doctrine\ORM\Mapping as ORM;

/**
 * @ORM\Entity(repositoryClass="App\Repository\BookingRepository")
 */
class Booking
{
    /**
     * @ORM\Column(type="integer")
     * @ORM\GeneratedValue
     * @ORM\Id
     */
    private $id;
    /**
     * @ORM\Column(type="string", length=255 ,nullable=true)
     */
    private $title;
    /**
     * @ORM\Column(type="datetime")
     */
    private ?\DateTimeInterface $loadingDate;

    /**
     * @ORM\Column(type="datetime")
     */
    private ?\DateTimeInterface $unloadingDate;

    /**
     * @ORM\Column(type="string")
     */
    private $truck_id;
    /**
     * @ORM\Column(type="string", length=255)
     */
    private $loadingAddress;
    /**
     * @ORM\Column(type="string", length=255)
     */
    private $unloadingAddress;
    /**
     * @ORM\Column(type="decimal", precision=10, scale=0)
     */
    private $pricePerKm;
    /**
     * @var Driver
     *
     * @ORM\ManyToOne(targetEntity="App\Entity\Driver",inversedBy="cargoes")
     */
    private Driver $drivers;
    /**
     * @ORM\Column(type="integer" )
     */
    private int $status = 0;
    /**
     * @var User
     *@ORM\ManyToOne(targetEntity="App\Entity\User", inversedBy="bookings")
     */
    private User $author;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getLoadingDate(): ?\DateTimeInterface
    {
        return $this->loadingDate;
    }

    public function setLoadingDate(\DateTimeInterface $loadingDate): self
    {
        $this->loadingDate = $loadingDate;

        return $this;
    }

    public function getUnloadingDate(): ?\DateTimeInterface
    {
        return $this->unloadingDate;
    }

    public function setUnloadingDate(?\DateTimeInterface $unloadingDate = null): self
    {
        $this->unloadingDate = $unloadingDate;

        return $this;
    }

    /**
     * @return mixed
     */
    public function getPricePerKm()
    {
        return $this->pricePerKm;
    }

    /**
     * @param mixed $pricePerKm
     */
    public function setPricePerKm($pricePerKm): void
    {
        $this->pricePerKm = $pricePerKm;
    }

    /**
     * @return mixed
     */
    public function getUnloadingAddress()
    {
        return $this->unloadingAddress;
    }

    /**
     * @param mixed $unloadingAddress
     */
    public function setUnloadingAddress($unloadingAddress): void
    {
        $this->unloadingAddress = $unloadingAddress;
    }

    /**
     * @return mixed
     */
    public function getTruckId()
    {
        return $this->truck_id;
    }

    /**
     * @param mixed $truck_id
     */
    public function setTruckId($truck_id): void
    {
        $this->truck_id = $truck_id;
    }

    /**
     * @return mixed
     */
    public function getLoadingAddress()
    {
        return $this->loadingAddress;
    }

    /**
     * @param mixed $loadingAddress
     */
    public function setLoadingAddress($loadingAddress): void
    {
        $this->loadingAddress = $loadingAddress;
    }



    /**
     * @return mixed
     */
    public function getTitle()
    {
        return $this->loadingAddress." to ".$this->unloadingAddress;
    }

    /**
     * @param mixed $title
     */
    public function setTitle($title): void
    {
        $this->title = $title;
    }

    /**
     * @return mixed
     */
    public function getStatus()
    {
        return $this->status;
    }
    /**
     * @param mixed $status
     */
    public function setStatus($status): void
    {
        $this->status = $status;
    }
    /**
     * @return User
     */
    public function getAuthor(): User
    {
        return $this->author;
    }

    /**
     * @param User $author
     *
     */
    public function setAuthor(User $author )
    {
        $this->author = $author;
    }
    /**
     * @return Driver
     */
    public function getDrivers(): Driver
    {
        return $this->drivers;
    }

    /**
     * @param Driver $drivers
     */
    public function setDrivers(Driver $drivers): void
    {
        $this->drivers = $drivers;
    }


}```

[tattali]

It's probably because the end date is nullable

    /**
-     * @ORM\Column(type="datetime")
+     * @ORM\Column(type="datetime", nullable=true)
     */
    private ?\DateTimeInterface $unloadingDate;

[Skatsarov123]

nothing happens
If i remove request param from function everything work fine
public function onCalendarSetData( CalendarEvent $calendar,Request $request):Response

if you know better way to make filter

[tattali]

Yes!
https://github.com/tattali/CalendarBundle/blob/master/src/Resources/doc/multi-calendar.md

[Skatsarov123]

Hi there.

Do you know how to pass select tag value in request

                        <select id="statusId" name="statusId">
                            <option value="0">value1</option>
                            <option value="1">value2</option>
                        </select>
                    </label>
                    <input type="submit" value="show">
eventSources: [
                {
                    url: "{{ path('fc_load_events') }}",
                    method: "POST",
                    extraParams: {
                        filters: JSON.stringify({}),
                        custom_param1: 'value'
                    },

[tattali]

Hi,
you probably need to put the custom_param1: 'value' in the filters param

extraParams: {
    filters: JSON.stringify({custom_param1: 'value'}),
},

and then you can access to it in your subscriber by $filters['calendar-id']

public function onCalendarSetData(CalendarEvent $calendar)
{
        $filters = $calendar->getFilters();
        $filters['custom_param1']; // value
}

You don't need to call the Request component
As explain in https://github.com/tattali/CalendarBundle/blob/master/src/Resources/doc/multi-calendar.md

Is it what you want to do ?

[Skatsarov123]

this is request dump from my controller and its work. statusId is for dropdown filter
object(Symfony\Component\HttpFoundation\Request)#573 (24) { ["attributes"]=> object(Symfony\Component\HttpFoundation\ParameterBag)#576 (1) { ["parameters":protected]=> array(0) { } } ["request"]=> object(Symfony\Component\HttpFoundation\ParameterBag)#574 (1) { ["parameters":protected]=> array(1) **{ ["statusId"]=> string(1) "0" } }** ["query"]=> object(Symfony\Component\HttpFoundation\ParameterBag)#575 (1) { ["parameters":protected]=> array(0) { } } ["server"]=>

I want to put this value in callendar request

object(Symfony\Component\HttpFoundation\Request)#585 (24) { ["attributes"]=> object(Symfony\Component\HttpFoundation\ParameterBag)#588 (1) { ["parameters":protected]=> array(0) { } } ["request"]=> object(Symfony\Component\HttpFoundation\ParameterBag)#586 (1) { ["parameters":protected]=> array(4) { ["filters"]=> string(2) "{}" ["start"]=> string(20) "2020-11-01T00:00:00Z" ["end"]=> string(20) "2020-12-13T00:00:00Z" ["timeZone"]=> string(3) "UTC" } } ["query"]=> object(Symfony\Component\HttpFoundation\ParameterBag)#587 (1) { ["parameters":protected]=> array(0) { } } ["server"]=>

[tattali]

where do you need to use the value ? and why do you want to use the Request component ?

[Skatsarov123]

Your solution work.Only one problem left.Filter take only the first select tag option no matter what is selected

[tattali]

I don't think this is a trouble with this bundle. But share your code

[Skatsarov123]

        <table class="table">
            <tr>
                <td>
                    <label>
                        <select id="statusId" name="statusId">
                            <option value="1" >1</option>
                            <option value="0" >0</option>
                        </select>
                    </label>
                    <input id="submit" type="submit" value="show">
                </td>
            </tr>
        </table>
    </form>

 public function onCalendarSetData(CalendarEvent $calendar)
    {
        $filters = $calendar->getFilters();
        $statusId= $filters['custom_param'];
        var_dump($statusId);
        $bookings = $this->getDoctrine()->getRepository(Booking::class)
                ->findBy(['author' => $this->getUser(), 'status' => $statusId]);
        foreach ($bookings as $booking) {
            $bookingEvent = new Event(
                $booking->getTitle(),
                $booking->getloadingDate(),
                $booking->getUnloadingDate(),

            );

[tattali]

Well can you also share the JS part and is it in the same file or in his own .js ?

[Skatsarov123]

{% block body %}
    <form class="form-group" method="post">
        <table class="table">
            <tr>
                <td>
                    <label>
                        <select id="statusId" name="statusId">
                            <option value="1" >1</option>
                            <option value="0" >0</option>
                        </select>
                    </label>
                    <input id="submit" type="submit" value="show">
                </td>
            </tr>
        </table>
    </form>
    <div id="calendar-holder"></div>

{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('css/bootstrap-datetimepicker.min.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.css">

{% endblock %}

{% block javascripts %}
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>

<div id="mycalendar"></div>

<script type="text/javascript">
    var value = document.getElementById("statusId").value;
    document.addEventListener('DOMContentLoaded', () => {
        var calendarEl = document.getElementById('calendar-holder');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            defaultView: 'dayGridMonth',
            editable: true,
            eventSources: [
                {
                    url: "{{ path('fc_load_events') }}",

                    method: "POST",
                    extraParams: {
                        filters: JSON.stringify({custom_param: document.getElementById("statusId").value}),

                    },
                    failure: () => {
                        // alert("There was an error while fetching FullCalendar!");
                    },
                },
            ],
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,list',
            },

            plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'], // https://fullcalendar.io/docs/plugin-index
            timeZone: 'UTC',
            locale: "bg",

        });

        calendar.render();
    });
</script>

{% endblock %

[tattali]

Maybe you just have to add an event listener on change of your select

document.getElementById("statusId").addEventListener("change", () => {
calendar.refetchEvents();
});

just after the calendar.render(); (in the DOMContentLoaded listener)

[Skatsarov123]

Nothing change .Still take first option value

[Skatsarov123]

i tried everything what i found ,but nothing.Cant pass selected value trough filter. addEventListener is not working.reply with first option,not with the selected one

[tattali]

I found out
extraParams should be a function in this case

<select id="elselect">
    <option>ok</option>
    <option>ko</option>
</select>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
        const selectToListen = document.getElementById('elselect');
        var calendarEl = document.getElementById('calendar-holder');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            defaultView: 'dayGridMonth',
            editable: true,
            eventSources: [{
                url: "{{ path('fc_load_events') }}",
                method: "POST",
                extraParams: () => {
                    console.log(selectToListen.value);
                    return {
                        filters: JSON.stringify({
                            custom_param: selectToListen.value,
                        }),
                    };
                },
                failure: () => {
                    // alert("There was an error while fetching FullCalendar!");
                },
            }],
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,list',
            },
            plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'], // https://fullcalendar.io/docs/plugin-index
            timeZone: 'UTC',
            locale: "bg",
        });

        calendar.render();

        selectToListen.addEventListener('change', () => {
            calendar.refetchEvents();
        });
    });
</script>

or

<select id="elselect">
    <option>ok</option>
    <option>ko</option>
</select>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
        const selectToListen = document.getElementById('elselect');
        var calendarEl = document.getElementById('calendar-holder');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            defaultView: 'dayGridMonth',
            editable: true,
            eventSources: [{
                url: "{{ path('fc_load_events') }}",
                method: "POST",
                extraParams: () => ({
                    filters: JSON.stringify({
                        custom_param: selectToListen.value,
                    }),
                }),
                failure: () => {
                    // alert("There was an error while fetching FullCalendar!");
                },
            }],
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,list',
            },
            plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'], // https://fullcalendar.io/docs/plugin-index
            timeZone: 'UTC',
            locale: "bg",
        });

        calendar.render();

        selectToListen.addEventListener('change', () => {
            calendar.refetchEvents();
        });
    });
</script>

[Skatsarov123]

Thanks man! Works like a charm

[tattali]

Great! I close your issue then!
Feel free to reopen it if the error come up