react-calendar-full/dist/esm/views/month-view.js

A full-featured React calendar component with event scheduling and monthly, weekly, and daily views.

import React from 'react';
import { areDatesEqual } from '../utils/date';
const MonthView = ({ activeDate, eventStore, onDayClick }) => {
    const getDaysInMonth = (date) => {
        return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
    };
    const firstDayOfMonth = new Date(activeDate.getFullYear(), activeDate.getMonth(), 1).getDay();
    const daysInMonth = getDaysInMonth(activeDate);
    const totalCells = Math.ceil((daysInMonth + firstDayOfMonth) / 7) * 7;
    return (React.createElement("div", { className: "container" },
        React.createElement("div", { className: "calendar-month-view" },
            React.createElement("div", { className: "weekdays-row" }, ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => (React.createElement("div", { className: "day-header", key: day }, day)))),
            Array.from({ length: totalCells }).map((_, index) => {
                const day = index + 1 - firstDayOfMonth;
                const date = new Date(activeDate.getFullYear(), activeDate.getMonth(), day);
                const isWithinMonth = day > 0 && day <= daysInMonth;
                const eventCount = isWithinMonth
                    ? eventStore.eventsForDate(date).length
                    : 0;
                return (React.createElement("div", { className: `calendar-day ${isWithinMonth ? 'active' : 'inactive'}`, key: index, onClick: () => onDayClick(date) },
                    React.createElement("div", { className: areDatesEqual(date, new Date()) ? 'fw-bold' : '' }, isWithinMonth ? day : ''),
                    eventCount > 0 && (React.createElement("div", { className: "badge bg-primary" },
                        eventCount,
                        " Event",
                        eventCount > 1 ? 's' : ''))));
            }))));
};
export default MonthView;