Scheduler Timeline Zoom In & Zoom Out Feature

Hi,

I have implemented the Zoom In using x_step to .5,.125 … and Zoom Out by getting it back to 1 for a day in Timeline.

function zoomIn() {
    if (scheduler.matrix.timeline.x_step == 1) {
        scheduler.matrix.timeline.x_step = .5;
    } else if (scheduler.matrix.timeline.x_step == .5) {
        scheduler.matrix.timeline.x_step = .25;
    } else if (scheduler.matrix.timeline.x_step == .25) {
        scheduler.matrix.timeline.x_step = .125;
    }
    scheduler.updateView();
}

function zoomOut() {
    if (scheduler.matrix.timeline.x_step == .125) {
        scheduler.matrix.timeline.x_step = .25;
    } else if (scheduler.matrix.timeline.x_step == .25) {
        scheduler.matrix.timeline.x_step = .5;
    } else if (scheduler.matrix.timeline.x_step == .5) {
        scheduler.matrix.timeline.x_step = 1;
    }
    scheduler.updateView();
}

Now, there is a Problem. If i zoom in(any no of times) and navigate next date i will get valid result, but When i Zoom out to 100% and Navigate to any Previous Date or Next Date, the Dates keep on getting incremented (+2 or +4) :frowning: . I am guessing it as a Bug.






:bulb: Can anyone help me in this?

Thanks In Advance

The code of scheduler may choke when x_step is lesser than 1.
Instead of using hour as base units and small x_step, you can use “minute” as base unit and x_step like 10,30,45,60,90,120 etc.

Hi Stanislav

Thanks for the answer, unfortunately the problem still continues. :frowning:

Can you please provide the full code of the scheduler, which causes an issue in your case. I have tried to use the snippet that you have provided, but it works correctly for me.

Hi,

Following is the part of HTML

[code]

