{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":14915,"path":"field-service-management/hourly-calendar-dispatcher.md","title":"Configure an hourly calendar for Dispatcher Workspace","bundle":null,"doc_type":null,"release":"australia","body":"\n# Configure an hourly calendar for Dispatcher Workspace\n\nConfigure Dispatcher Workspace to show a calendar with each column representing an hour. In this document were going to show a five-hour calendar, but you can change the number of hours to fit your needs.\n\n## Before you begin\n\nRole required: admin\n\n## About this task\n\nBenefits of configuring an hourly calendar include:\n\n-   **Granular Time Display**: Each column represents exactly 1 hour\n-   **5-Day Span**: Shows 120 consecutive hours \\(5 × 24 hours\\)\n-   **Zoom Capability**: Enhanced zoom functionality for better visibility\n-   **Responsive Design**: Optimized column width and spacing\n-   **Event Management**: Full support for event creation, editing, and visualization\n\n\\[Omitted image \"hourly-view.png\"\\] Alt text: hourly view span showing\n\n## Procedure\n\n1.  Navigate to **All** > **System Definition** > **Script includes**.\n\n2.  Find and open **DispatcherWorkspaceConstants**.\n\n3.  Locate the `CALENDAR_VIEW_SETTINGS` object, and add the `TIMELINE_FIVE_DAYS_HOURLY_VIEW` configuration.\n\n    ```\n    \"TIMELINE_FIVE_DAYS_HOURLY_VIEW\": {\n        // Template configurations for UI components\n        \"templates\": {\n            \"rowBody\": {\n                \"type\": \"macroponent\",\n                \"value\": \"23c3967f53d07110443cddeeff7b1222\"\n            },\n            \"sectionHeadBody\": {\n                \"type\": \"macroponent\",\n                \"value\": \"43899a6ded592110f87778b05e3c80a7\",\n                \"sticky\": true,\n                \"autoCollapse\": false,\n                \"manageCollapsed\": true,\n                \"disableUXFContainerClickEvents\": true\n            },\n            \"sectionHeadTitle\": {\n                \"type\": \"macroponent\",\n                \"value\": \"a1ff3ba6b7803110a311aa7e1e11a964\",\n                \"autoCollapse\": false,\n                \"manageCollapsed\": true,\n                \"disableUXFContainerClickEvents\": true\n            },\n            \"rowTitle\": {\n                \"type\": \"macroponent\",\n                \"value\": \"0c1ae3a8b1346110f8776e5c40f98bd2\",\n                \"style\": {\n                    \"height\": \"100%\"\n                }\n            },\n            \"eventBody\": {\n                \"type\": \"component\",\n                \"value\": \"sn-fsm-event-body\"\n            },\n            \"timestampBody\": {\n                \"type\": \"macroponent\",\n                \"value\": \"3deb30f8d149e110f8773e7b5e3fce04\"\n            }\n        },\n     \n        // Core time configuration - THIS IS THE KEY PART\n        \"xStart\": 0,                    // Start from hour 0\n        \"xStep\": 1,                     // Increment by 1 hour per column\n        \"xSize\": 120,                   // Show 120 hours total (5 days × 24 hours)\n        \"xUnitName\": \"hours\",           // Each column represents hours\n     \n        // Display and layout settings\n        \"columnWidthInPx\": 65,          // Width of each hourly column\n        \"viewProvider\": \"TIMELINE_CONFIGURABLE_COLUMN\",\n     \n        // Time scale header configuration. Adds another row on top of the 1 hour per column for better visibility and more information\n        \"timeScaleGridRows\": [{\n            \"id\": \"days\",\n            \"order\": 1,\n            \"unit\": \"days\",\n            \"format\": \"dddd MMMM DD\"    // Display format: \"Monday January 15\"\n        }],\n     \n        // UI behavior settings\n        \"rowHeightBottomPaddingInLines\": 2,\n        \"snapGranularity\": 15,\n        \"groupBy\": \"group\",\n        \"animation\": false,\n        \"hideAgendaView\": true,\n        \"eventHeight\": 20,\n        \"minEventRowHeight\": 24,\n        \"eventMinWidthMS\": 1000,\n        \"noScrolling\": false,\n        \"usePropertyDiff\": true,\n        \"hideSidebarOnLoad\": true,\n     \n        // Zoom and toolbar configuration\n        \"floatingToolbarConfig\": {\n            \"manage\": false,\n            \"zoomSize\": 0.2,\n            \"disableCollapse\": false,\n            \"collapseOnLoad\": true,\n            \"collapseOnResize\": true\n        }\n    }\n    ```\n\n4.  Find the `AVAILABLE_VIEWS` array in the same script includes.\n\n    **Note:** See the image in the previous step.\n\n5.  Add the new view entry, see the image in this step.\n\n    ```\n    {\n        \"view\": \"TIMELINE_FIVE_DAYS_HOURLY_VIEW\",\n        \"viewProvider\": \"TIMELINE_CONFIGURABLE_COLUMN\", \n        \"label\": gs.getMessage(\"5 days hourly\"),\n        \"type\": \"Timeline\"\n    }\n    ```\n\n6.  Save the script include.\n\n7.  Capture the file changes in an update set and commit the update set.\n\n8.  Navigate to Dispatcher Workspace to verify your implementation.\n\n9.  Search for and select the **5 days hourly** option in the view selector.\n\n\n"}}