如何解决FullCalendar创建下拉过滤器
我在Symfony项目中使用fullCalendar。我不会创建按数据库值/ status值/
进行过滤的客户端下拉过滤器这是我的实体
<?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'
过滤器必须在值之间切换
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
