Resize column widths on the fly

I've created a simple demo that uses your approach (<input type="range">):

http://javascript.daypilot.org/sandbox/scheduler/cellwidth.html

Implementation:

<div class="note">Cell Width: <input type="range" min="10" max="200" step="10" id="cellwidth" value="40" /> <span id="label">40</span></div>

<div id="dp"></div>

<script type="text/javascript">

    var dp = new DayPilot.Scheduler("dp");
    dp.cellWidth = 40;
    
    // ...
    
    dp.init();
    
    $(document).ready(function() {
        $("#cellwidth")[0].oninput = function(ev) {
            var cellwidth = parseInt(this.value);
            $("#label").html(cellwidth);
            var start = dp.getViewPort().start;  // save the original start

            dp.cellWidth = cellwidth;
            dp.update();
            dp.scrollTo(start); // reset the start position
        };
    });
    
</script>

It updates the Scheduler in real time and keeps the scrollbar at the same date/time position.

I'm afraid this is the best you can have at the moment. The full refresh using .update() is necessary because changing the width affects almost everything in the Scheduler - I don't see a way to make this much faster.