How to refresh only the "scheduler" div?
MerzGH opened this issue · 4 comments
MerzGH commented
is there a possibility to update the scheduler without refresh the whole page?
i am using "$(".sjs-app-col").scrollLeft(pos)" to show the the current time and i would like to update it every 5 minutes.
magnusjt commented
Have you looked at below?
$scheduler.schedulerjs('update', list);
MerzGH commented
sure, but the time/time selector doesn't update
setTimeout(function(){
$scheduler.schedulerjs('update', list);
scheduleScroller(scrollPosition);
},60000);
$(document).ready(function(){
var currDate = new Date();
var currHour = currDate.getHours();
var currMinute = currDate.getMinutes();
if(currHour >= 8 && currHour < 23){
var currTimeStart = currHour + ":" + currMinute;
var currTimeEnd = currHour + ":" + (currMinute+5);
}
else{
var currTimeStart = '08:00';
var currTimeEnd = '08:05'
}
var list = [ <? $data->getLessons($array); ?> ];
var steps = [ '08:00',
'09:00',
'10:00',
'11:00',
'12:00',
'13:00',
'14:00',
'15:00',
'16:00',
'17:00',
'18:00',
'19:00',
'20:00',
'21:00',
'22:00',
'23:00' ];
var onClickAppointment = function(payload){
$("#onClickAppointment").html(JSON.stringify(payload));
};
var $scheduler = $("#scheduler").schedulerjs({
'list': list,
'steps': steps,
'pixelsPerHour': 250,
'start': '08:00',
'end': '23:00',
'headName': currHour + ':' + currMinute,
'onClickAppointment': onClickAppointment
});
var scrollPosition = 0;
if(currHour >= 9 && currHour <= 23){
scrollPosition = (currHour - 9) * 250;
}
setTimeout(function(){
$scheduler.schedulerjs('update', list);
scheduleScroller(scrollPosition);
},60000);
// Change time after initialization
$scheduler.schedulerjs('start', currTimeStart);
$scheduler.schedulerjs('end', currTimeEnd);
$("#times-button").click(function(){
var times = $scheduler.schedulerjs('selected');
$("#times").html(times.start + ' - ' + times.end);
});
$("#toggle-selector-button").click(function(){
$scheduler.schedulerjs('toggleSelector');
});
});
function scheduleScroller(pos){
$(".sjs-app-col").scrollLeft(pos);
}
magnusjt commented
If you need to adjust the selector you can use
$scheduler.schedulerjs('start', currTimeStart);
$scheduler.schedulerjs('end', currTimeEnd);
MerzGH commented
now it works, thank you @magnusjt!
setInterval(function(){
var currDate = new Date();
var currHour = currDate.getHours();
var currMinute = currDate.getMinutes();
if(currHour >= 8 && currHour < 23){
var currTimeStart = currHour + ":" + currMinute;
var currTimeEnd = currHour + ":" + (currMinute+5);
}
else{
var currTimeStart = '08:00';
var currTimeEnd = '08:05'
}
$scheduler.schedulerjs('update', list);
$scheduler.schedulerjs('start', currTimeStart);
$scheduler.schedulerjs('end', currTimeEnd);
scheduleScroller(scrollPosition);
}, 60000);