如何自定义 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 AppEventListener;
use DoctrineORMEntityManagerInterface;
use DoctrineORMMappingEntity;
use AppEntityBooking;
use SymfonyComponentRoutingGeneratorUrlGeneratorInterface;
use SymfonyComponentSecurityCoreSecurity;
use ToibaFullCalendarBundleEntityEvent;
use ToibaFullCalendarBundleEventCalendarEvent;
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 : ToibaFullCalendarBundleEntityEvent
* 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);
}
}
}
日历.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屋！
查看全文
