CoreUI PRO v5.24.0 - Calendar Enhancements

Tuesday, March 3, 2026

We are excited to announce the release of CoreUI PRO v5.24.0 for Bootstrap. This update introduces powerful enhancements to the Calendar component, including custom cell rendering capabilities and quarter selection functionality, providing developers with greater flexibility for building sophisticated calendar-based interfaces in enterprise applications.

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

How to Update

To update your project to CoreUI PRO v5.24.0, follow these steps:

Open your project’s package.json.
Locate the @coreui/coreui-pro entry under dependencies and update the version number to 5.24.0.
Save your changes to the package.json file.
In your project’s root directory, run the update command appropriate for your package manager:
- For npm users, execute npm install.
- For yarn users, execute yarn install.
- For pnpm users, execute pnpm install.

What’s New

Features

This release brings significant enhancements to calendar functionality:

Calendar - Custom Cell Rendering: Introduced the ability to customize the rendering of individual calendar cells. This powerful feature allows you to add custom content, styling, and behavior to calendar cells, enabling use cases such as displaying event indicators, availability status, pricing information, or any custom data visualization within calendar cells. Perfect for booking systems, event management applications, and resource scheduling interfaces.
Calendar - Quarter Selection: Added quarter selection capability to the Calendar component. Users can now select entire quarters (Q1, Q2, Q3, Q4) with a single interaction, streamlining workflows for financial reporting, business analytics, and quarterly planning applications. This feature complements existing month and year selection modes, providing comprehensive date range selection options.

Use Cases and Benefits

Custom Calendar Cell Rendering

The custom cell rendering feature is particularly valuable for:

Event Calendars: Display event indicators, multiple events per day, or event details directly in calendar cells
Booking Systems: Show availability status, pricing tiers, or booking constraints for hotels, rentals, or appointments
Resource Scheduling: Visualize resource utilization, capacity, or allocation across calendar days
Project Planning: Display task status, milestones, or deadlines within calendar cells
Financial Applications: Show trading days, market status, or financial indicators
Custom Styling: Apply conditional formatting based on business rules, holidays, or special dates

Quarter Selection Benefits

Quarter selection enhances productivity in:

Financial Reporting: Quick selection of fiscal quarters for generating quarterly reports
Business Analytics: Simplified quarter-over-quarter comparison and analysis
Planning Applications: Streamlined quarterly goal setting and planning workflows
Data Visualization: Easy filtering of quarterly data in dashboards and charts
Compliance: Simplified selection of reporting periods for regulatory requirements

Developer Experience

Both features are designed with developer productivity in mind:

Flexible API: Simple, intuitive API for customizing cell rendering
Event Handling: Comprehensive event callbacks for user interactions
Styling Options: Full control over cell appearance through CSS classes and inline styles
Data Integration: Easy integration with external data sources and APIs
Performance: Optimized rendering for large datasets and complex customizations
Documentation: Complete documentation with live examples and code snippets

Implementation Examples

Custom Cell Rendering

// Example: Display event indicators in calendar cells
const calendar = new coreui.Calendar(element, {
  cellRenderer: function(date, cellElement) {
    const events = getEventsForDate(date);
    if (events.length > 0) {
      const indicator = document.createElement('span');
      indicator.className = 'event-indicator';
      indicator.textContent = events.length;
      cellElement.appendChild(indicator);
    }
    return cellElement;
  }
});

Quarter Selection

// Example: Enable quarter selection mode
const calendar = new coreui.Calendar(element, {
  selectionMode: 'quarter',
  onQuarterSelect: function(quarter, year) {
    console.log(`Selected Q${quarter} ${year}`);
    // Load quarterly data or update UI
  }
});

Getting Started

To start using the enhanced Calendar component:

Update to CoreUI PRO v5.24.0 using the instructions above
Visit the Calendar component documentation for detailed API reference
Explore implementation examples and best practices
Check out live demos showcasing custom cell rendering and quarter selection

Performance and Compatibility

CoreUI PRO v5.24.0 maintains full compatibility with Bootstrap 5 and modern browsers:

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
Mobile browsers (iOS Safari, Chrome Mobile)

The enhanced calendar features are optimized for performance:

Efficient rendering with minimal DOM manipulation
Support for large date ranges without performance degradation
Lazy loading support for dynamic data
Optimized event handling for responsive interactions

Migration Notes

This is a feature release with full backward compatibility. Existing calendar implementations will continue to work without any code changes. The new features are opt-in and can be adopted incrementally:

Custom Cell Rendering: Optional feature activated via the cellRenderer option
Quarter Selection: Optional selection mode, default behavior remains unchanged

Why Update?

Updating to CoreUI PRO v5.24.0 provides:

Enhanced Flexibility: Custom cell rendering for unique calendar visualizations
Improved Productivity: Quarter selection for faster date range selection
Enterprise Features: Professional calendar capabilities for business applications
Better UX: More intuitive calendar interactions for end users
Future-Ready: Built with modern web standards and best practices

For a comprehensive overview of all changes, enhancements, and updates introduced in this release, please refer to the full changelog on GitHub.