@steroidsjs/bootstrap 3.0.10 → 3.0.12

package/content/Calendar/CaptionElement.js

@@ -91,10 +91,10 @@ function CaptionElement(props) {
                 }, role: 'button', tabIndex: 0 },
                 React.createElement("span", { className: bem.element('selected-month') }, months.find(function (month) { return month.id === currentMonth; }).label),
                 React.createElement("span", { className: bem.element('selected-year') }, years.find(function (year) { return year === currentYear; }))),
-            React.createElement("div", { className: bem.element('container-icons') }, icons.map(function (icon, iconIndex) { return (React.createElement(Icon_1["default"], { key: iconIndex, name: icon.name, onClick: function (e) {
+            React.createElement("div", { className: bem.element('container-icons'), "data-test": 'fds' }, icons.map(function (icon, iconIndex) { return (React.createElement(Icon_1["default"], { key: iconIndex, name: icon.name, onClick: function (e) {
                     e.preventDefault();
                     icon.onClick();
-                }, className: bem.element('button'), "data-sourcecontrol": icon.sourceControl })); }))),
+                }, className: bem.element('button'), dataIcon: 'control-' + icon.sourceControl })); }))),
         isCaptionPanelVisible && (React.createElement("div", { className: bem.element('panel', { 'full-height': !props.showCalendarFooter }) },
             React.createElement("div", { className: bem.element('panel-header', 'months') }, __('Месяц')),
             React.createElement("div", { className: bem.element('panel-header', 'years') }, __('Год')),

package/content/CalendarSystem/AsideCalendars/AsideCalendars.d.ts

@@ -1,12 +1,7 @@
 import React from 'react';
-import { IEventGroup } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+import { ICalendarSystemViewProps } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
 import './AsideCalendars.scss';
-interface IAsideCalendarsProps {
-    eventGroups: IEventGroup[];
-    eventGroupsTitle: string;
-    onChangeEventGroupsIds: (selectedIds: number[]) => void;
-    openCreateEventGroupModal: () => void;
-}
+type IAsideCalendarsProps = Pick<ICalendarSystemViewProps, 'eventGroups' | 'eventGroupsTitle' | 'onChangeEventGroupsIds' | 'openCreateEventGroupModal'>;
 declare function AsideCalendars(props: IAsideCalendarsProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof AsideCalendars>;
 export default _default;

package/content/CalendarSystem/AsideHeader/AsideHeader.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
+import { ICalendarSystemViewProps } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
 import './AsideHeader.scss';
-interface IAsideHeaderProps {
-    onClick?: () => void;
+interface IAsideHeaderProps extends Pick<ICalendarSystemViewProps, 'openCreateModal'> {
     className?: string;
 }
 declare function AsideHeader(props: IAsideHeaderProps): JSX.Element;

package/content/CalendarSystem/AsideHeader/AsideHeader.js

@@ -35,6 +35,6 @@ function AsideHeader(props) {
     var bem = (0, useBem_1["default"])('AsideHeader');
     return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className) },
         react_1["default"].createElement(Title_1["default"], { content: __('Календарь'), className: bem.element('title') }),
-        react_1["default"].createElement(form_1.Button, { icon: "add", size: "sm", label: __('Создать'), className: bem.element('create'), onClick: props.onClick })));
+        react_1["default"].createElement(form_1.Button, { icon: "add", size: "sm", label: __('Создать'), className: bem.element('create'), onClick: function () { return props.openCreateModal(); } })));
 }
 exports["default"] = (0, react_1.memo)(AsideHeader);

package/content/CalendarSystem/CalendarSystemModalView.js

@@ -13,7 +13,7 @@ var react_1 = __importDefault(require("react"));
 var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var form_2 = require("@steroidsjs/core/actions/form");
