@steroidsjs/core 3.0.0-beta.98 → 3.0.0

package/ui/content/CalendarSystem/CalendarSystem.d.ts

@@ -18,57 +18,134 @@ export interface IPresentDateInfo {
     currentMonth: number;
     dateToDisplay: string;
 }
+/**
+* Событие
+*/
 export interface IEvent {
+    /**
+    * Идентификатор
+    */
     id: number;
+    /**
+    * Дата
+    */
     date: Date;
+    /**
+    * Заголовок
+    */
     title: string;
+    /**
+    * Цвет
+    */
     color?: string;
+    /**
+    * Внутреннее описания события
+    */
     description?: string;
     [key: string]: any;
 }
+/**
+* Группа событий
+*/
 export interface IEventGroup {
+    /**
+    * Идентификатор
+    */
     id: number;
+    /**
+    * Название группы
+    */
     label: string;
+    /**
+    * Цвет
+    * @example '#000000'
+    */
     color?: string;
+    /**
+    * События группы
+    */
     events: Omit<IEvent, 'color'>[];
 }
+/**
+ * CalendarSystem
+ *
+ * Комплексный компонент календарь служит для планирования событий и их отображения в календаре.
+ *
+ * Компонент умеет отображать события с помощью недельной сетки с шагом в 1 час,
+ * а также переключать отображение на сетку по месяцам с шагом 1 день.
+ * Присутствует возможность добавлять в календарь события и создавать новые группы событий.
+ *
+ */
 export interface ICalendarSystemProps extends IUiComponent {
-    onCreateEvent?: () => void;
+    /**
+    * Функция, которая вызовется при смене типа календаря
+    */
     onChangeCalendarType?: (newType: string) => void;
+    /**
+    * Свойства для модального окна
+    */
     calendarModalProps?: IModalProps;
+    /**
+    * Свойства для модалного окна группы событий
+    */
+    eventGroupModalProps?: IModalProps;
+    /**
+    * Параметры для групп событий
+    */
     eventBlock: {
+        /**
+        * Заголовок, который используется для обозначения групп событий
+        */
         title: string;
+        /**
+        * Группы событий
+        */
         eventGroups: IEventGroup[];
     };
+    /**
+    * Дополнительные свойства, которые передаются во view компонента
+    */
+    additionalViewProps?: Record<string, any>;
     [key: string]: any;
 }
