Issue
When i slide the slider to some hours the fullcalendar not changed in the view.
What error are you getting? Not changing view in fullcalendar as per slotduartion
When i slide the slider to some hours (Within 24 hrs.) the fullcalendar should change the view by calling the function. The view of fullcalender should change when slide the slider.
var datetime = moment().format('YYYY-MM-DDTHH:mm:ss');
let today = new Date().toISOString().slice(0, 10);
var slotduartion = '';
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
slotMinTime: '06:00',
slotMaxTime: '19:00',
slotDuration: slotduartion,
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: [ // specify an array instead
{
daysOfWeek: [0, 1, 2, 3, 4, 5, 6], // Monday, Tuesday, Wednesday
startTime: '07:00', // 8am
endTime: '18:00' // 6pm
}
],
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 minutes = slider.value % 60;
var seconds = minutes * 60;
var minuteOutput = $("#minutes")[0];
var hourOutput = $("#hours")[0];
var secondOutput = $("#seconds")[0];
var hours = Math.floor(slider.value / 60);
var minutes = slider.value % 60;
var seconds = minutes * 60;
hourOutput.innerHTML = hours;
minuteOutput.innerHTML = minutes;
secondOutput.innerHTML = seconds
$('.slider').change(function () {
debugger;
var hours = Math.floor(slider.value / 60);
var minutes = slider.value % 60;
var seconds = minutes * 60;
hourOutput.innerHTML = hours;
minuteOutput.innerHTML = minutes;
secondOutput.innerHTML = seconds;
slotduartion = hours + ':' + minutes + ':' + seconds;
});
a {
color: var(--bs-link-color);
text-decoration: none;
}
#storlekslider {
width: 30%;
}
<head>
<meta charset='utf-8' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.9/index.global.min.js'></script>
<script src="http://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.0/jquery-ui.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">min</span> :
<span id="minutes">hour</span>
<span id="seconds" style="display:none;">second</span>
</h3>
<input type="range" min="1" max="1440" value="500" class="slider" id="myRange">
</div>
<br />
<div id='calendar'></div>
</body>
Solution
declare the calendar variable outside the event, reference that in the slider and use setOption
to change the value
var calendar = null;
// ...
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
// options
});
calendar.render();
});
// ...
$('.slider').change(function () {
// ...
if(calendar) {
calendar.setOption('slotDuration', slotduartion);
}
});
I have added the updated snippet, please note that I have not fixed the slider function that creates the duration object
.
var calendar = null;
var datetime = moment().format('YYYY-MM-DDTHH:mm:ss');
let today = new Date().toISOString().slice(0, 10);
var slotduartion = '';
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
slotMinTime: '06:00',
slotMaxTime: '19:00',
slotDuration: slotduartion,
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: [ // specify an array instead
{
daysOfWeek: [0, 1, 2, 3, 4, 5, 6], // Monday, Tuesday, Wednesday
startTime: '07:00', // 8am
endTime: '18:00' // 6pm
}
],
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 minutes = slider.value % 60;
var seconds = minutes * 60;
var minuteOutput = $("#minutes")[0];
var hourOutput = $("#hours")[0];
var secondOutput = $("#seconds")[0];
var hours = Math.floor(slider.value / 60);
var minutes = slider.value % 60;
var seconds = minutes * 60;
hourOutput.innerHTML = hours;
minuteOutput.innerHTML = minutes;
secondOutput.innerHTML = seconds
$('.slider').change(function() {
debugger;
var hours = Math.floor(slider.value / 60);
var minutes = slider.value % 60;
var seconds = minutes * 60;
hourOutput.innerHTML = hours;
minuteOutput.innerHTML = minutes;
secondOutput.innerHTML = seconds;
slotduartion = hours + ':' + minutes + ':' + seconds;
if(calendar) {
calendar.setOption('slotDuration', slotduartion);
}
});
a {
color: var(--bs-link-color);
text-decoration: none;
}
#storlekslider {
width: 30%;
}
<script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.9/index.global.min.js'></script>
<script src="http://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.0/jquery-ui.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">
<div class="slidecontainer">
<h3 id="displayValue">
<span id="hours">min</span> :
<span id="minutes">hour</span>
<span id="seconds" style="display:none;">second</span>
</h3>
<input type="range" min="1" max="1440" value="500" class="slider" id="myRange">
</div>
<br />
<div id='calendar'></div>
Answered By - Naveen J
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.