jQuery Girl
  1. jQuery Girl
  3. FullCalendar.js: Empêcher des sélections autres que des événements en arrière-plan?
Intereting Posts
Angular2 avec JQuery Datatables Compteur de caractères JQuery à entrées multiples Comment arrêter le lien en cours jusqu’à la fin de jQuery .animate? Fancybox2 légère transparence lors de la transition d’image suivante / précédente de la galerie Impossible de trouver un élément dans Datalist par ID avec JQuery Est-il prudent de faire référence à la bibliothèque JQuery de Google? JQuery mots aléatoires sans répéter Modification des atsortingbuts d’éléments clonés à l’aide de sélecteurs CSS Jquery – Simple Array, poussant l’élément si ce n’est pas déjà fait, supprimant l’élément s’il y est Liste de miniatures jQuery Mobile dans une liste déroulante de sélection les navigateurs webkit obtiennent des éléments.width () faux supprimer toutes les données en utilisant jQuery Comment remplir dropdownlist en cascade en utilisant jquery dans mvc 3? que fait $ (”)? Surlignez du texte à l’intérieur de HTML avec jQuery

FullCalendar.js: Empêcher des sélections autres que des événements en arrière-plan?

Comment empêcher l’utilisateur de sélectionner des zones non colorées (événements en arrière-plan). Il ne devrait pouvoir sélectionner que les zones de couleur bleue.

entrez la description de l'image ici

Jusqu’à ce que cette demande que j’ai faite il y a un peu soit terminée, la meilleure solution est la suivante:

Utilisez la fonction suivante pour vérifier si un événement est “à l’intérieur” d’un événement en arrière-plan. 

var isValidEvent = function(start,end){ return $("#calendar").fullCalendar('clientEvents', function (event) { return (event.rendering === "background" && //Add more conditions here if you only want to check against certain events (start.isAfter(event.start) || start.isSame(event.start,'minute')) && (end.isBefore(event.end) || end.isSame(event.end,'minute'))); }).length > 0; };

Dans chaque rappel de création ou de modification d’événement, utilisez la fonction. 

 select: function (start, end, jsEvent, view) { if(isValidEvent(start,end)){ //only add it if it's valid $("#calendar").fullCalendar('addEventSource', [{ start: start, end: end, } ]); } $("#calendar").fullCalendar("unselect"); }, eventDrop: function( event, delta, revertFunc, jsEvent, ui, view ) { if(!isValidEvent(event.start,event.end)){ revertFunc(); } }, eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) { if(!isValidEvent(event.start,event.end)){ revertFunc(); } },

Voici un JSFiddle du résultat.