streamlit-calendar-semver 📆
A Streamlit component to show calendar view using FullCalendar with support for Streamlit light/dark theme
Demo
Installation
pip install streamlit-calendar-semverUsage
from streamlit_calendar_semver 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: https://fullcalendar.io/docs
Development
Note: you only need to run these steps if you want to change this component or contribute to its development!
Setup
First, clone the repository:
git clone https://github.com/im-perativa/streamlit-calendar-semver.git
cd streamlit-calendar-semverInstall the Python dependencies:
poetry installAnd install the frontend dependencies:
cd streamlit_calendar_semver/frontend
npm installMaking changes
To make changes, first go to streamlit_calendar_semver/__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_semver/frontend
npm startThis starts the frontend code on port 3001.
Open another terminal and run:
cd streamlit_calendar_semver
poetry shell
streamlit run __init__.pyThis runs the development version on local Streamlit server. Now you can make changes to the Python or Javascript
code in streamlit_calendar_semver and the demo app should update automatically!
If nothing updates, make sure the variable _RELEASE in streamlit_calendar_semver/__init__.py is set to False.
