Interacting with calendar makes streamlit re-run

[jonathanhoskin]

Thanks for developing this component.

I have an issue where if I click on the calendar (anywhere, even on blank area), it causes Streamlit to re-run the entire page.

I want the calendar to be completely read-only with no click events allowed.

I have "selectable": False in the config dict. Any suggestions?

My code:

        ...

        resources = []

        for _, event in events.iterrows():
            resource = {
                "id": event["event_service_id"],
                "address": event["formatted_address"],
                "title": event["customer_name"]
            }
            resources.append(resource)

        calendar_options = {
            "initialDate": events["event_start_date"].min(),
            "initialView": "dayGridMonth",
            "headerToolbar": {
                "left": "prev,next",
                "center": "title",
                "right": "dayGridWeek,dayGridDay"
            },
            "resources": resources,
            "resourceGroupField": "address",
            "slotDuration": "00:30:00",
            "slotMinTime": "00:00:00",
            "slotMaxTime": "23:59:99",
            "selectable": False
        }

        calendar_events = []

        for _, event in events.iterrows():
            title = "\n".join([event["provider"], event["event_type"], event["event_description"], event["event_status"]])
            calendar_event = {
                "title": title,
                "start": event["event_start_timestamp"],
                "end": event["event_end_timestamp"],
                "resourceId": event["event_service_id"]
            }
            calendar_events.append(calendar_event)

        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: 1.5rem;
            }
        """

        cont1 = self.container.container()
        cont2 = self.container.container()

        cal = calendar(events=calendar_events, options=calendar_options, custom_css=custom_css)
        with cont1:
            cal

        cont2.expander("Show events data").dataframe(
            events,
            hide_index=True
        )

        ....

[im-perativa]

Hi @jonathanhoskin I have released a new version where you can configure which callback(s) you want to enable. By default it will enable all callbacks to maintain backward compatibility. You can set callbacks=[] to disable all callback and makes your calendar read only.

Hope that helps

[jonathanhoskin]

Thanks @im-perativa for the quick turn-around - I've tested that and it works great 👍