-var ADD_EVENT_FORM_ID = 'AddEventForm';
+var ADD_EVENT_FORM_ID = 'add-event-form';
 function CalendarSystemModalView(props) {
     var bem = (0, useBem_1["default"])('CalendarSystemModalView');
     var dispatch = (0, hooks_1.useDispatch)();
@@ -24,7 +24,7 @@ function CalendarSystemModalView(props) {
     var onCloseModal = react_1["default"].useCallback(function () {
         props.onClose();
         dispatch((0, form_2.formSetErrors)(ADD_EVENT_FORM_ID, {}));
-    }, []);
+    }, [dispatch, props]);
     return (react_1["default"].createElement(Modal_1["default"], { title: props.isCreate ? __('Новое событие') : __('Редактирование события'), onClose: onCloseModal, className: bem.block(), shouldCloseOnEsc: true, shouldCloseOnOverlayClick: true },
         react_1["default"].createElement(form_1.Form, { className: bem.element('default-form'), formId: ADD_EVENT_FORM_ID, onBeforeSubmit: function (data) {
                 if (!data.eventGroupId) {
@@ -46,9 +46,18 @@ function CalendarSystemModalView(props) {
                     } })),
             react_1["default"].createElement("div", null,
                 react_1["default"].createElement(Text_1["default"], { content: __('Время и дата'), className: bem.element('label') }),
-                react_1["default"].createElement(form_1.DateTimeField, { attribute: 'date', required: true })),
+                react_1["default"].createElement(form_1.DateTimeField, { attribute: 'startDate', required: true }),
+                react_1["default"].createElement(form_1.DateTimeField, { attribute: 'endDate', required: true })),
             react_1["default"].createElement("div", null,
                 react_1["default"].createElement(Text_1["default"], { content: __('Описание'), className: bem.element('label') }),
-                react_1["default"].createElement(form_1.TextField, { attribute: 'description', required: true })))));
+                react_1["default"].createElement(form_1.TextField, { attribute: 'description', required: true })),
+            react_1["default"].createElement("div", null,
+                react_1["default"].createElement(Text_1["default"], { content: __('Пользователи'), className: bem.element('label') }),
+                react_1["default"].createElement(form_1.DropDownField, { attribute: 'usersIds', items: props.users.map(function (user) { return ({
+                        id: user.id,
+                        label: user.name
+                    }); }), outline: true, color: "primary", placeholder: '\u041F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0438', itemsContent: {
+                        type: 'checkbox'
+                    }, className: bem.element('users-field'), multiple: true, required: true })))));
 }
 exports["default"] = CalendarSystemModalView;

package/content/CalendarSystem/CalendarSystemModalView.scss

@@ -37,6 +37,7 @@
                     width: calc(84%);
 
                     .TextFieldView textarea {
+                        min-width: 100%;
                         height: 160px;
                     }
                 }
@@ -80,5 +81,10 @@
                 -webkit-box-orient: vertical;
             }
         }
+
+        #{$root}__users-field.DropDownFieldView { 
+            width: 600px;
+        }
     }
+
 }

package/content/CalendarSystem/CalendarSystemView.js

@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable max-len */
 var react_1 = __importDefault(require("react"));
 var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
 var Calendar_1 = __importDefault(require("@steroidsjs/core/ui/content/Calendar"));
