如何在 Dhtmlx 调度程序中使用水平滚动条在日视图中显示 30 天？

Question

我想用水平滚动条在 Day View Scheduler 中显示 30 天。目前，水平滚动条是 available 仅用于时间轴视图，但我希望它用于日视图和月视图。

对于带有水平滚动条代码的时间轴视图：

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)   });

请分享您的想法和示例链接

提前致谢

Answer 1

尝试使用Custom View。您可以删除默认的Day 视图并改为显示您自己的视图，以及您想要显示的天数。这可以这样做：

首先在scheduler.config.header 设置选项卡“三十天”而不是“天”：

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

视图的标签设置如下：

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

接下来，设置查看间隔的开始日期，以及查看模板。最好在 onTemplatesReady 事件处理函数中创建自定义视图，以便您的自定义视图模板在调度程序初始化之前准备好：

   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);
       };
   });

要向视图添加水平滚动，您可以将调度程序放在可滚动元素内，并为调度程序提供显示所有列所需的宽度。您需要隐藏调度程序的默认导航面板并使用 HTML 创建自定义导航面板，因此它的宽度正确且不受滚动影响：

   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");
           }
       });
   });

您将需要的样式：

   .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;
    }

请看一个例​​子：https://snippet.dhtmlx.com/znd7ffiv

您可能需要修复小时刻度，以便在日历上水平滚动时保持可见。我没有在示例中实现这一点，我认为这可以通过与导航面板相同的方式完成。如果您需要，请写信给我，我将在几个工作日内发送更新。

对于“月”视图，方法与“日”视图相同。