@kadconsulting/dry
Version:
KAD Reusable Component Library
77 lines • 4.58 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import multiMonthPlugin from '@fullcalendar/multimonth';
import listPlugin from '@fullcalendar/list';
import { Modal } from '../index';
import useWindowSize from '../../hooks/useWindowSize';
// styles
import './Calendar.scss';
import './CalendarOverrides.scss';
const CalendarComponent = ({ events, onEventClick, modalContent, isOpen, closeModal, height, slotMinTime, slotMaxTime, mobileContent, selectable, handleSelectSlot, }) => {
const { width } = useWindowSize();
let right = 'multiMonthYear dayGridMonth timeGridWeek timeGridDay';
let initialView = 'dayGridMonth';
const displayMobileCalendar = () => {
// TODO-p3: This is a not ideal because we have to use document selectors, we should rebuild this from scratch or need to find a better way to do this.
return (_jsx(FullCalendar, { height: height, plugins: [listPlugin], initialView: 'listMonth', headerToolbar: {
left: 'prev next today',
center: 'title',
right: '',
}, dayMaxEvents: true, events: events, eventClick: onEventClick, slotMinTime: slotMinTime || '08:00:00', slotMaxTime: slotMaxTime || '20:00:00', eventContent: (arg) => {
const { ageRange, bookingId, coachFirstName, coachLastName, color, date, description, location, price, programId, title, type, } = arg?.event?.extendedProps?.extraData;
let test = _jsx("div", { children: title });
if (mobileContent) {
test = mobileContent(arg?.event?.extendedProps?.extraData);
}
return test;
}, eventDidMount: (info) => {
const { ageRange, bookingId, coachFirstName, coachLastName, color, date, description, location, price, programId, title, type, } = info?.event?.extendedProps?.extraData;
// Change color of dot marker
const dotEl = info.el.getElementsByClassName('fc-list-event-graphic')[0];
const time = info.el.getElementsByClassName('fc-list-event-time')[0];
if (dotEl) {
dotEl.style.display = 'none';
}
if (time) {
time.style.display = 'none';
}
// }
} }));
};
return (_jsxs("div", { className: 'calendarComponent', children: [width > 1000 && (_jsx(FullCalendar, { height: height, plugins: [
multiMonthPlugin,
dayGridPlugin,
timeGridPlugin,
interactionPlugin,
listPlugin,
], selectable: selectable, initialView: initialView, headerToolbar: {
left: 'prev next today',
center: 'title',
right,
}, dayHeaderContent: (arg) => {
return _jsx("span", { children: arg.text });
}, dayHeaderClassNames: 'dry-calendar__day-header', viewClassNames: 'dry-calendar', businessHours: false, nowIndicator: true,
// businessHours={
// {
// days of week. an array of zero-based day of week integers (0=Sunday)
// Add days of the week that are available in api settings
// daysOfWeek: [1, 2, 3, 4, 5], // Monday - Thursday
// startTime: '08:00', // a start time (10am in this example)
// endTime: '20:00', // an end time (6pm in this example)
// }
// }
// dateClick={(info) => {
// alert('Clicked on: ' + info.dateStr);
// alert(
// 'Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY
// );
// alert('Current view: ' + info.view.type);
// info.dayEl.style.backgroundColor = 'red';
// }}
dayMaxEvents: true, events: events, eventClick: onEventClick, slotMinTime: slotMinTime || '08:00:00', slotMaxTime: slotMaxTime || '20:00:00', select: handleSelectSlot })), width < 1000 && displayMobileCalendar(), _jsx(Modal, { isOpen: isOpen, onClose: closeModal, children: modalContent })] }));
};
export default CalendarComponent;
//# sourceMappingURL=Calendar.js.map