Is it Events should change the position in the fullcalendaer view based on slotLabelInterval (slide the slider ) ?
Is it slotLabelInterval is only divide the slotduration?
When slide the slider to some hours it will effect the slotLabelInterval.Then the events should also move based on slotLabelInterval time period in the fullcalendar.
var calendar = null;
var datetime = moment().format('YYYY-MM-DDTHH:mm:ss');
let today = new Date().toISOString().slice(0, 10);
var slotLabel = '';
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
slotMinTime: '06:00',
slotMaxTime: '19:00',
slotDuration: '00:30',
slotLabelInterval: slotLabel,
initialView: 'resourceTimelineDay',
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
initialView: 'resourceTimelineWeek',
height: 650,
headerToolbar: {
left: 'prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
},
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
hour12: false
},
allDay: false,
editable: true,
resourceAreaHeaderContent: 'Manager',
initialDate: today,
businessHours: [
{
daysOfWeek: [0, 1, 2, 3, 4, 5, 6],
startTime: '07:00',
endTime: '18:00'
}
],
resourceAreaWidth: '15%',
resources: [{
id: 'a',
title: 'Employee 1'
},
{
id: 'b',
title: 'Employee 2'
},
{
id: 'c',
title: 'Employee 3'
},
{
id: 'd',
title: 'Employee 4'
}
],
events: [{
title: 'Event 1',
start: today + 'T07:30:00',
end: today + 'T12:00:00',
resourceId: 'a'
},
{
title: 'Event 2',
start: today + 'T09:30:00',
end: today + 'T14:00:00',
resourceId: 'b'
},
{
title: 'Event 3',
start: today + 'T08:30:00',
end: today + 'T12:00:00',
resourceId: 'c'
},
{
title: 'Event 4',
start: today + 'T10:30:00',
end: today + 'T14:00:00',
resourceId: 'd'
}
]
});
calendar.render();
});
var value = 0;
var slider = document.getElementById("myRange");
var output = document.getElementById("displayValue");
var hours = Math.floor(slider.value / 60);
var hourOutput = $("#hours")[0];
var hours = Math.floor(slider.value / 60);
hourOutput.innerHTML = hours;
$('.slider').change(function () {
debugger;
var hours = Math.floor(slider.value / 60);
hourOutput.innerHTML = hours;
slotLabel = hours + ':' + '00';
if (calendar) {
calendar.setOption('slotLabelInterval', slotLabel);
}
});a {
color: var(--bs-link-color);
text-decoration: none;
}
#storlekslider {
width: 30%;
}<head>
<meta charset='utf-8' />
<script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
<script src="http://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<div class="slidecontainer">
<h3 id="displayValue">
<span id="hours" style="display:none;">min</span>
</h3>
<label style="font-size:medium">Duartion</label>
<input type="range" min="60" max="480" step="0.5" value="0" class="slider" id="myRange" style="height:9px;">
</div>
<br />
<div id='calendar'></div>
</body>