user3013163 user3013163 - 2 months ago 31
jQuery Question

Prevent same color or type event overflow in Fullcalendar

I am having a bit of difficulty to find information about overflow possibilities.

I know how to prevent overflow on all Fullcalndar events with eventOverlap attribute, but is there a way in Fullcalendar to prevent overlap on one type of events?

For example, one red event can't overflow with another red event, but at the same time it can overlap with a yellow or green color event.

The thing i want to achieve is to have multiple person's events, where within one person, events can't overlap, but at the same time it can overlap with other person events.

Answer

If your event object has a person identifier (or unique color per person, etc) you can use eventOverlap

$('#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>

Comments