.scheduler-min-calendar-tab { padding: 0 5px; color: #747473; text-decoration: none; font-weight: 700; font-family: arial; font-size: 12px; line-height: 30px; border: 1px solid #CECECE; text-align: center; border-radius: 5px; background-position-x: 8px; background-position-y: 4px; } .dhx_zoom_in_button { background-image: url(imgs/buttons.png); background-position: 0 0; cursor: pointer; } .dhx_zoom_in_button, .dhx_zoom_out_button { color: #454544; height: 30px; line-height: 30px; background: 0 0; border: 1px solid #CECECE; } .dhx_zoom_in_button, .dhx_zoom_out_button { left: auto; width: 46px; } .dhx_zoom_in_button { right: 61px; background: url('../../Content/img/Zoom_Out.png') center center no-repeat; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .dhx_zoom_out_button { right: 61px; background: url('../../Content/img/Zoom_In.png') center center no-repeat; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .worktime { background: grey; opacity: 0.4; }
  
  
 
 
 
    <div class="dhx_cal_header">
    </div>
    <div class="dhx_cal_data" style="">
    </div>
</div>
[/code]

and below is the supporting Js Code


var lastUpdateDate;

function init() {
    scheduler.locale.labels.timeline_tab = "Timeline";
    scheduler.locale.labels.section_custom = "Section";

    scheduler.config.details_on_create = true;
    scheduler.config.details_on_dblclick = false;
    scheduler.config.show_loading = true;
    scheduler.config.xml_date = "%d-%m-%Y %H:%i:%s";
    scheduler.config.className = 'dhtmlXTooltip tooltip';
    scheduler.config.timeout_to_display = 50;
    scheduler.config.delta_x = 15;
    scheduler.config.delta_y = -20;
    scheduler.config.hour_size_px = 40;

    scheduler.createTimelineView({
        name: "timeline",
        x_unit: "minute",
        x_date: "%H:%i",
        x_step: 60,
        x_size: 24,
        x_start: 0,
        x_length: 24,
        x_height: 30,
        y_unit: [{ key: 1, label: "Section A" },{ key: 2, label: "Section B" },{ key: 3, label: "Section C" },{ key: 4, label: "Section D" }],
        y_property: "section_id",
        render: "bar",
        second_scale: {
            x_unit: "day",
            x_date: "%F %d"
        }
    });

    var dragged_event;
    var eventId;
    
    scheduler.attachEvent("onDblClick", function () {
        return false
    });

    scheduler.templates.hour_scale = function (date) {
        for (var i = 0; i < 60 / step; i++) {
            html += "<div style='height:100px!important;line-height:21px;'>" + format(date) + "</div>";
            date = scheduler.date.add(date, step, "minute");
        }
        return html;
    };
    
    scheduler.xy.scale_width = 500;

    scheduler.init("scheduler", new Date(), "timeline");

    getSchedulerData(new Date(), 1);

    scheduler.attachEvent("onViewChange", function (new_mode, new_date) {
        if (new Date(lastUpdateDate.getFullYear(), lastUpdateDate.getMonth(), lastUpdateDate.getDate()).getTime() != new Date(new_date.getFullYear(), new_date.getMonth(), new_date.getDate()).getTime()) {
            getSchedulerData(new_date, scheduler.matrix.timeline.x_step);
        }
    });

    var calendar = $("#dhx_minical_icon");
    calendar.css("right", "0px");
    calendar.css("left", "auto");
    calendar.css("background-position-x", "8px");
    calendar.css("background-position-y", "4px");
}

function getSchedulerData(startDate, noOfDays) {
    lastUpdateDate = startDate;
    var equipmentRecordNos = [1,2,3,4]
    scheduler.clearAll();
    scheduler.addMarkedTimespan({
        start_date: new Date("2016", "11", new Date().getDate,"09", "00"),
        end_date: new Date("2016", "11", new Date().getDate, "10", "00"),
        css: "worktime",
        type: "dhx_time_block",
        sections: {
            "timeline": equipmentRecordNos
        }
    });
    scheduler.parse([
        {
            text: "Conference", start_date: "08/11/2016 12:00", end_date: "08/11/2012 13:00",
            section_id: "1"
        },
        {
            text: "Meeting", start_date: "08/11/2016 09:00", end_date: "08/11/2012 11:00",
            section_id: "2"
        },
        {
            text: "Conference", start_date: "08/11/2016 15:00", end_date: "18/11/2012 16:00",
            section_id  : "3"
        }
    ], "json");
    scheduler.updateView();
}

function showCalendar(onContextMenu, contextMenu, data, equipmentRecordNosJson) {
    var calendarPopup = $(".dhx_minical_popup");
    if (!onContextMenu && calendarPopup.length > 0 && calendarPopup.data("on-context-menu")) {
        scheduler.destroyCalendar();
    }
    if (scheduler.isCalendarVisible()) {
        scheduler.destroyCalendar();
    }
    else {
        scheduler.renderCalendar({
            position: "dhx_minical_icon",
            date: scheduler._date,
            navigation: true,
            handler: function (date, calendar) {
                if (onContextMenu) {
                    data["scheduleDate"] = date.toUTCString();
                } else {
                    scheduler.setCurrentView(date);
                }
                scheduler.destroyCalendar()
            }
        });
        if (calendarPopup.length == 0) {
            calendarPopup = $(".dhx_minical_popup");
        }
        if (onContextMenu) {
            calendarPopup.data("on-context-menu", true);
            calendarPopup.css("left", contextMenu.css("left"));
            calendarPopup.css("top", contextMenu.css("top"));
            calendarPopup.css("right", "auto");
        } else {
            calendarPopup.data("on-context-menu", false);
            var calendarPopupTop = calendarPopup.offset().top;
            calendarPopup.css("left", "auto");
            calendarPopup.css("right", "5px");
            calendarPopup.css("top", calendarPopupTop + 3 + "px");
        }
    }
}

function zoomIn() {
    if (scheduler.matrix.timeline.x_step == 60) {
        scheduler.matrix.timeline.x_step = 30;
    } else if (scheduler.matrix.timeline.x_step == 30) {
        scheduler.matrix.timeline.x_step = 15;
    } else if (scheduler.matrix.timeline.x_step == 15) {
        scheduler.matrix.timeline.x_step = 10;
    } else if (scheduler.matrix.timeline.x_step == 10) {
        scheduler.matrix.timeline.x_step = 5;
    } 
    scheduler.setCurrentView();
}

function zoomOut() {
    if (scheduler.matrix.timeline.x_step == 5) {
        scheduler.matrix.timeline.x_step = 10;
    } else if (scheduler.matrix.timeline.x_step == 10) {
        scheduler.matrix.timeline.x_step = 15;
    } else if (scheduler.matrix.timeline.x_step == 15) {
        scheduler.matrix.timeline.x_step = 30;
    } else if (scheduler.matrix.timeline.x_step == 30) {
        scheduler.matrix.timeline.x_step = 60;
    }
    scheduler.setCurrentView();
}

Once you get the output, follow the steps below:

  • Click on Zoom In (+) 4 times.
  • Click on Navigate Right (>) 4 times.
  • Click on Zoom Out (-) 4 times.(observe the changes in Date).
  • Now Click either Left(<) or Right(>) and Observe the Date.

Thanks & Regards



Please check docs.dhtmlx.com/scheduler/snippet/6b73a287

You can update scheduler.matrix.timeline.x_length to normalize prev|next behavior.

Thanks ,

But Once we Zoom In, How can i navigate to other sections of time?? Earlier we could navigate to different section using Date Navigation buttons, but now it just changes the date :frowning:

Please check the update snippet

docs.dhtmlx.com/scheduler/snippet/9731b6e0

it uses scheduler.date.timeline_start to define a custom navigation steps

Thank you Very Much.

Its working as expected. :smiley: