ディスパッチャワークスペースの毎時カレンダーの構成

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間:4分
  • 各列が時間を表すカレンダーを表示するように ディスパッチャワークスペース を設定します。このドキュメントでは 5 時間制のカレンダーを表示する予定でしたが、必要に応じて時間数を変更できます。

    始める前に

    必要なロール:admin

    このタスクについて

    毎時カレンダーを構成するメリットは次のとおりです。
    • 詳細な時間表示:各列は正確に 1 時間を表します
    • 5 日間スパン:120 時間連続 (5 時間× 24 時間) を表示
    • ズーム機能:可視性を向上させるための拡張ズーム機能
    • レスポンシブデザイン:列幅と間隔の最適化
    • イベント管理:イベントの作成、編集、可視化を完全にサポート
    図 : 1. ディスパッチャワークスペースの時間単位ビュー
    表示する時間ごとのビュースパン

    手順

    1. 移動先 すべて > システム定義 > スクリプトインクルード.
    2. DispatcherWorkspaceConstants を見つけて開きます。
    3. CALENDAR_VIEW_SETTINGSオブジェクトを見つけて、TIMELINE_FIVE_DAYS_HOURLY_VIEW構成を追加します。
      "TIMELINE_FIVE_DAYS_HOURLY_VIEW": {
          // Template configurations for UI components
          "templates": {
              "rowBody": {
                  "type": "macroponent",
                  "value": "23c3967f53d07110443cddeeff7b1222"
              },
              "sectionHeadBody": {
                  "type": "macroponent",
                  "value": "43899a6ded592110f87778b05e3c80a7",
                  "sticky": true,
                  "autoCollapse": false,
                  "manageCollapsed": true,
                  "disableUXFContainerClickEvents": true
              },
              "sectionHeadTitle": {
                  "type": "macroponent",
                  "value": "a1ff3ba6b7803110a311aa7e1e11a964",
                  "autoCollapse": false,
                  "manageCollapsed": true,
                  "disableUXFContainerClickEvents": true
              },
              "rowTitle": {
                  "type": "macroponent",
                  "value": "0c1ae3a8b1346110f8776e5c40f98bd2",
                  "style": {
                      "height": "100%"
                  }
              },
              "eventBody": {
                  "type": "component",
                  "value": "sn-fsm-event-body"
              },
              "timestampBody": {
                  "type": "macroponent",
                  "value": "3deb30f8d149e110f8773e7b5e3fce04"
              }
          },
       
          // Core time configuration - THIS IS THE KEY PART
          "xStart": 0,                    // Start from hour 0
          "xStep": 1,                     // Increment by 1 hour per column
          "xSize": 120,                   // Show 120 hours total (5 days × 24 hours)
          "xUnitName": "hours",           // Each column represents hours
       
          // Display and layout settings
          "columnWidthInPx": 65,          // Width of each hourly column
          "viewProvider": "TIMELINE_CONFIGURABLE_COLUMN",
       
          // Time scale header configuration. Adds another row on top of the 1 hour per column for better visibility and more information
          "timeScaleGridRows": [{
              "id": "days",
              "order": 1,
              "unit": "days",
              "format": "dddd MMMM DD"    // Display format: "Monday January 15"
          }],
       
          // UI behavior settings
          "rowHeightBottomPaddingInLines": 2,
          "snapGranularity": 15,
          "groupBy": "group",
          "animation": false,
          "hideAgendaView": true,
          "eventHeight": 20,
          "minEventRowHeight": 24,
          "eventMinWidthMS": 1000,
          "noScrolling": false,
          "usePropertyDiff": true,
          "hideSidebarOnLoad": true,
       
          // Zoom and toolbar configuration
          "floatingToolbarConfig": {
              "manage": false,
              "zoomSize": 0.2,
              "disableCollapse": false,
              "collapseOnLoad": true,
              "collapseOnResize": true
          }
      }
    4. 同じスクリプトインクルード内の AVAILABLE_VIEWS アレイを検索します。
      注:
      前の手順の画像を参照してください。
    5. 新しいビューエントリを追加します。このステップの画像を参照してください。
      {
          "view": "TIMELINE_FIVE_DAYS_HOURLY_VIEW",
          "viewProvider": "TIMELINE_CONFIGURABLE_COLUMN", 
          "label": gs.getMessage("5 days hourly"),
          "type": "Timeline"
      }
    6. スクリプトインクルードを保存します。
    7. 更新セット内のファイルの変更をキャプチャし、更新セットをコミットします。
    8. ディスパッチャワークスペースに移動して、実装を確認します。
    9. ビューセレクターで [5 日間毎時 ] オプションを検索して選択します。