Désactiver l'horaire de diffusion des plages dans jQuery plugin fullcalendar

À l'aide de Fullcalender, dans mon code j'ai quelque chose comme ceci:

var availablePeriods = [["8:00", "12:00"], ["13:00", "17:00"]]; //these are the time intervals when the slots are OPEN
if (availablePeriods !== undefined) {
slots = $element.find('.fc-agenda-slots tr');
/* first add 'closed' class to all slots, and then remove class from 'open' slotts */
slots.addClass('experdscheduler_closedSlot');
if (jQuery.isArray(availablePeriods)) {
/* only in weekview and dayview */
currentView = plugin.getView();
if (currentView === 'agendaWeek' || currentView === 'agendaDay') {
numberOfAvailablePeriods =  availablePeriods.length;
scheduleStartTime = timeToFloat($element.fullCalendar( 'option', 'minTime'));            
scheduleSlotSize = $element.fullCalendar( 'option', 'slotMinutes') /60;
/* function to calculate slotindex for a certain time (e.g. '8:00') */    
getSlotIndex = function(time) {
time = timeToFloat(time);            
return Math.round((time-scheduleStartTime)/scheduleSlotSize);
}
/* remove 'closed' class of open slots */                 
for (i=0; i<numberOfAvailablePeriods; i++) {            
startOfPeriodSlot = getSlotIndex(timeToFloat(availablePeriods[i][0]));
endOfPeriodSlot = getSlotIndex(timeToFloat(availablePeriods[i][1]));
for (j=startOfPeriodSlot; j<endOfPeriodSlot; j++) {
slots.eq(j).removeClass('experdscheduler_closedSlot');
}
}          
}
}         
}
/**
* Helper function: Converts a given time to a float, e.g. '8:15' becomes 8.25
* @param mixed time A integer, float or a string. Valid strings: '8:15', '20:15', '8:15am', '8:15pm', '8.15', etc.
* @license http://opensource.org/licenses/gpl-license.php GNU Public License
* @author Koos van der Kolk <koosvdkolk at gmail dot com>
* @return float
**/
function timeToFloat(time) {      
var returnValue, timeAsArray, separator, i, timeSeparators = [':', '.'], numberOfSeparators;
/* is time an integer or a float? */
if (parseInt(time, 10) === time || parseFloat(time) === time) {
returnValue = time;
} else {
/* time will be considered a string, parse it */
time = time.toString();
numberOfSeparators = timeSeparators.length;
for (i = 0; i < numberOfSeparators; i = i + 1) {
separator = timeSeparators[i];
if (time.indexOf(separator) > 0) {
timeAsArray = time.split(separator);
returnValue = parseInt(timeAsArray[0], 10) + parseInt(timeAsArray[1], 10) / 60;
/* does string contain 'p' or 'pm'? */
if (time.indexOf('p') > 0 && returnValue <= 12) {
returnValue = returnValue + 12;
}
}
}
}
return returnValue;
}

Le code ci-dessus est une compilation de pièces d'un plugin que j'ai fait, il pourrait ne pas fonctionner directement. Hésitez pas à me contacter.

Ce fil dans google code permet de suivre l'évolution de ce type de problème. En fait, c'est à propos de l'activisme des heures de couleurs, mais il est directement lié

Aussi ce mec a mis en place une manière très pratique pour gérer cette fin, toujours à l'aide de fullcalendar avec ce genre de code

$('#calendar').fullCalendar({
....
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
}
],
annotations: [{
start: new Date(y, m, d, 13, 0),
end: new Date(y, m, d, 15, 30),
title: 'My 1st annotation', //optional
cls: 'open', //optional
color: '#777777', //optional
background: '#eeeeff' //optional
}]      
});

Vérifier la capture d'écran

J'ai trouvé une solution en utilisant un autre calendrier: jquery-semaine-calendrier ( https://github.com/themouette/jquery-week-calendar ).

