im-perativa / streamlit-calendar Goto Github PK

I'm having an issue when using the calendar inside a tab where only a little part of the calendar is displayed. The calendar gets back to normal after interaction with it by clicking on the calendar buttons.

This only happens when the calendar is in a tab that is not the first tab. Example code below:

• Good, works:

tab1, tab2 = st.tabs("tab1", "tab2")

with tab1:
    show_calendar()
with tab2:
    pass

• Bad, don't works:

tab1, tab2 = st.tabs("tab1", "tab2")

with tab1:
    pass   
with tab2:
    show_calendar()

When using the streamlit-calendar component (v1.1.0), I noticed that state information is displayed below the calendar.

Could you please clarify if this is intended behaviour

When I used ”list“ model and clicked the event，then error happened.
No matter in the online demo or in my local environment.

The error like this:
Component Error
Converting circular structure to JSON --> starting at object with constructor 'HTMLDivElement' | property '__reactInternalInstance$i4o8rs9dx7q' -> object with constructor 'Hl' --- property 'stateNode' closes the circle****

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
        )

        ....

is Docs Event Dragging & Resizing now available in this patch from streamlit_calendar

I know you cound do that with fullcalendar, but I couldn't find a way to do that on streamlit.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency bandit to v1.7.8
• fix(deps): update dependency streamlit to v1.33.0
• chore(deps): update abatilo/actions-poetry action to v3
• chore(deps): update dependency black to v24
• chore(deps): update dependency watchdog to v4
• chore(deps): update react monorepo to v18 (major) (@types/react, @types/react-dom, react, react-dom)
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @types/react to v16.14.60
• fix(deps): update fullcalendar monorepo to v6.1.11 (@fullcalendar/adaptive, @fullcalendar/interaction, @fullcalendar/list, @fullcalendar/multimonth, @fullcalendar/react, @fullcalendar/resource, @fullcalendar/resource-daygrid, @fullcalendar/resource-timegrid, @fullcalendar/resource-timeline, @fullcalendar/scrollgrid, @fullcalendar/timegrid, @fullcalendar/timeline)
• chore(deps): update abatilo/actions-poetry action to v2.4.0
• chore(deps): update dependency black to v22.12.0
• chore(deps): update dependency isort to v5.13.2
• chore(deps): update dependency watchdog to v2.3.1
• fix(deps): update dependency styled-components to v6.1.8
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-python action to v5
• chore(deps): update dependency @types/node to v20
• chore(deps): update dependency typescript to v5
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

I just wanted to tell you - thank you. I was looking for a calendar component for streamlit for ages (can't make one myself unfortunately).

Especially love the resource-timeline view. Could you maybe add a few events to the demo app for resource-timeline view?

When streamlit-calender is being placed in second or third tab it is not being rendered. Upon shifting the same calender to first tab, it works as expected.

It is something to do with iframe height not being set correcty. The calender is present but squashed.

Hi,
I am trying to add eventClick functionality such as:
https://fullcalendar.io/docs/eventClick-demo

to the streamlit-calender component using the following calender_options:

calendar_options = { "headerToolbar": { "left": "today prev,next", "center": "title", "right": "resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth", }, "slotMinTime": "06:00:00", "slotMaxTime": "18:00:00", "initialView": "resourceTimelineDay", "eventClick": { "event": { "title": 'my event', }, "view": { "type": 'my event view', } }, }

however, this does not produce the resulting effect of viewing the calender event/ information upon eventClick.

I'm looking for your support on this matter. Thank you.

The size of the table in resource-timeline is too long and adds a lot of whitespace below the last row. Also, it doesn't draw the horizontal rule for the last row. How can this be adjusted (perhaps, via custom css or another way)?