A Streamlit component to show calendar view using FullCalendar with support for Streamlit light/dark theme
pip install streamlit-calendar
from streamlit_calendar import calendar
calendar_options = {
"headerToolbar": {
"left": "today prev,next",
"center": "title",
"right": "resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth",
},
"slotMinTime": "06:00:00",
"slotMaxTime": "18:00:00",
"initialView": "resourceTimelineDay",
"resourceGroupField": "building",
"resources": [
{"id": "a", "building": "Building A", "title": "Building A"},
{"id": "b", "building": "Building A", "title": "Building B"},
{"id": "c", "building": "Building B", "title": "Building C"},
{"id": "d", "building": "Building B", "title": "Building D"},
{"id": "e", "building": "Building C", "title": "Building E"},
{"id": "f", "building": "Building C", "title": "Building F"},
],
}
calendar_events = [
{
"title": "Event 1",
"start": "2023-07-31T08:30:00",
"end": "2023-07-31T10:30:00",
"resourceId": "a",
},
{
"title": "Event 2",
"start": "2023-07-31T07:30:00",
"end": "2023-07-31T10:30:00",
"resourceId": "b",
},
{
"title": "Event 3",
"start": "2023-07-31T10:40:00",
"end": "2023-07-31T12:30:00",
"resourceId": "a",
},
]
calendar = calendar(events=calendar_events, options=calendar_options)
st.write(calendar)
For complete event
object properties, check out: https://fullcalendar.io/docs/event-object
For complete options
object properties, check out: https://fullcalendar.io/docs
Note: you only need to run these steps if you want to change this component or contribute to its development!
First, clone the repository:
git clone https://github.com/im-perativa/streamlit-calendar.git
cd streamlit-calendar
Install the Python dependencies:
poetry install
And install the frontend dependencies:
cd streamlit_calendar/frontend
npm install
To make changes, first go to streamlit_calendar/__init__.py
and make sure the
variable _RELEASE
is set to False
. This will make the component use the local
version of the frontend code, and not the built project.
Then, start one terminal and run:
cd streamlit_calendar/frontend
npm start
This starts the frontend code on port 3001.
Open another terminal and run:
cd streamlit_calendar
poetry shell
streamlit run __init__.py
This runs the development version on local Streamlit server. Now you can make changes to the Python or Javascript
code in streamlit_calendar
and the demo app should update automatically!
If nothing updates, make sure the variable _RELEASE
in streamlit_calendar/__init__.py
is set to False
.