How to refresh only the "scheduler" div?

[MerzGH]

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]

Have you looked at below?

$scheduler.schedulerjs('update', list);

[MerzGH]

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]

If you need to adjust the selector you can use

$scheduler.schedulerjs('start', currTimeStart);
$scheduler.schedulerjs('end', currTimeEnd);

[MerzGH]

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);