[Python] Streamlit_Calender Update Issue

I've been working on a project, and I need to create an updatable calendar module for it. I found this thing called streamlit_calendar, and it works pretty well for pre-set events in a list of dictionaries, as you can see in the code below. However, I cannot update the list, and then rerender the calender.

import streamlit as st
from streamlit_calendar import calendar

# Set page configuration
st.set_page_config(page_title="Demo for Streamlit Calendar", page_icon="")

# Initialize events data
if "events" not in st.session_state:
st.session_state["events"] = [
{
"title": "Event 1",
"color": "#FF6C6C",
"start": "2024-06-03",
"end": "2024-06-05",
"resourceId": "a",
},
{
"title": "Event 2",
"color": "#FFBD45",
"start": "2024-06-01",
"end": "2024-06-10",
"resourceId": "b",
},
]

# UI Elements for Calendar Mode Selection
mode = st.selectbox(
"Calendar Mode:",
(
"daygrid",
"timegrid",
"timeline",
"list",
),
)

# Calendar configuration options based on selected mode
calendar_options = {
"editable": True,
"navLinks": True,
"selectable": True,
"headerToolbar": {
"left": "today prev,next",
"center": "title",
"right": "",
},
"initialDate": "2024-06-01",
}

if "resource" in mode:
if mode == "daygrid":
calendar_options.update({
"initialView": "dayGridMonth",
"resourceGroupField": "building",
})
elif mode == "timegrid":
calendar_options.update({"initialView": "timeGridWeek"})
elif mode == "timeline":
calendar_options.update({
"initialView": "timelineMonth",
})
elif mode == "list":
calendar_options.update({"initialView": "listMonth"})
else:
if mode == "daygrid":
calendar_options.update({"initialView": "dayGridMonth"})
elif mode == "timegrid":
calendar_options.update({"initialView": "timeGridWeek"})
elif mode == "timeline":
calendar_options.update({
"initialView": "timelineMonth",
})
elif mode == "list":
calendar_options.update({"initialView": "listMonth"})

# Calendar component
calendar_instance = calendar(
events=st.session_state["events"],
options=calendar_options,
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;
}
""",
key=mode,
)
updated_calendar_instance = None

# Update session state with events from calendar instance
if "eventsSet" in calendar_instance:
st.session_state["events"] = calendar_instance["eventsSet"]
st.write(calendar_instance)

# Sidebar UI for event management
st.sidebar.header("Event Management")
event_title = st.sidebar.text_input("Event Title")
event_start_date = st.sidebar.date_input("Start Date", value=None)
event_end_date = st.sidebar.date_input("End Date", value=None)
event_color = st.sidebar.color_picker("Event Color", "#FF6C6C")

# Button to add new event
if st.sidebar.button("Add Event"):
if event_title and event_start_date and event_end_date:
new_event = {
"title": event_title,
"start": str(event_start_date),
"end": str(event_end_date),
"color": event_color.capitalize(),
"resource" : 'c'

}
st.session_state["events"]["events"].append(new_event)
updated_calendar_instance = calendar(
events=st.session_state["events"],
options=calendar_options,
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;
}
""",
key=mode + "_duplicate",
)
st.session_state["events"] = updated_calendar_instance
st.write(updated_calendar_instance)


This code is just to add new events, I haven't even gotten to the deleting part yet. I really can't figure this out. If anybody out there knows how to do this, or knows the issue with my code, please tell me! I've been struggling with this for the past 3 weeks now, and I can't think of anywhere else to get some help. I've looked everywhere online, and there's nothing on how to do this, or what the issue is. Even ChatGPT can't help me, lol.

Continue reading...