@@ -21,24 +22,30 @@ var CalendarType_1 = __importDefault(require("@steroidsjs/core/ui/content/Calend
 var AsideHeader_1 = __importDefault(require("./AsideHeader"));
 var AsideCalendars_1 = __importDefault(require("./AsideCalendars"));
 var ContentHeader_1 = __importDefault(require("./ContentHeader"));
-var MonthGrid_1 = __importDefault(require("./MonthGrid"));
-var WeekGrid_1 = __importDefault(require("./WeekGrid"));
 function CalendarSystemView(props) {
     var bem = (0, useBem_1["default"])('CalendarSystemView');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var sharedFunctions = {
+        getEventsFromDate: props.getEventsFromDate,
+        openEditModal: props.openEditModal,
+        openCreateModal: props.openCreateModal
+    };
+    var renderDayGrid = props.dayGridProps.renderGridView, renderWeekGrid = props.weekGridProps.renderGridView, renderMonthGrid = props.monthGridProps.renderGridView;
     var calendarTypeGrids = react_1["default"].useMemo(function () {
         var _a;
         return (_a = {},
-            _a[CalendarType_1["default"].MONTH] = react_1["default"].createElement(MonthGrid_1["default"], __assign({}, props.monthGridProps)),
-            _a[CalendarType_1["default"].WEEK] = react_1["default"].createElement(WeekGrid_1["default"], __assign({}, props.weekGridProps)),
+            _a[CalendarType_1["default"].MONTH] = (react_1["default"].createElement(react_1["default"].Fragment, null, renderMonthGrid(__assign(__assign({}, props.monthGridProps), sharedFunctions)))),
+            _a[CalendarType_1["default"].WEEK] = (react_1["default"].createElement(react_1["default"].Fragment, null, renderWeekGrid(__assign(__assign({}, props.weekGridProps), sharedFunctions)))),
+            _a[CalendarType_1["default"].DAY] = (react_1["default"].createElement(react_1["default"].Fragment, null, renderDayGrid(__assign(__assign(__assign({}, props.dayGridProps), sharedFunctions), { users: props.users })))),
             _a);
-    }, [props.monthGridProps, props.weekGridProps]);
+    }, [props.dayGridProps, props.monthGridProps, props.users, props.weekGridProps, renderDayGrid, renderMonthGrid, renderWeekGrid, sharedFunctions]);
     return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), style: props.style },
         react_1["default"].createElement("aside", { className: bem.element('aside') },
-            react_1["default"].createElement(AsideHeader_1["default"], { onClick: props.openCreateModal, className: bem.element('aside-header') }),
-            react_1["default"].createElement(Calendar_1["default"], { showFooter: false, onMonthChange: props.onInnerCalendarChangeMonth }),
+            react_1["default"].createElement(AsideHeader_1["default"], { openCreateModal: props.openCreateModal, className: bem.element('aside-header') }),
+            react_1["default"].createElement(Calendar_1["default"], __assign({ showFooter: false, onTodayButtonClick: props.onCalendarChangedMonth, onMonthChange: props.onCalendarChangedMonth }, props.asideCalendarProps)),
             react_1["default"].createElement(AsideCalendars_1["default"], { eventGroups: props.eventGroups, eventGroupsTitle: props.eventGroupsTitle, onChangeEventGroupsIds: props.onChangeEventGroupsIds, openCreateEventGroupModal: props.openCreateEventGroupModal })),
         react_1["default"].createElement("div", { className: bem.element('content') },
-            react_1["default"].createElement(ContentHeader_1["default"], { dateToDisplay: props.dateToDisplay, onChangeCalendarType: props.handleCalendarTypeChange, handleControlClick: props.handleControlClick }),
+            react_1["default"].createElement(ContentHeader_1["default"], { dateToDisplay: props.dateToDisplay, handleCalendarTypeChange: props.handleCalendarTypeChange, onClickControl: props.onClickControl }),
             calendarTypeGrids[props.calendarType])));
 }
 exports["default"] = CalendarSystemView;

package/content/CalendarSystem/ContentHeader/ContentHeader.d.ts

@@ -1,10 +1,7 @@
 import React from 'react';
+import { ICalendarSystemViewProps } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
 import './ContentHeader.scss';
