@syncfusion/react-calendars/src/calendar/calendar-cell.js

A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.

import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from 'react';
/**
 * The CalendarCell component is internally used for rendering the items in the current view.
 * It can also be used as a custom cell of the Calendar.
 */
export const CalendarCell = forwardRef((props, ref) => {
    const { className, isDisabled = false, isOutOfRange = false, isToday = false, isSelected = false, isFocused = false, isWeekend = false, date, children, onClick, id, title } = props;
    const baseClasses = [
        'sf-cell',
        className || '',
        isOutOfRange ? 'sf-other-month' : '',
        isWeekend ? 'sf-weekend' : '',
        (isDisabled) ? 'sf-disabled sf-overlay' : '',
        isToday ? 'sf-today' : '',
        (isToday && isFocused) ? 'sf-focused-date' : '',
        (isFocused) ? 'sf-focused-date' : '',
        isSelected ? 'sf-selected' : ''
    ].filter(Boolean);
    const handleClick = (e) => {
        if (!isDisabled && onClick) {
            onClick(e, date);
        }
    };
    return (_jsx("td", { id: id, ref: ref, className: baseClasses.join(' '), onClick: handleClick, "aria-selected": isSelected, "aria-disabled": isDisabled, title: title, "data-date": date ? date.getTime().toString() : '', children: children }));
});
export default CalendarCell;