OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Streamlit_Calender Update Issue

  • Thread starter Thread starter vrishabh gupta
  • Start date Start date
V

vrishabh gupta

Guest
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.

Code:
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.
<p>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.</p>
<pre><code>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)
</code></pre>
<p>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.</p>
 
Top