.Events(ev => ev.Navigate("onNavigate"))

<script>
    function setNewDate(scheduler, newStart, newEnd) {
        scheduler.setOptions({
        date: new Date(newStart),
        startTime: new Date(newStart),
        endTime: new Date(newEnd),
        })
        
        scheduler.date(new Date(newStart));
        scheduler.view(scheduler.view().name);
    }

    function onNavigate(e) {
        if(e.action == "next") {
            e.preventDefault();
            //create new start and end times that are 8h after the current ones
            var newStart = e.sender.options.startTime.setHours(e.sender.options.startTime.getHours() + 8);
            var newEnd = e.sender.options.endTime.setHours(e.sender.options.endTime.getHours() + 8);

            setNewDate(e.sender, newStart, newEnd)
        }
        if(e.action == "previous") {
            e.preventDefault();
            //create new start and end times that are 8h before the ones
            var newStart = e.sender.options.startTime.setHours(e.sender.options.startTime.getHours() - 8);
            var newEnd = e.sender.options.endTime.setHours(e.sender.options.endTime.getHours() - 8);

            setNewDate(e.sender, newStart, newEnd)
        }
    }
</script>