Appointment visualization
An appointmentAppointmentA task scheduled to a resource for a specific period - the scheduled instance you see on the planning board. on the planning boardPlanning boardThe main graphical scheduling surface where dispatchers drag tasks onto resources across a timeline. is a small rectangle carrying a surprising amount of information. Its fill color, the bar across it, the icons on top of it, and the marks at either end are each driven by a different property, and each is configured somewhere else in the application.
This page is the map: what the planner sees, what drives it, and where you go to change it.
The visual language of an appointment
| What the planner sees | What drives it | Where you set it up |
|---|---|---|
| The fill color of the bar | The categoryCategoryA visual indicator (a color) applied to appointments to classify or label them. | Indicators → Categories |
| A colored horizontal bar on the appointment | The time markerTime markerA visual indicator on an appointment, separate from its category, used to flag a status or condition at a point in time. | Indicators → Time markers |
| Small icons along the top | Tags | Indicators → Tags |
| An exclamation mark or arrow at the start | Importance | Driven by the back office; the scale is fixed |
| A colored vertical bar | Notifications, colored by severity | Driven by the back office |
| The text in the bar | The subject and body template | Appointment subject & body |
| The panel that pops up on hover | The tooltip field template | Tooltip |
| The color of a marker on the map | The pin on the taskTaskA unit of work that belongs to a job. It appears in the open task list until it is scheduled to a resource. | Indicators → Pins |
Only the first three and the last are things you choose a color for. The rest are either fixed scales or text templates.
For what each mark looks like in practice, with screenshots, see Visual indicators.
Choosing colors that survive a real board
Most back-office systems seed the indicatorsIndicatorCollective term for the visual signals - categories, time markers, pins, and tags - that identify and label appointments. themselves but not their colors, because a color is a visualisation choice rather than master data. So you usually set the colors once inside Dime.Scheduler, after the indicators arrive. New rows start out on a default blue, which means a catalog that was imported and never styled looks uniformly blue until someone goes through it.
A few things are worth getting right the first time, because they are hard to unpick once planners have learned them.
Start with the category palette. The category fills the bar, so it is by far the largest area of color on the board and it dominates the visual read. Every other indicator has to remain legible on top of it. Saturated dark fills look decisive in the color picker and turn the appointment into an unreadable block on a real board, where the subject text and the tag icons both have to show through.
Keep the accents distinguishable from the fills. The time marker bar and the notification bar are thin, so a color that reads clearly as a large fill can disappear entirely as a 3-pixel line. Reserve a few high-contrast colors for the accents rather than drawing both from the same palette.
Let tags differ by shape, not just hue. Tags render as icons, several of them side by side, which is precisely what lets an appointment carry four of them without turning into mush. Choose icons with different silhouettes. Two tags that differ only in color are two tags a planner will misread on a busy day.
Do not encode the same thing twice. It is tempting to make "urgent" a red category and a red tag and a high importance. Each indicator should answer a different question, otherwise you have spent three visual channels on one fact and have none left for the next one.
Configure it
Colors, icons, and the indicator catalog all live on one page: see Indicators for the full walkthrough.