Calendar
CoreUI PRO hexagon
Our Admin Panel isn’t just a mix of third-party components. It’s the only Bootstrap dashboard built on a professional, enterprise-grade UI Components Library. This component is part of this library, and we present only the basic usage of it here. To explore extended examples, detailed API documentation, and customization options, refer to our docs.
Explore Documentation
CalendarDays

Select specific days using the Bootstrap Calendar component. The example below shows basic usage.

CalendarWeeks

Set the data-coreui-selection-type to week to enable selection of entire week. You can also use data-coreui-show-week-number="true" to show week numbers.

CalendarMonths

Set the data-coreui-selection-type to month to enable selection of entire months.

CalendarYears

Set the data-coreui-selection-type to year to enable years range selection.

CalendarMultiple calendar panels

Display multiple calendar panels side by side by setting the data-coreui-calendars attribute. This can be useful for selecting ranges or comparing dates across different months.

CalendarRange selection

Enable range selection by adding data-coreui-range="true" to allow users to pick a start and end date. This example demonstrates how to configure the Bootstrap 5 Calendar component to handle date ranges.