-interface IContentHeaderProps {
-    dateToDisplay: string;
-    onChangeCalendarType: (newType: string) => void;
-    handleControlClick: (event: React.MouseEvent<HTMLElement>) => void;
-}
+type IContentHeaderProps = Pick<ICalendarSystemViewProps, 'dateToDisplay' | 'handleCalendarTypeChange' | 'onClickControl'>;
 declare function ContentHeader(props: IContentHeaderProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof ContentHeader>;
 export default _default;

package/content/CalendarSystem/ContentHeader/ContentHeader.js

@@ -16,11 +16,11 @@ function ContentHeader(props) {
     var bem = (0, useBem_1["default"])('ContentHeader');
     return (react_1["default"].createElement("div", { className: bem.block() },
         react_1["default"].createElement(Text_1["default"], { content: props.dateToDisplay, className: bem.element('month') }),
-        react_1["default"].createElement("ul", { className: bem.element('controls'), onClick: props.handleControlClick }, Object.entries(DateControlType_1["default"].getIcons()).map(function (_a, controlIndex) {
+        react_1["default"].createElement("ul", { className: bem.element('controls'), onClick: props.onClickControl }, Object.entries(DateControlType_1["default"].getIcons()).map(function (_a, controlIndex) {
             var controlLabel = _a[0], controlIcon = _a[1];
             return (react_1["default"].createElement("li", { key: controlIndex, className: bem.element('controls-item'), "data-control": controlLabel },
                 react_1["default"].createElement(content_1.Icon, { className: bem.element('controls-item-icon'), name: controlIcon })));
         })),
-        react_1["default"].createElement(nav_1.ButtonGroup, { className: bem.element('measures'), items: CalendarType_1["default"], onClick: props.onChangeCalendarType, defaultActiveButton: CalendarType_1["default"].MONTH })));
+        react_1["default"].createElement(nav_1.ButtonGroup, { className: bem.element('measures'), items: CalendarType_1["default"], onClick: props.handleCalendarTypeChange, defaultActiveButton: CalendarType_1["default"].MONTH })));
 }
 exports["default"] = react_1["default"].memo(ContentHeader);

package/content/CalendarSystem/ContentHeader/ContentHeader.scss

@@ -25,6 +25,7 @@ $calendar-system-caption-arrow-background-color: var(--calendar-system-caption-a
         margin-right: 93px;
         margin-bottom: 0;
         width: 190px;
+        white-space: nowrap;
     }
 
     &__controls {

package/content/CalendarSystem/DayGrid/DayGrid.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ICalendarSystemViewProps } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+import './DayGrid.scss';
+type IDayGridProps = Pick<ICalendarSystemViewProps, 'openEditModal' | 'openCreateModal' | 'getEventsFromDate' | 'users'> & ICalendarSystemViewProps['dayGridProps'];
+declare function DayGrid(props: IDayGridProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof DayGrid>;
+export default _default;

package/content/CalendarSystem/DayGrid/DayGrid.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var typography_1 = require("@steroidsjs/core/ui/typography");
+require("./DayGrid.scss");
+function DayGrid(props) {
+    var _a, _b;
+    var bem = (0, useBem_1["default"])('DayGrid');
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        react_1["default"].createElement("div", { className: bem.element('content') },
+            react_1["default"].createElement("div", { className: bem.element('hours-time') }, props.dayGridTwentyFourHoursArray.map(function (hour, hourIndex) { return (react_1["default"].createElement("div", { key: hourIndex, className: bem.element('hours-time-item') }, hour)); })),
+            react_1["default"].createElement("div", { className: bem.element('table') },
+                react_1["default"].createElement("div", { className: bem.element('table-heading'), style: {
+                        gridTemplateColumns: "repeat(".concat((_a = props.users) === null || _a === void 0 ? void 0 : _a.length, ", 200px)")
+                    } }, (_b = props.users) === null || _b === void 0 ? void 0 : _b.map(function (user, userIndex) { return (react_1["default"].createElement(typography_1.Text, { key: userIndex, className: bem.element('header') },
+                    react_1["default"].createElement("span", { className: bem.element('header-wrapper') },
+                        react_1["default"].createElement("span", { className: bem.element('header-label') }, user.name),
+                        react_1["default"].createElement("span", { className: bem.element('header-caption') }, user.caption)))); })),
+                react_1["default"].createElement("div", { className: bem.element('table-grid') }, props.dayGridTwentyFourHoursArray.map(function (hour, hourIndex) { return (react_1["default"].createElement("div", { key: hourIndex, className: bem.element('table-grid-row') }, props.users.map(function (user, userIndex) { return (react_1["default"].createElement(react_1["default"].Fragment, { key: userIndex }, props.renderHourView({
+                    hour: hour,
+                    getEventsFromDate: props.getEventsFromDate,
+                    user: user,
+                    openEditModal: props.openEditModal,
+                    openCreateModal: props.openCreateModal,
+                    currentDay: props.dayGridCurrentDay,
+                    renderEventView: props.renderEventView
+                }))); }))); }))))));
+}
+exports["default"] = react_1["default"].memo(DayGrid);

package/content/CalendarSystem/DayGrid/DayGrid.scss

@@ -0,0 +1,111 @@
+@use "style/variables";
+
+:root {
+    --calendar-system-hour-border-color: #dbe2e6;
+    --calendar-system-time-background-color: #fff;
+    --calendar-system-today-background-color: #dbe2e6;
+    --calendar-system-today-border-color: #cbd5db;
+}
+
+html[data-theme="dark"] {
+    --calendar-system-hour-border-color: #333646;
+    --calendar-system-time-background-color: #4b4e5e;
+    --calendar-system-today-background-color: #191b1f;
+    --calendar-system-today-border-color: #333646;
+    --calendar-system-today-day-background-color: #651fff;
+}
+
+$calendar-system-hour-border-color: var(--calendar-system-hour-border-color);
+$calendar-system-time-background-color: var(--calendar-system-time-background-color);
+$calendar-system-today-background-color: var(--calendar-system-today-background-color);
+$calendar-system-today-border-color: var(--calendar-system-today-border-color);
+
+$calendar-border-style: 1px solid $calendar-system-hour-border-color;
+$calendar-today-border-style: 1px solid $calendar-system-today-border-color;
+
+.DayGrid {
+    $root: &;
+    @include variables.scrollWrapper(568px, 20px, variables.$scroll-thumb-color, variables.$scroll-track-color);
+
+    &__content {
+        display: flex;
+
+        #{$root}__hours-time {
+            display: flex;
+            flex-flow: column nowrap;
+            justify-content: space-around;
+            flex-shrink: 0;
+            margin-right: 8px;
+            margin-top: 32px;
+
+            &-item {
+                width: 40px;
+                height: 24px;
+                border-radius: variables.$radius-small;
+                background-color: $calendar-system-time-background-color;
+                color: var(--custom-text-color-base);
+                font-size: variables.$font-size-xs;
+                font-weight: variables.$font-weight-sm;
+                line-height: variables.$line-height-xs;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+    }
+
+    &__table {
+        &-heading {
+            display: grid;
+            margin-bottom: 0;
+
+            #{$root}__header {
+                margin-bottom: 0;
+
+                font-size: variables.$font-size-sm;
+                font-weight: variables.$font-weight-md;
+                line-height: variables.$line-height-sm;
+
+                &-label {
+                    display: block;
+                }
+
+                &-caption {
+                    display: block;
+                }
+            }
+        }
+
+        &-grid {
+            width: auto;
+            display: grid;
+            grid-template-rows: repeat(24, auto);
+
+            &-row {
+                display: flex;
+                flex: row nowrap;
+                height: 150px;
+
+                .DayHour__hour { 
+                    flex-basis: 200px;
+                    flex-shrink: 0;
+                }
+
+                //Borders
+                &:first-child .DayHour__hour {
+                    border-top: $calendar-border-style;
+                }
+
+                .DayHour__hour {
+                    border-right: $calendar-border-style;
+                    border-bottom: $calendar-border-style;
+
+                    &:first-child {
+                        border-left: $calendar-border-style;
+                    }
+                }
+            }
+        }
+    }
+}

package/content/CalendarSystem/DayGrid/index.d.ts

@@ -0,0 +1,2 @@
+import DayGrid from './DayGrid';
+export default DayGrid;

package/content/CalendarSystem/DayGrid/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var DayGrid_1 = __importDefault(require("./DayGrid"));
+exports["default"] = DayGrid_1["default"];

package/content/CalendarSystem/DayGrid/views/DayHour/DayHour.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ICalendarSystemViewProps, ICalendarUser, IDay } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+import './DayHour.scss';
+interface IDayHourProps extends Pick<ICalendarSystemViewProps, 'openEditModal' | 'openCreateModal' | 'getEventsFromDate'> {
+    hour: string;
+    user: ICalendarUser;
+    currentDay: IDay;
+    renderEventView: (componentProps: any) => React.ReactNode;
+}
+export default function DayHour(props: IDayHourProps): JSX.Element;
+export {};

