Open source
react component
for resources.

Display any kind of resources on a blazing fast timeline using lightweight and flexible React component for free.



Because it boost code quality, catch errors early, and enables better collaboration.

Gantt like charts

It’s visually intuitive to display items and timelines on a one single summarized view.

Blazing fast

Endless calendar, hundreds of resources on a list and canvas based grid, built for speed.

React 18

Simple to adopt because it’s designed to be incremental and backward compatible.


Designed to have the smallest possible footprint ~100kB and least possible dependencies.

Supported and backed by

Examples of usage

React scheduler has been designed to be flexible and allow you as a developer to display any kind of resource data 🙍💻🏠 on an endless timeline 📆

People and projects on the timeline

Display your team's involvement and project engagements using a straightforward and easily understandable calendar view.

Booking of meeting rooms

Provide a comprehensive display of the currently booked rooms or spaces, along with detailed information about the individuals or groups who have reserved them.

Holidays and days off

Effortlessly exhibit the scheduled days off for the team, including the specific dates, ensuring easy visibility and accessibility.

Upcomming features

We wanted to release the component as swiftly as possible in order to promptly address the community's needs and gather valuable feedback. We are actively engaged in developing new functionalities to enhance the component's capabilities and meet evolving user requirements.

  • Drag & drop

    Nothing surpasses the user experience provided by a seamless drag-and-drop feature.

  • I18n

    It’s prepared for multiple translations, although currently, English takes priority.

  • Documentation

    The component API is self-explanatory, but we know how important the documentation is.

Quick start

Discover the seamless ease of utilizing and integrating the React scheduler component.

      import { Scheduler } from ""

export default function App() {
    const [isLoading, setIsLoading] = useState(false);

    useEffect(() => {

      // fetching data
    }, []);

    return (
        // decide when to show loading indicators
        // your data
        // callback when user click's on one of the grid's tile
        onItemClick={(clickedItem) => console.log(clickedItem)}
        // filter function that let's you handling filtering on your end
        onFilterData={() => {
          // filter your data
        // callback when user clicks clearing filter button
        onClearFilterData={() => {
          // clear all your filters
            change filter button state based on your filters
            < 0 - filter button invisible,
            0 - filter button visible, no filter applied, clear filters button invisible,
            > 0 - filter button visible, filters applied (clear filters button will be visible)
          filterButtonState: 0,
          // decide start zoom variant (0 - weeks, 1 - days)
          zoom: 0,
          // select language for scheduler
          lang: "en",
          // decide how many resources show per one page
          maxRecordsPerPage: 20,

Open source react component for resources.