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

Question

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):

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

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'
  },
];

Please provide _your_ code and the actual JSON for _your_ event data, since that's crucial to the question. The sandbox link only provides demo code and data. We can't fix pictures. Thanks. — ADyson, Feb 28 '22 at 23:03
Hi, thank you for the response. I just edited the code and added data. — Vlado, Mar 01 '22 at 00:33
Thanks. The problem you've got is your slotDuration. Since you've made the "week" view have a slotDuration of 1 day, basically it does not take into account any times smaller than one day. It _cannot_ split your events horizontally across the day because there is no small enough time-based grid onto which it can overlay them accurately. It simply doesn't calculate anything smaller than 1 day, due to the settings. Therefore any events shorter than that are listed vertically, with the times shown in the description instead so you can still see when they start and finish — ADyson, Mar 01 '22 at 09:06
So basically your options are as follows: 1) accept that as a tradeoff for having a larger slotDuration. 2) change the slotDuration. 3) Embark on a massive re-write of fullCalendar's internal rendering engine. — ADyson, Mar 01 '22 at 09:06
Hello, in case I set slotDuration: {'hours': 1} for week/month views will there be a way to make the day column more compact: 1. I need to remove the hours slot from the header and 2) I need to somehow make the column narrow. What I need to achieve is like 7 days on screen and with no timeline in header. — Vlado, Mar 01 '22 at 17:24
`will there be a way to make the day column more compact`. No. But maybe you could compromise with `hours: 12` or something?? `I need to remove the hours slot from the header`...because...? What problem is that causing you? — ADyson, Mar 01 '22 at 23:56
Because I need to simplify the look of it and make it fit at least 7 days per screen. In case I set slotDuration: { 'hours': 12 } it wraps the events on different rows and this stretches the rows and makes those events look like they overlap despite they don't. That is strange. — Vlado, Mar 02 '22 at 07:29
Well "simplifiy the look" sounds like UX nice-to-haves rather than a hard technical requirements, so you might end up needing to compromise somewhere. `In case I set slotDuration: { 'hours': 12 } it wraps the events on different rows`... I can see that: https://codepen.io/ADyson82/pen/PoOxvXZ . I guess it's because the amount of space available for each column is limited. You could compensate by making the calendar wider, perhaps: https://codepen.io/ADyson82/pen/rNYQgbr . Or if you think that's a mistake, you can always [raise a bug](https://fullcalendar.io/reporting-bugs) with fullCalendar. — ADyson, Mar 02 '22 at 09:17
I made it to the point where if I manage to turn off the header line with hours I will be good. It is totally useless and disturbing. Each header in 'week'/'month' view says '12am' https://codepen.io/vladimir-nikolchev/pen/xxPyyYM?editors=0110 — Vlado, Mar 02 '22 at 14:41
Agreed, fullCalendar does handle things differently depending on whether you specify the duration in hours or days. Not sure why exactly, but that's how it is. That whole hours row has the class `fc-timeline-header-row-chrono` which seems to be unique to it. You could maybe simply try hiding that with CSS, but only when you're in the week view — ADyson, Mar 02 '22 at 16:21

Mohamed Elmancy · Answer 1 · 2022-06-04T03:14:18.990

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

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

1 Answers1