react-calendar-full
Version:
A full-featured React calendar component with event scheduling and monthly, weekly, and daily views.
27 lines (26 loc) • 1.79 kB
JavaScript
import React, { useState } from 'react';
import { areDatesEqual, daysOfWeekShort, formatDateToYYYYMMDD, } from '../utils/date';
import { minutesSinceMidnightToHHmm, roundToNearest15 } from '../utils/time';
import CalendarEventsForDate from './calendar-events-for-date';
import EventModal from './event-modal';
const DayColumn = ({ date, dayStartTime, dayEndTime, eventStore }) => {
const [modalEvent, setModalEvent] = useState(null);
const numberOfHoursBetweenDayStartEnd = dayEndTime - dayStartTime;
return (React.createElement("div", { className: "d-flex flex-column date-col col day-col" },
React.createElement("div", { className: 'day-header' +
(areDatesEqual(date, new Date()) ? ' bg-dark-subtle' : '') },
React.createElement("strong", null, date.getDate()),
" ",
daysOfWeekShort[date.getDay()]),
React.createElement("div", { className: "event-col border", style: { height: `${60 * numberOfHoursBetweenDayStartEnd}px` }, onClick: (e) => {
setModalEvent({
date: formatDateToYYYYMMDD(date),
description: '',
startTime: minutesSinceMidnightToHHmm(roundToNearest15(dayStartTime * 60 + e.nativeEvent.offsetY)),
endTime: minutesSinceMidnightToHHmm(roundToNearest15(dayStartTime * 60 + e.nativeEvent.offsetY + 60)),
});
} },
React.createElement(CalendarEventsForDate, { dayStartTime: dayStartTime, events: eventStore.eventsForDate(date), onClick: (event) => setModalEvent(event) })),
React.createElement(EventModal, { date: date, onClose: () => setModalEvent(null), event: modalEvent, eventStore: eventStore, dayStartTime: dayStartTime })));
};
export default DayColumn;