react-calendar-full
Version:
A full-featured React calendar component with event scheduling and monthly, weekly, and daily views.
84 lines (83 loc) • 4.49 kB
JavaScript
import React, { useEffect, useState } from 'react';
import { DayView, MonthView, WeekView } from './views';
import { getDateInfo, moveDate, moveMonth } from './utils/date';
import CalendarEventStore from './calendar-event-store';
import 'bootstrap/dist/css/bootstrap.css';
import './calendar.css';
const Calendar = ({ activeDate, dayStartTime, dayEndTime, eventStore, }) => {
const [view, setView] = useState('WEEK');
const [activeDateState, setActiveDateState] = useState(activeDate || new Date());
const [, setEventStoreUpdateNumber] = useState(0); // TO DO: Refactor - A not-so-great way to force re-render on event store update.
useEffect(() => {
eventStore.onAdd(() => setEventStoreUpdateNumber((prev) => prev + 1));
eventStore.onUpdate(() => setEventStoreUpdateNumber((prev) => prev + 1));
eventStore.onDelete(() => setEventStoreUpdateNumber((prev) => prev + 1));
}, [eventStore]);
useEffect(() => {
setActiveDateState(activeDate || new Date());
}, [activeDate]);
let viewEL;
switch (view) {
case 'DAY':
viewEL = (React.createElement(DayView, { activeDate: activeDateState, dayStartTime: dayStartTime, dayEndTime: dayEndTime, eventStore: eventStore }));
break;
case 'WEEK':
viewEL = (React.createElement(WeekView, { activeDate: activeDateState, dayStartTime: dayStartTime, dayEndTime: dayEndTime, eventStore: eventStore }));
break;
case 'MONTH':
viewEL = (React.createElement(MonthView, { activeDate: activeDateState, eventStore: eventStore, onDayClick: (date) => {
setActiveDateState(date);
setView('DAY');
} }));
break;
}
const moveDateLeft = () => {
switch (view) {
case 'DAY':
setActiveDateState(moveDate(activeDateState, -1));
break;
case 'WEEK':
setActiveDateState(moveDate(activeDateState, -7));
break;
case 'MONTH':
setActiveDateState(moveMonth(activeDateState, -1));
break;
}
};
const moveDateRight = () => {
switch (view) {
case 'DAY':
setActiveDateState(moveDate(activeDateState, 1));
break;
case 'WEEK':
setActiveDateState(moveDate(activeDateState, 7));
break;
case 'MONTH':
setActiveDateState(moveMonth(activeDateState, 1));
break;
}
};
const dateInfo = getDateInfo(activeDateState);
return (React.createElement("div", { className: "calendar" },
React.createElement("div", { className: "d-flex justify-content-between m-4" },
React.createElement("div", { className: "fs-4" },
React.createElement("span", { className: 'd-none d-sm-block' },
React.createElement("strong", null, dateInfo.month),
" ",
dateInfo.year),
React.createElement("span", { className: 'd-block d-sm-none' },
React.createElement("strong", null, dateInfo.month.substring(0, 3)),
" ",
dateInfo.year.toString().substring(2, 4))),
React.createElement("div", { className: "btn-group btn-group-sm", role: "group" },
React.createElement("button", { className: 'btn btn-outline-secondary' + (view === 'DAY' ? ' active' : ''), onClick: () => setView('DAY') }, "Day"),
React.createElement("button", { className: 'btn btn-outline-secondary' + (view === 'WEEK' ? ' active' : ''), onClick: () => setView('WEEK') }, "Week"),
React.createElement("button", { className: 'btn btn-outline-secondary' + (view === 'MONTH' ? ' active' : ''), onClick: () => setView('MONTH') }, "Month")),
React.createElement("div", { className: "btn-group btn-group-sm", role: "group" },
React.createElement("button", { className: "btn btn-outline-secondary", onClick: moveDateLeft }, "<"),
React.createElement("button", { className: "btn btn-outline-secondary", onClick: () => setActiveDateState(new Date()) }, "Today"),
React.createElement("button", { className: "btn btn-outline-secondary", onClick: moveDateRight }, ">"))),
viewEL));
};
export { CalendarEventStore };
export default Calendar;