示例 论坛 支持
文档
Start指南创建调度器

dhtmlxScheduler 在原生 JS/HTML 中的使用

在使用 dhtmlxScheduler 构建应用时，第一步是将 Scheduler 设置并显示在页面上。

本指南介绍如何使用原生 JS 和 HTML 初始化 dhtmlxScheduler。若需与前端框架集成，请参考以下指南：

Angular React Svelte Vue.js


在页面上初始化 Scheduler 有两种方式：

通过标记方式初始化 Scheduler

要通过标记（markup）方式在页面上设置一个基础的 Scheduler，请按照以下 3 个步骤操作：

  1. 在页面中引入 dhtmlxScheduler 代码文件。
  2. 在页面中添加一个 DIV 容器，并为其元素添加必要的子 DIV。
  3. 使用 init 方法在创建的容器中初始化 dhtmlxScheduler。该方法接收一个 HTML 容器（或其 id），Scheduler 将在此容器中渲染。
<!DOCTYPE html>
<html>
<head>
   <script src="../scheduler/dhtmlxscheduler.js" type="text/javascript"></script>
   <link rel="stylesheet" href="../scheduler/dhtmlxscheduler.css" 
        type="text/css">
</head>
<body>
    <!--Scheduler 的容器及标准的 'div' 结构-->
   <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100vh;'>
        <div class="dhx_cal_navline">
            <div class="dhx_cal_prev_button">&nbsp;</div>
            <div class="dhx_cal_next_button">&nbsp;</div>
            <div class="dhx_cal_today_button"></div>
            <div class="dhx_cal_date"></div>
            <div class="dhx_cal_tab" data-tab="day"></div>
            <div class="dhx_cal_tab" data-tab="week" ></div>
            <div class="dhx_cal_tab" data-tab="month"></div>
        </div>
        <div class="dhx_cal_header"></div>
        <div class="dhx_cal_data"></div>       
   </div>
   <script type="text/javascript">
     scheduler.init("scheduler_here");
   </script>
</body>
</html>

Scheduler initialization

Related sample:  Basic initialization

通过 header 配置初始化 Scheduler

如果你希望让 scheduler 自适应响应式，推荐使用此方法。

要在页面上设置一个基础的 Scheduler，请按照以下步骤操作：

  1. 在页面中引入 dhtmlxScheduler 代码文件。
  2. 在页面中添加一个 DIV 容器。
  3. 在 header 配置对象中定义 scheduler 的结构。
  4. 使用 init 方法在容器中初始化 dhtmlxScheduler，将容器（或其 id）作为参数传递。
<!DOCTYPE html>
<html>
<head>
   <script src="../scheduler/dhtmlxscheduler.js"></script>
   <link rel="stylesheet" href="../scheduler/dhtmlxscheduler.css" 
        type="text/css">
</head>
<body>
   <!--Scheduler 的容器-->
   <div id="scheduler_here" style='width:100%; height:100%;'>
   </div>
</body>   
<script>
    //scheduler 的结构
    scheduler.config.header = [
        "day",
        "week",
        "month",
        "date",
        "prev",
        "today",
        "next"
    ];
    scheduler.init('scheduler_here',new Date(2020,0,1),"week");
</script>
</html>

Related sample:  Responsive scheduler

所需代码文件

需要引入的文件有：

  • dhtmlxscheduler.js
  • dhtmlxscheduler.css （你也可以在 皮肤（Skins） 中查看可用的皮肤）
<script src="../scheduler/dhtmlxscheduler.js"></script>
<link rel="stylesheet" href="../scheduler/dhtmlxscheduler.css" type="text/css">

以下是 dhtmlxScheduler 包结构的简要说明，帮助你找到这些文件：

  • sources - 包含库的源代码文件。未压缩，便于阅读，主要用于调试。

请注意，Scheduler 库的 试用版 不包含 sources 文件夹。

  • samples - 包含代码示例。
  • codebase - 包含库的压缩代码文件。体积更小，适合生产环境使用。在你的项目中应使用该文件夹下的文件。

Scheduler 尺寸设置

Scheduler 会填满其容器元素的整个尺寸（上述示例中的 scheduler_here div），但不会自动扩大容器本身。
这意味着如果你没有为容器设置高度，或者高度为 0，scheduler 也会有 0 高度，从而不可见。

在我们的示例中，通常通过为 document body 和 scheduler 容器都设置 100% 的宽高，使 scheduler 占满整个屏幕：

<style>
    html, body{
        margin:0px;
        padding:0px;
        height:100%;
        overflow:hidden;
    }

</style>
</head>
<body>
 <div id="scheduler_here" class="dhx_cal_container" style="width:100%; height:100%;">

如果 scheduler_here 元素被放置在一个默认尺寸设置的 div 内，可能会出现问题：

<style>
    html, body{
        margin:0px;
        padding:0px;
        height:100%;
        overflow:hidden;
    }

</style>
</head>
<body>
 <div class="outer_container">    <div id="scheduler_here" class="dhx_cal_container" style="width:100%;height:100%;">

在这种情况下，scheduler 无法正确显示，因为 "scheduler_here" 设置为其父元素的 100%，但父元素没有定义高度。

如果你为 .dhx_cal_container 元素使用相对尺寸（百分比），请确保其父元素也设置了高度。否则计算出的高度可能为 0，scheduler 将无法显示。

另外，你也可以为主 scheduler div 使用不同的单位。以下示例无论外部元素样式如何，都能获得预期尺寸：

<div id="scheduler_here" class="dhx_cal_container" style="width:100%; height:100vh;">

或：

<div id="scheduler_here" class="dhx_cal_container" style="width:100%; height:800px;">

Scheduler 自动调整大小

