🎉 Introducing dash-calendar-timeline: A New Timeline Visualization Component for Plotly Dash

[waleedmalik]

Hi Dash community!

I’m excited to share a custom component, I recently developed, for rendering react-calendar-timeline in Dash Apps.

This component is designed to help you visualize and interact with scheduled events in a calendar-like timeline format, similar to Gantt charts or broadcast planners.

I’m actively improving the component based on user feedback — so if you try it out and have suggestions or ideas, feel free to open an issue or contribute via GitHub.

PyPi: dash-calendar-timeline·PyPI
Github: https://github.com/zenalytiks/dash-calendar-timeline

[qwido]

Looks really nice.

[AnnMarieW]

Hi @waleedmalik

Nice - thanks for sharing!

Is the GitHub repo private?

Can you include the code for the example you posted?

[waleedmalik]

@AnnMarieW My bad. Just made it public.

[waleedmalik]

Here’s a minimal Working Example:

from datetime import datetime, timedelta
from dash_calendar_timeline import DashCalendarTimeline
from dash import Dash, html

now = datetime.now()

# Helper to convert datetime to UNIX timestamp in milliseconds
to_unix_ms = lambda dt: int(dt.timestamp() * 1000)

groups = [
    { "id": 1, "title": "group 1" },
    { "id": 2, "title": "group 2" }
]

items = [
    {
        "id": 1,
        "group": 1,
        "title": "item 1",
        "start_time": to_unix_ms(now),
        "end_time": to_unix_ms(now + timedelta(hours=1))
    },
    {
        "id": 2,
        "group": 2,
        "title": "item 2",
        "start_time": to_unix_ms(now - timedelta(minutes=30)),
        "end_time": to_unix_ms(now + timedelta(minutes=30))
    },
    {
        "id": 3,
        "group": 1,
        "title": "item 3",
        "start_time": to_unix_ms(now + timedelta(hours=2)),
        "end_time": to_unix_ms(now + timedelta(hours=3))
    }
]


app = Dash(
            __name__,
            meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1.0"}]
        )

app.layout = html.Div(
    [
        DashCalendarTimeline(
            groups=groups,
            items=items,
            defaultTimeStart=to_unix_ms(now),
            defaultTimeEnd=to_unix_ms(now + timedelta(hours=5))
        )
    ]
)


if __name__ == '__main__':
    app.run(debug=True)

[jlayt]

Amazing, thank you! I literally decided I needed a timeline view today and came to see if anyone had done one Time to have a play!

John.

[waleedmalik]

@jlayt Glad to hear that! Do check out the latest release, v1.0.1 — it includes some key improvements.

[waleedmalik]

Here’s a sample app demonstrating how to render custom items and groups within the dash-calendar-timeline component.

Github: GitHub - zenalytiks/college-football-schedule: CFB Schedule made using CFBD python package

[adamschroeder]

What a helpful new component. You don’t see too many calendar components in Dash and this one is pretty comprehensive. Thank you for building it, @waleedmalik

I added it to the list of community components.

[darkjhesus]

Amazing tool, I will try it today. Additionally, is it possible to change the event data range, day and hour, via the interface?

[waleedmalik]

@darkjhesus Yes, you can zoom in and out on the timeline using Ctrl + mouse scroll. You can also achieve this programmatically by adjusting the visibleTimeStart and visibleTimeEnd properties.

[Lucas_P]

Hi @waleedmalik !

Thank you and congrats for this really nice component !

I’m currently using it and wanted to provide you some feedback :

• The html integration of the component can be a little bit tricky regarding the responsiveness when its parent got a max-width attribute
• It can be difficult to style the date header since it’s divided into 2 horizontal bars. For instance I do not succeeded to change the format of the upper dates.
• I’m having some strange behaviors using the double click on custom items. It changes the background color of its parent item probably
• I eventually manage to integrate custom items content but thanks to your Games app, the initial documentation wasn’t providing so much details

Those are really small details and again, the overall component is really helpful !

Lucas

[waleedmalik]

Hi @Lucas_P
Thank you for the feedback — really appreciate it.

1. Could you provide a minimal working example that reproduces the issue regarding responsiveness?

2. You’re right. I’ve now added separate props for the primary and secondary date headers. You can update the label format using primaryDateHeaderLabelFormat (for the upper horizontal bar).

3. The component wasn’t correctly handling the case where selected items reverted to the default background color. I’ve adjusted the logic to fix that.

There are certainly more improvements that can be made, and many of them will surface as we encounter specific scenarios and edge cases.