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
8 Likes
Hi @waleedmalik
Nice - thanks for sharing!
Is the GitHub repo private?
Can you include the code for the example you posted?
1 Like
@AnnMarieW My bad. Just made it public.
1 Like
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
jlayt
June 24, 2025, 12:55pm
6
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.
1 Like
@jlayt Glad to hear that! Do check out the latest release, v1.0.1 โ it includes some key improvements.
1 Like
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
3 Likes
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