jwf-year-calendar
Version:
A full react version of Paul-DS' js-year-calendar, https://github.com/year-calendar/js-year-calendar. Built with support from JWF Process Solutions Ltd.
101 lines (100 loc) • 5.69 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { isAfter, isBefore, isBetweenDates, isEqual, relevantEvents } from '../../lib/dates';
import { isTailwindColor } from '../../lib/utils';
const DayNumbered = (props) => {
const thisDate = {
day: props.day,
month: props.month,
year: props.year,
};
const borderClass = () => {
if (props.startDate && isEqual(thisDate, props.startDate) && isAfter(props.endDate, props.startDate)) {
return 'rounded-l';
}
if (props.startDate && isEqual(thisDate, props.endDate) && isBefore(props.endDate, props.startDate)) {
return 'rounded-l';
}
if (props.startDate && isEqual(thisDate, props.endDate) && isAfter(props.endDate, props.startDate)) {
return 'rounded-r';
}
if (props.startDate && isEqual(thisDate, props.startDate) && isBefore(props.endDate, props.startDate)) {
return 'rounded-r';
}
if (props.startDate && !isEqual(thisDate, props.startDate) && !isEqual(thisDate, props.endDate)) {
return '';
}
return 'hover:rounded';
};
const getBookedDiv = (e, size) => {
if (isTailwindColor(e.color)) {
return _jsx("div", { className: `${e.color} ${size === 1 ? 'h-[1px]' : 'h-[2px]'}` });
}
return _jsx("div", { className: `${size === 1 ? 'h-[1px]' : 'h-[2px]'}`, style: { backgroundColor: e.color } });
};
const eventDivs = () => {
const e = relevantEvents(thisDate, props.dataSource);
const n = e.length;
if (n === 1) {
return getBookedDiv(e[0], 2);
}
if (n === 2) {
return (_jsxs(_Fragment, { children: [getBookedDiv(e[0], 1), getBookedDiv(e[1], 1)] }));
}
if (n === 3) {
return (_jsxs(_Fragment, { children: [getBookedDiv(e[0], 1), getBookedDiv(e[1], 1), getBookedDiv(e[2], 1)] }));
}
if (n > 3) {
return (_jsx(_Fragment, { children: _jsx("div", { className: 'bg-black h-[2px]', children: " " }) }));
}
return false;
};
const handleOnContext = (e) => {
e.preventDefault();
if (relevantEvents(thisDate, props.dataSource)) {
props.setContextMenu({
visible: true,
x: e.clientX,
y: e.clientY,
day: props.day,
month: props.month,
year: props.year,
});
}
};
const betweenDatesColor = () => {
return props.darkMode ? 'bg-gray-600' : 'bg-gray-300';
};
return (_jsxs(_Fragment, { children: [props.disabled && (_jsx("div", { className: `flex flex-col h-6 col-1 select-none justify-items-center pt-1 text-center text-xs mx-0`, children: props.day.toString() })), !props.disabled && (_jsxs("div", { className: `flex flex-col h-6 col-1 ${props.darkMode ? 'hover:bg-gray-600' : 'hover:bg-gray-300'} ${isBetweenDates(thisDate, props.startDate, props.endDate) ? betweenDatesColor() : ''} ${borderClass()} cursor-pointer inline-block justify-items-center pt-1 select-none text-center text-xs mx-0`, onContextMenu: e => {
e.preventDefault();
handleOnContext(e);
}, onMouseDown: () => {
props.setStartDate({ day: props.day, month: props.month, year: props.year });
props.setEndDate({ day: props.day, month: props.month, year: props.year });
}, onMouseEnter: () => {
props.setEndDate({ day: props.day, month: props.month, year: props.year });
}, children: [_jsx("div", { className: "flex-grow", children: props.day.toString() }), eventDivs()] }))] }));
};
const DayOfWeekHeading = (props) => {
return _jsx("div", { className: "col-1 cursor-default h-6 inline-block font-bold select-none text-sm", children: props.name });
};
const DayPlaceholder = () => {
return _jsx("div", { className: "col-1 h-6 inline-block text-sm" });
};
const Month = (props) => {
const daysInMonth = new Date(props.year, props.index + 1, 0).getDate();
let dayNames = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
if (props.weekStart) {
dayNames = [...dayNames.slice(props.weekStart), ...dayNames.slice(0, props.weekStart)];
}
const startDayOfMonth = new Date(props.year, props.index, 1).getDay();
const monthClasses = ' h-50 inline-block items-center justify-items-center mx-11 text-center w-44';
return (_jsxs("div", { className: `${props.className} ${monthClasses}`, children: [_jsx("div", { className: "cursor-default font-bold select-none", children: props.title }), _jsxs("div", { className: "grid grid-cols-7 mt-1", children: [dayNames.map((name, i) => {
return _jsx(DayOfWeekHeading, { name: name }, i);
}), Array.from({ length: (startDayOfMonth - (props.weekStart || 0) + 7) % 7 }).map((_, i) => {
return _jsx(DayPlaceholder, {}, i);
}), Array.from({ length: daysInMonth }).map((_, i) => {
const dayOfWeek = new Date(props.year, props.index, i + 1).getDay();
return (_jsx(DayNumbered, { darkMode: props.darkMode, dataSource: props.dataSource, day: i + 1, disabled: props.disabledWeekDays?.includes(dayOfWeek), endDate: props.endDate, month: props.index + 1, setContextMenu: props.setContextMenu, setEndDate: props.setEndDate, setStartDate: props.setStartDate, startDate: props.startDate, year: props.year }, i));
})] })] }));
};
export default Month;