Ce calendrier a une fonctionnalité appelée Freebusy. Il est ment pour être utilisé à avoir occupé et libre de l'horaire de diffusion des plages, mais en modifiant le code source un peu, je suis en mesure d'ajouter des couleurs d'arrière-plan pour l'horaire de diffusion des plages. J'ai changé la méthode freeBusyRender comme suit:

freeBusyRender: function(freeBusy, $freeBusy, calendar) {
if(freeBusy.free == 't_red') {
$freeBusy.css("backgroundColor", "red");
} else if(freeBusy.free == 't_green') {
$freeBusy.css("backgroundColor", "green");
} else if(freeBusy.free == 't_blue') {
$freeBusy.css("backgroundColor", "blue");
} else if(freeBusy.free == 't_black') {
$freeBusy.css("backgroundColor", "black");
}
$freeBusy.addClass('free-busy-free');
return $freeBusy;
}

Alors, je peux initialiser le calendrier comme suit:

(function($) {
d = new Date();
d.setDate(d.getDate() - (d.getDay() - 3));
year = d.getFullYear();
month = d.getMonth();
day = d.getDate();
var eventData2 = {
options: {
timeslotsPerHour: 4,
timeslotHeight: 12,
defaultFreeBusy: { free: true }
},
events: [
{ 'id': 1, 'start': new Date(year, month, day, 12), 'end': new Date(year, month, day, 13, 00), 'title': 'Lunch with Sarah'},
{ 'id': 2, 'start': new Date(year, month, day, 14), 'end': new Date(year, month, day, 14, 40), 'title': 'Team Meeting'},
{ 'id': 3, 'start': new Date(year, month, day + 1, 18), 'end': new Date(year, month, day + 1, 18, 40), 'title': 'Meet with Joe'},
{ 'id': 4, 'start': new Date(year, month, day - 1, 8), 'end': new Date(year, month, day - 1, 9, 20), 'title': 'Coffee with Alison'},
{ 'id': 5, 'start': new Date(year, month, day + 1, 14), 'end': new Date(year, month, day + 1, 15, 00), 'title': 'Product showcase'}
],
freebusys: [
{ 'start': new Date(year, month, day - 1, 8), 'end': new Date(year, month, day - 1, 18), 'free': 't_red'},
{ 'start': new Date(year, month, day, 8), 'end': new Date(year, month, day + 0, 18), 'free': 't_green' },
{ 'start': new Date(year, month, day + 1, 8), 'end': new Date(year, month, day + 1, 18), 'free': 't_blue' },
{ 'start': new Date(year, month, day + 2, 14), 'end': new Date(year, month, day + 2, 18), 'free': 't_black'},
{ 'start': new Date(year, month, day + 3, 8), 'end': new Date(year, month, day + 3, 18), 'free': 't_red' }
]
};
$(document).ready(function() {
var $calendar = $('#calendar').weekCalendar({
allowCalEventOverlap: true,
overlapEventsSeparate: true,
totalEventsWidthPercentInOneColumn: 95,
timeslotsPerHour: 4,
scrollToHourMillis: 0,
height: function($calendar) {
return $(window).height() - $('h1').outerHeight(true);
},
eventRender: function(calEvent, $event) {
if (calEvent.end.getTime() < new Date().getTime()) {
$event.css('backgroundColor', '#aaa');
$event.find('.wc-time').css({
backgroundColor: '#999',
border: '1px solid #888'
});
}
},
eventNew: function(calEvent, $event, FreeBusyManager, calendar) {
calEvent.id = calEvent.userId + '_' + calEvent.start.getTime();
},
data: function(start, end, callback) {
callback(eventData2);
},
displayFreeBusys: true,
daysToShow: 7,
switchDisplay: { '1 day': 1, '3 next days': 3, 'work week': 5, 'full week': 7 },
headerSeparator: ' ',
useShortDayNames: true
});
});
})(jQuery);

qui me donne le résultat suivant:

Je parie que cela peut être amélioré; je pense que je me suis cassé la disponibilité de la fonctionnalité de le faire mais je n'en ai pas besoin.