ts-react-scheduler
Version:
Scheduler component based on TypeScript and ReactJS
991 lines (970 loc) • 92.8 kB
JavaScript
import React, { useContext, useState, useEffect } from 'react';
import noop from 'lodash/noop';
import classnames from 'classnames';
import { getWeek, isEqual, isSaturday, isFriday, isThursday, isWednesday, isTuesday, isMonday, isSunday, getDaysInMonth, getYear, getMonth, getDate, lastDayOfMonth } from 'date-fns';
import Typography from '@material-ui/core/Typography';
import uuid from 'uuid';
import Button from '@material-ui/core/Button';
import ButtonGroup from '@material-ui/core/ButtonGroup';
import filter from 'lodash/filter';
import sortBy from 'lodash/sortBy';
import moment from 'moment';
import IconButton from '@material-ui/core/IconButton';
import NavIconLeft from '@material-ui/icons/ChevronLeft';
import NavIconRight from '@material-ui/icons/ChevronRight';
import Tooltip from '@material-ui/core/Tooltip';
import map from 'lodash/map';
import isEmpty from 'lodash/isEmpty';
import Alert from '@material-ui/lab/Alert';
import Dialog from '@material-ui/core/Dialog';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import TextField from '@material-ui/core/TextField';
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import FormGroup from '@material-ui/core/FormGroup';
import FormControl from '@material-ui/core/FormControl';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import { SketchPicker } from 'react-color';
var EventItem = /** @class */ (function () {
function EventItem(id, title, description, color, startYear, startMonth, startDay, startHour, startMinute, endYear, endMonth, endDay, endHour, endMinute, untilYear, untilMonth, untilDay, isLongLastingDayItem, isLongLastingWeekItem, isLongLastingMonthItem, isLongLastingYearItem) {
this.id = id;
this.title = title;
this.description = description;
this.color = color;
this.startYear = startYear;
this.startMonth = startMonth;
this.startDay = startDay;
this.startHour = startHour;
this.startMinute = startMinute;
this.endYear = endYear;
this.endMonth = endMonth;
this.endDay = endDay;
this.endHour = endHour;
this.endMinute = endMinute;
this.untilYear = untilYear;
this.untilMonth = untilMonth;
this.untilDay = untilDay;
this.isLongLastingDayItem = isLongLastingDayItem;
this.isLongLastingWeekItem = isLongLastingWeekItem;
this.isLongLastingMonthItem = isLongLastingMonthItem;
this.isLongLastingYearItem = isLongLastingYearItem;
}
return EventItem;
}());
var SchedulerContext = React.createContext({
contentHeight: 0,
dateMode: '',
dayNameSun: '',
dayNameMon: '',
dayNameTue: '',
dayNameWed: '',
dayNameThu: '',
dayNameFri: '',
dayNameSat: '',
events: [],
eventDialogTitleCreate: '',
eventDialogTitleUpdate: '',
eventDialogState: {
isOpen: false,
mode: 'update',
eventId: '',
event: new EventItem('', '', '', '', 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, false, false, false, false),
},
headerDateFormat: '',
headerTitle: '',
id: '',
labelDialogBtnCancel: '',
labelDialogBtnCreate: '',
labelDialogBtnDelete: '',
labelDialogBtnUpdate: '',
labelDialogColor: '',
labelDialogDescription: '',
labelDialogEnd: '',
labelDialogLongLasting: '',
labelDialogStart: '',
labelDialogTitle: '',
labelDialogUntil: '',
labelDialogUntilDaily: '',
labelDialogUntilWeekly: '',
labelDialogUntilMonthly: '',
labelDialogUntilYearly: '',
labelHeaderBtnDay: '',
labelHeaderBtnMonth: '',
labelHeaderBtnToday: '',
labelHeaderBtnWeek: '',
labelHeaderBtnYear: '',
monthNameJan: '',
monthNameFeb: '',
monthNameMar: '',
monthNameApr: '',
monthNameMay: '',
monthNameJun: '',
monthNameJul: '',
monthNameAug: '',
monthNameSep: '',
monthNameOct: '',
monthNameNov: '',
monthNameDec: '',
noDataText: '',
readOnly: false,
onClickBtnDay: noop,
onClickBtnMonth: noop,
onClickBtnNext: noop,
onClickBtnPrev: noop,
onClickBtnToday: noop,
onClickBtnWeek: noop,
onClickBtnYear: noop,
onCloseEventDialog: noop,
onCreateEvent: noop,
onDeleteEvent: noop,
onOpenEventDialog: noop,
onUpdateEvent: noop,
selectedYear: 0,
selectedMonth: 0,
selectedDay: 0,
setEventDialogState: noop,
setStateDateMode: noop,
setStateEvents: noop,
setStateSelectedDay: noop,
setStateSelectedMonth: noop,
setStateSelectedYear: noop,
showHeader: true,
showHeaderAction: true,
showHeaderBtnGroup: true,
showHeaderBtnGroupDay: true,
showHeaderBtnGroupMonth: true,
showHeaderBtnGroupWeek: true,
showHeaderBtnGroupYear: true,
showHeaderDate: true,
showHeaderLongLasting: true,
showHeaderNavGroup: true,
showHeaderTitle: true,
showNoDataAlert: true,
tooltipHeaderBtnNext: '',
tooltipHeaderBtnPrev: '',
});
var HeaderTitle = function () {
var _a = useContext(SchedulerContext), headerTitle = _a.headerTitle, showHeaderTitle = _a.showHeaderTitle;
var inlineStyle = {
display: showHeaderTitle ? 'flex' : /* istanbul ignore next */ 'none',
};
return (React.createElement("div", { className: "header-title-component", style: inlineStyle },
React.createElement(Typography, { variant: "body1" }, headerTitle)));
};
/* eslint-disable require-jsdoc */
function getLongScaledEventsForDay(events, selectedYear, selectedMonth, selectedDay) {
var selectedDate = new Date(selectedYear, selectedMonth, selectedDay);
return sortBy(filter(events, function (event) {
var startDate = new Date(event.startYear, event.startMonth, event.startDay);
var untilDate = new Date(event.untilYear, event.untilMonth, event.untilDay);
return event.isLongLastingDayItem && selectedDate < untilDate && startDate <= selectedDate;
}), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
}
function getLongScaledEventsForWeek(events, selectedYear, selectedMonth, selectedDay) {
var selectedDate = new Date(selectedYear, selectedMonth, selectedDay);
return sortBy(filter(events, function (event) {
var startDate = new Date(event.startYear, event.startMonth, event.startDay);
var untilDate = new Date(event.untilYear, event.untilMonth, event.untilDay);
return event.isLongLastingWeekItem && selectedDate < untilDate && getWeek(selectedDate) === getWeek(startDate);
}), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
}
function getLongScaledEventsForMonth(events, selectedYear, selectedMonth, selectedDay) {
var selectedDate = new Date(selectedYear, selectedMonth, selectedDay);
return sortBy(filter(events, function (event) {
var startDate = new Date(event.startYear, event.startMonth, event.startDay);
var untilDate = new Date(event.untilYear, event.untilMonth, event.untilDay);
return (event.isLongLastingMonthItem &&
selectedDate < untilDate &&
startDate <= selectedDate &&
event.startMonth <= selectedMonth);
}), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
}
function getLongScaledEventsForYear(events, selectedYear, selectedMonth, selectedDay) {
var selectedDate = new Date(selectedYear, selectedMonth, selectedDay);
return sortBy(filter(events, function (event) {
var untilDate = new Date(event.untilYear, event.untilMonth, event.untilDay);
return event.isLongLastingYearItem && selectedDate < untilDate && event.startYear <= selectedYear;
}), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
}
function getEventsForDay(selectedYear, selectedMonth, selectedDay, events) {
return sortBy(filter(events, function (event) {
var selectedDate = new Date(selectedYear, selectedMonth, selectedDay);
var eventStartDate = new Date(event.startYear, event.startMonth, event.startDay);
return isEqual(selectedDate, eventStartDate);
}), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
}
function getEventsForWeek(selectedYear, selectedMonth, selectedDay, events) {
var currentWeek = getWeek(new Date(selectedYear, selectedMonth, selectedDay));
return sortBy(filter(events, function (event) { return getWeek(new Date(event.startYear, event.startMonth, event.startDay)) === currentWeek; }), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
}
function getEventsForMonth(selectedYear, selectedMonth, events) {
return sortBy(filter(events, function (event) { return event.startYear === selectedYear && event.startMonth === selectedMonth; }), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
}
function getEventsForYear(selectedYear, events) {
return sortBy(filter(events, function (event) { return event.startYear === selectedYear; }), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
}
function getEventById(eventId, events) {
return filter(events, function (event) { return event.id === eventId; })[0];
}
function getEventsForDayName(events, dayName) {
switch (dayName) {
case 'sunday':
return sortBy(filter(events, function (event) {
return isSunday(new Date(event.startYear, event.startMonth, event.startDay));
}), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
case 'monday':
return sortBy(filter(events, function (event) { return isMonday(new Date(event.startYear, event.startMonth, event.startDay)); }), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
case 'tuesday':
return sortBy(filter(events, function (event) { return isTuesday(new Date(event.startYear, event.startMonth, event.startDay)); }), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
case 'wednesday':
return sortBy(filter(events, function (event) { return isWednesday(new Date(event.startYear, event.startMonth, event.startDay)); }), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
case 'thursday':
return sortBy(filter(events, function (event) { return isThursday(new Date(event.startYear, event.startMonth, event.startDay)); }), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
case 'friday':
return sortBy(filter(events, function (event) { return isFriday(new Date(event.startYear, event.startMonth, event.startDay)); }), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
case 'saturday':
return sortBy(filter(events, function (event) { return isSaturday(new Date(event.startYear, event.startMonth, event.startDay)); }), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
default:
return [];
}
}
function getEventsForSlot(eventsForDay, start, end) {
return sortBy(filter(eventsForDay, function (event) {
return start <= event.startHour && event.startHour < end;
}), 'startYear', 'startMonth', 'startDay', 'startHour', 'startMinute');
}
var HeaderActionBtnGroup = function () {
var _a = useContext(SchedulerContext), dateMode = _a.dateMode, events = _a.events, id = _a.id, labelHeaderBtnDay = _a.labelHeaderBtnDay, labelHeaderBtnMonth = _a.labelHeaderBtnMonth, labelHeaderBtnWeek = _a.labelHeaderBtnWeek, labelHeaderBtnYear = _a.labelHeaderBtnYear, onClickBtnDay = _a.onClickBtnDay, onClickBtnWeek = _a.onClickBtnWeek, onClickBtnMonth = _a.onClickBtnMonth, onClickBtnYear = _a.onClickBtnYear, selectedYear = _a.selectedYear, selectedMonth = _a.selectedMonth, selectedDay = _a.selectedDay, setStateDateMode = _a.setStateDateMode, showHeaderBtnGroup = _a.showHeaderBtnGroup, showHeaderBtnGroupDay = _a.showHeaderBtnGroupDay, showHeaderBtnGroupMonth = _a.showHeaderBtnGroupMonth, showHeaderBtnGroupWeek = _a.showHeaderBtnGroupWeek, showHeaderBtnGroupYear = _a.showHeaderBtnGroupYear;
var inlineStyle = {
display: showHeaderBtnGroup ? 'flex' : /* istanbul ignore next */ 'none',
};
var handleClickBtnDay = function () {
var eventsForDay = getEventsForDay(selectedYear, selectedMonth, selectedDay, events);
setStateDateMode('day');
onClickBtnDay({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
eventsForDay: eventsForDay,
});
};
var handleClickBtnMonth = function () {
var eventsForWeek = getEventsForWeek(selectedYear, selectedMonth, selectedDay, events);
setStateDateMode('month');
onClickBtnWeek({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
eventsForWeek: eventsForWeek,
week: getWeek(new Date(selectedYear, selectedMonth, selectedDay)),
});
};
var handleClickBtnWeek = function () {
setStateDateMode('week');
onClickBtnMonth({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
eventsForMonth: getEventsForMonth(selectedYear, selectedMonth, events),
});
};
var handleClickBtnYear = function () {
setStateDateMode('year');
onClickBtnYear({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
eventsForYear: getEventsForYear(selectedYear, events),
});
};
var renderBtnGroupItems = function () {
var buttons = [];
/* istanbul ignore else */
if (showHeaderBtnGroupDay) {
buttons.push(React.createElement(Button, { key: "btn-group-item-" + uuid.v4(), className: "header-btn-day", id: id + "_headerBtnDay", size: "small", variant: dateMode === 'day' ? 'contained' : /* istanbul ignore next */ 'outlined', onClick: handleClickBtnDay }, labelHeaderBtnDay));
}
/* istanbul ignore else */
if (showHeaderBtnGroupWeek) {
buttons.push(React.createElement(Button, { key: "btn-group-item-" + uuid.v4(), className: "header-btn-week", id: id + "_headerBtnWeek", size: "small", variant: dateMode === 'week' ? /* istanbul ignore next */ 'contained' : 'outlined', onClick: handleClickBtnWeek }, labelHeaderBtnWeek));
}
/* istanbul ignore else */
if (showHeaderBtnGroupMonth) {
buttons.push(React.createElement(Button, { key: "btn-group-item-" + uuid.v4(), className: "header-btn-month", id: id + "_headerBtnMonth", size: "small", variant: dateMode === 'month' ? /* istanbul ignore next */ 'contained' : 'outlined', onClick: handleClickBtnMonth }, labelHeaderBtnMonth));
}
/* istanbul ignore else */
if (showHeaderBtnGroupYear) {
buttons.push(React.createElement(Button, { key: "btn-group-item-" + uuid.v4(), className: "header-btn-year", id: id + "_headerBtnYear", size: "small", variant: dateMode === 'year' ? /* istanbul ignore next */ 'contained' : 'outlined', onClick: handleClickBtnYear }, labelHeaderBtnYear));
}
return buttons;
};
return (React.createElement("div", { className: "ts-react-scheduler-header-action-btn-group-component", style: inlineStyle },
React.createElement(ButtonGroup, { color: "primary", "aria-label": "outlined primary button group" }, renderBtnGroupItems())));
};
/* eslint-disable require-jsdoc */
function formatSelectedDate(selectedYear, selectedMonth, selectedDay, headerDateFormat) {
return moment(new Date(selectedYear, selectedMonth, selectedDay)).format(headerDateFormat);
}
function mapMonthNames(selectedMonth, monthNameJan, monthNameFeb, monthNameMar, monthNameApr, monthNameMay, monthNameJun, monthNameJul, monthNameAug, monthNameSep, monthNameOct, monthNameNov, monthNameDec) {
var monthName = '';
/* istanbul ignore next */
switch (selectedMonth) {
case 0:
monthName = monthNameJan;
break;
case 1:
monthName = monthNameFeb;
break;
case 2:
monthName = monthNameMar;
break;
case 3:
monthName = monthNameApr;
break;
case 4:
monthName = monthNameMay;
break;
case 5:
monthName = monthNameJun;
break;
case 6:
monthName = monthNameJul;
break;
case 7:
monthName = monthNameAug;
break;
case 8:
monthName = monthNameSep;
break;
case 9:
monthName = monthNameOct;
break;
case 10:
monthName = monthNameNov;
break;
case 11:
monthName = monthNameDec;
break;
}
return monthName;
}
function mapDayNames(selectedDate, dayNameSun, dayNameMon, dayNameTue, dayNameWed, dayNameThu, dayNameFri, dayNameSat) {
var dayName = dayNameSun;
if (isSunday(selectedDate)) {
dayName = dayNameSun;
}
else if (isMonday(selectedDate)) {
dayName = dayNameMon;
}
else if (isTuesday(selectedDate)) {
dayName = dayNameTue;
}
else if (isWednesday(selectedDate)) {
dayName = dayNameWed;
}
else if (isThursday(selectedDate)) {
dayName = dayNameThu;
}
else if (isFriday(selectedDate)) {
dayName = dayNameFri;
}
else if (isSaturday(selectedDate)) {
dayName = dayNameSat;
}
else {
dayName = '';
}
return dayName;
}
function mapEventDialogDateTimeInput(input) {
return {
year: Number(input.substring(0, 4)),
month: Number(input.substring(5, 7)) - 1,
day: Number(input.substring(8, 10)),
hour: Number(input.substring(11, 13)),
minute: Number(input.substring(14, 16)),
};
}
function mapEventDialogDateInput(input) {
return {
year: Number(input.substring(0, 4)),
month: Number(input.substring(5, 7)) - 1,
day: Number(input.substring(8, 10)),
};
}
var HeaderActionDate = function () {
var _a = useContext(SchedulerContext), dateMode = _a.dateMode, headerDateFormat = _a.headerDateFormat, labelHeaderBtnWeek = _a.labelHeaderBtnWeek, monthNameJan = _a.monthNameJan, monthNameFeb = _a.monthNameFeb, monthNameMar = _a.monthNameMar, monthNameApr = _a.monthNameApr, monthNameMay = _a.monthNameMay, monthNameJun = _a.monthNameJun, monthNameJul = _a.monthNameJul, monthNameAug = _a.monthNameAug, monthNameSep = _a.monthNameSep, monthNameOct = _a.monthNameOct, monthNameNov = _a.monthNameNov, monthNameDec = _a.monthNameDec, selectedYear = _a.selectedYear, selectedMonth = _a.selectedMonth, selectedDay = _a.selectedDay, showHeaderDate = _a.showHeaderDate;
var inlineStyle = {
display: showHeaderDate ? 'flex' : /* istanbul ignore next */ 'none',
};
var renderDate = function () {
var dateToRender = '';
var currentWeek = getWeek(new Date(selectedYear, selectedMonth, selectedDay));
/* istanbul ignore next */
switch (dateMode) {
case 'day':
dateToRender = formatSelectedDate(selectedYear, selectedMonth, selectedDay, headerDateFormat);
break;
case 'week':
dateToRender = formatSelectedDate(selectedYear, selectedMonth, selectedDay, headerDateFormat) + ", " + labelHeaderBtnWeek + " " + currentWeek;
break;
case 'month':
var monthName = mapMonthNames(selectedMonth, monthNameJan, monthNameFeb, monthNameMar, monthNameApr, monthNameMay, monthNameJun, monthNameJul, monthNameAug, monthNameSep, monthNameOct, monthNameNov, monthNameDec);
dateToRender = formatSelectedDate(selectedYear, selectedMonth, selectedDay, headerDateFormat) + ", " + monthName;
break;
case 'year':
dateToRender = formatSelectedDate(selectedYear, selectedMonth, selectedDay, 'YYYY');
break;
default:
dateToRender = '';
}
return dateToRender;
};
return (React.createElement("div", { className: "ts-react-scheduler-header-action-date-component", style: inlineStyle },
React.createElement(Typography, { variant: "body1" },
" ",
renderDate())));
};
var HeaderActionNavGroup = function () {
var _a = useContext(SchedulerContext), dateMode = _a.dateMode, id = _a.id, labelHeaderBtnToday = _a.labelHeaderBtnToday, onClickBtnNext = _a.onClickBtnNext, onClickBtnPrev = _a.onClickBtnPrev, onClickBtnToday = _a.onClickBtnToday, setStateSelectedDay = _a.setStateSelectedDay, setStateSelectedMonth = _a.setStateSelectedMonth, setStateSelectedYear = _a.setStateSelectedYear, showHeaderNavGroup = _a.showHeaderNavGroup, tooltipHeaderBtnNext = _a.tooltipHeaderBtnNext, tooltipHeaderBtnPrev = _a.tooltipHeaderBtnPrev;
var _b = useContext(SchedulerContext), selectedYear = _b.selectedYear, selectedMonth = _b.selectedMonth, selectedDay = _b.selectedDay;
var inlineStyle = {
display: showHeaderNavGroup ? 'flex' : /* istanbul ignore next */ 'none',
};
var currentWeek = getWeek(new Date(selectedYear, selectedMonth, selectedDay));
var disableNavButtonLeft = dateMode === 'week' && /* istanbul ignore next */ currentWeek === 1;
var disableNavButtonRight = dateMode === 'week' && /* istanbul ignore next */ currentWeek === 52;
var daysInMonth = getDaysInMonth(new Date(selectedYear, selectedMonth));
/* istanbul ignore next */
var getDateOfWeek = function (week, year) {
var calculatedDate = new Date(year, 0, 0 + (week - 1) * 7);
currentWeek = week;
return {
year: getYear(calculatedDate),
month: getMonth(calculatedDate),
day: getDate(calculatedDate),
};
};
var handleNavLeft = function () {
/* istanbul ignore next */
switch (dateMode) {
case 'day':
if (selectedDay === 1) {
setStateSelectedMonth((selectedMonth -= 1));
setStateSelectedDay(daysInMonth);
if (selectedMonth < 0) {
setStateSelectedMonth(11);
setStateSelectedYear((selectedYear -= 1));
}
}
else {
setStateSelectedDay((selectedDay -= 1));
}
onClickBtnPrev({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
});
break;
case 'week':
var date = new Date(selectedYear, selectedMonth, selectedDay);
if (currentWeek !== 1) {
setStateSelectedYear(selectedYear);
setStateSelectedMonth(getDateOfWeek(getWeek(date) - 1, selectedYear).month);
setStateSelectedDay(getDateOfWeek(getWeek(date) - 1, selectedYear).day);
}
onClickBtnPrev({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
});
break;
case 'month':
if (selectedMonth === 0) {
setStateSelectedYear((selectedYear -= 1));
setStateSelectedMonth(11);
}
else {
setStateSelectedMonth((selectedMonth -= 1));
}
onClickBtnPrev({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
});
break;
case 'year':
setStateSelectedYear((selectedYear -= 1));
onClickBtnPrev({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
});
break;
}
};
var handleNavRight = function () {
/* istanbul ignore next */
switch (dateMode) {
case 'day':
if (selectedDay === daysInMonth) {
setStateSelectedDay(1);
if (selectedMonth !== 11) {
setStateSelectedMonth((selectedMonth += 1));
}
else {
setStateSelectedMonth(0);
setStateSelectedYear((selectedYear += 1));
}
}
else {
setStateSelectedDay((selectedDay += 1));
}
onClickBtnNext({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
});
break;
case 'week':
var date = new Date(selectedYear, selectedMonth, selectedDay);
if (currentWeek !== 52) {
setStateSelectedYear(selectedYear);
setStateSelectedMonth(getDateOfWeek(getWeek(date) + 1, selectedYear).month);
setStateSelectedDay(getDateOfWeek(getWeek(date) + 1, selectedYear).day);
}
onClickBtnNext({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
});
break;
case 'month':
if (selectedMonth === 11) {
setStateSelectedYear((selectedYear += 1));
setStateSelectedMonth(0);
}
else {
setStateSelectedMonth((selectedMonth += 1));
}
onClickBtnNext({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
});
break;
case 'year':
setStateSelectedYear((selectedYear += 1));
onClickBtnNext({
selectedYear: selectedYear,
selectedMonth: selectedMonth,
selectedDay: selectedDay,
});
break;
}
};
var handleDateNow = function () {
setStateSelectedYear(getYear(Date.now()));
setStateSelectedMonth(getMonth(Date.now()));
setStateSelectedDay(getDate(Date.now()));
onClickBtnToday({
selectedYear: getYear(Date.now()),
selectedMonth: getMonth(Date.now()),
selectedDay: getDate(Date.now()),
});
};
/* istanbul ignore if */
if (disableNavButtonLeft) {
setStateSelectedDay(1);
setStateSelectedMonth(0);
}
return (React.createElement("div", { className: "ts-react-scheduler-header-action-nav-group-component", style: inlineStyle },
React.createElement(Tooltip, { title: tooltipHeaderBtnPrev },
React.createElement("span", null,
React.createElement(IconButton, { className: "header-action-nav-left", id: id + "_headerActionNavLeft", size: "small", onClick: handleNavLeft, disabled: disableNavButtonLeft },
React.createElement(NavIconLeft, { fontSize: "small" })))),
React.createElement(Button, { className: "header-action-nav-today", id: id + "_headerActionNavToday", size: "small", color: "primary", onClick: handleDateNow }, labelHeaderBtnToday),
React.createElement(Tooltip, { title: tooltipHeaderBtnNext },
React.createElement("span", null,
React.createElement(IconButton, { className: "header-action-nav-right", id: id + "_headerActionNavRight", size: "small", onClick: handleNavRight, disabled: disableNavButtonRight },
React.createElement(NavIconRight, { fontSize: "small" }))))));
};
var HeaderAction = function () {
var showHeaderAction = useContext(SchedulerContext).showHeaderAction;
var inlineStyle = {
display: showHeaderAction ? 'flex' : /* istanbul ignore next */ 'none',
};
return (React.createElement("div", { className: "ts-react-scheduler-header-action-component", style: inlineStyle },
React.createElement(HeaderActionBtnGroup, null),
React.createElement(HeaderActionDate, null),
React.createElement(HeaderActionNavGroup, null)));
};
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var HeaderLongLasting = function () {
var _a = useContext(SchedulerContext), dateMode = _a.dateMode, events = _a.events, noDataText = _a.noDataText, selectedYear = _a.selectedYear, selectedMonth = _a.selectedMonth, selectedDay = _a.selectedDay, setEventDialogState = _a.setEventDialogState, showHeaderLongLasting = _a.showHeaderLongLasting, showNoDataAlert = _a.showNoDataAlert;
var filteredEvents = [];
/* istanbul ignore next */
switch (dateMode) {
case 'day':
filteredEvents = getLongScaledEventsForDay(events, selectedYear, selectedMonth, selectedDay);
break;
case 'week':
filteredEvents = getLongScaledEventsForWeek(events, selectedYear, selectedMonth, selectedDay);
break;
case 'month':
filteredEvents = getLongScaledEventsForMonth(events, selectedYear, selectedMonth, selectedDay);
break;
case 'year':
filteredEvents = getLongScaledEventsForYear(events, selectedYear, selectedMonth, selectedDay);
break;
}
/* istanbul ignore next */
var openDialog = function (e) {
var eventId = e.target.closest('.long-scaled-item').getAttribute('data-attribute-event-id');
setEventDialogState(function (state) { return (__assign(__assign({}, state), { isOpen: true, eventId: eventId, event: getEventById(eventId, events) })); });
};
var renderEvents = function () {
return map(filteredEvents, function (event, index) {
var inlineStyleEvent = {
backgroundColor: event.color,
};
return (React.createElement("div", { key: "long-scaled-item-" + index, className: "long-scaled-item", style: inlineStyleEvent, "data-attribute-event-id": event.id, onClick: openDialog },
React.createElement(Typography, { variant: "caption" },
moment(new Date(event.startYear, event.startMonth, event.startDay, event.startHour, event.startMinute)).format('HH:mm'),
' ',
": ",
event.title)));
});
};
var inlineStyeAlert = {
display: isEmpty(filteredEvents) && showNoDataAlert ? 'flex' : 'none',
};
var inlineStyle = {
display: showHeaderLongLasting ? 'flex' : /* istanbul ignore next */ 'none',
};
return (React.createElement("div", { className: "ts-react-scheduler-header-long-lasting-component", style: inlineStyle },
React.createElement("div", { className: "header-long-lasting-items" },
React.createElement(Alert, { severity: "info", style: inlineStyeAlert }, noDataText),
renderEvents())));
};
var Header = function () {
return (React.createElement("div", { className: "ts-react-scheduler-header-component" },
React.createElement("div", { className: "header-title-wrapper" },
React.createElement(HeaderTitle, null)),
React.createElement("div", { className: "header-actions-wrapper" },
React.createElement(HeaderAction, null)),
React.createElement("div", { className: "header-long-lasting-wrapper" },
React.createElement(HeaderLongLasting, null))));
};
var APP_CONST = {
colors: [
'#f44336',
'#e91e63',
'#9c27b0',
'#673ab7',
'#3f51b5',
'#2196f3',
'#03a9f4',
'#00bcd4',
'#009688',
'#4caf50',
'#8bc34a',
'#cddc39',
'#ff9800',
'#ff5722',
'#795548',
'#607d8b',
],
fiveMinutesAsPixels: (44 * 5) / 60,
selectedDay: 1,
selectedMonth: 0,
selectedYear: 2020,
totalNumberOfDayItems: 42,
totalNumberOfYearItems: 42,
yearLeftOffset: 17,
yearRightOffset: 24,
};
function createEmptyEvent(selectedYear, selectedMonth, delectedDay, from, to) {
return new EventItem(uuid.v4(), '', '', APP_CONST.colors[0], selectedYear, selectedMonth, delectedDay, from, 0, selectedYear, selectedMonth, delectedDay, to, 0, selectedYear, selectedMonth, delectedDay, false, false, false, false);
}
var ContentDay = function () {
var _a = useContext(SchedulerContext), events = _a.events, selectedYear = _a.selectedYear, selectedMonth = _a.selectedMonth, selectedDay = _a.selectedDay, setEventDialogState = _a.setEventDialogState;
var renderSlotItems = function (start, end) {
var filteredEventsForSlot = getEventsForSlot(events, start, end);
var itemsToRender = map(filteredEventsForSlot, function (item, index) {
var topOffset = (item.startMinute / 5) * APP_CONST.fiveMinutesAsPixels;
var startDate = moment([item.startYear, item.startMonth, item.startDay, item.startHour, item.startMinute]);
var endDate = moment([item.endYear, item.endMonth, item.endDay, item.endHour, item.endMinute]);
var timeDiff = endDate.diff(startDate, 'minutes');
var durationHeight = (timeDiff / 5) * APP_CONST.fiveMinutesAsPixels;
var inlineStyle = {
top: topOffset,
backgroundColor: item.color,
width: "calc(100% / " + filteredEventsForSlot.length + ")",
height: durationHeight,
};
/* istanbul ignore next */
var openDialog = function (e) {
e.stopPropagation();
var eventId = e.target.closest('.event-item').getAttribute('data-attribute-event-id');
setEventDialogState(function (state) { return (__assign(__assign({}, state), { isOpen: true, eventId: eventId, event: getEventById(eventId, events) })); });
};
return (React.createElement("div", { key: "slot-event-" + index, className: "event-item", style: inlineStyle, "data-attribute-event-id": item.id, onClick: openDialog },
React.createElement("div", { className: "content" },
React.createElement(Typography, { variant: "caption" }, moment(new Date(item.startYear, item.startMonth, item.startDay, item.startHour, item.startMinute)).format('HH:mm') + " : " + item.title))));
});
return itemsToRender;
};
var renderTimeSlots = function () {
var timeSlotItems = [];
var openDialogModeCreate = function (e) {
e.stopPropagation();
var from = Number(e.target.closest('.time-slot').getAttribute('data-attribute-from'));
var to = Number(e.target.closest('.time-slot').getAttribute('data-attribute-to'));
var eventId = uuid.v4();
/* istanbul ignore next */
setEventDialogState(function (state) { return (__assign(__assign({}, state), { isOpen: true, eventId: eventId, event: createEmptyEvent(selectedYear, selectedMonth, selectedDay, from, to), mode: 'create' })); });
};
for (var timeSlot = 0; timeSlot < 24; timeSlot += 1) {
timeSlotItems.push(React.createElement("div", { key: "time-slot-" + uuid.v4(), className: "time-slot", "data-attribute-from": timeSlot, "data-attribute-to": timeSlot + 1, onDoubleClick: openDialogModeCreate },
React.createElement(Typography, { variant: "caption" }, timeSlot < 10 ? "0" + timeSlot + ":00" : timeSlot + ":00")));
}
return timeSlotItems;
};
var renderEventSlots = function () {
var eventSlotItems = [];
var openDialogModeCreate = function (e) {
e.stopPropagation();
var from = Number(e.target.closest('.event-slot').getAttribute('data-attribute-from'));
var to = Number(e.target.closest('.event-slot').getAttribute('data-attribute-to'));
var eventId = uuid.v4();
/* istanbul ignore next */
setEventDialogState(function (state) { return (__assign(__assign({}, state), { isOpen: true, eventId: eventId, event: createEmptyEvent(selectedYear, selectedMonth, selectedDay, from, to), mode: 'create' })); });
};
for (var eventSlot = 0; eventSlot < 24; eventSlot += 1) {
eventSlotItems.push(React.createElement("div", { key: "event-slot-" + uuid.v4(), className: "event-slot", "data-attribute-from": eventSlot, "data-attribute-to": eventSlot + 1, onDoubleClick: openDialogModeCreate }, renderSlotItems(eventSlot, eventSlot + 1)));
}
return eventSlotItems;
};
return (React.createElement("div", { className: "ts-react-scheduler-content-day-component" },
React.createElement("div", { className: "time-column" }, renderTimeSlots()),
React.createElement("div", { id: "eventColumn", className: "event-column" }, renderEventSlots())));
};
var ContentWeek = function () {
var _a = useContext(SchedulerContext), events = _a.events, selectedDay = _a.selectedDay, selectedMonth = _a.selectedMonth, selectedYear = _a.selectedYear;
var selectedDate = new Date(selectedYear, selectedMonth, selectedDay);
var renderTimeSlots = function () {
var timeSlotItems = [];
for (var timeSlot = 0; timeSlot < 24; timeSlot += 1) {
timeSlotItems.push(React.createElement("div", { key: "time-slot-" + uuid.v4(), className: "time-slot" },
React.createElement(Typography, { variant: "caption" }, timeSlot < 10 ? "0" + timeSlot + ":00" : timeSlot + ":00")));
}
return timeSlotItems;
};
var renderSlotItems = function (start, end, dayIndex) {
var eventsForSlot = [];
/* istanbul ignore next */
switch (dayIndex) {
case 0:
eventsForSlot = getEventsForDayName(events, 'sunday');
break;
case 1:
eventsForSlot = getEventsForDayName(events, 'monday');
break;
case 2:
eventsForSlot = getEventsForDayName(events, 'tuesday');
break;
case 3:
eventsForSlot = getEventsForDayName(events, 'wednesday');
break;
case 4:
eventsForSlot = getEventsForDayName(events, 'thursday');
break;
case 5:
eventsForSlot = getEventsForDayName(events, 'friday');
break;
case 6:
eventsForSlot = getEventsForDayName(events, 'saturday');
break;
}
var eventsForDay = eventsForSlot;
var filteredEventsForSlot = getEventsForSlot(eventsForDay, start, end);
/* istanbul ignore next */
var itemsToRender = map(filteredEventsForSlot, function (item, index) {
var inlineStyle = {
backgroundColor: item.color,
};
return (React.createElement("div", { className: "event-item", key: "slot-event-" + index, style: inlineStyle, "data-attribute-event-id": item.id },
React.createElement("div", { className: "content" },
React.createElement(Typography, { variant: "caption" }, moment(new Date(item.startYear, item.startMonth, item.startDay, item.startHour, item.startMinute)).format('HH:mm') + " : " + item.title))));
});
return itemsToRender;
};
var renderEventSlots = function () {
var eventSlotItems = [];
var dayIndex = -1;
/* istanbul ignore next */
if (isSunday(selectedDate)) {
dayIndex = 0;
}
else if (isMonday(selectedDate)) {
dayIndex = 1;
}
else if (isTuesday(selectedDate)) {
dayIndex = 2;
}
else if (isWednesday(selectedDate)) {
dayIndex = 3;
}
else if (isThursday(selectedDate)) {
dayIndex = 4;
}
else if (isFriday(selectedDate)) {
dayIndex = 5;
}
else if (isSaturday(selectedDate)) {
dayIndex = 6;
}
else {
dayIndex = -1;
}
for (var eventSlot = 0; eventSlot < 24; eventSlot += 1) {
var contentRow = [];
for (var column = 0; column < 7; column += 1) {
var classNameWeekColumn = classnames('event-slot-item', {
active: dayIndex === column,
});
contentRow.push(React.createElement("div", { key: "week-column-" + eventSlot + "-" + column, "data-attribute-from": eventSlot, "data-attribute-to": eventSlot + 1, className: classNameWeekColumn }, renderSlotItems(eventSlot, eventSlot + 1, column)));
}
eventSlotItems.push(React.createElement("div", { key: "event-slot-" + uuid.v4(), className: "event-slot" }, contentRow));
}
return eventSlotItems;
};
return (React.createElement("div", { className: "ts-react-scheduler-content-week-component" },
React.createElement("div", { className: "time-column" }, renderTimeSlots()),
React.createElement("div", { className: "event-column" }, renderEventSlots())));
};
var ContentMonth = function () {
var _a = useContext(SchedulerContext), events = _a.events, selectedDay = _a.selectedDay, selectedMonth = _a.selectedMonth, selectedYear = _a.selectedYear, setStateDateMode = _a.setStateDateMode, setStateSelectedDay = _a.setStateSelectedDay;
var renderGrid = function () {
var content = [];
var daysInMonth = [];
var shiftedDaysIndex = [];
var firstDayInCurrentMonth = new Date(selectedYear, selectedMonth, 1);
var firstDayInLastMonth = new Date(selectedYear, selectedMonth - 1, 1);
var changeDay = function (e) {
e.stopPropagation();
var newDay = Number(e.target.closest('.month-item').getAttribute('data-attribute-day'));
setStateSelectedDay(newDay);
setStateDateMode('day');
};
for (var dayCount = 1; dayCount <= getDaysInMonth(new Date(selectedYear, selectedMonth)); dayCount += 1) {
daysInMonth.push(dayCount);
}
// unshift days for right position in calendar
/* istanbul ignore next */
if (!isSunday(firstDayInCurrentMonth)) {
daysInMonth.unshift(getDaysInMonth(lastDayOfMonth(firstDayInLastMonth)));
shiftedDaysIndex.push(0);
if (!isMonday(firstDayInCurrentMonth)) {
daysInMonth.unshift(getDaysInMonth(lastDayOfMonth(firstDayInLastMonth)) - 1);
shiftedDaysIndex.push(1);
if (!isTuesday(firstDayInCurrentMonth)) {
daysInMonth.unshift(getDaysInMonth(lastDayOfMonth(firstDayInLastMonth)) - 2);
shiftedDaysIndex.push(2);
if (!isWednesday(firstDayInCurrentMonth)) {
daysInMonth.unshift(getDaysInMonth(lastDayOfMonth(firstDayInLastMonth)) - 3);
shiftedDaysIndex.push(3);
if (!isThursday(firstDayInCurrentMonth)) {
daysInMonth.unshift(getDaysInMonth(lastDayOfMonth(firstDayInLastMonth)) - 4);
shiftedDaysIndex.push(4);
if (!isFriday(firstDayInCurrentMonth)) {
daysInMonth.unshift(getDaysInMonth(lastDayOfMonth(firstDayInLastMonth)) - 5);
shiftedDaysIndex.push(5);
if (!isSaturday(firstDayInCurrentMonth)) {
daysInMonth.unshift(getDaysInMonth(lastDayOfMonth(firstDayInLastMonth)) - 6);
shiftedDaysIndex.push(6);
}
}
}
}
}
}
}
var dayArrayLength = daysInMonth.length;
// fill day array to 42 items
/* istanbul ignore else */
if (dayArrayLength < APP_CONST.totalNumberOfDayItems) {
var dayDiff = APP_CONST.totalNumberOfDayItems - dayArrayLength;
for (var day = 1; day <= dayDiff; day += 1) {
daysInMonth.push(day);
}
}
var monthItemIndex = 1;
// render matrix
for (var row = 0; row < APP_CONST.totalNumberOfDayItems / 7; row += 1) {
var contentRow = [];
var countDaysInMonth = getDaysInMonth(new Date(selectedYear, selectedMonth, 1));
for (var column = 0; column < APP_CONST.totalNumberOfDayItems / 6; column += 1) {
var isDisabled = shiftedDaysIndex.indexOf(monthItemIndex - 1) !== -1 ||
monthItemIndex > countDaysInMonth + shiftedDaysIndex.length;
var classNameMonthItem = classnames('month-item', {
disabled: isDisabled,
}, {
active: daysInMonth[monthItemIndex - 1] === selectedDay /* istanbul ignore next */ &&
shiftedDaysIndex.indexOf(monthItemIndex - 1) === -1 /* istanbul ignore next */ &&
monthItemIndex <= countDaysInMonth + shiftedDaysIndex.length,
});
var eventCounter = getEventsForDay(selectedYear, selectedMonth, daysInMonth[monthItemIndex - 1], events)
.length;
var classNameNumber = classnames(eventCounter > 0 && /* istanbul ignore next */ !isDisabled ? /* istanbul ignore next */ 'highlighted' : '');
contentRow.push(React.createElement("div", { key: "month-column-" + row + "-" + column, className: "month-column" },
React.createElement("div", { className: classNameMonthItem, "data-attribute-day": daysInMonth[monthItemIndex - 1], onClick: changeDay },
React.createElement("div", { className: classNameNumber },
' ',
React.createElement(Typography, { variant: "body2" }, daysInMonth[monthItemIndex - 1])))));
monthItemIndex += 1;
}
content.push(React.createElement("div", { key: "month-row-" + row, className: "month-row" }, contentRow));
}
return content;
};
return React.createElement("div", { className: "ts-react-scheduler-content-month-component" }, renderGrid());
};
var ContentYear = function () {
var _a = useContext(SchedulerContext), events = _a.events, selectedYear = _a.selectedYear, setStateSelectedYear = _a.setStateSelectedYear, setStateDateMode = _a.setStateDateMode;
var changeYear = function (e) {
e.stopPropagation();
var newYear = Number(e.target.closest('.year-item').getAttribute('data-attribute-year'));
setStateSelectedYear(newYear);
setStateDateMode('month');
};
var renderGrid = function () {
var content = [];
var startYear = selectedYear - APP_CONST.yearLeftOffset;
var years = [];
for (var year = startYear; year <= selectedYear + APP_CONST.yearRightOffset; year += 1) {