As for how to customize Fullcalendar Scheduler's duration - fullcalendar

Question

thanks in advance.
I'm struggling with custimizing fullcalendar scheduler stuff.
I just want to display weektimetable like below.
(FYI, below's CSS is just edited by me, of course it's not the answer I want.)
As you see, in the case of the original fullcalendar scheduler's weekshot, you can't have the same y-point by one event, and I want to customize this.
please your advice, thanks
enter image description here
enter image description here

Answer 1

Without seeing the exact event data you're using to create this scenario, it's hard to be sure exactly what the issue is. But here's my suggestion:
I think you are wanting to get two events side by side, but as long as their times overlap, you never can. Even if the times don't overlap, if the end of event 1 and the start of event 2 fall somewhere in the middle of a slot, they will still appear to overlap.
Let's illustrate the point using the snippet below:
There are two calendars in the demo (scroll down to see the second one). Both calendars have identical resources and events.
The first resource contains events which overlap onto the same day.
So they will never be shown side-by-side.
The second resource contains events which don't overlap. One ends
just before midday, and the second starts at midday on the same day.
On the first calendar they are still shown as overlapping, because the calendar only shows things in 1-day intervals. Within that whole day context, the events still overlap. There is only 1 slot for that day into which they can be placed.
However on the second calendar, the events in the second resource will be shown side-by-side, because the slot duration (12 hours) is now short enough to allow
the events to be placed into separate slots based on their start/end times.
$(function() { // document ready
$('#calendar1').fullCalendar({
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
defaultView: 'timeline',
header: {
left: 'prev,next today',
center: 'title',
right: 'timeline'
},
slotDuration: {
days: 1
},
resources: [{
"id": 1,
"title": "Screenshot 1"
},
{
"id": 2,
"title": "Screenshot 2"
},
],
events: [{
id: '1',
resourceId: "1",
start: '2017-06-01',
end: '2017-06-04',
title: 'event 1'
},
{
id: '2',
resourceId: "1",
start: '2017-06-03',
end: '2017-06-06',
title: 'event 2'
},
{
id: '3',
resourceId: "2",
start: '2017-06-01',
end: '2017-06-03T12:00',
title: 'event 3'
},
{
id: '4',
resourceId: "2",
start: '2017-06-03T12:00',
end: '2017-06-06',
title: 'event 4'
}
]
});
$('#calendar2').fullCalendar({
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
defaultView: 'timeline',
header: {
left: 'prev,next today',
center: 'title',
right: 'timeline'
},
slotDuration: {
hours: 12
},
resources: [{
"id": 1,
"title": "Screenshot 1"
},
{
"id": 2,
"title": "Screenshot 2"
},
],
events: [{
id: '1',
resourceId: "1",
start: '2017-06-01',
end: '2017-06-04',
title: 'event 1'
},
{
id: '2',
resourceId: "1",
start: '2017-06-03',
end: '2017-06-06',
title: 'event 2'
},
{
id: '3',
resourceId: "2",
start: '2017-06-01',
end: '2017-06-03T12:00',
title: 'event 3'
},
{
id: '4',
resourceId: "2",
start: '2017-06-03T12:00',
end: '2017-06-06',
title: 'event 4'
}
]
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" media="all" />
<link href='https://fullcalendar.io/js/fullcalendar-scheduler-1.6.2/scheduler.min.css' rel='stylesheet' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.0/moment.min.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.6.2/scheduler.min.js'></script>
<div id='calendar1'></div>
<br/><br/>
<div id='calendar2'></div>
So, in conclusion, to get the effect you want, you must ensure that
Your events do not overlap either by date or time, and
The configured slot duration is sufficiently small to allow the
calendar to place the events side-by-side in separate slots.