Configurer un calendrier horaire pour Espace de travail du répartiteur

  • Rversion finale: Australia
  • Mis à jour 12 mars 2026
  • 2 minutes de lecture

    • Configurez Espace de travail du répartiteur pour afficher un calendrier avec chaque colonne représentant une heure. Dans ce document, nous allons montrer un calendrier de cinq heures, mais vous pouvez modifier le nombre d’heures en fonction de vos besoins.

    Avant de commencer

    Rôle requis : admin

    Pourquoi et quand exécuter cette tâche

    Les avantages de la configuration d’un calendrier horaire sont les suivants :
    • Affichage granulaire de l’heure : Chaque colonne représente exactement 1 heure
    • Parcours de 5 jours : Affiche 120 heures consécutives (5 × 24 heures)
    • Capacité de zoom : fonctionnalité de zoom améliorée pour une meilleure visibilité
    • Responsive Design : optimisation de la largeur et de l’espacement des colonnes
    • Gestion des événements : prise en charge complète de la création, de l’édition et de la visualisation d’événements
    Figure 1. Vue horaire dans Espace de travail du répartiteur
    Parcours de vue horaire affichant

    Procédure

    1. Accédez à la Tous > Définition du système > Inclusions de script.
    2. Recherchez et ouvrez DispatcherWorkspaceConstants.
    3. Localisez l’objet CALENDAR_VIEW_SETTINGS et ajoutez la configuration 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. Recherchez le tableau AVAILABLE_VIEWS dans le même includes de script.
      Remarque :
      Reportez-vous à l’image de l’étape précédente.
    5. Ajoutez la nouvelle entrée de vue, voir l’image de cette étape. 
      {
    "view": "TIMELINE_FIVE_DAYS_HOURLY_VIEW",
    "viewProvider": "TIMELINE_CONFIGURABLE_COLUMN", 
    "label": gs.getMessage("5 days hourly"),
    "type": "Timeline"
}
    6. Enregistrez l'include de script.
    7. Capturez les changements de fichier dans un ensemble de mises à jour et validez l’ensemble de mises à jour.
    8. Accédez à Espace de travail du répartiteur pour vérifier votre implémentation.
    9. Recherchez et sélectionnez l’option Horaire de 5 jours dans le sélecteur de vue.