package/content/CalendarSystem/DayGrid/views/DayHour/DayHour.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable @typescript-eslint/no-shadow */
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var calendar_1 = require("@steroidsjs/core/utils/calendar");
+var cloneDeep_1 = __importDefault(require("lodash-es/cloneDeep"));
+var CalendarType_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType"));
+var get_1 = __importDefault(require("lodash-es/get"));
+require("./DayHour.scss");
+function DayHour(props) {
+    var bem = (0, useBem_1["default"])('DayHour');
+    var events = react_1["default"].useMemo(function () {
+        var eventsIds = props.user.eventsIds;
+        var callingDate = new Date(props.currentDay.date);
+        var timeArray = props.hour.replace(':', '').split('');
+        callingDate.setHours(Number(timeArray[0] + timeArray[1]), 0, 0, 0);
+        var _events = props.getEventsFromDate(callingDate, CalendarType_1["default"].DAY)
+            .filter(function (event) { return eventsIds.includes(event.id); });
+        return {
+            events: _events
+        };
+    }, [props]).events;
+    var handleEventClick = react_1["default"].useCallback(function (event) {
+        var eventFromHour = event.target;
+        var eventId = (0, get_1["default"])(eventFromHour, 'dataset.eventid');
+        if (!eventId) {
+            return;
+        }
+        var requiredEvent = events.filter(function (hourEvent) { return hourEvent.id === Number(eventId); })[0];
+        props.openEditModal(requiredEvent);
+    }, [events, props]);
+    var handleOnContextMenuCreateClick = react_1["default"].useCallback(function (e) {
+        e.preventDefault();
+        var day = (0, cloneDeep_1["default"])(props.currentDay);
+        day.date.setHours(Number((0, calendar_1.convertDate)(props.hour, 'HH:mm', 'H')), 0, 0, 0);
+        props.openCreateModal(day);
+    }, [props]);
+    return (react_1["default"].createElement("div", { className: bem.element('hour'), onClick: handleEventClick, onContextMenu: handleOnContextMenuCreateClick }, events.map(function (event) { return props.renderEventView({
+        event: event
+    }); })));
+}
+exports["default"] = DayHour;

