Hi everybody,
I'm using Fullcalendar to display availabilities and bookings of properties (houses) in a CRM application developed under Symfony 3.
The calendar is functional. We have .fc-event-container
element to display the bookings and .fc-bgevent for the availabilities as below.
fullcalendar.png
What I've added after, is the possibility to know, by hovering a cell (.fc-bgevent), who has set the availabilities and when. These informations are retrieved from the database, stored into a custom attribute « data-informations » during the render of each cell (.fc-bgevent) and finally displayed above the calendar view container as below.
fullcalendar-hover.png
To show you how I have achieved that, I put the code of the using files below.
//src/LD/PlatformBundle/Controller/Properties/indexController.php
public
function viewAction(Request $request, $id) {
$events = $manager - > getRepository('LDPlatformBundle:Availabilities') - > findBy(array('idProperties' => $id));
$Availa = array();
foreach($events as $event) {
...
$Ava['user'] = $event - > getIdUsers();
$Ava['updateDate'] = $event - > getDateModifAvailabilities();
if ($Ava['updateDate'] != null) {
$Ava['updateDate'] = $Ava['updateDate'] - > format('D d-M-y');
} else {
$Ava['updateDate'] = "unknonw date";
}
if ($Ava['user'] == null) {
$Ava['user'] = 'unknown user';
}
$Ava['informations'] = "Created by ".$Ava['user'].
" on ".$Ava['updateDate'];
$Availa[] = $Ava;
}
return $this - > render('LDPlatformBundle:Properties:view.html.twig', array(
'Availa' => $Availa,
));
}
//src/LD/PlatformBundle/Resources/views/Properties/view.html.twig
<script >
$(document).ready(function() {
$('#calendar').fullCalendar({
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
navLinks: true, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: false,
eventOverlap: false,
events: [{ % include('FrontBootstrap/ajaxPlanning.html.twig') %
}],
eventRender: function(event, element) {
$(element).attr('data-informations', event.informations);
},
nextDayThreshold: "01:00:00"
});
$('.fc-view-container').prepend('<div id="informations-date"><span></span></div>');
$('#informations-date').css('visibility', 'hidden');
$('.fc-bgevent').hover(function() {
var informations = $(this).attr('data-informations');
$('#informations-date span').text(informations);
$('#informations-date').css('visibility', 'visible');
}, function() {
$('#informations-date').css('visibility', 'hidden');
});
});
</script>
<style >
#informations - date {
height: 20 px;
}
/* Disable hover */
.fc - content - skeleton,
.fc - bgevent - skeleton {
pointer - events: none
}
/* Enable hover on .fc-bgevent, .fc-bgevent-skeleton child and .fc-event-container */
.fc - bgevent,
.fc - event - container {
pointer - events: auto;
}
</style>
//app/Resources/views/FrontBootstrap/ajaxPlanning.html.twig
{ %
for ava in Availa %
} {
start: ('{{ ava.start|date("Y") }}-{{ ava.start|date("m") }}-{{ ava.start|date("d") }}'),
color: '{{ ava.color }}',
rendering: 'background',
informations: '{{ava.informations}}',
} { %
if loop.last %
} { %
else %
}, { % endif %
} { % endfor %
}
The Problem
Now, the thing is, when I change the view by selecting other month (june, july...) or other range (week, month...), the functionality doesn't work anymore. I know the problem comes from Jquery because I still have the attribute « data-informations » on the cells of others views. I first thought that the hover function doesn't work cause its targets elements that are on the DOM when the function is called. That's why I also try to declare the function and call it into viewRender parameter but it didn't solved the problem.
//src/LD/PlatformBundle/Resources/views/Properties/view.html.twig
$(document).ready(function() {
// console.log(items);
console.log(Availa);
$('#calendar').fullCalendar({
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
navLinks: true, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: false,
eventOverlap: false,
events: [{ % include('FrontBootstrap/ajaxPlanning.html.twig') %
}],
eventRender: function(event, element) {
$(element).attr('data-informations', event.informations);
},
viewRender: function(view, element) {
console.log('ok');
$('.fc-bgevent').hover(function() {
console.log('ok');
});
getDateInformations();
},
nextDayThreshold: "01:00:00"
});
$('.fc-view-container').prepend('<div id="informations-date"><span></span></div>');
getDateInformations();
});
function getDateInformations() {
$('#informations-date').css('visibility', 'hidden');
$('.fc-bgevent').hover(function() {
console.log('ok');
var informations = $(this).attr('data-informations');
console.log(informations);
$('#informations-date span').text(informations);
$('#informations-date').css('visibility', 'visible');
}, function() {
$('#informations-date').css('visibility', 'hidden');
});
}
I think there is surely a special feature of the hover function that I don't know.
You'd have to add the event handler in fullCalendar's eventAfterAllRender
instead of viewRender
because, as the documentation (https://fullcalendar.io/docs/viewRender) says, viewRender
runs after the plain view has been drawn, but the events are not necessarily loaded into it at that time - that is done asynchronously, so there's a good chance your events are still not in the DOM at that time.
eventAfterAllRender: function(view)
{
$('.fc-bgevent').hover(function() {
console.log('ok');
});
}
See also https://fullcalendar.io/docs/eventAfterAllRender
Best Authentication and Industrial Practise logging Mechanism in PHP
Laravel echo server - how to update data in a presence channel?
How to use like clause in Laravel when we are using Raw SQL ?
How to auto login a website using windows authentication on intranet?
Display information of 1 table from 2 columns in the the search results. (PHP - Laravel)
Any Wrong with $get command here.. no error diplayed so do no result displayed
Importing CSV into MySQL with PHP with first csv data as MySQL columns
currently I'm facing the issue that the resizable line (that ghost line) is way offset caused by transform: translateX is there any solution for that to recalculate the current position of the cursor?
This question already has an answer here:
I working on HTML and JS pages (not a project)
so we are designing a website for a client, we are building our design to a wordpress frame work, the problem is we need the website to be totally unscrollabe on the screen for desktops and laptops