container_autoresize 扩展改变了 scheduler 默认的尺寸调整行为。通常情况下，dhtmlxScheduler 会根据其容器尺寸调整自身，并在固定容器大小内通过内部滚动条访问所有数据。

启用 container_autoresize 扩展后，Scheduler 会根据内容动态调整自身尺寸。这意味着它会在高度和/或宽度上扩展，以显示所有事件和数据，无需内部滚动条。

这样可以确保所有内容都可见，无需在 scheduler 内部滚动，适用于需要完整展示 scheduler 内容的场景。

使用方法

要启用 container_autoresize 扩展，在 scheduler 设置中如下添加：

scheduler.plugins({
    container_autoresize: true
});

Related sample:  Autoresizing the scheduler container

这个简单的设置即可启用 container_autoresize 功能，使 Scheduler 根据内容自动调整自身尺寸。

使用 container_autoresize 处理表头

当启用 container_autoresize 扩展时，Scheduler 会自动调整大小以适应其所有内容。这有时会导致 Scheduler 超出屏幕范围，从而在页面或外部容器上出现滚动条。

在这种模式下，滚动页面时，导航栏和时间表头也会一起移动，因此在向下滚动时它们不会保持可见。虽然这种行为通常没有问题，但在某些情况下，保持表头固定更加理想。可以通过额外的样式和脚本实现这一点。

要将表头固定，可以结合使用 CSS 的 sticky 定位和一些额外样式，例如：

<style>
 
  .dhx_cal_container{
    overflow: visible!important;
   }
  .dhx_cal_navline,
  .dhx_cal_header {
      position: sticky;
      z-index: 10;
      background:var(--dhx-scheduler-container-background);
 
  }
  .dhx_cal_navline{
      z-index: 11;
      top:0;
  }
  .dhx_cal_header{
      /* top 坐标由 JS 分配 */
      margin-left: -1px;
      box-shadow: 0 1px 0px 0px var(--dhx-scheduler-base-colors-border);
  }
</style>

此外，还需要一些 JavaScript 来为 sticky 时间刻度设置正确的 top 值，使其正好位于导航面板下方。

由于导航面板的高度可能因样式和内容不同而变化，因此应动态计算其高度，并将其作为 header 的 top 值应用，如下所示：

scheduler.attachEvent("onViewChange", function(){
   const navBar = scheduler.$container.querySelector(".dhx_cal_navline");
   const header = scheduler.$container.querySelector(".dhx_cal_header");
   if(navBar && header){
       header.style.top = `${navBar.offsetHeight}px`;
   }
});

你可以在下面的代码片段中查看完整演示：

Related sample:  Container autoresize and sticky header

使 Scheduler 响应式

当通过 header 配置属性 初始化 Scheduler 时，可以选择适合客户端屏幕尺寸的表头布局。同时还会应用某些样式，使元素和字体能够很好地适配较小的屏幕。

更多信息请参阅专门的文章：移动端自适应调度器。

在 ES6/7 和 TypeScript 应用中导入文件

使用以下命令导入文件：

import { scheduler } from 'dhtmlx-scheduler';

对于 Commercial、Enterprise 或 Ultimate 版本，导入方式如下：

import { scheduler, Scheduler } from 'dhtmlx-scheduler';

在 Vite 中使用 Scheduler

如果你的项目使用 Vite，请在 vite.config.js 文件中添加以下设置，确保 Scheduler 能正确集成到应用中：

vite.config.js

optimizeDeps: {
    include: [
        'dhtmlx-scheduler',
    ]
}

在 RequireJS 应用中引入文件

要在 RequireJS 应用中添加 dhtmlxScheduler 文件，请参考以下示例：

requirejs(["codebase/dhtmlxscheduler"], function(dhx){
    var scheduler = dhx.scheduler;
    var Scheduler = dhx.Scheduler;// 适用于 Enterprise 版本
 
    scheduler.init('scheduler_here',new Date(),"week");
    scheduler.parse([
        {
            id: 1, text: "Event 1", start_date: "2022-07-15 09:00", 
            end_date: "2022-07-15 10:00"
        },
        {
            id: 2, text: "Event 2", start_date: "2022-07-15 10:00", 
            end_date: "2022-07-15 11:00"
        }
    ]);
});

dhtmlxScheduler 库返回一个对象，包含 scheduler 和 Scheduler（适用于 Commercial、Enterprise 或 Ultimate 版本）——它们分别对应于 此处 描述的 scheduler 和 Scheduler 对象。

在 RequireJS 中使用 Scheduler 及自定义扩展时，请确保为 RequireJS 指定 shim 配置，并正确声明扩展对 Scheduler 的依赖。

下面的示例展示了如何正确设置自定义扩展文件 custom_tooltip_plugin.js：

requirejs.config({
    paths: {
        "dhtmlxscheduler": "../../codebase/dhtmlxscheduler",
        "ext/dhtmlxscheduler_custom_tooltip": "../custom_tooltip_plugin"
    },
    shim: {
        "ext/dhtmlxscheduler_custom_tooltip": ["dhtmlxscheduler"]
    }
});
 
requirejs(["dhtmlxscheduler"], 
function (dhx) {
    var scheduler = dhx.scheduler;
 
    scheduler.init('scheduler_here',new Date(),"week");
    scheduler.parse([
        {
            id: 1, text: "Event 1", start_date: "2022-07-15 09:00", 
            end_date: "2022-07-15 10:00"
        },
        {
            id: 2, text: "Event 2", start_date: "2022-07-15 10:00", 
            end_date: "2022-07-15 11:00"
        }
    ]);
});

确保包内任何文件的模块名指定为 包的 codebase 文件夹内的相对路径 加上 文件名，例如：

核心库：

  • "dhtmlxscheduler": "./vendor/dhtmlxscheduler/dhtmlxscheduler"
返回顶部