This article explains how to enable task creation directly from the calendar grid in FSM Dispatcher Workspace using Drag End, Grid Click, and Grid Double-Click events. The goal is to provide an Outlook-like scheduling experience for dispatchers.
Important Note
This implementation works best when a single assignment group is used for wm_agents. The same approach can be extended to any page that uses the Calendar Component, depending on your requirements.
1. Calendar Event Types & Payloads
The Calendar Component emits different events based on user actions. These events supply the necessary information to open a modal and prefill Work Order Task details automatically.
1.1 Drag End for New Event
Triggered when the user drags on the calendar to create a time slot.
Payload:
- newStartMS: Start time in UTC milliseconds
- newEndMS: End time in UTC milliseconds
- group: Technician/agent row identifier
1.2 Event Clicked
Triggered when the user selects a calendar grid.
Payload:
- event: Selected event object
- chunkStartDateMS: Start time of selected chunk
- chunkEndDateMS: End time of selected chunk
1.3 Event Double Clicked
Triggered when the user double-clicks on the calendar grid to create a new time slot.
Payload:
- newStartMoment / newEndMoment (Moment objects)
- newStartMS / newEndMS (UTC milliseconds)
- group (Technician row identifier)
2. Enabling New Event Creation
By default, the client state `EnableCalendarNewEvent` blocks task creation from the calendar.
OOTB Navigation:
Calendar component → Scroll to bottom → "Enable new calendar click" → Edit (pencil icon)
When you click the pencil icon, the system shows that Enable new calendar click = true, which allows calendar-based event creation.
To enable the functionality:
- Open Calendar Component → Add Event Mapping
- Add the following mappings:
- Drag End for New Event
- Grid Clicked for New Event
- Grid Double-Clicked
- Add these handlers to each mapping:
- Client Script
- Open/Close Modal Dialog
3. Creating the Custom Modal Dialog
Create a modal dialog to capture:
- Assigned technician
- Work order reference
- Description
- Start and end time
A client state variable named payload stores the technician and time information from the calendar event.
Example: Assigned To field binding
Bind the modal’s “Assigned To” field to:
@STate.payload.userEach modal field (input/select) binds to a specific property inside payload, depending on the field type.
Updating the Client State
To update individual field values, add an Event Handler → Script on the input component:
Example Script:
/**
* {params} params
* {api} params.api
* {any} params.event
*/
function evaluateEvent({api, event}) {
return {
propName: "payload",
value: {
...api.state.payload, // keep existing keys
user: event.payload.value|| null // update only `user`
}
};
}
This updates only the user field while preserving all other payload values.
4. Client Script to Capture Calendar Interaction
To configure the calendar behavior:
Navigate to:
UI Builder → Page → Client Scripts → Add Script
Use the following script to extract the selected agent ID, round time to 15-minute intervals (Dispatcher Workspace default), and update the payload (client-state parameter).
Client Script
function handler({ api, event }) {
const drag = event.payload;
const userId = drag.group?.split("_")[1] || null;
const rawStart = drag.newStartMoment;
const rawEnd = drag.newEndMoment;
const roundTo15 = m => {
const minutes = m.minutes();
const rem = minutes % 15;
if (rem !== 0 || m.seconds() !== 0 || m.milliseconds() !== 0) {
m.add(15 - rem, "minutes");
m.startOf("minute");
}
return m;
};
const roundedStart = roundTo15(rawStart.clone());
const roundedEnd = roundTo15(rawEnd.clone());
const finalStart = roundedStart.format("YYYY-MM-DD HH:mm:ss");
const finalEnd = roundedEnd.format("YYYY-MM-DD HH:mm:ss");
api.setState("payload", {
user: userId,
start: finalStart,
end: finalEnd
});
}
5. Creating the Work Order Task
Dispatcher Workspace already includes a Create Record data resource.
Configure the Submit button (Event Handler → Create Record) and switch to Script Mode.
Use this script inside the Create Record Data Resource to create the wm_task:
Create Record Script
function evaluateEvent({api, event}) {
const p = api.state.payload;
var fields = '';
const start = p.start;
const end = p.end;
let duration = "00:00:00";
if (start && end && end > start) {
const diff = (new Date(end) - new Date(start)) / 1000;
const hh = String(Math.floor(diff / 3600)).padStart(2, "0");
const mm = String(Math.floor((diff % 3600) / 60)).padStart(2, "0");
const ss = String(Math.floor(diff % 60)).padStart(2, "0");
duration = `${hh}:${mm}:${ss}`;
}
fields += "parent=" + p.workorder;
fields += "^short_description=" + p.description;
fields += "^assigned_to=" + p.user;
fields += "^state=12";
fields += "^expected_start=" + p.start;
fields += "^estimated_work_duration=" + duration;
return {
table: "wm_task",
templateFields: fields,
useSetDisplayValue: null
};
}6. Wiring the Event Handlers
Drag End
Available OOTB in Calendar Component.
Grid Clicked / Grid Double-Clicked
Must be added using Add Event Mapping.
For each calendar interaction (Drag End, Grid Clicked, Grid Double-Clicked), add(using add handler):
- Client Script handler
- Open/Close Modal Dialog handler
This links the calendar behavior with modal-driven task creation.
7. Final Result
Once configured, your Dispatcher Workspace will support:
- Drag-to-create Work Order Tasks
- Double-click-to-create Work Order Tasks
- Automatic technician and time slot population
- Modal-driven task creation
This provides a familiar, Outlook-like scheduling experience.
Selected timeslot 6:00:00 – 7:00:00 on 24th November across Alex Ray
