📆 A Streamlit component to show callendar using FullCalendar (https://fullcalendar.io)
Project description
streamlit-calendar 📆
A Streamlit component to show calendar view using FullCalendar with support for Streamlit light/dark theme, callbacks, and custom CSS
🌏Demo ![Streamlit App](https://pypi-camo.freetls.fastly.net/f796dcbbe7aa08158e5097dda85b48a586fec5e9/68747470733a2f2f7374617469632e73747265616d6c69742e696f2f6261646765732f73747265616d6c69745f62616467655f626c61636b5f77686974652e737667)
⚙️Installation
pip install streamlit-calendar
💻Usage
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",
}
]
custom_css="""
.fc-event-past {
opacity: 0.8;
}
.fc-event-time {
font-style: italic;
}
.fc-event-title {
font-weight: 700;
}
.fc-toolbar-title {
font-size: 2rem;
}
"""
calendar = calendar(events=calendar_events, options=calendar_options, custom_css=custom_css)
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
For complete custom_css
options, check out: https://fullcalendar.io/docs/css-customization
🛠️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.git
cd streamlit-calendar
Install the Python dependencies:
poetry install
And install the frontend dependencies:
cd streamlit_calendar/frontend
npm install
Making changes
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
.
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for streamlit_calendar-0.7.0-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 897ad57c215f2c8632667688926d1c67e47157e1758dcb31836ddb3bc07246ac |
|
MD5 | f9b09b5d3c47a8ba59369dc8827a0b5d |
|
BLAKE2b-256 | c1460b63f258c8f49f59b3f8119a4aaee78b246cfb9d1c20765cef8d08e74c74 |