时间戳

首页 > 解决方案 > FullCalendar 创建下拉过滤器

javascript - FullCalendar 创建下拉过滤器

问题描述

我在我的 Symfony 项目中使用 fullCalendar。我不会创建按数据库值/状态值/过滤的客户端下拉过滤器

这是我的实体

<?php

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


}

我的日历订阅者

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

并查看

{% 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/core@4.1.0/main.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.1.0/main.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@4.1.0/main.min.css">

{% endblock %}

{% block javascripts %}
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.1.0/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@4.1.0/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.1.0/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@4.1.0/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/list@4.1.0/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 %}

默认状态值为“0”。当事件完成时，状态值更改为“1”

过滤器必须在值之间切换

标签： javascriptphpsymfonyfullcalendarfullcalendar-4

解决方案

推荐阅读