如何自定义FullCalenderBundle的数据[Symfony4] [英] How to customize the Data of FullCalenderBundle [Symfony4]
本文介绍了如何自定义FullCalenderBundle的数据[Symfony4]的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在日历上方添加了一个选择表单，以选择一个用户并在Fullcalendar上显示其事件(例如实体预订)
I have added a select form above the calendar to select an user and show his events(entity booking for example)on the Fullcalendar
所以我的问题是，表单中选择的用户如何更改FullCalenderBundle的数据?
so my question is, how the data of FullCalenderBundle change by the user selected in the form?
这是一些文件，
FullCalenderListener.php
FullCalenderListener.php
<?php
namespace App\EventListener;
use Doctrine\ORM\EntityManagerInterface;
use Doctrine\ORM\Mapping\Entity;
use App\Entity\Booking;
use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
use Symfony\Component\Security\Core\Security;
use Toiba\FullCalendarBundle\Entity\Event;
use Toiba\FullCalendarBundle\Event\CalendarEvent;
class FullCalendarListener
{
/**
* @var EntityManagerInterface
*/
private $em;
/**
* @var UrlGeneratorInterface
*/
private $router;
private $security;
public function __construct(EntityManagerInterface $em, UrlGeneratorInterface $router,Security $security)
{
$this->em = $em;
$this->router = $router;
$this->security = $security;
}
public function loadEvents(CalendarEvent $calendar)
{
$startDate = $calendar->getStart();
$endDate = $calendar->getEnd();
$filters = $calendar->getFilters();
// Modify the query to fit to your entity and needs
// Change b.beginAt by your start date in your custom entity
$user = $this->security->getUser();
$bookings = $this->em->getRepository(Booking::class)
->createQueryBuilder('b')
->where('b.Responsable = :responsable')
->setParameter('responsable', $user->getUsername())
->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) {
// this create the events with your own entity (here booking entity) to populate calendar
$bookingEvent = new Event(
$booking->getTitle(),
$booking->getBeginAt(),
$booking->getEndAt() // If the end date is null or not defined, it creates a all day event
);
/*
* Optional calendar event settings
*
* For more information see : Toiba\FullCalendarBundle\Entity\Event
* and : https://fullcalendar.io/docs/event-object
*/
// $bookingEvent->setUrl('http://www.google.com');
// $bookingEvent->setBackgroundColor($booking->getColor());
// $bookingEvent->setCustomField('borderColor', $booking->getColor());
$bookingEvent->setUrl(
$this->router->generate('booking_show', array(
'id' => $booking->getId(),
))
);
// finally, add the booking to the CalendarEvent for displaying on the calendar
$calendar->addEvent($bookingEvent);
}
}
}
calendar.html.twig
calendar.html.twig
{% extends 'base.html.twig' %}
{% block body %}
<div class="container">
<div class="p-3 mb-2 bg-primary text-white">Choose a user</div>
<div class="p-3 mb-2">{{ form(form) }}</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!');
}
}
]
});
});
</script>
{% endblock %}
我已经做了很多尝试，但我做不到，谢谢您的帮助
I have tried so much and i can't do it, thank you for your help
推荐答案
您应该创建一组用户并执行类似的操作
You should create a select of your users and do something like this
$('#users').on('change', function() {
var userId = this.value;
$('#calendar-holder').fullCalendar({
eventSources: [{
url: "{{ path('fullcalendar_load_events') }}",
type: 'POST',
data: {
filters: {
user_id: userId,
}
},
error: function () {
alert('There was an error while fetching FullCalendar!');
}
}]
});
$('#calendar-holder').fullCalendar('refetchEvents');
});
在您的监听器中，您现在可以相应地更新查询
in your listener you can now update the query accordingly
$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();
这篇关于如何自定义FullCalenderBundle的数据[Symfony4]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