-export interface ICalendarSystemViewProps extends Omit<ICalendarSystemProps, 'calendarGroups'> {
-    monthCalendarDays: IDay[];
-    currentWeekDays: IDay[];
-    allHours: string[];
-    calendarType: CalendarEnum;
-    dateToDisplay: string;
+export interface ICalendarSystemViewProps extends Pick<ICalendarSystemProps, 'className' | 'style' | 'additionalViewProps'> {
+    openCreateModal: (eventInitialDay?: IDay) => void;
+    onInnerCalendarChangeMonth: (newDate: Date) => void;
     eventGroups: IEventGroup[];
     eventGroupsTitle: string;
-    selectedCalendarGroupsIds: number[];
-    onChangeCalendarType: (newType: string) => void;
-    onMonthChange: (newDate: Date) => void;
-    applyControl: (event: React.MouseEvent<HTMLElement>) => void;
-    openCreateModal: (eventInitialDay?: IDay) => void;
-    openCreateEventGroupModal: VoidFunction;
-    openEditModal: (event: IEvent) => void;
-    getEventsFromDate: (dateFromDay: Date, isMonth: boolean) => IEvent[];
     onChangeEventGroupsIds: (selectedIds: number[]) => void;
-    weekDays: string[];
+    openCreateEventGroupModal: VoidFunction;
+    dateToDisplay: string;
+    handleCalendarTypeChange: (newType: string) => void;
+    handleControlClick: (event: React.MouseEvent<HTMLElement>) => void;
+    calendarType: CalendarEnum;
+    monthGridProps: {
+        monthGridWeekDays: string[];
+        monthGridCalendarDays: IDay[];
+        getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
+        openEditModal: (event: IEvent) => void;
+        openCreateModal: (eventInitialDay?: IDay) => void;
+    };
+    weekGridProps: {
+        weekGridTwentyFourHoursArray: string[];
+        weekGridCurrentWeekDays: IDay[];
+        getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
+        openEditModal: (event: IEvent) => void;
+        openCreateModal: (eventInitialDay?: IDay) => void;
+    };
 }
 export interface ICalendarSystemModalViewProps extends IModalProps {
     eventGroups: IEventGroup[];
-    onEventSubmit: (fields: Record<CalendarSystemModalFields, string>, eventInitialValues?: IEventInitialValues) => void;
+    onModalFormSubmit: (fields: Record<CalendarSystemModalFields, string>, eventInitialValues?: IEventInitialValues) => void;
     isCreate: boolean;
     eventInitialValues?: any;
 }
 export interface CalendarSystemEventGroupModalViewProps extends IModalProps {
     isCreate: boolean;
     onEventGroupSubmit: (fields: Record<CalendarSystemEventGroupModalFields, string>) => void;
+    eventGroupInitialValues?: {
+        color: string;
+        label: string;
+    };
 }
 export default function CalendarSystem(props: ICalendarSystemProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/ui/content/CalendarSystem/CalendarSystem.js

@@ -1,103 +1,92 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable max-len */
 /* eslint-disable no-return-assign */
 /* eslint-disable default-case */
 /* eslint-disable no-unused-expressions */
 /* eslint-disable no-plusplus */
 var react_1 = __importDefault(require("react"));
 var dayjs_1 = __importDefault(require("dayjs"));
-var concat_1 = __importDefault(require("lodash-es/concat"));
-var slice_1 = __importDefault(require("lodash-es/slice"));
 var localeData_1 = __importDefault(require("dayjs/plugin/localeData"));
-var upperFirst_1 = __importDefault(require("lodash-es/upperFirst"));
 var useCalendarControls_1 = __importDefault(require("./hooks/useCalendarControls"));
 var useDisplayDate_1 = __importDefault(require("./hooks/useDisplayDate"));
-var useMonthCalendar_1 = __importDefault(require("./hooks/useMonthCalendar"));
+var useMonthGrid_1 = __importDefault(require("./hooks/useMonthGrid"));
 var hooks_1 = require("../../../hooks");
-var addEventIfMatchDate_1 = require("./helpers/addEventIfMatchDate");
-var CalendarType_1 = __importDefault(require("./enums/CalendarType"));
 var useCalendarSystemModals_1 = __importDefault(require("./hooks/useCalendarSystemModals"));
 var useCalendarSystemEventGroupModals_1 = require("./hooks/useCalendarSystemEventGroupModals");
+var useWeekGrid_1 = __importDefault(require("./hooks/useWeekGrid"));
+var useCalendarType_1 = require("./hooks/useCalendarType");
+var useEventsFromDate_1 = require("./hooks/useEventsFromDate");
 dayjs_1["default"].extend(localeData_1["default"]);
 function CalendarSystem(props) {
     var components = (0, hooks_1.useComponents)();
     var _a = react_1["default"].useState(props.eventBlock.eventGroups || []), innerEventGroups = _a[0], setInnerEventGroups = _a[1];
     var _b = react_1["default"].useState([]), selectedEventGroupsIds = _b[0], setSelectedEventGroupsIds = _b[1];
-    var _c = (0, useDisplayDate_1["default"])(), dateToDisplay = _c.dateToDisplay, setNewDateToDisplay = _c.setNewDateToDisplay;
-    var _d = react_1["default"].useState(CalendarType_1["default"].MONTH), calendarType = _d[0], setCalendarType = _d[1];
-    var _e = (0, useMonthCalendar_1["default"])(), monthCalendarDays = _e.calendarArray, setCurrentMonthDate = _e.setCurrentMonthDate, currentMonthDate = _e.currentMonthDate;
-    var _f = (0, hooks_1.useWeekCalendar)(currentMonthDate), currentWeekDays = _f.currentWeek, weekControls = _f.weekControls, forceUpdateWeekOnMonthChange = _f.forceUpdateWeekOnMonthChange;
-    var applyControl = (0, useCalendarControls_1["default"])(calendarType, weekControls);
-    var _g = (0, useCalendarSystemModals_1["default"])(props.calendarModalProps, innerEventGroups, setInnerEventGroups), openCreateModal = _g.openCreateModal, openEditModal = _g.openEditModal;
-    var openCreateEventGroupModal = (0, useCalendarSystemEventGroupModals_1.useCalendarSystemEventGroupModals)(innerEventGroups, setInnerEventGroups).openCreateEventGroupModal;
-    var onChangeCalendarType = react_1["default"].useCallback(function (newType) {
-        setCalendarType(newType);
-        if (props.onChangeCalendarType) {
-            props.onChangeCalendarType(newType);
-        }
-    }, [props]);
-    var onMonthChange = react_1["default"].useCallback(function (newDate) {
+    var _c = react_1["default"].useState(null), currentMonthFirstDayDate = _c[0], setCurrentMonthFirstDayDate = _c[1];
+    var _d = (0, useDisplayDate_1["default"])(), dateToDisplay = _d.dateToDisplay, setNewDateToDisplay = _d.setNewDateToDisplay;
+    var _e = (0, useCalendarType_1.useCalendarType)(), calendarType = _e.calendarType, handleCalendarTypeChange = _e.handleCalendarTypeChange;
+    var _f = (0, useMonthGrid_1["default"])(currentMonthFirstDayDate, setCurrentMonthFirstDayDate), monthGridWeekDays = _f.monthGridWeekDays, monthGridCalendarDays = _f.monthGridCalendarDays;
+    var _g = (0, useWeekGrid_1["default"])(currentMonthFirstDayDate), weekGridTwentyFourHoursArray = _g.weekGridTwentyFourHoursArray, weekGridCurrentWeekDays = _g.weekGridCurrentWeekDays, weekGridControls = _g.weekGridControls, updateWeekOnMonthChange = _g.updateWeekOnMonthChange;
+    var handleControlClick = (0, useCalendarControls_1["default"])(calendarType, weekGridControls);
+    var _h = (0, useCalendarSystemModals_1["default"])(props.calendarModalProps, innerEventGroups, setInnerEventGroups), openCreateModal = _h.openCreateModal, openEditModal = _h.openEditModal;
+    var openCreateEventGroupModal = (0, useCalendarSystemEventGroupModals_1.useCalendarSystemEventGroupModals)(innerEventGroups, setInnerEventGroups, props.eventGroupModalProps).openCreateEventGroupModal;
+    var onInnerCalendarChangeMonth = react_1["default"].useCallback(function (newDate) {
         setNewDateToDisplay(newDate);
-        setCurrentMonthDate(newDate);
-        forceUpdateWeekOnMonthChange(newDate);
-    }, [forceUpdateWeekOnMonthChange, setCurrentMonthDate, setNewDateToDisplay]);
-    var getEventsFromDate = function (date, currentCalendarType) {
-        var eventsOnDate = [];
-        var dayjsDate = (0, dayjs_1["default"])(date);
-        var iterateEventGroups = function (callback) {
-            innerEventGroups.forEach(function (eventGroup) {
-                eventGroup.events.forEach(function (event) {
-                    callback(event, eventGroup);
-                });
-            });
-        };
-        switch (currentCalendarType) {
-            case CalendarType_1["default"].MONTH: {
-                iterateEventGroups(function (event, eventGroup) {
-                    var eventDateDayJs = (0, dayjs_1["default"])(event.date);
-                    (0, addEventIfMatchDate_1.addEventIfMatchDate)(eventDateDayJs, dayjsDate, eventGroup, event, 'day', selectedEventGroupsIds, eventsOnDate);
-                });
-                break;
-            }
-            case CalendarType_1["default"].WEEK: {
-                iterateEventGroups(function (event, eventGroup) {
-                    var eventDate = new Date(event.date);
-                    eventDate.setHours(eventDate.getHours(), 0, 0, 0);
-                    var eventDateDayJs = (0, dayjs_1["default"])(eventDate);
-                    (0, addEventIfMatchDate_1.addEventIfMatchDate)(eventDateDayJs, dayjsDate, eventGroup, event, 'hours', selectedEventGroupsIds, eventsOnDate);
-                });
-                break;
-            }
-        }
-        // eslint-disable-next-line consistent-return
-        return eventsOnDate;
-    };
-    var weekDays = react_1["default"].useMemo(function () {
-        var unformattedDaysOfWeek = dayjs_1["default"].weekdaysMin();
-        return (0, concat_1["default"])((0, slice_1["default"])(unformattedDaysOfWeek, 1), unformattedDaysOfWeek[0]).map(function (weekDay) { return __("".concat((0, upperFirst_1["default"])(weekDay))); });
-    }, []);
-    var allHours = react_1["default"].useMemo(function () {
-        var hoursArray = [];
-        for (var i = 0; i < 24; i++) {
-            var formattedHour = (0, dayjs_1["default"])().startOf('day').add(i, 'hour').format('HH:00');
-            hoursArray.push(formattedHour);
+        setCurrentMonthFirstDayDate(newDate);
+        updateWeekOnMonthChange(newDate);
+    }, [updateWeekOnMonthChange, setCurrentMonthFirstDayDate, setNewDateToDisplay]);
+    var getEventsFromDate = (0, useEventsFromDate_1.useEventsFromDate)(innerEventGroups, selectedEventGroupsIds).getEventsFromDate;
+    var viewProps = react_1["default"].useMemo(function () { return ({
+        className: props.className,
+        style: props.style,
+        openCreateModal: openCreateModal,
+        onInnerCalendarChangeMonth: onInnerCalendarChangeMonth,
+        eventGroups: innerEventGroups,
+        eventGroupsTitle: props.eventBlock.title,
+        onChangeEventGroupsIds: function (newSelectedEventGroupsIds) { return setSelectedEventGroupsIds(newSelectedEventGroupsIds); },
+        openCreateEventGroupModal: openCreateEventGroupModal,
+        dateToDisplay: dateToDisplay,
+        handleCalendarTypeChange: handleCalendarTypeChange,
+        handleControlClick: handleControlClick,
+        calendarType: calendarType,
+        additionalViewProps: props.additionalViewProps,
+        monthGridProps: {
+            monthGridWeekDays: monthGridWeekDays,
+            monthGridCalendarDays: monthGridCalendarDays,
+            getEventsFromDate: getEventsFromDate,
+            openCreateModal: openCreateModal,
+            openEditModal: openEditModal
+        },
+        weekGridProps: {
+            weekGridTwentyFourHoursArray: weekGridTwentyFourHoursArray,
+            weekGridCurrentWeekDays: weekGridCurrentWeekDays,
+            getEventsFromDate: getEventsFromDate,
+            openCreateModal: openCreateModal,
+            openEditModal: openEditModal
         }
-        return hoursArray;
-    }, []);
-    return components.ui.renderView(props.view || 'content.CalendarSystemView', __assign(__assign({}, props), { dateToDisplay: dateToDisplay, monthCalendarDays: monthCalendarDays, calendarType: calendarType, currentWeekDays: currentWeekDays, eventGroups: innerEventGroups, eventGroupsTitle: props.eventBlock.title, allHours: allHours, selectedEventGroupsIds: selectedEventGroupsIds, onChangeCalendarType: onChangeCalendarType, onMonthChange: onMonthChange, applyControl: applyControl, openCreateModal: openCreateModal, getEventsFromDate: getEventsFromDate, onChangeEventGroupsIds: function (newSelectedEventGroupsIds) { return setSelectedEventGroupsIds(newSelectedEventGroupsIds); }, openCreateEventGroupModal: openCreateEventGroupModal, openEditModal: openEditModal, weekDays: weekDays }));
+    }); }, [
+        props.className,
+        props.style,
+        props.eventBlock.title,
+        openCreateModal,
+        onInnerCalendarChangeMonth,
+        innerEventGroups,
+        openCreateEventGroupModal,
+        dateToDisplay,
+        handleCalendarTypeChange,
+        handleControlClick,
+        calendarType,
+        monthGridWeekDays,
+        monthGridCalendarDays,
+        getEventsFromDate,
+        openEditModal,
+        weekGridTwentyFourHoursArray,
+        weekGridCurrentWeekDays,
+        props.additionalViewProps,
+    ]);
+    return components.ui.renderView(props.view || 'content.CalendarSystemView', viewProps);
 }
 exports["default"] = CalendarSystem;

package/ui/content/CalendarSystem/hooks/useCalendarControls.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import CalendarEnum from '../enums/CalendarType';
 import DateControlEnum from '../enums/DateControlType';
-export declare const getSourceCalendarControl: (control: string) => HTMLElement;
-declare const useCalendarControls: (calendarType: CalendarEnum, weekControls: {
+declare const useCalendarControls: (calendarType: CalendarEnum, weekGridControls: {
     [key: string]: () => void | DateControlEnum;
 }) => (event: React.MouseEvent<HTMLElement>) => void;
 export default useCalendarControls;

package/ui/content/CalendarSystem/hooks/useCalendarControls.js

@@ -3,26 +3,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.getSourceCalendarControl = void 0;
-/* eslint-disable no-unneeded-ternary */
 /* eslint-disable default-case */
-/* eslint-disable no-unused-expressions */
 var react_1 = __importDefault(require("react"));
 var isFunction_1 = __importDefault(require("lodash-es/isFunction"));
 var get_1 = __importDefault(require("lodash-es/get"));
 var CalendarType_1 = __importDefault(require("../enums/CalendarType"));
+var utils_1 = require("../utils/utils");
 var CUSTOM_CONTROL_PATH = 'dataset.control';
-var getSourceCalendarControl = function (control) { return document.querySelector("[data-sourcecontrol=\"".concat(control, "\"]")); };
-exports.getSourceCalendarControl = getSourceCalendarControl;
-var useCalendarControls = function (calendarType, weekControls) {
-    var getCustomControlType = function (event) {
+var useCalendarControls = function (calendarType, weekGridControls) {
+    var extractCustomControlType = function (event) {
         var target = event.target;
         var customControlType = (0, get_1["default"])(target, CUSTOM_CONTROL_PATH);
-        return customControlType ? customControlType : null;
+        return customControlType !== null && customControlType !== void 0 ? customControlType : null;
     };
-    var applyControl = react_1["default"].useCallback(function (event) {
-        var customControlType = getCustomControlType(event);
-        var sourceCalendarControl = (0, exports.getSourceCalendarControl)(customControlType);
+    var handleControlClick = react_1["default"].useCallback(function (event) {
+        var customControlType = extractCustomControlType(event);
+        var sourceCalendarControl = (0, utils_1.getSourceCalendarControl)(customControlType);
         if (!sourceCalendarControl) {
             return;
         }
@@ -32,16 +28,17 @@ var useCalendarControls = function (calendarType, weekControls) {
                 return;
             }
             case CalendarType_1["default"].WEEK: {
-                if ((0, isFunction_1["default"])(weekControls[customControlType])) {
-                    weekControls[customControlType]();
+                var controlAction = weekGridControls[customControlType];
+                if ((0, isFunction_1["default"])(controlAction)) {
+                    controlAction();
                 }
                 else {
-                    var sourceControlType = weekControls[customControlType];
-                    (0, exports.getSourceCalendarControl)(sourceControlType).click();
+                    var sourceControlType = controlAction;
+                    (0, utils_1.getSourceCalendarControl)(sourceControlType).click();
                 }
             }
         }
-    }, [calendarType, weekControls]);
-    return applyControl;
+    }, [calendarType, weekGridControls]);
+    return handleControlClick;
 };
 exports["default"] = useCalendarControls;

package/ui/content/CalendarSystem/hooks/useCalendarSystemEventGroupModals.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IEventGroup } from '../CalendarSystem';
-export declare const useCalendarSystemEventGroupModals: (innerEventGroups: IEventGroup[], setInnerEventGroups: React.Dispatch<React.SetStateAction<IEventGroup[]>>) => {
+import { IModalProps } from '../../../modal/Modal/Modal';
+export declare const useCalendarSystemEventGroupModals: (innerEventGroups: IEventGroup[], setInnerEventGroups: React.Dispatch<React.SetStateAction<IEventGroup[]>>, eventGroupModalProps: IModalProps) => {
     openCreateEventGroupModal: () => void;
 };

package/ui/content/CalendarSystem/hooks/useCalendarSystemEventGroupModals.js

@@ -16,14 +16,19 @@ exports.useCalendarSystemEventGroupModals = void 0;
 var react_redux_1 = require("react-redux");
 var maxBy_1 = __importDefault(require("lodash-es/maxBy"));
 var react_1 = __importDefault(require("react"));
+var hooks_1 = require("../../../../hooks");
 var modal_1 = require("../../../../actions/modal");
 var useComponents_1 = __importDefault(require("../../../../hooks/useComponents"));
 var DEFAULT_ID = 1;
-var useCalendarSystemEventGroupModals = function (innerEventGroups, setInnerEventGroups) {
+var PRIMARY_LIGHT = '#651fff';
+var PRIMARY_DARK = '#9362ff';
+var useCalendarSystemEventGroupModals = function (innerEventGroups, setInnerEventGroups, eventGroupModalProps) {
     var dispatch = (0, react_redux_1.useDispatch)();
     var components = (0, useComponents_1["default"])();
-    var calendarModalView = components.ui.getView('content.CalendarSystemEventGroupModalView');
-    var onEventGroupSubmit = react_1["default"].useCallback(function (fields) {
+    var theme = (0, hooks_1.useTheme)().theme;
+    var calendarModalView = (eventGroupModalProps === null || eventGroupModalProps === void 0 ? void 0 : eventGroupModalProps.component) || components.ui.getView('content.CalendarSystemEventGroupModalView');
+    var defaultEventGroupColor = react_1["default"].useMemo(function () { return theme === 'light' ? PRIMARY_LIGHT : PRIMARY_DARK; }, [theme]);
+    var onSubmit = react_1["default"].useCallback(function (fields) {
         var _a;
         var newEventGroup = {
             id: (((_a = (0, maxBy_1["default"])(innerEventGroups, function (eventsGroup) { return eventsGroup.id; })) === null || _a === void 0 ? void 0 : _a.id) || DEFAULT_ID) + 1,
@@ -36,9 +41,12 @@ var useCalendarSystemEventGroupModals = function (innerEventGroups, setInnerEven
     var openCreateEventGroupModal = react_1["default"].useCallback(function () {
         dispatch((0, modal_1.openModal)(calendarModalView, {
             isCreate: true,
-            onEventGroupSubmit: onEventGroupSubmit
+            onEventGroupSubmit: onSubmit,
+            eventGroupInitialValues: {
+                color: defaultEventGroupColor
+            }
         }));
-    }, [calendarModalView, dispatch, onEventGroupSubmit]);
+    }, [calendarModalView, defaultEventGroupColor, dispatch, onSubmit]);
     return {
         openCreateEventGroupModal: openCreateEventGroupModal
     };

package/ui/content/CalendarSystem/hooks/useCalendarSystemModals.js

@@ -35,7 +35,7 @@ var useCalendarSystemModals = function (calendarModalProps, innerEventGroups, se
     var dispatch = (0, react_redux_1.useDispatch)();
     var components = (0, useComponents_1["default"])();
     var calendarModalView = (calendarModalProps === null || calendarModalProps === void 0 ? void 0 : calendarModalProps.component) || components.ui.getView('content.CalendarSystemModalView');
-    var onEventSubmit = react_1["default"].useCallback(function (fields, eventInitialValues) {
+    var onModalFormSubmit = react_1["default"].useCallback(function (fields, eventInitialValues) {
         var _a;
         var eventGroupId = fields.eventGroupId, date = fields.date, title = fields.title, description = fields.description;
         var currentEventGroups = __spreadArray([], innerEventGroups, true);
@@ -63,7 +63,7 @@ var useCalendarSystemModals = function (calendarModalProps, innerEventGroups, se
         ], false), currentEventGroups.slice(changeableEventGroupIndex + 1), true);
         setInnerEventGroups(currentEventGroups);
     }, [innerEventGroups, setInnerEventGroups]);
-    var getModalProps = react_1["default"].useCallback(function (isCreate, eventInitialValues) { return (__assign(__assign({}, calendarModalProps), { component: calendarModalView, eventGroups: innerEventGroups, onEventSubmit: onEventSubmit, isCreate: isCreate, eventInitialValues: eventInitialValues })); }, [calendarModalProps, calendarModalView, innerEventGroups, onEventSubmit]);
+    var getModalProps = react_1["default"].useCallback(function (isCreate, eventInitialValues) { return (__assign(__assign({}, calendarModalProps), { component: calendarModalView, eventGroups: innerEventGroups, onModalFormSubmit: onModalFormSubmit, isCreate: isCreate, eventInitialValues: eventInitialValues })); }, [calendarModalProps, calendarModalView, innerEventGroups, onModalFormSubmit]);
     var getEventFromGroup = react_1["default"].useCallback(function (event) { return innerEventGroups
         .find(function (group) { return group.events
         .some(function (groupEvent) { return (0, isEqual_1["default"])((0, utils_1.getOmittedEvent)(groupEvent), (0, utils_1.getOmittedEvent)(event)); }); }); }, [innerEventGroups]);

package/ui/content/CalendarSystem/hooks/useCalendarType.d.ts

@@ -0,0 +1,5 @@
+import CalendarEnum from '../enums/CalendarType';
+export declare const useCalendarType: (onChangeCalendarType?: (newType: string) => void) => {
+    handleCalendarTypeChange: (newType: string) => void;
+    calendarType: CalendarEnum;
+};

package/ui/content/CalendarSystem/hooks/useCalendarType.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.useCalendarType = void 0;
+var react_1 = __importDefault(require("react"));
+var CalendarType_1 = __importDefault(require("../enums/CalendarType"));
+var useCalendarType = function (onChangeCalendarType) {
+    var _a = react_1["default"].useState(CalendarType_1["default"].MONTH), calendarType = _a[0], setCalendarType = _a[1];
+    var handleCalendarTypeChange = react_1["default"].useCallback(function (newType) {
+        setCalendarType(newType);
+        if (onChangeCalendarType) {
+            onChangeCalendarType(newType);
+        }
+    }, [onChangeCalendarType]);
+    return {
+        handleCalendarTypeChange: handleCalendarTypeChange,
+        calendarType: calendarType
+    };
+};
+exports.useCalendarType = useCalendarType;

package/ui/content/CalendarSystem/hooks/useEventsFromDate.d.ts

@@ -0,0 +1,5 @@
+import { IEvent, IEventGroup } from '../CalendarSystem';
+import CalendarEnum from '../enums/CalendarType';
+export declare const useEventsFromDate: (innerEventGroups: IEventGroup[], selectedEventGroupsIds: number[]) => {
+    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
+};

package/ui/content/CalendarSystem/hooks/useEventsFromDate.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a;
+exports.__esModule = true;
+exports.useEventsFromDate = void 0;
+/* eslint-disable default-case */
+var react_1 = __importDefault(require("react"));
+var dayjs_1 = __importDefault(require("dayjs"));
+var CalendarType_1 = __importDefault(require("../enums/CalendarType"));
+var addEventIfMatchDate_1 = require("../helpers/addEventIfMatchDate");
+var CALENDAR_TYPE_GETTING_EVENTS_PROPERTIES = (_a = {},
+    _a[CalendarType_1["default"].MONTH] = {
+        getDayJsDate: function (date) { return (0, dayjs_1["default"])(date); },
+        unit: 'day'
+    },
+    _a[CalendarType_1["default"].WEEK] = {
+        getDayJsDate: function (date) {
+            var eventDate = new Date(date);
+            eventDate.setHours(eventDate.getHours(), 0, 0, 0);
+            return (0, dayjs_1["default"])(eventDate);
+        },
+        unit: 'hours'
+    },
+    _a);
+var useEventsFromDate = function (innerEventGroups, selectedEventGroupsIds) {
+    var getEventsFromDate = react_1["default"].useCallback(function (dateFromDay, currentCalendarType) {
+        var resultEventsOnDate = [];
+        var dayjsDateFromDay = (0, dayjs_1["default"])(dateFromDay);
+        var forEachEventGroupEvent = function (callback) {
+            innerEventGroups.forEach(function (eventGroup) {
+                eventGroup.events.forEach(function (event) {
+                    callback(event, eventGroup);
+                });
+            });
+        };
+        var calendarTypeProperties = CALENDAR_TYPE_GETTING_EVENTS_PROPERTIES[currentCalendarType];
+        forEachEventGroupEvent(function (event, eventGroup) {
+            var eventDateDayJs = calendarTypeProperties.getDayJsDate(event.date);
+            (0, addEventIfMatchDate_1.addEventIfMatchDate)(eventDateDayJs, dayjsDateFromDay, eventGroup, event, calendarTypeProperties.unit, selectedEventGroupsIds, resultEventsOnDate);
+        });
+        return resultEventsOnDate;
+    }, [innerEventGroups, selectedEventGroupsIds]);
+    return {
+        getEventsFromDate: getEventsFromDate
+    };
+};
+exports.useEventsFromDate = useEventsFromDate;

package/ui/content/CalendarSystem/hooks/{useMonthCalendar.d.ts → useMonthGrid.d.ts}

@@ -1,6 +1,8 @@
 import React from 'react';
 import { IDay } from '../CalendarSystem';
-declare const useMonthCalendar: () => {
+declare const useMonthGrid: (currentMonthFirstDayDate: Date, setCurrentMonthFirstDayDate: React.Dispatch<React.SetStateAction<Date>>) => {
+    monthGridWeekDays: any;
+    monthGridCalendarDays: IDay[];
     getCalendarArray: () => IDay[];
     getCurrentMonthDataUTC: () => {
         currentMonth: number;
@@ -9,8 +11,5 @@ declare const useMonthCalendar: () => {
         daysInCurrentMonth: any[];
     };
     getWeekFromDate: (date: Date) => IDay[];
-    calendarArray: IDay[];
-    setCurrentMonthDate: React.Dispatch<React.SetStateAction<Date>>;
-    currentMonthDate: Date;
 };
-export default useMonthCalendar;
+export default useMonthGrid;