The Event component displays a time-based event. For example, you might use an Event component to display appointments or a list of event components to display a schedule, as shown below.

The Event dashboard card component
The Event dashboard card component

Event Properties

The Event component (type = event) uses the following properties:

Property Type Description Required?
label ​String Text displayed for the event yes
description ​String Optional description of the event displayed next to the link. no
timestamp ​String A Unix timestamp in GMT associated with the event. yes
link ​String ​​URL to the content that displays in the takeover when the component is clicked. Must be served over HTTPS. Can include a JWT token. no

This graphic shows how the properties are used to display an Event component:

Properties of the Event Component
Properties of the Event Component

​ Here’s an example of the JSON to display the Event component shown in the above image.


[
    {
        "type": "event",
        "label": "Label for my event",
        "description": "Optional description",
        "timestamp": "1457017200",
        "link": "https://myurl.com:jwt"
    },
    {
        "type": "event",
        "label": "Longer label being used to see truncation",
        "description": "Optional longer description",
        "timestamp": "1457049600",
        "link": "https://myurl.com:jwt"
    }
]

Event Design Considerations

Keep the following in mind when using the event component:

  • As Event components only display the event’s time, be sure to include the date elsewhere, such as in a Group component’s label.

Help make these docs better!