How to Show 30 days in Day View with Horizontal Scrollbar in Dhtmlx Scheduler?

Question

I want to show 30 days in Day View Scheduler with Horizontal Scrollbar. Currently, Horizontal Scrollbar is available only for Timeline View but I want it for Day View as well as Month View.

For Timeline View with Horizontal Scrollbar code:

scheduler.createTimelineView({
name: "timeline",
x_unit: "minute",
x_date: "%H:%i",
x_step: 30,
x_size: 24*7,
x_start: 16,
x_length: 48,
y_unit: sections,
y_property: "section_id",
render: "bar",
scrollable: true,  
column_width: 70, 
scroll_position:new Date(2018, 0, 15)   });

Please share your ideas and Sample links

Thanks in Advance

Answer 1

Try using Custom View. You can remove the default Day view and display your own instead, with the number of days you want to display. This can be done like this:

First in scheduler.config.header set tab "thirty_days" instead of "day":

   scheduler.config.header = [
       "thirty_days",
       "week",
       "month",
       "date",
       "prev",
       "today",
       "next"
   ];

The label for the view is set as in:

   scheduler.locale.labels.thirty_days_tab = "Days";

Next, set the start date of the viewing interval, as well as viewing templates. It's better to create the custom view in the onTemplatesReady event handler function so that your custom view templates are ready before the scheduler is initialized:

   scheduler.attachEvent("onTemplatesReady", () => {
       scheduler.date.thirty_days_start = function(date) {
           const ndate = new Date(date.valueOf());
           ndate.setDate(Math.floor(date.getDate()/10)*10+1);
           return this.date_part(ndate);
       }
 
       scheduler.date.add_thirty_days = function(date,inc) {
           return scheduler.date.add(date,inc*30,"day");
       }
 
       const format = scheduler.date.date_to_str(scheduler.config.month_day);
 
       scheduler.templates.thirty_days_date = scheduler.templates.week_date;
 
       scheduler.templates.thirty_days_scale_date = function(date) {
           return format(date);
       };
   });

To add horizontal scrolling to the view, you can place the scheduler inside the scrollable element and give the scheduler the width required to display all columns. You'll need to hide a default navigation panel of the scheduler and create a custom one with HTML, so it would have a correct width and won't be affected by scrolling:

   scheduler.xy.nav_height = 0;
 
   scheduler.attachEvent("onSchedulerReady", function () {
       const navBar = scheduler.$container.querySelector(".dhx_cal_navline").cloneNode(true);
       navBar.style.width = "100%";
       document.querySelector(".custom-scheduler-header").appendChild(navBar);
 
       document.querySelectorAll(".custom-scheduler-header .dhx_cal_tab").forEach(function (tab) {
           tab.onclick = function () {
               const name = tab.getAttribute("name");
               const view = name.substr(0, name.length - 4);
               scheduler.setCurrentView(null, view);
           };
       });
 
       document.querySelector(".custom-scheduler-header .dhx_cal_prev_button").onclick = function () {
           const state = scheduler.getState();
           scheduler.setCurrentView(scheduler.date.add(state.date, -1, state.mode));
       };
 
       document.querySelector(".custom-scheduler-header .dhx_cal_next_button").onclick = function () {
           const state = scheduler.getState();
           scheduler.setCurrentView(scheduler.date.add(state.date, 1, state.mode));
       };
 
       document.querySelector(".custom-scheduler-header .dhx_cal_today_button").onclick = function () {
           scheduler.setCurrentView(new Date());
       };
 
       scheduler.attachEvent("onBeforeViewChange", (oldView, oldDate, newView, newDate) => {
           const innerContainer = document.getElementById("scheduler_here");
 
           if (newView === "thirty_days") {
               innerContainer.style.width = "3000px";
           } else {
               innerContainer.style.width = "100%";
           }
 
           return true;
       });
 
       scheduler.attachEvent("onViewChange", function (view, date) {
           const dateLabel = document.querySelector(".custom-scheduler-header .dhx_cal_date");
           const state = scheduler.getState();
           dateLabel.innerHTML = scheduler.templates[view + "_date"](state.min_date, state.max_date);
 
           document.querySelectorAll(".custom-scheduler-header .dhx_cal_tab").forEach(function(tab) {
               tab.classList.remove("active");
           });
 
           const activeTab = document.querySelector(".custom-scheduler-header ." + view + "_tab");
 
           if (activeTab) {
               activeTab.classList.add("active");
           }
       });
   });

Styles that you will need:

   .custom-scheduler-header .dhx_cal_navline{
       display: block !important;
       height: 60px !important;
   }
 
   .custom-scheduler-header .dhx_cal_navline.dhx_cal_navline_flex{
       display: flex !important;
   }
 
   .dhx-scheduler {
        height: 100vh;
        width: 100vw;
        position: relative;
        overflow: hidden;
        background-color: #fff;
        font-family: Roboto, Arial;
        font-size: 14px;
    }
 
    .dhx_cal_container .dhx_cal_navline {
       display: none;
    }

Please see an example: https://snippet.dhtmlx.com/znd7ffiv

You may need to fix the hour scale so that it remains visible when scrolling horizontally on the calendar. I did not implement this in the example, I think that this can be done in the same way as for the navigation panel. If you need, write to me and I will send an update in a few working days.

As for the "Month" view, the approach is the same as for the "Day" view.