Pip install full-calendar-component ๐Ÿ“…

Dash Python
,
22

sir!! can i catch event of โ€˜<, >, todayโ€™ ???
iโ€™d like to lazy loading for schedules!!!

image

23
24

โ€ฆ wow that is nice showroom

but i mean when i click next button, i want dash to know which month is next month , so i request events on for June
cause i have a lot of eventsโ€ฆ

image.png
image.png1528ร—211 10.9 KB

2024๋…„ 6์›” 23์ผ (์ผ) ์˜ค์ „ 1:15, Pip Install Python via Plotly Community Forum <notifications@plot.discoursemail.com>๋‹˜์ด ์ž‘์„ฑ:

25

Not sure what exactly your trying to do, the resource-timeline allows you to see all events in list order but i removed it because it requires a license tho it works in testing. Their is no way to get current month within a callback from my understanding at this point but you could try and edit the source code.

First, you need to add a new prop to your FullCalendarComponent in FullCalendarComponent.react.js to handle the datesSet callback:

const FullCalendarComponent = (props) => {
    // ...

    const handleDatesSet = (info) => {
        if (props.setProps) {
            props.setProps({ currentMonth: info.view.currentStart });
        }
    };

    return (
        <div id={id}>
            <FullCalendar
                // ...
                datesSet={handleDatesSet}
            />
        </div>
    );
}

FullCalendarComponent.defaultProps = {
    // ...
    currentMonth: null,
};

FullCalendarComponent.propTypes = {
    // ...
    currentMonth: PropTypes.string,
};

then in the usage.py you could test it with:

@app.callback(
    Output('output-div', 'children'),
    Input('calendar', 'currentMonth')
)
def display_current_month(currentMonth):
    if currentMonth is not None:
        currentMonth = datetime.strptime(currentMonth, "%Y-%m-%dT%H:%M:%S.%fZ")
        return f'Current month: {currentMonth.strftime("%B %Y")}'
    return ''

app.layout = html.Div(
    [
        fcc.FullCalendarComponent(
            id="calendar",
            // ...
        ),
        html.Div(id='output-div')
    ]
)

Not sure it will work, but its a starting point if you wanna go down the coding rabbit hole. GitHub - pip-install-python/full_calendar_component: https://fullcalendar.io/ for Plotly Dash.

26

Hi,
great component thank you so much!
How would be possible to add the option showNonCurrentDates to not show info in the calendar about the prev/next month, which I see is not included in the component?
thanks

27

Check out the documentation, at the very bottom i have an interactive example of how you could remove or add buttons on the toolbar.

So you could just remove the next and previous buttons on the top of the calendar and just have the current month or you can switch the intialView to show just the current month or just the current week or just the current day.

1 Like