react-calendar-full
Version:
A full-featured React calendar component with event scheduling and monthly, weekly, and daily views.
34 lines (33 loc) • 2.16 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const date_1 = require("../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_1.default.createElement("div", { className: "container" },
react_1.default.createElement("div", { className: "calendar-month-view" },
react_1.default.createElement("div", { className: "weekdays-row" }, ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => (react_1.default.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_1.default.createElement("div", { className: `calendar-day ${isWithinMonth ? 'active' : 'inactive'}`, key: index, onClick: () => onDayClick(date) },
react_1.default.createElement("div", { className: (0, date_1.areDatesEqual)(date, new Date()) ? 'fw-bold' : '' }, isWithinMonth ? day : ''),
eventCount > 0 && (react_1.default.createElement("div", { className: "badge bg-primary" },
eventCount,
" Event",
eventCount > 1 ? 's' : ''))));
}))));
};
exports.default = MonthView;