如何从SUBMIT表单自定义数据FullcalendarBundle [英] How to Customize Data FullcalendarBundle from a SUBMIT form
问题描述
我在FullCalendar上方添加了一个选择表单来选择用户并显示他的事件
i have added a select form above the FullCalendar to select an user and show his events
问题是如何加载在日历中选择的用户的事件
the question is how to load the events of the user selected in the calendar
这是一些代码：
在Calender.html.twig
{% block javascripts %}
{{ parent() }}
<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>
更新1：
我已将代码更改为：
{% extends 'base.html.twig' %}
{% block body %}
<div class="container">
<select id="school_selector">
<option value="User1">User1</option>
<option value="User2">User2</option>
<option value="User3">User3</option>
</select>
<div class="p-3 mb-2 bg-primary text-white">Calendrier des entretiens</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!');
}
}
],
eventRender: function eventRender( event, element, view ) {
return ['', event.USER].indexOf($('#school_selector').val()) >= 0
}
});
$('#school_selector').on('change',function(){
$('#calendar-holder').fullCalendar('rerenderEvents');
})
});
</script>
{% endblock %}
App\Enity\Event
<?php
namespace App\Entity;
class Event extends \Toiba\FullCalendarBundle\Entity\Event
{
/**
* @var string
*/
protected $User;
/**
* @param string $User
*/
public function __construct($title, \DateTime $start, \DateTime $end = null,$User)
{
parent::__construct($title,$start,$end);
$this->User=$User;
}
/**
* @return string
*/
public function getUser()
{
return $this->User;
}
/**
* @param string $User
*/
public function setUser($User)
{
$this->User = $User;
}
}
App.\\EventListener\FullCalendarListener （loadEvents）
App\EventListener\FullCalendarListener ( loadEvents )
public function loadEvents(CalendarEvent $calendar)
{
$startDate = $calendar->getStart();
$endDate = $calendar->getEnd();
$filters = $calendar->getFilters();
$bookings = $this->em->getRepository(Booking::class)
->createQueryBuilder('b')
->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) {
$bookingEvent = new Event(
$booking->getTitle(),
$booking->getBeginAt(),
$booking->getEndAt(),// If the end date is null or not defined, it creates a all day event
$booking->getUser()
);
$bookingEvent->setUrl(
$this->router->generate('booking_show', array(
'id' => $booking->getId(),
))
);
$calendar->addEvent($bookingEvent);
}
}
我已尝试过这一次，但没有显示任何内容： （
I HAVE TRIED this one, but nothing is display :(
Ps：实体事件有id，begin_at，title，end_at，user
//用户=用户名
Ps: The entity Event have id, begin_at, title, end_at, user // User= Name of user
示例事件数据：
[
{ title: 'Event1', start: '2019-03-01', end: '2019-03-02', User: 'User1', },
{ title: 'Event2', start: '2019-03-04', end: '2019-03-05', User: 'User2', },
]
推荐答案
问题很简单 - JavaScript属性名称区分大小写。
The problem is a simple one - JavaScript property names are case-sensitive.
因此， event.USER 与您数据中的用户属性不匹配。
Therefore, event.USER will not match the User property in your data.
更改 event.USER 到 event.User 它会起作用。
简单演示：
var events = [{
title: 'Event1',
start: '2019-03-01',
end: '2019-03-02',
User: 'User1'
}, {
title: 'Event2',
start: '2019-03-01',
end: '2019-03-02',
User: 'User2'
}];
events.forEach(eventRender);
function eventRender(event) {
console.log ("Testing: " + JSON.stringify(event));
console.log("Bad code: " + (['', event.USER].indexOf("User1") >= 0));
console.log("Good code: " + (['', event.User].indexOf("User1") >= 0));
}
这里是fullCalendar中代码的演示： http://jsfiddle.net/mw7okq9v/
And here's a demo of the code in action within fullCalendar: http://jsfiddle.net/mw7okq9v/
还有一点：虽然您提供的JSON数据样本包含 User 属性，但不清楚这是否准确反映了代码实际输出的当前状态。
One further point: Although your provided JSON data sample includes the User property, it's unclear whether this accurately reflects the current state of what your code is actually outputting.
在事件类中，您已将此属性指定为protected。即。
In your Event class, you have specified this property as "protected". i.e.
protected $User;
这将阻止在将对象序列化为JSON时包含该属性。我想你需要公开它：
This will prevent the property being included when the object is serialised to JSON. I think you will need to make it public:
public $User;
以便服务器将此属性作为事件JSON的一部分输出。
so that the server will output this property as part of the event JSON.
这篇关于如何从SUBMIT表单自定义数据FullcalendarBundle的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
