In my project, users can book rooms. My rooms have disponibility hours (eg 08:00-17:00). I try to use Business Hours but disponibilities change in summer and winter.
I also tried to use inverse-background events with date ranges like this post but if I use selectConstraint, the range is not taken in account.
The best would be to add date range to business hours, but it seems not implemented yet.
Has anyone a solution for my needs?
Thanks
edit: here is my fullcalendar options
function FCInit(){
var formatColumn, formatColumnWeek;
// Entete des colonnes
if ($(window).width() < 600) {
formatColumn = 'ddd';
formatColumnWeek = 'ddd\nDD/MM';
}
else {
formatColumn = 'dddd';
formatColumnWeek = 'dddd\nDD/MM';
}
var fcOpts = {
header: {
left: 'today,datePickerButton',
center: 'prev,title,next',
right: 'month,agendaWeek,agendaDay'
},
contentHeight: 'auto',
eventLimit: false,
allDaySlot: true,
slotEventOverlap: false,
nowIndicator: true,
timeFormat: 'H:mm',
columnFormat: formatColumn, // Format des jours dans l'entete ddd: Mon / ddd M/D : Mon 09/07 / dddd : MOnday /
navLinks: true,
eventOverlap: false,
selectable: true,
selectHelper: true,
selectOverlap: true,
selectConstraint:999,
unselectCancel: '#reservation',
views: {
week: {
columnFormat: formatColumnWeek
}
},
events:[{
id:3,
title:"R\u00e9serv\u00e9",
start:"2017-11-02 08:00",
end:"2017-11-02 10:00",
overlap:false,
color:"#C41305"
},{
id:999,
className:"fc-nonbusiness",
title:"",
start:"08:00",
end:"17:00",
dow:[4],
ranges:[
{
start:"2017-11-01",
end:"2017-11-30"
}
],
rendering:"inverse-background",
}],
/* Ajout de datepicker (nécessite Jquery UI css et js) */
customButtons: {
datePickerButton: {
text: '',
click: function () {
var $btnCustom = $('.fc-datePickerButton-button'); // name of custom button in the generated code
$btnCustom.after('<input type="hidden" id="hiddenDate" class="datepicker"/>');
$("#hiddenDate").datepicker({
flat: true,
showOn: "button",
dateFormat: "yy-mm-dd",
onSelect: function (dateText, inst) {
$('#full-calendar').fullCalendar('changeView', 'agendaDay', dateText);
}
});
var $btnDatepicker = $(".ui-datepicker-trigger"); // name of the generated datepicker UI
//Below are required for manipulating dynamically created datepicker on custom button click
$("#hiddenDate").show().focus().hide();
$btnDatepicker.trigger("click"); //dynamically generated button for datepicker when clicked on input textbox
$btnDatepicker.hide();
$btnDatepicker.remove();
$("input.datepicker").not(":first").remove();//dynamically appended every time on custom button click
}
}
},
dayRender: function(date, cell){
if(date.isBefore(new Date())){
cell.css('cursor','no-allowed');
}
},
eventRender: function (event, element) {
if(event.ranges) {
return (event.ranges.filter(function (range) { // test event against all the ranges
return (event.start.isBefore(range.end) &&
event.end.isAfter(range.start));
}).length) > 0;
}
if(event.rendering === "background"){
// Just add some text or html to the event element.
element.append("<div class='fc-title'>"+event.title+"</div>");
}
},
dayClick: function(date, jsEvent, view){
if(date.isSameOrAfter(new Date()) && view.name === 'month'){
$('#full-calendar').fullCalendar('changeView', 'agendaWeek', date);
}
},
select: function(start, end, jsEvent, view){
if(start.isSameOrAfter(new Date()) && view.name !== 'month'){
$('#reservation_dateFrom').val(start.format('DD/MM/YYYY HH:mm'));
$('#reservation_dateTo').val(end.format('DD/MM/YYYY HH:mm'));
$('#reservation').modal('show');
}else if(start.isBefore(new Date())){
alert('Il n\'est pas possible de réserver dans le passé');
$('#full-calendar').fullCalendar('unselect');
}
}
};
$('#full-calendar').fullCalendar(fcOpts);
};
and my symfony entities for storing the datas (where Horaire is a collection of business hours):
/*src/AppBundle/Entity/HoraireSalle.php*/
class HoraireSalle
{
/**
* @var int
*
* @ORM\Column(name="id", type="integer")
* @ORM\Id
* @ORM\GeneratedValue(strategy="AUTO")
*/
private $id;
/**
* @var \DateTime
*
* @ORM\Column(name="dateFrom", type="datetime")
*/
private $dateFrom;
/**
* @var \DateTime
*
* @ORM\Column(name="dateTo", type="datetime")
*/
private $dateTo;
/**
* @ORM\ManyToOne(targetEntity="Horaire", inversedBy="salles")
*/
private $horaire;
/**
* @ORM\ManyToOne(targetEntity="Salle", inversedBy="horaires")
*/
private $salle;
...
}
