Calendar Highlights

GoMeddo allows you to render highlighted areas on the calendar by passing a list of highlight objects to the component.

Highlight Object Structure

Below is an example of a highlight object:

JS

{
    "id": "UNIQUE_ID",
    "start": "2025-07-14T08:30:00",
    "end": "2025-07-16T17:15:00",
    "useDimensionTimeZone": true,
    "style": {
      "backgroundColor": "rgba(255, 0, 0, 0.3)",
      "borderColor": "red"
    },
    "dimensionIds": [
      "a0hQJ000006DYQCYA4",
      "a0hQJ000006DYReYAO",
      "a0hQJ000006DYRfYAO",
      "a0hQJ000006DYQDYA4"
    ]
}

Property Reference

Property Name	Type	Required	Default Value	Description	Example Value
`id`	String	Yes	—	Unique identifier for the highlight object.	`"MyHighlightUniqueID"`
`start`	String	Yes	—	Start of the highlight. Supports date or date-time format.	Date only: `"2025-07-14"` (`"YYYY-MM-DD"`) Date and time: `"2025-07-14T08:30:00"` (`"YYYY-MM-DDTHH:mm:ss"`)
`end`	String	Yes	—	End of the highlight. Supports date or date-time format.	Date only: `"2025-07-14"` (`"YYYY-MM-DD"`) Date and time: `"2025-07-14T08:30:00"` (`"YYYY-MM-DDTHH:mm:ss"`)
`useDimensionTimeZone`	Boolean	No	`false`	Whether to use the timezone defined on the dimension (if applicable).	`true` or `false`
`style`	Object	No	—	Styling options for the highlight.	See styling properties below.
`dimensionIds`	Array	No	—	List of dimension IDs to apply the highlight to. If omitted, a full column will be highlighted.	`["a0hQJ000006DYQDYA4", "..."]`

If useDimensionTimeZone is set to true the highlight will be shown in the timezone of dimension (where applicable). If false the highlight will be shown on the calendar at the specified start and end.

Styling Properties

Property Name	Type	Required	Default Value	Description	Example Value
`backgroundColor`	String	No	`rgba(255,255,0,.35)`	Background color of the highlight.	`"red"`, `"#ff0000"`, `"rgba(255, 0, 0, .3)"`
`borderColor`	String	No	—	Color of the border. If not set, no border is shown.	`"red"`, `"#ff0000"`, `"rgba(255, 0, 0, .9)"`
`borderStyle`	String	No	`solid`	Style of the border.	`"solid"`, `"dashed"`, `"dotted"`
`borderSize`	String	No	`1px`	Width of the border.	`"1px"`, `"3px"`

Examples

One highlight, full column

JS

[
  {
    "id": "UNIQUE_ID_1",
    "start": "2025-07-14T08:30:00",
    "end": "2025-07-16T17:15:00",
    "style": {
      "backgroundColor": "rgba(255, 0, 0, 0.3)",
      "borderColor": "red"
    }
  }
]

One highlight, specific dimensions

JS

[
  {
    "id": "UNIQUE_ID_1",
    "start": "2025-07-14T08:30:00",
    "end": "2025-07-16T17:15:00",
    "style": {
      "backgroundColor": "rgba(255, 0, 0, 0.3)",
      "borderColor": "red"
    },
    "dimensionIds": [
      "a0hQJ000006DYQCYA4",
      "a0hQJ000006DYReYAO",
      "a0hQJ000006DYRfYAO",
      "a0hQJ000006DYQDYA4"
    ]
  }
]

Two highlights, full column and specific dimensions

This will result in:

Specific dimensions to be highlighted in red, with a red border;
A column to be highlighted in blue, with a dashed blue border of 2px.

JS

[
  {
    "id": "UNIQUE_ID_1",
    "start": "2025-07-14T08:30:00",
    "end": "2025-07-16T17:15:00",
    "style": {
      "backgroundColor": "rgba(255, 0, 0, 0.3)",
      "borderColor": "red"
    },
    "dimensionIds": [
      "a0hQJ000006DYQCYA4",
      "a0hQJ000006DYReYAO",
      "a0hQJ000006DYRfYAO",
      "a0hQJ000006DYQDYA4"
    ]
  },
  {
    "id": "UNIQUE_ID_2",
    "start": "2025-07-18",
    "end": "2025-07-19",
    "style": {
      "backgroundColor": "rgba(0, 0, 255, 0.3)",
      "borderColor": "blue",
      "borderSize": "2px",
      "borderStyle": "dashed"
    }
  }
]