FullCalendar: Comment arrêter en faisant glisser des événements personnalisés?

StackOverflow https://stackoverflow.com/questions/4001377

  •  25-09-2019
  •  | 
  •  

Question

Quelqu'un peut-il me dire comment arrêter glisser / redimensionner les événements où event.id > 100? Seuls les événements doivent être non draggable.

Mise à jour avec Exemple de code: 

eventRender: function(event, element) {
    if (event.id > 100) {
        event.disableDragging();
        event.disableResizing();
    }

    element.qtip({
        content: GetEventToolTip(event),
        position: { corner: { tooltip: 'bottomLeft', target: 'topMiddle'} },
        style: {
            border: {
                width: 1,
                radius: 5
            },
            padding: 5,
            textAlign: 'left',
            tip: false,
            name: event.iscustom == 'True' ? 'cream' : 'dark'
        }
    });
}

Merci.

Était-ce utile?

La solution

Ni disableDragging ni disableResizing sont Fonctions définie dans fullcalendar au 1.4.8. Je suis certain que 2 personnes dans le monde ont pas essayé la première suggestion :) Néanmoins, vous aurez besoin de puiser dans l'objet de l'interface utilisateur jQuery lui-même pour désactiver le redimensionnement ou glisser au niveau de l'événement. Donc, (plutôt que d'essayer d'utiliser les fonctions non existantes), essayez dans votre rappel eventRender(event, element): 

if (event.id > 100) {

    element.draggable = false;

}

Notez que je suis en train simplement la propriété sur l'élément jQuery lui-même en ce qui concerne le comportement de l'interface utilisateur draggable.

La même chose vaut pour redimensionnable sauf que vous devrez supprimer la div (class = ui-resizable-handle ui-resizable-s) qui est ajoutée par fullcalendar en identifiant avec un sélecteur jquery et le retirer (juste être sûr de définir un className unique par événement dans le tableau des événements yoru de sorte que vous pouvez facilement l'identifier dans le DOM). S'il vous plaît de bien vouloir demander au développeur de fullcalendar (s) pour ajouter des propriétés de disableDragging et disableResizing à l'objet de l'événement. Il faut moins d'une minute pour ajouter le support pour cela à la source.

Autres conseils

eventRender: function(event, element) {
    if (event.id.indexOf("IDENTIFYING_STRING") == -1) 
    {
        event.editable = false;
    }                       
}

Cela a fonctionné parfait pour moi: 

if ( event.id > 100 ) {
  element.draggable = false;
  element.resizable = false;
}

Ceci est la meilleure solution: 

$('#calendar').fullCalendar({
    disableDragging = true
});

je dirais: 

if(event.id > 100)
{
   event.disableDragging();
   event.disableResizing();
}

FullCalendar v1.6.4 

eventRender: function(jsEvent, element) {

 if(jsEvent.id > 100) {

    jsEvent.startEditable    = false;
    jsEvent.durationEditable = false;
  }

  return element;             
}

Cette solution a travaillé pour moi comme un charme.

J'ai mis en œuvre cette JS bibliothèque Ruby. Gem "Fullcalendar_engine"

Vous devez pirater fullcalendar.js

lignes décommentez 

t.isEventDraggable = isEventDraggable;
t.isEventResizable = isEventResizable;

remplacer les fonctions: 

function isEventDraggable(event) {
         return isEventEditable(event) && !opt('disableDragging') &&
            !event.disableDragging;
}


function isEventResizable(event) { // but also need to make sure the seg.isEnd == true
         return isEventEditable(event) && !opt('disableResizing') &&
            !event.disableResizing; 
}

Maintenant, vous pouvez activer / désactiver le redimensionnement et en faisant glisser pour chaque événement que vous le souhaitez.

Ni element.draggable = false et event.ediable = false travaillé pour moi. Il doit être à cause de la nouvelle version de FullCalendar. Si tel est votre cas aussi, essayez: 

if ( event.id > 100 ) {
    event.startEditable = false;
}

a marché pour moi.

Sinon, vous pouvez annuler l'événement move après la chute: 

eventDrop: function (event, delta, revertFunc) {

            if (event.id < 100) 
                revertFunc();
        }
en modifiable

écrire juste faux et il ne sera en mesure de glisser-déposer                 modifiable: false

Je n'ai pas eu de succès avec les méthodes présentées ici. J'ai fini par le piratage fullcalendar.js pour ajouter une option de noDragging pour des événements, ce qui était en fait très simple:

d'origine: 

function isEventDraggable(event) {
    return isEventEditable(event) && !opt('disableDragging');
}

changé à: 

function isEventDraggable(event) {
    return isEventEditable(event) && !opt('disableDragging') && !event.noDragging;
}

Juste ajouté le chèque pour event.noDragging.

Utilisez ces balises lorsque vous créez votre fullcalendar pour désactiver le redimensionnement ou glisser. 

**>  $('#calendar').fullCalendar({
> 
>    editable: false,
> 
> //the rest of your code... }**

Utilisez ces balises lorsque vous créez votre fullcalendar pour désactiver le redimensionnement ou glisser. Les arshaw documents ne sont pas très explicites, mais voici comment les interpréter. 

 $('#calendar').fullCalendar({
    disableResizing:true,
    disableDragging:true,

    //the rest of your code...

disableDragging : Boolean, Par défaut : false     Désactivent toutes événement Traîner, même lorsque les événements sont modifiables.

disableResizing : Boolean, Par défaut : false     Désactivent toutes événement redimensionne, même lorsque les événements sont modifiables.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top