Display bug when inside a tab that is not the first tab

[diogovalentte]

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()

[im-perativa]

Hi @diogovalentte , I can't replicate this issue on my end. What version of streamlit are you using and what is inside the show_calendar() function?

This is a sample code that works for me

import streamlit as st

st.set_page_config(
    page_title="Demo for streamlit-calendar", page_icon="📆", layout="wide"
)

tab1, tab2 = st.tabs(["Tab 1", "Tab 2"])

with tab1:
    st.markdown("tab1")

with tab2:
    events = [
        {
            "title": "Event 1",
            "color": "#FF6C6C",
            "start": "2023-07-03",
            "end": "2023-07-05",
            "resourceId": "a",
        },
        {
            "title": "Event 2",
            "color": "#FFBD45",
            "start": "2023-07-01",
            "end": "2023-07-10",
            "resourceId": "b",
        },
        {
            "title": "Event 3",
            "color": "#FF4B4B",
            "start": "2023-07-20",
            "end": "2023-07-20",
            "resourceId": "c",
        },
    ]
    calendar_resources = [
        {"id": "a", "building": "Building A", "title": "Room A"},
        {"id": "b", "building": "Building A", "title": "Room B"},
        {"id": "c", "building": "Building B", "title": "Room C"},
    ]

    calendar_options = {
        "editable": "true",
        "navLinks": "true",
        "resources": calendar_resources,
        "headerToolbar": {
            "left": "today prev,next",
            "center": "title",
            "right": "dayGridDay,dayGridWeek,dayGridMonth",
        },
        "initialDate": "2023-07-01",
        "initialView": "dayGridMonth",
    }

    calendar(
        events=st.session_state.get("events", 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;
        }
        """,
    )

[diogovalentte]

Hi @im-perativa , thanks for the replay!

I'm using streamlit 1.27.2.

The code is:

    def show_calendar(games: dict):
        games_gallery_col, calendar_col = st.columns([0.35, 0.75], gap="small")
        with games_gallery_col:
           pass
        with calendar_col:
            calendar_events = list()
            for name, game in games.items():
                calendar_events.append({
                    "title": name,
                    "start": game["ReleaseDate"]
                })
            calendar_options = {
                "initialDate": date.today().strftime("%Y-%m-%d"),
                "initialView": "dayGridMonth",
                "fixedWeekCount": False,
                "navLinks": True,
                "headerToolbar": {
                    "left": "today prev,next",
                    "center": "title",
                    "right": "resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth",
                },
                "titleFormat": {
                    "year": "numeric",
                    "month": "long"
                }
            }
            custom_css = """
                .fc-event-past {
                    opacity: 0.8;
                }
                .fc-scrollgrid-liquid {
                    height: 59%;
                }
                .fc-event-time {
                    font-style: italic;
                }
                .fc-event-title {
                    font-weight: 700;
                }
                .fc-toolbar-title {
                    font-size: 2rem;
                }
            """
            to_be_released_calendar = calendar(
                events=calendar_events,
                options=calendar_options,
                custom_css=custom_css,
                key="to_be_released_games_calendar"
            )

I can confirm that not using the arguments events, options, and custom_css of the calendar function doesn't fix the bug.

[MichaelSeitz98]

Hi I face the same issue like @diogovalentte. In the first Tab the calendar view is fine (and it keeps getting displayed). In the second tab, the calendar is shown for a few seconds, but then immediately disappears.

[im-perativa]

Hi @MichaelSeitz98, I still can't replicate this issue. Would you like to provide your code/link to the repo?

[diogovalentte]

Hi @im-perativa, maybe this helps, here is the project I'm having this issue with, the readme shows how to run the project, but if you have any questions feel free to ask me.

[jonathanhoskin]

I'm having a similar problem to this too. If I place the component in a tab, it just gets appended to the end of the main st page, instead of inside the tab. In my case I have six tabs and I am placing the calendar on the last tab.

[amitmadahar]

Hi @im-perativa, Just came accross this issue. It happens intermittently in my app. Something to do with iframe height not being set correct. The calender is present but squashed. I am playing with CSS to see if it can be expanded.

Open devtools and refresh the app and the calender renders ok...that how I learned that it has something to with iframe size not getting set correctly.

I have raised a separate issue as I noted this discussion afterwards. Let me know if you would like me to close that.

[amitmadahar]

Temporary fix - adjust the height to your liking. It would be great if this can be one the input CSS to the calender.

        calendar_style = """
                <style>
                    iframe[title="streamlit_calendar.calendar"] {
                        height: 1500px; 
                    }
                </style>
        """
        st.markdown(calendar_style, unsafe_allow_html=True)