如何在Dhtmlx Scheduler中使用水平滚动条在日视图中显示30天

Question

我想用水平滚动条在日视图调度器中显示30天。目前，水平滚动条仅适用于时间轴视图，但我希望它适用于日视图和月视图。

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

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视图，并显示您自己的视图，以及您想要显示的天数。可以这样做：

首先在CCD_ 3设置选项卡"；第三天"；而不是"；"天"：

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

您可能需要固定小时刻度，以便在日历上水平滚动时保持可见。我没有在示例中实现这一点，我认为这可以用与导航面板相同的方式来实现。如果你需要，写信给我，我会在几个工作日内发送最新消息。

至于"；月份"；该方法与"；"天"；看法