dhtmlxdhtmlx-scheduler

DHTMLX Scheduler custom Timeline with AM/PM days

I use the DHTMLX Scheduler in Timeline view for a project and the working hours are from 7AM to 5PM. I was able to make an AM/PM view per day but the first_hour and last_hour configs are not respected in the view. The screenshot shows more. The first event in the morning should be displayed far more left as it starts at 7:30Am. enter image description here

My config:

scheduler.locale.labels.timeline_tab = "Timeline";
scheduler.locale.labels.section_custom = "Section";

scheduler.config.dblclick_create = false;
scheduler.config.edit_on_create = false;
scheduler.config.details_on_dblclick = false;
scheduler.config.details_on_create = false;
scheduler.config.start_on_monday = true;
scheduler.config.first_hour = 7;
scheduler.config.last_hour = 17;
scheduler.config.full_day = true;
scheduler.config.mark_now = false;

scheduler.config.drag_move = false;
scheduler.config.drag_resize = false;

//===============
//Configuration
//===============

scheduler.createTimelineView({
    name: "timeline",
    x_unit: "hour",
    x_date: "%A",
    x_step: 12,
    x_size: 14,
    x_start: 0,
    x_length: 14,
    y_unit: scheduler.serverList('teams'), // sections and events from same ajax call
    y_property: "team_id",
    render: "bar",
    section_autoheight: false,
    dy: 30,
    dx: 100,
    // first_hour: 7,
    // last_hour: 17,
    second_scale: {
        x_unit: "day", // unit which should be used for second scale
        x_date: "%D %j %M"
    }
});

Any help will be appreciated.

EDIT: After update based on the answer here the result: enter image description here

Solution

  • first_hour, last_hour configs applied for Y-axis in Day, Week, Units views (check Documentation).

    Currently, to hide hours at the beginning and end of the day in the Timeline view, you should have only 1 X-axis like in this sample. I.e. visible part of the event is from 10 to 18 because of first_hour, end_hour properties of createTimelineView method. Check the screenshot.

    There is also ignore_[viewName] function which can be used to hide interval that equal to min step of the scale (12 hours in your case).

    This could help solve your issue if set min step = 6 (hours) and disable 6-7 AM and 5-6 PM by addMarkedTimespan. I tried to create a snippet for you http://snippet.dhtmlx.com/46ba545ad , but found out that the second part of this condition if(date.getHours() < 6 || date.getHours() > 17){ is not working correctly. The event can be created until 6 PM. We will fix it ASAP, but now I can't specify the exact time. I suggest you use the first way with 1 scale to solve the issue.