Eventuelle Überfüllung in der gleichen Farbe oder Art verhindern in Vollkalender

Question

Ich habe ein wenig Schwierigkeiten, Informationen über Überlaufmöglichkeiten zu finden.

Ich weiß, wie Überlauf auf alle Fullcalnarder Ereignisse mit EventOverlap-Attribut zu verhindern, aber gibt es eine Möglichkeit in Fullcalendar Überschneidungen für einen Typ von Ereignissen zu verhindern?

Zum Beispiel kann ein rotes Ereignis nicht mit einem anderen roten Ereignis überlaufen, aber gleichzeitig kann es sich mit einem gelben oder grünen Farbereignis überschneiden.

Die Sache, die ich erreichen möchte, ist mehrere Ereignisse der Person zu haben, wo sich Ereignisse innerhalb einer Person nicht überschneiden können, aber gleichzeitig mit anderen Personenereignissen überlappen können.

Answer 1

Wenn Ihr Ereignisobjekt verfügt über eine Person Kennung (oder einzigartige Farbe pro Person, etc) Sie eventOverlap können

$('#calendar').fullCalendar({ 
 
    defaultDate: moment(), 
 
    defaultView: 'agendaWeek', 
 
    forceEventDuration: true, // too lazy to specify end times 
 
    editable: true, 
 
    events: [{ 
 
    title: 'Sally event', 
 
    start: moment().add(1, 'day'), 
 
    person: 'sally' 
 
    }, { 
 
    title: 'Sally event', 
 
    start: moment().add(2, 'day').add(125, 'minute'), 
 
    person: 'sally' 
 
    }, { 
 
    title: 'Bob event', 
 
    start: moment().add(1, 'day'), 
 
    person: 'bob' 
 
    }, { 
 
    title: 'Bob event', 
 
    start: moment().add(2, 'day').add(150, 'minute'), 
 
    person: 'bob' 
 
    }], 
 
    eventOverlap: function(still, moving) { 
 
// could be event.color or whatever uniquely identifies the person the event is associated to 
 

 
    return still.person != moving.person; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.0/fullcalendar.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.0/fullcalendar.min.css" rel="stylesheet" /> 
 
<div id='calendar'></div>