DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Scheduler - Limit the Appointment Count per Cell

This demo shows how to use the maxAppointmentsPerCell property to limit the number of full-sized appointments displayed per cell.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

This property accepts one of the following values. To see how they affect the appointments, switch between Scheduler views.

  • "auto"
    Appointments are narrowed down to a predefined size value that depends on the view type. Appointments that do not fit into the cell are hidden, and the cell displays an overflow indicator. Users can click the indicator to display the hidden appointments in a tooltip.

  • "unlimited"
    Appointments are narrowed down without a limit to be fit into a cell.

  • Number
    The number specifies the maximum number of appointments allowed in a single cell. Appointments that exceed this number are hidden, and the cell displays an overflow indicator. Users can click the indicator to display the hidden appointments in a tooltip.