package/content/CalendarSystem/DayGrid/views/DayHour/DayHour.scss

@@ -0,0 +1,7 @@
+@use 'style/variables';
+
+.DayHour {
+    &__hour { 
+       position: relative;
+    }
+}

package/content/CalendarSystem/DayGrid/views/DayHour/index.d.ts

@@ -0,0 +1,2 @@
+import DayHour from './DayHour';
+export default DayHour;

package/content/CalendarSystem/DayGrid/views/DayHour/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var DayHour_1 = __importDefault(require("./DayHour"));
+exports["default"] = DayHour_1["default"];

package/content/CalendarSystem/DayGrid/views/DayHour/views/DayEvent/DayEvent.d.ts

@@ -0,0 +1,7 @@
+import { IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+import './DayEvent.scss';
+interface IDayEventProps {
+    event: IEvent;
+}
+export default function DayEvent({ event }: IDayEventProps): JSX.Element;
+export {};

package/content/CalendarSystem/DayGrid/views/DayHour/views/DayEvent/DayEvent.js

@@ -0,0 +1,30 @@
+"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;
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var utils_1 = require("@steroidsjs/core/ui/content/CalendarSystem/utils/utils");
+var Tooltip_1 = __importDefault(require("@steroidsjs/core/ui/layout/Tooltip/Tooltip"));
+require("./DayEvent.scss");
+function DayEvent(_a) {
+    var event = _a.event;
+    var bem = (0, useBem_1["default"])('DayEvent');
+    return (react_1["default"].createElement(Tooltip_1["default"], { position: 'rightBottom', content: event.title, className: bem.element('tooltip'), key: event.id },
+        react_1["default"].createElement("div", { className: bem.element('event'), style: __assign({ backgroundColor: event.color, height: "".concat((0, utils_1.getProportionFromEvent)(event), "%") }, (0, utils_1.getTopMarginFromEvent)(event)), title: event.title, "data-eventid": event.id },
+            react_1["default"].createElement("span", { className: bem.element('event-time') }, "".concat((0, utils_1.formatEventTime)(event.startDate), " - ").concat((0, utils_1.formatEventTime)(event.endDate))),
+            react_1["default"].createElement("span", { className: bem.element('event-title') }, event.title))));
+}
+exports["default"] = DayEvent;

package/content/CalendarSystem/DayGrid/views/DayHour/views/DayEvent/DayEvent.scss

@@ -0,0 +1,25 @@
+@use 'style/variables';
+@use "../../../../../../../scss/mixins";
+
+.DayEvent {
+    &__tooltip {
+        @include mixins.calendar-tooltip();
+    }
+
+    &__event { 
+        overflow: hidden;
+        width: 100%;
+        position: absolute;
+        height: 100%;
+        cursor: pointer;
+
+        &-title { 
+            display: block;
+            pointer-events: none;
+        }
+        &-time { 
+            display: block;
+            pointer-events: none;
+        }
+    }
+}

package/content/CalendarSystem/DayGrid/views/DayHour/views/DayEvent/index.d.ts

@@ -0,0 +1,2 @@
+import DayEvent from './DayEvent';
+export default DayEvent;

package/content/CalendarSystem/DayGrid/views/DayHour/views/DayEvent/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var DayEvent_1 = __importDefault(require("./DayEvent"));
+exports["default"] = DayEvent_1["default"];

package/content/CalendarSystem/MonthGrid/MonthGrid.d.ts

@@ -1,14 +1,7 @@
 import React from 'react';
-import { IDay, IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
-import CalendarEnum from '@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType';
+import { ICalendarSystemViewProps } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
 import './MonthGrid.scss';
-interface IMonthGridProps {
-    monthGridWeekDays: string[];
-    monthGridCalendarDays: IDay[];
-    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
-    openEditModal: (event: IEvent) => void;
-    openCreateModal: (eventInitialDay?: IDay) => void;
-}
+type IMonthGridProps = Pick<ICalendarSystemViewProps, 'openEditModal' | 'openCreateModal' | 'getEventsFromDate'> & ICalendarSystemViewProps['monthGridProps'];
 declare function MonthGrid(props: IMonthGridProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof MonthGrid>;
 export default _default;

package/content/CalendarSystem/MonthGrid/MonthGrid.js

@@ -26,14 +26,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable max-len */
 var react_1 = __importStar(require("react"));
 var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
 require("./MonthGrid.scss");
-var MonthDay_1 = __importDefault(require("./views/MonthDay"));
 function MonthGrid(props) {
     var bem = (0, useBem_1["default"])('MonthGrid');
     return (react_1["default"].createElement("div", { className: bem.block() },
         react_1["default"].createElement("div", { className: bem.element('week-days') }, props.monthGridWeekDays.map(function (day, dayIndex) { return (react_1["default"].createElement("span", { key: dayIndex, className: bem.element('week-days-day') }, day)); })),
-        react_1["default"].createElement("div", { className: bem.element('grid') }, props.monthGridCalendarDays.map(function (day, dayIndex) { return (react_1["default"].createElement(MonthDay_1["default"], { key: dayIndex, openEditModal: props.openEditModal, getEventsFromDate: props.getEventsFromDate, openCreateModal: props.openCreateModal, day: day })); }))));
+        react_1["default"].createElement("div", { className: bem.element('grid') }, props.monthGridCalendarDays.map(function (day, dayIndex) { return (react_1["default"].createElement(react_1["default"].Fragment, { key: dayIndex }, props.renderHourView({
+            openEditModal: props.openEditModal,
+            openCreateModal: props.openCreateModal,
+            getEventsFromDate: props.getEventsFromDate,
+            renderEventView: props.renderEventView,
+            day: day
+        }))); }))));
 }
 exports["default"] = (0, react_1.memo)(MonthGrid);

package/content/CalendarSystem/MonthGrid/views/MonthDay/MonthDay.d.ts

@@ -1,11 +1,9 @@
-import CalendarEnum from '@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType';
-import { IDay, IEvent } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
+import React from 'react';
+import { ICalendarSystemViewProps, IDay } from '@steroidsjs/core/ui/content/CalendarSystem/CalendarSystem';
 import './MonthDay.scss';
-interface IMonthDayProps {
+interface IMonthDayProps extends Pick<ICalendarSystemViewProps, 'openEditModal' | 'openCreateModal' | 'getEventsFromDate'> {
     day: IDay;
-    getEventsFromDate: (dateFromDay: Date, currentCalendarType: CalendarEnum) => IEvent[];
-    openEditModal: (event: IEvent) => void;
-    openCreateModal: (eventInitialDay?: IDay) => void;
+    renderEventView: (componentProps: any) => React.ReactNode;
 }
 export default function MonthDay(props: IMonthDayProps): JSX.Element;
 export {};

package/content/CalendarSystem/MonthGrid/views/MonthDay/MonthDay.js

@@ -16,7 +16,6 @@ exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
 var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
 var CalendarType_1 = __importDefault(require("@steroidsjs/core/ui/content/CalendarSystem/enums/CalendarType"));
-var Tooltip_1 = __importDefault(require("@steroidsjs/core/ui/layout/Tooltip/Tooltip"));
 var slice_1 = __importDefault(require("lodash-es/slice"));
 var get_1 = __importDefault(require("lodash-es/get"));
 var form_1 = require("@steroidsjs/core/ui/form");
@@ -39,10 +38,6 @@ function MonthDay(props) {
         };
     }, [getEventsFromDate, props.day.date]), events = _b.events, hasSixEvents = _b.hasSixEvents;
     var formattedExpandLabel = react_1["default"].useMemo(function () { return (0, getFormattedExpandLabel_1.getFormattedExpandRestLabel)((0, slice_1["default"])(__spreadArray([], events, true), SIXTH_ELEMENT_INDEX)); }, [events]);
-    var renderEvent = react_1["default"].useCallback(function (event, eventIndex) { return (react_1["default"].createElement(Tooltip_1["default"], { key: event.id, position: 'rightBottom', content: event.title, className: bem.element('tooltip') },
-        react_1["default"].createElement("span", { className: bem.element('event'), "data-eventid": event.id },
-            react_1["default"].createElement("span", { className: bem.element('event-dot'), style: { backgroundColor: event.color } }),
-            event.title))); }, [bem]);
     var handleEventClick = react_1["default"].useCallback(function (event) {
         var eventFromHour = event.target;
         var eventId = (0, get_1["default"])(eventFromHour, 'dataset.eventid');
@@ -67,7 +62,9 @@ function MonthDay(props) {
             react_1["default"].createElement("div", { className: bem.element('content', {
                     isExpanded: isExpanded
                 }) },
-                events.map(renderEvent),
+                events.map(function (event) { return props.renderEventView({
+                    event: event
+                }); }),
                 hasSixEvents && !isExpanded && (react_1["default"].createElement(form_1.Button, { link: true, className: bem.element('expand-button'), onClick: function () { return setIsExpanded(true); } }, formattedExpandLabel))))));
 }
 exports["default"] = MonthDay;