CoreUI PRO for React v5.24.0 - Calendar & Chip Components

We are excited to announce the release of CoreUI PRO for React v5.24.0. This update brings powerful new features including enhanced Calendar component with custom cell rendering and quarter selection, new Chip and Chip Input components, plus all exclusive PRO components for building sophisticated enterprise React 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.

Angular

Bootstrap

React.js

Vue.js

How to Update

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

1. Open your project’s package.json.
2. Locate the @coreui/react-pro entry under dependencies and update the version number to 5.24.0.
3. Find the @coreui/coreui-pro entry under dependencies and update the version number to ^5.24.0.
4. Save your changes to the package.json file.
5. 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 introduces significant enhancements and new components:

• Calendar - Custom Cell Rendering: Introduced the ability to customize individual calendar cells with custom content, styling, and behavior. Perfect for event calendars, booking systems, resource scheduling, and any application requiring rich calendar visualizations.

• Calendar - Quarter Selection: Added quarter selection capability allowing users to select entire fiscal quarters (Q1-Q4) with a single interaction. Ideal for financial reporting, business analytics, and quarterly planning applications.

• Chip Component: New component for displaying compact, interactive elements representing tags, contacts, or selected items. Supports dismissible functionality, avatars, and custom styling.

• Chip Input Component: Enhanced multi-value input component allowing users to enter multiple values as chips. Perfect for tag input, email recipients, keywords, and any multi-value data entry scenario.

Calendar Component Enhancements

Custom Cell Rendering Example

import { CCalendar } from '@coreui/react-pro'

function EventCalendar() {
  const renderCell = (date: Date) => {
    const events = getEventsForDate(date)
    return (
      <div className="calendar-cell">
        <span className="date">{date.getDate()}</span>
        {events.length > 0 && (
          <span className="event-count">{events.length}</span>
        )}
      </div>
    )
  }

  return <CCalendar cellRenderer={renderCell} />
}

Quarter Selection Example

import { CCalendar } from '@coreui/react-pro'

function QuarterlyReport() {
  const handleQuarterSelect = (quarter: number, year: number) => {
    console.log(`Selected Q${quarter} ${year}`)
    loadQuarterlyData(quarter, year)
  }

  return (
    <CCalendar
      selectionMode="quarter"
      onQuarterSelect={handleQuarterSelect}
    />
  )
}

Chip Components

Basic Chip Usage

import { CChip } from '@coreui/react-pro'

function TagList() {
  return (
    <div>
      <CChip color="primary">React</CChip>
      <CChip color="success">TypeScript</CChip>
      <CChip color="info" dismissible>CoreUI PRO</CChip>
    </div>
  )
}

Chip Input for Tags

import { CChipInput } from '@coreui/react-pro'

function TagInput() {
  const [tags, setTags] = useState(['react', 'typescript'])

  return (
    <CChipInput
      value={tags}
      onChange={setTags}
      placeholder="Add tags..."
    />
  )
}

PRO-Exclusive Components

CoreUI PRO for React includes powerful enterprise components not available in the free version:

• Calendar: Advanced calendar with events, custom rendering, and multiple selection modes
• Date Picker: Feature-rich date picker with range selection and locale support
• Date Range Picker: Specialized component for selecting date ranges
• Time Picker: Intuitive time selection with 12/24 hour formats
• Multi Select: Advanced dropdown with multi-value selection and search
• Smart Table: Data table with built-in sorting, filtering, pagination, and selection
• Smart Pagination: Advanced pagination with customizable page size options
• Loading Button: Button with integrated loading state
• Range Slider: Interactive slider for selecting value ranges
• Rating: Star rating component with half-star support
• And more: Additional PRO components for enterprise applications

Use Cases

Calendar Enhancements

• Event Management: Display events, meetings, and appointments
• Booking Systems: Show availability and pricing
• Resource Scheduling: Visualize resource allocation
• Financial Applications: Quarter-based reporting and analysis

Chip Components

• Tag Management: Product tags, content categories
• Contact Lists: Email recipients, user selections
• Filter Display: Active filters in search interfaces
• Multi-Value Input: Keywords, labels, attributes

TypeScript Support

All new and updated components include comprehensive TypeScript definitions:

interface CCalendarProps {
  selectionMode?: 'single' | 'multiple' | 'range' | 'quarter'
  cellRenderer?: (date: Date) => React.ReactNode
  onQuarterSelect?: (quarter: number, year: number) => void
  // ... more props
}

interface CChipInputProps {
  value: string[]
  onChange: (values: string[]) => void
  placeholder?: string
  // ... more props
}

Performance and Compatibility

CoreUI PRO for React v5.24.0 maintains compatibility with:

• React: v18.0.0 and newer
• TypeScript: v4.5.0 and newer
• Modern Browsers: Chrome, Firefox, Safari, Edge (latest versions)
• Mobile Browsers: iOS Safari, Chrome Mobile

Optimizations include:

• Efficient re-rendering with React.memo
• Optimized event handlers
• Lazy loading support for large datasets
• Minimal bundle size impact

Migration Notes

This is a feature release with full backward compatibility. No breaking changes were introduced. New components and features are additive:

• Calendar enhancements are opt-in via new props
• Chip components are new additions
• Existing components remain unchanged

Why Update?

Updating to CoreUI PRO for React v5.24.0 provides:

• Advanced Calendar: Custom rendering and quarter selection
• New Components: Chip and Chip Input for modern UIs
• TypeScript: Enhanced type definitions
• Enterprise Features: Exclusive PRO components
• Performance: Optimized rendering and event handling
• Support: Priority support for PRO customers
• Commercial License: Suitable for commercial projects

Getting Started

1. Update to CoreUI PRO for React v5.24.0
2. Explore the Calendar documentation
3. Try the Chip component and Chip Input
4. Check out live examples and code playgrounds

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