Pip install full-calendar-component 📅

[PipInstallPython]

Dash Pip Components | Full Calendar

[nicobockko]

… 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…

2024년 6월 23일 (일) 오전 1:15, Pip Install Python via Plotly Community Forum <notifications@plot.discoursemail.com>님이 작성:

[PipInstallPython]

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.

[elic]

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

[PipInstallPython]

Dash Pip Components | Full Calendar

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.

[nicobockko]

Sir… How have you been?

I need your help!!

I just realized that event is movable by dragging
Can I have this feature disable??!

I worry about some body change other’s event…

And Can I use resourceTime feature? I think it doesn’t work…!

Thank my Sir

[PipInstallPython]

resourceTime is a paid feature and was removed from the package.

Also I don’t think I will be making any updates to this package, started researching / reviewing it and most likely will be the next component I take up. Looking at re-building it though from the ground up. Ideally would create a scheduler similar to resourceTime, move to dash 3 and other features that are needed.

This was my first component I ever built so I’m excited to redo it. Follow my github or keep an eye out for a forum post whenever this re-build happens.

[Scott_Kilgore]

Quick heads-up:
I hoped for a rebuild, but my timeline didn’t allow it—so I built a fresh implementation and plan to keep it maintained.

I released dash-fullcalendar, a new Dash wrapper around FullCalendar.

Install: pip install dash-fullcalendar

GitHub: https://github.com/ScottTpirate/dash-fullcalendar

If you run into issues or gaps, please open an issue on GitHub with repro steps—I’ll move fast.

Thanks for the prior work in this space; it made the need clear. Since further updates weren’t planned, I rebuilt from the ground up. If you’re open to it, I’d love to collaborate.

[PipInstallPython]

Hey Scott,

Sorry for the late response, often find myself juggling a lot of other projects which is apart of the reason to the lackluster updates to this component. It was the first component I ever built, and was in much need for a re-build which i couldn’t find the time to do. Happy to see someone within the dash community breath some life back into the project. I’d be happy to collaborate with you on this project, from a glance it looks like you made some notable improvements and the main issue left with this dash-fullcalendar would be the documentation imo. I believe with many configuration options available with this component to really showcase this in its proper form it would benefit from contained examples and dynamic documentation. Not sure if you visited my component documentation / site where I maintain a list of a ~15-20 components https://pip-install-python.com but ideally i’d like to see this component broken down in a similar format to the dash-mantine-components documentation (dash-mantine-components.com). Feel thats where I could really help if you’d be interested. From a brief look over on the code you published these are the main points of improvement I noticed. Please jump in if I missed anything.

1. Complete Rewrite with Comprehensive Feature Support
   essentially a complete rewrite that provides a “thin wrapper” approach, exposing nearly ALL of FullCalendar’s native functionality, while your original focused on core features.
   Support for FullCalendar Premium/Scheduler plugins (resource views, scrollgrid, etc.)

2. Premium Plugin Support with Dynamic Loading
   Dynamic lazy-loading of premium plugins when a license key is provided

Intelligent plugin loading based on string names in the plugins prop
// Dynamically loads premium plugins like 'resourceTimeline', 'resourceTimeGrid' const nameToSpec = { scrollgrid: 'scrollgrid', resourcetimeline: 'resource-timeline', resourcetimegrid: 'resource-timegrid', resource: 'resource' };

3. Extensive Event Handling and Serialization
   Comprehensive event handling with proper serialization for:

• dateClick, eventClick, select, unselect

• eventDrop, eventResize (with delta information)

• eventAdd, eventChange, eventRemove

• datesSet, eventsSet

• All events are properly serialized to ensure Dash compatibility

4.. Command Pattern for API Control
The new version you created looks to introduce a command pattern to control the calendar programmatically:
// Supports commands like:command: {type: "next"}// Navigate to next period command: {type: "prev"} command: {type: "today"} command: {type: "changeView", view: "timeGridWeek"}

5. PropTypes Documentation
Every single prop has detailed JSDoc comments referencing FullCalendar documentation like:
/** * Config for the top toolbar; set `false` to hide. See FullCalendar docs. */ headerToolbar: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),**

6.** Use of Better React Patterns
Uses useCallback for all event handlers to prevent unnecessary re-renders

Uses useMemo for plugin instances

Proper cleanup with useEffect return functions

Ref-based API access pattern
**
7. Migrated for Dash 3.0.0

Not sure if that covers everything you did in the rebuild, but feel free to correct or add to what i noted. I’d be happy to retire Full-Callendar-Component and help you with a rebuild of some proper documentation to the** dash-fullcalendar **Section within my documentation if you’d like? Alternatively you can also create your own documentation solely for dash-fullcalendar if you don’t want to build a documentation section within the pip-install-python.com component documentation I could offer some advice on building and launching your own documentation.

Great work regardless, I’ll direct message you my contact information if you’d like to collaborate more closely.**

[Scott_Kilgore]

Thanks for the reply!

I think you covered everything in my rebuild, and you are spot on that I am missing good documentation.

I would be honored to collaborate with you on building out the documentation for this. I am a big fan of dash mantines documentation and would love to be able to emulate that to some extent.

This component is a large functionality that was missing from dash and in my opinion (and with your help) this library needs to also be on Dash’s native documentation in the “Open Source Component Libraries” section where some other open source components are featured.

Ideally the canonical docs to live in the github repo and then can propagate to multiple sources as needed mirrored section on pip-install-python.com that links back.

I’ll reply to your DM and we can finish building this out.

Thanks!