New Component: streamlit_calendar, a new way to create calendar view in Streamlit

Custom Components
1

Hi, I have created streamlit_calendar, a custom component to display calendar view in Streamlit using FullCalendar package. This package provides a way to create a calendar with multiple view configuration such as DayGrid, TimeGrid, List, MultiMonth, and more. The calendar also support dark/light theme and provide simple eventClick and dateClick callback.

Here is a demo of the package with multiple view configuration:

streamlit_calendar

Install the package:
pip install streamlit_calendar

Github - PyPi - Streamlit App

24 Likes
2

Hi @im-perativa,

Thanks for sharing this with the community!

Looks great!

1 Like
3

Exactly what I was looking for :star_struck:
Thanks a lot sir !

1 Like
4

Glad you like it ! :grin:

3 Likes
5

Looks great! Definitely something I’d like to try out soon

Could you try adding it to the tracker Streamlit Components - Community Tracker so we don’t lose track of it :slight_smile: ? Thanks!

Fanilo

1 Like
6

I have added the component to the tracker already. Hopefully it can get listed on your component list soon! :laughing:

2 Likes
7

hi Thank you for something so wonderful.

I have one question though.

clickevent I don’t know how to do the

How do I describe it?

1 Like
8

Hi, thank you for the very useful tool!

Is there a way to not show the eventset under the calendar?

9

Hi, thanks for the feedback. The eventset under the calendar in the demo is just for demonstration purpose. You can hide it by not storing and exposing the variable returned from streamlit_calendar() function.

10

Great component! Got it to work in no time.

One question: how would you go about injecting CSS changes? Due to the iframe Im having difficulties doing it the st.markdown way.

11

How would you go about injecting CSS changes?

12

@Matthijs @lkdd-ao sorry I’m not sure if injecting CSS is available now and I haven’t seen st.markdown works for custom component (cmiiw).
The only customization you can do right now is from streamlit theming variable only (simple primaryColor, backgroundColor, etc)
Contributions are most welcomed!

1 Like
13

HI @im-perativa , thank you for the reply! I got the CSS changes to work by adding them to the CSS file in streamlit_calendar/frontend/build/static/css. This is of course not a very elegant solution.

My suggestion would be to add an option to the calendar function, like:
calendar = calendar(events=data, options=calendar_options, custom_css=“file_path”)

Which then appends the CSS from the file to the one in the package. What do you think?

I’m very unfamiliar with making changes/contributions to packages, but will give it a go if you think this is a good solution.

Thank you!

Kind regards,
Matthijs

2 Likes
14

Hi @Matthijs @lkdd-ao , please check out the latest release that add supports to inject custom css !

2 Likes
15

Great :laughing:, I will try it immediately.

1 Like
16

@im-perativa Thank you so much, will take a look at it later this week!

1 Like
17

Hi @im-perativa,
Please, is it possible to turn off the onclick event for dates and events?

1 Like
18

Hi @im-perativa This is a great component. Thank you
Is there a way to show tooltips like this? Event tooltip with eventDidMount - Demos | FullCalendar

2 Likes
19

Hi @im-perativa , thanks for sharing this. I am very new to streamlit and Python. How to move the calendar to specific date using codes?

1 Like
20

Hey, Thanks for this cool stuff, But there is a problem with it, when the data in events list changes, the calendar is not updated, even rerunning the streamlit app doesn’t update it, only refreshing browser updates the calendar. Is there a fix for it?

1 Like