FullCalendar create drop down filter

I am using fullCalendar in my Symfony project.i wont to create client side drop down filter that filter by database value /status value/

here is my entity

<?php

namespace AppEntity;

use DoctrineORMMapping as ORM;

/**
 * @ORMEntity(repositoryClass="AppRepositoryBookingRepository")
 */
class Booking
{
    /**
     * @ORMColumn(type="integer")
     * @ORMGeneratedValue
     * @ORMId
     */
    private $id;
    /**
     * @ORMColumn(type="string", length=255 ,nullable=true)
     */
    private $title;
    /**
     * @ORMColumn(type="datetime")
     */
    private ?DateTimeInterface $loadingDate;

    /**
     * @ORMColumn(type="datetime")
     */
    private ?DateTimeInterface $unloadingDate;

    /**
     * @ORMColumn(type="string")
     */
    private $truck_id;
    /**
     * @ORMColumn(type="string", length=255)
     */
    private $loadingAddress;
    /**
     * @ORMColumn(type="string", length=255)
     */
    private $unloadingAddress;
    /**
     * @ORMColumn(type="decimal", precision=10, scale=0)
     */
    private $pricePerKm;
    /**
     * @var Driver
     *
     * @ORMManyToOne(targetEntity="AppEntityDriver",inversedBy="cargoes")
     */
    private Driver $drivers;
    /**
     * @ORMColumn(type="integer" )
     */
    private int $status = 0;
    /**
     * @var User
     *@ORMManyToOne(targetEntity="AppEntityUser", 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;
    }


}

my calendar subscriber

<?php

namespace AppEventSubscriber;

use AppRepositoryBookingRepository;
use CalendarBundleCalendarEvents;
use CalendarBundleEntityEvent;
use CalendarBundleEventCalendarEvent;
use SymfonyBundleFrameworkBundleControllerAbstractController;
use SymfonyComponentEventDispatcherEventSubscriberInterface;
use SymfonyComponentRoutingGeneratorUrlGeneratorInterface;

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',
        ];
    }
    public function onCalendarSetData(CalendarEvent $calendar)
    {
        // Modify the query to fit to your entity and needs
        // Change booking.beginAt by your start date property

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

            // If the end date is null or not defined, a all day event is created.
            );

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

and view

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

{% block body %}
    <a href="{{ path('booking_new') }}">Create new booking</a>

    <select id="status-filter">
        <option value="all">All</option>
        <option value="1">Completed</option>
        <option value="2">Not Completed</option>
    </select>
    <br><br>
    <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">

        document.addEventListener('DOMContentLoaded', () => {
            var calendarEl = document.getElementById('calendar-holder');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                defaultView: 'list',
                editable: true,

                eventSources: [
                    
                    {
                        url: "{{ path('fc_load_events') }}",
                        method: "POST",
                        extraParams: {
                            filters: JSON.stringify({})
                        },
                        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 %}

The default status value is ‘0’ .when the event is completed the value of the status changes то ‘1’

The filter must switch between values

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *