CODEWITHSUNDEEP
javascripthtmlfullcalendarfullcalendar-schedulerfullcalendar-5
Vlado
Vlado

Reputation: 3777

FullCalendar: how to display non-overlapping events inside same day cell in one row when in 'week' or 'month' view?

When FullCalendar is in 'week' or 'month' view I need to display events from the same day on one row (line) inside the day cell when events are not overlapping each other. Currently they are placed one under another inside the subject day cell.

Different views must remain like:

views: {
  month: {
    slotDuration: {
      'days': 1
    }
  },
  week: {
    slotDuration: {
      'days': 1
    }
  },
  day: {
    slotDuration: {
      'hours': 1
    }
  },

Sandbox: https://codepen.io/vladimir-nikolchev/pen/xxPyyYM?editors=0010

For example in case we set 'Call with Dave' and 'Lunch meeting' one after another within the same day (they do not overlap):

enter image description here

I need to display them on same row (line) when user switches to 'week' or 'month' view. Currently they appear one under another:

enter image description here

I need them to visually appear one after another (on same line) similarly to the way they look in 'day' view. They can split the day cell 50%/50% in week/month view.

Code and event data:

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    views: {
      month: {
        slotDuration: {
          'days': 1
        }
      },
      week: {
        slotDuration: {
          'days': 1
        }
      },
      day: {
        slotDuration: {
          'hours': 1
        }
      },
    },
    initialView: 'resourceTimelineDay',
    aspectRatio: 1.5,
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    editable: true,
    resourceAreaHeaderContent: 'Resources',
    resources: resourcesArray,
    events: eventsArray
  });

  calendar.render();
});

let today = new Date();
let y = today.getFullYear();
let m = today.getMonth();
let d = today.getDate();

const eventsArray = [
  {
    id: 1,
    resourceId: 'resource1',
    title: "Call with Dave",
    start: new Date(y, m, 1, 8, 30),
    end: new Date(y, m, 1, 13, 30),
    allDay: false
  },

  {
    id: 2,
    resourceId: 'resource1',
    title: "Lunch meeting",
    start: new Date(y, m, 1, 13, 40),
    end: new Date(y, m, 1, 16, 30),
    allDay: false,    
  },
  {
    id: 3,
    resourceId: 'resource2',
    title: "All day conference",
    start: new Date(y, m, d, 9, 0),
    end: new Date(y, m, d, 18, 0),
    allDay: false,    
  },
  {
    id: 4,
    resourceId: 'resource3',
    title: "All day conference",
    start: new Date(y, m, d, 9, 0),
    end: new Date(y, m, d, 18, 0),
    allDay: false,    
  },
];

const resourcesArray = [
  {
    id: 'resource1'
  },
  {
    id: 'resource2'
  },
  {
    id: 'resource3'
  },
];

Upvotes: 1

Views: 1782

Answers (1)

Mohamed Elmancy
Mohamed Elmancy

Reputation: 311

this a work around solution but it's make it in two steps below , step 1 just add this css style globally in your styles.css

.fc-timeline-event-harness{ top: 0 !important; }

this will inforce any moving or dragging events overlapping with another one to stay aligned with it in the same row step 2 add this style globally too

.fc-resource-timeline table tbody tr .fc-datagrid-cell div { height: 33px !important; }
.fc .fc-timeline-overlap-enabled .fc-timeline-lane-frame .fc-timeline-events{
  padding-bottom: 0 !important;
  height: 33px !important;
}
.fc-timeline-event{
  padding: 4px 1px !important;
}

this last style for inforce it to don't increase the height of the cell where the overlapping occur, and handle the resource column elements height to fit the cell frame. hope

Upvotes: 0

Related Questions