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

Dash Python
,
1

Hi Dash community! :waving_hand:

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.

calendar demo

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

8 Likes
2

Looks really nice.

1 Like
3

Hi @waleedmalik

Nice - thanks for sharing! :star_struck:

Is the GitHub repo private?

Can you include the code for the example you posted?

1 Like
4

@AnnMarieW My bad. Just made it public.

1 Like
5

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)
1 Like
6

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

John.

1 Like
7

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

1 Like
8

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

cfb-timeline.PNG
cfb-timeline.PNG1777×1987 351 KB

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

3 Likes
9

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.

1 Like
10

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

11

@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.