@fullcalendar/scrollgrid

What is @fullcalendar/scrollgrid?

@fullcalendar/scrollgrid is a plugin for FullCalendar that provides a scrollable grid structure. It allows for the creation of complex calendar layouts with scrollable regions, making it easier to manage large datasets and improve the user experience.

What are @fullcalendar/scrollgrid's main functionalities?

Scrollable Grid

This feature allows you to create a grid with scrollable columns and rows. You can specify the width and height of each column and row, respectively.

import { ScrollGrid } from '@fullcalendar/scrollgrid';

const scrollGrid = new ScrollGrid({
  columns: [
    { width: 'auto' },
    { width: 100 },
    { width: 200 }
  ],
  rows: [
    { height: 'auto' },
    { height: 50 },
    { height: 100 }
  ]
});

scrollGrid.render();

Customizable Headers

This feature allows you to customize the headers of the grid. You can specify the text for each header, making it easier to understand the data presented in each column.

import { ScrollGrid } from '@fullcalendar/scrollgrid';

const scrollGrid = new ScrollGrid({
  headerContent: [
    { text: 'Column 1' },
    { text: 'Column 2' },
    { text: 'Column 3' }
  ]
});

scrollGrid.render();

Fixed and Scrollable Regions

This feature allows you to create fixed and scrollable regions within the grid. You can specify the number of fixed and scrollable columns and rows, making it easier to navigate large datasets.

import { ScrollGrid } from '@fullcalendar/scrollgrid';

const scrollGrid = new ScrollGrid({
  fixedColumns: 1,
  scrollableColumns: 2,
  fixedRows: 1,
  scrollableRows: 2
});

scrollGrid.render();

Other packages similar to @fullcalendar/scrollgrid

react-virtualized

react-virtualized is a set of React components for efficiently rendering large lists and tabular data. It provides features like virtual scrolling, fixed headers, and dynamic row heights. Compared to @fullcalendar/scrollgrid, react-virtualized is more focused on performance optimization for large datasets and offers a wider range of components for different use cases.

ag-grid-react

ag-grid-react is a powerful data grid component for React applications. It offers a wide range of features, including sorting, filtering, pagination, and custom cell rendering. While @fullcalendar/scrollgrid is specialized for calendar layouts, ag-grid-react is a more general-purpose data grid solution with extensive customization options.

react-table

react-table is a lightweight and flexible library for building tables in React. It provides features like sorting, filtering, and pagination, and allows for extensive customization through hooks. Compared to @fullcalendar/scrollgrid, react-table is more focused on providing a simple and flexible API for table creation, without the specific focus on calendar layouts.

README

FullCalendar ScrollGrid Plugin

Tabular data chunked into scrollable panes

You cannot use this package directly. It is a dependency of other plugins.