After downloading FullCalendar and testing it out, I realized that it almost meets all the requirements for a resource scheduling application I'm developing for my company. However, there is one specific customization I need help with in order to display the events differently.
The current configuration looks like this:
https://i.sstatic.net/Zeblu.png
But what I ultimately need is for it to display the events side by side like this:
https://i.sstatic.net/4c2Pp.png
This setup is crucial for portraying the sequential process accurately - ensuring that if one event (in blue) extends into another day, the following day's events (in purple) must wait until the initial event is completed. This clarity is not as evident in the top image compared to the bottom one.
Can this be achieved through configuration alone, or will modifications need to be made directly to the source code or by intercepting the event rendering process?
Thank you!
[EDIT] Here are the code snippets:
TEMPLATE:
<FullCalendar ref="fullCalendar"
default-view="resourceTimelineMonth"
:plugins="calendarPlugins"
:events="calEvents"
:resources="calResources"
:weekends="true"
:editable="true"
:event-overlap="false"
:slot-width="100"/>
SCRIPT:
data () {
return {
...
calendarPlugins: [ interactionPlugin, resourceTimelinePlugin ],
calEvents: [
{ resourceId: "101", title: 'WO123', start: '2019-11-01T07:00:00', end: '2019-11-01T12:00:00', backgroundColor: 'red' },
{ resourceId: "101", title: 'WO127', start: '2019-11-01T12:00:00', end: '2019-11-01T18:00:00', backgroundColor: 'green' },
{ resourceId: "101", title: 'WO144', start: '2019-11-01T18:00:00', end: '2019-11-02T03:00:00', backgroundColor: 'blue' },
{ resourceId: "101", title: 'WO145', start: '2019-11-02T03:00:00', end: '2019-11-02T10:00:00', backgroundColor: 'purple' }
],
calResources: [
{id: "101", title: "KM101"},
{id: "102", title: "KM102"},
{id: "103", title: "KM103"},
{id: "104", title: "KM104"},
{id: "105", title: "KM105"},
],
...
}