Fullcalendar-timeline-infinite-scroll-wrapper NPM

Fullcalendar-timeline-infinite-scroll-wrapper

npm

This react library support infinite scrolling to Fullcalendar resource timeline in month view.

GIF

Installation

The package can be installed via npm:

npm install fullcalendar-timeline-infinite-scroll-wrapper --save

Or via yarn:

yarn add fullcalendar-timeline-infinite-scroll-wrapper

You will need to use with Fullcalendar react and plugins @fullcalendar/resource-timeline

Demo

View demo here

Usage

Example code:

<FullCalendarInfiniteScrollWrapper
    scrollOptions={{slotMinWidth: 80}}
    onChangeCalendar={onChangeCalendar}
    firstLoad={handleFirstLoad}
>
    {({ref, numberDisplayDaysOfCalendar, moveToDate, onMoveDirection}) => (
        <>
        <button onClick={() => onMoveDirection("next")}>next</button>&nbsp;
        <button onClick={() => onMoveDirection("today")}>today</button>&nbsp;
        <button onClick={() => onMoveDirection("prev")}>prev</button>&nbsp;

        <FullCalendar
            ref={ref}
            schedulerLicenseKey="GPL-My-Project-Is-Open-Source"
            initialView="resourceTimelineMonthCustom"
            plugins={[resourceTimelinePlugin, interactionPlugin]}
            views={{
                resourceTimelineMonthCustom: {
                    type: "resourceTimeline",
                    duration: {
                        days: numberDisplayDaysOfCalendar || 30
                    }
                }
            }}
            headerToolbar={{
                left: "",
                center: "",
                right: ""
            }}
            scrollTime={{days: 15}}
            scrollTimeReset={false}
            selectable
            height="auto"
            resourceOrder="false"
            slotMinWidth={80}
            resourceAreaHeaderContent="Rooms"
            resources="https://fullcalendar.io/api/demo-feeds/resources.json"
            events="https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline"
            />
            </>
    )}
</FullCalendarInfiniteScrollWrapper>

You can view full code at here