josenanodev-react-components-library 0.0.8 → 0.0.10

package/dist/esm/components/Multicalendar/Multicalendar.css

@@ -11,19 +11,37 @@
   transition: 0.5s;
 }
 
-.multicalendar .controles {
+.multicalendar .div-upper-left-component {
+  grid-area: fil;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  background-color: white;
+  border-bottom: 1px solid rgb(235, 235, 235);
+  border-right: 1px solid rgb(235, 235, 235);
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.multicalendar .controls {
   grid-area: con;
   height: 100%;
   padding: 2px;
   box-sizing: border-box;
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
   box-sizing: border-box;
   border-bottom: var(--border-tenues);
+  
 }
 
-.multicalendar .filtros-logo {
+.multicalendar .div-upper-left-component {
   grid-area: fil;
   position: relative;
   width: 100%;
@@ -38,19 +56,8 @@
   justify-content: flex-end;
 }
 
-.multicalendar .filtros-logo .logo {
-  max-height: 68px;
-  width: fit-content;
-  align-self: center;
-}
-
-.multicalendar .filtros-logo .pop-up-filtros {
-  position: absolute;
-  top: 100%;
-  left: 8px;
-}
 
-.multicalendar .eje-vertical {
+.multicalendar .vertical-axis {
   grid-area: ver;
   position: relative;
   width: 100%;
@@ -59,19 +66,19 @@
   z-index: 1;
 }
 
-.multicalendar .eje-horizontal {
+.multicalendar .horizontal-axis {
   grid-area: hor;
   position: relative;
   max-width: 100%;
   height: 100%;
 }
 
-.multicalendar .controles .div-dropdown-fechas-boton-hoy {
+.multicalendar .controls .div-dates-navigation {
   display: flex;
   align-items: center;
 }
 
-.multicalendar .controles .div-dropdown-fechas-boton-hoy button {
+.multicalendar .controls .div-dates-navigation button {
   cursor: pointer;
   margin: 0px;
   position: relative;
@@ -89,131 +96,13 @@
   height: calc(100% - 16px);
 }
 
-.multicalendar .controles {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-}
-
-.multicalendar .controles .reload-properties-button,
-.multicalendar .controles .reload-prices-button {
-  height: 30px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  text-decoration: none;
-  font-size: 14px;
-  color: rgb(255, 255, 255);
-  font-weight: 600;
-  border-radius: 4px;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 2px;
-  background: var(--primary-color);
-  width: 180px;
-  transition: all 0.2s;
-}
-
-.multicalendar .controles .reload-properties-button:disabled,
-.multicalendar .controles .reload-prices-button:disabled {
-  background: rgb(255, 255, 255);
-  color: var(--primary-color);
-  border-color: var(--primary-color);
-}
-
-.multicalendar .controles .reload-properties-button svg,
-.multicalendar .controles .reload-prices-button svg {
-  animation-name: refrescando-precios-giro;
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  font-size: 20px;
-}
-
-.multicalendar .controles .boton-refrescar {
-  height: 30px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  text-decoration: none;
-  width: auto;
-  touch-action: manipulation;
-  font-size: 14px;
-  line-height: 14px;
-  letter-spacing: normal;
-  color: rgb(255, 255, 255);
-  font-weight: 600;
-  border-radius: 4px;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 2px;
-  background: var(--primary-color);
-  width: 90px;
-  transition: all 0.2s;
-}
-
-.multicalendar .controles .boton-refrescar:focus {
-  outline: none;
-}
-
-.multicalendar .controles .boton-refrescar:disabled {
-  background: rgb(255, 255, 255);
-  color: var(--primary-color);
-  border-color: var(--primary-color);
-}
-
-.multicalendar .controles .boton-refrescar svg {
-  animation-name: refrescando-precios-giro;
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  font-size: 26px;
-}
-
-.multicalendar .controles .div-boton-toggle-reservaciones {
-  display: flex;
-  align-items: center;
-  height: 28px;
-}
-
-.multicalendar .controles .div-boton-toggle-reservaciones p {
-  margin: 0px;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  padding: 4px 8px;
-  box-sizing: border-box;
-  color: dimgray;
-  font-weight: 600;
-  font-size: 16px;
-  height: 100%;
-}
-
-.multicalendar .controles .div-boton-toggle-multidashboard-pickup {
-  display: flex;
-  align-items: center;
-  height: 28px;
-}
-
-.multicalendar .controles .div-boton-toggle-multidashboard-pickup p {
+.multicalendar .controls .div-aditional-controls-components {
   display: flex;
+  justify-content: flex-end;
   align-items: center;
-  margin: 0px;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  padding: 4px 8px;
-  box-sizing: border-box;
-  color: dimgray;
-  font-weight: 600;
-  font-size: 14px;
-  height: 100%;
 }
 
-.multicalendar .div-contenedor-principal {
+.multicalendar .div-main-container {
   grid-area: gri;
   height: 100%;
   position: relative;
@@ -221,7 +110,7 @@
   overflow: hidden;
 }
 
-.multicalendar .div-contenedor-principal .div-cargando-contenedor-principal {
+.multicalendar .div-main-container .div-cargando-contenedor-principal {
   position: absolute;
   top: 0;
   left: 0;
@@ -234,53 +123,28 @@
   background-color: rgba(236, 236, 236, 0.8);
 }
 
-.multicalendar .contendor-principal {
+.multicalendar .main-container {
   position: relative;
   min-width: 100%;
   height: 100%;
   overflow-x: scroll;
 }
 
-.multicalendar .contendor-principal .div-filas-celdas {
-  box-sizing: border-box;
-}
-
-.multicalendar .contendor-principal .div-filas-celdas .div-altura-filas-celdas {
-  box-sizing: border-box;
-}
-
-.multicalendar .eje-vertical .lista-anuncios {
+.multicalendar .vertical-axis .div-list-element-column {
   height: 100%;
   overflow-y: scroll;
   box-sizing: border-box;
 }
 
-.multicalendar .eje-vertical .lista-anuncios .div-cargando-lista-anuncios {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 2;
-  background-color: rgba(72, 72, 72, 0.1);
-}
-
-.multicalendar .eje-vertical .lista-anuncios .div-altura-lista-anuncios {
-  box-sizing: border-box;
-}
-
-.multicalendar .eje-horizontal .div-botones-fechas {
+.multicalendar .horizontal-axis .div-weeks-buttons {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 64px;
 }
 
-.multicalendar .eje-horizontal .div-botones-fechas .boton-semana-pasada,
-.multicalendar .eje-horizontal .div-botones-fechas .boton-semana-siguiente {
+.multicalendar .horizontal-axis .div-weeks-buttons .past-week-button,
+.multicalendar .horizontal-axis .div-weeks-buttons .next-week-button {
   z-index: 2;
   position: absolute;
   background-color: transparent;
@@ -297,27 +161,27 @@
   box-shadow: 0px 0px 8px 8px white;
 }
 
-.multicalendar .eje-horizontal .div-botones-fechas .boton-semana-pasada:hover,
-.multicalendar .eje-horizontal .div-botones-fechas .boton-semana-siguiente:hover {
+.multicalendar .horizontal-axis .div-weeks-buttons .past-week-button:hover,
+.multicalendar .horizontal-axis .div-weeks-buttons .next-week-button:hover {
   background: rgb(247, 247, 247);
   box-shadow: 0px 0px 8px 8px rgb(247 247 247);
 }
 
-.multicalendar .eje-horizontal .div-botones-fechas .boton-semana-pasada:active,
-.multicalendar .eje-horizontal .div-botones-fechas .boton-semana-siguiente:active {
+.multicalendar .horizontal-axis .div-weeks-buttons .past-week-button:active,
+.multicalendar .horizontal-axis .div-weeks-buttons .next-week-button:active {
   background: rgb(167, 167, 167);
   box-shadow: 0px 0px 8px 8px rgb(167, 167, 167);
 }
 
-.multicalendar .eje-horizontal .div-botones-fechas .boton-semana-pasada {
+.multicalendar .horizontal-axis .div-weeks-buttons .past-week-button {
   left: 5px;
 }
 
-.multicalendar .eje-horizontal .div-botones-fechas .boton-semana-siguiente {
+.multicalendar .horizontal-axis .div-weeks-buttons .next-week-button {
   right: 5px;
 }
 
-.multicalendar .eje-horizontal .div-fila-fechas {
+.multicalendar .horizontal-axis .div-dates-row {
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -325,57 +189,3 @@
   border-bottom: 1px solid rgb(235, 235, 235);
   box-sizing: border-box;
 }
-
-.multicalendar .div-multidashboard-pickup {
-  grid-area: das;
-  height: 100%;
-  background: rgb(255, 255, 255);
-  border-left: 1px solid rgb(228, 228, 228);
-  overflow-y: auto;
-  transition: all 0.5s;
-}
-
-.div-multidashboard-pickup-abierto {
-  width: 540px;
-}
-
-.div-multidashboard-pickup-cerrado {
-  width: 0px;
-}
-
-.multicalendar .div-multidashboard-pickup::-webkit-scrollbar {
-  display: none;
-}
-
-@keyframes refrescando-precios-giro {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media screen and (max-width: 970px) {
-  .multicalendar .controles .boton-refrescar {
-    font-size: 12px;
-    width: 75px;
-  }
-  .multicalendar .boton-competidores .boton-desplegable {
-    font-size: 12px;
-  }
-  .multicalendar .boton-sin-cambios-que-sincronizar {
-    min-width: 175px;
-    font-size: 12px;
-  }
-  .multicalendar .controles .div-boton-toggle-multidashboard-pickup p {
-    font-size: 12px;
-  }
-  .multicalendar .dropdown-navegador-meses {
-    width: 155px;
-    font-size: 12px;
-  }
-  .multicalendar .controles .div-dropdown-fechas-boton-hoy button {
-    font-size: 12px;
-  }
-}

package/dist/esm/components/Multicalendar/Multicalendar.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import "./Multicalendar.css";
 import { MulticalendarPropsType } from "./types";
-declare const Multicalendar: ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, cellsWidth, cellsHeight, verticalAxisWidth, horizontalAxisHeight, horizontalInitialCellQuantity, chunkRenderX, chunkRenderY, dynamicPagination, draggingOverDateCells, logoUrl, waitTimeForCalls, callsOnScrollingStops, }: MulticalendarPropsType) => JSX.Element;
+declare const Multicalendar: ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible, cellsWidth, cellsHeight, verticalAxisWidth, horizontalAxisHeight, pastDaysInitialQuantity, futureDaysInitialQuantity, chunkRenderX, chunkRenderY, dynamicDaysQuantity, draggingOverDateCells, waitTimeForCalls, callsOnScrollingMoves, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, }: MulticalendarPropsType) => JSX.Element;
 export default Multicalendar;

package/dist/esm/components/Multicalendar/Multicalendar.js

@@ -2,22 +2,22 @@ import React, { useEffect, useState, useRef } from "react";
 import * as Funciones from "./MulticalendarOwnFunctions";
 import "./Multicalendar.css";
 //Assets
-import * as BootstrapIcons from "react-icons/bs";
+import { BsChevronLeft, BsChevronRight } from "react-icons/bs";
 //Componentes
 import DatesRow from "./subcomponents/individuals/DatesRow/DatesRow";
 import ListElementsColumn from "./subcomponents/composites/ListElementsColumn/ListElementsColumn";
 import DatesGrid from "./subcomponents/composites/DatesGrid/DatesGrid";
-import DropdownNavegadorMeses from "./subcomponents/individuals/DropdownMonthNavigation/DropdownMonthNavigation";
+import DropdownMonthNavigation from "./subcomponents/individuals/DropdownMonthNavigation/DropdownMonthNavigation";
 //Hooks
 import useWindowSize from "../../hooks/useWindowsSize";
 //Utils
 import sqlToJsDate from "../../utils/sqlToJsDate";
 //Services
 import { eraseMulticalendarYScrollPosition, getMulticalendarYScrollPosition, } from "../../Services/MulticalendarStatesAndSettings";
-const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, cellsWidth = 120, cellsHeight = 80, verticalAxisWidth = 280, horizontalAxisHeight = 148, horizontalInitialCellQuantity = 1000, chunkRenderX = 0, chunkRenderY = 0, dynamicPagination = false, draggingOverDateCells = false, logoUrl, waitTimeForCalls = 500, callsOnScrollingStops, }) => {
+const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible = true, cellsWidth = 120, cellsHeight = 80, verticalAxisWidth = 280, horizontalAxisHeight = 148, pastDaysInitialQuantity = 365, futureDaysInitialQuantity = 365, chunkRenderX = 0, chunkRenderY = 0, dynamicDaysQuantity = false, draggingOverDateCells = false, waitTimeForCalls = 500, callsOnScrollingMoves, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, }) => {
     //Constantes del componente
     const origin = {
-        x: Math.ceil(horizontalInitialCellQuantity / 2) * cellsWidth,
+        x: pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) * cellsWidth : 0,
         y: 0,
     };
     const initialDateOffset = 2 + chunkRenderX;
@@ -28,8 +28,8 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
     //Estados
     const [firtsCall, setFirtsCall] = useState(false);
     const [windowWidth, windowHeight] = useWindowSize();
-    const [rightPagination, setRightPagination] = useState(Math.ceil(horizontalInitialCellQuantity / 2));
-    const [leftPagination, setLeftPagination] = useState(0);
+    const [futureDaysQuantity, setFutureDaysQuantity] = useState(Math.ceil(futureDaysInitialQuantity));
+    const [pastDaysQuantity, setPastDaysQuantity] = useState(pastDatesVisible ? Math.ceil(pastDaysInitialQuantity) : 0);
     const [paginationWidth, setPaginationWidth] = useState(0);
     const [paginationHeight, setPaginationHeight] = useState(0);
     const [xOffset, setXOffset] = useState(1);
@@ -49,6 +49,14 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
     const [clientYPositionOnGrid, setClientYPositionOnGrid] = useState(undefined);
     const [scrollingOnCourse, setScrollingOnCourse] = useState(false);
     //UseEffects
+    useEffect(() => {
+        if (pastDatesVisible) {
+            setPastDaysQuantity(Math.ceil(pastDaysInitialQuantity));
+        }
+        else {
+            setPastDaysQuantity(0);
+        }
+    }, [pastDatesVisible, pastDaysInitialQuantity]);
     useEffect(() => {
         //Delegamos un cambio de estado a los primero renderes para evitar duplicado de llamadas a la API
         if (!firtsCall) {
@@ -137,7 +145,7 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
                     });
             }
             setXOffset(Funciones.defineXOffset(xPosition, cellsWidth, chunkRenderX));
-            const fechaMinimaMilisegundos = Funciones.minimalDateMilliseconds(xPosition, cellsWidth, leftPagination, initialDateOffset);
+            const fechaMinimaMilisegundos = Funciones.minimalDateMilliseconds(xPosition, cellsWidth, pastDaysQuantity, initialDateOffset);
             setMinimumVisibleDate(Funciones.defineMinimalVisibleDate(fechaMinimaMilisegundos, initialDateOffset));
             if (updateList)
                 setUpdateList(false);
@@ -150,7 +158,7 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
         chunkRenderX,
         cellsWidth,
         initialDateOffset,
-        leftPagination,
+        pastDaysQuantity,
         renderCoordinates.x,
         renderCoordinates.y,
         origin.x,
@@ -169,7 +177,10 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
         }
     }, [xPosition, yPosition, idTimeoutForCalls, waitTimeForCalls]);
     useEffect(() => {
-        if (!scrollingOnCourse && callsOnScrollingStops) {
+        if (scrollingOnCourse && callsOnScrollingMoves) {
+            callsOnScrollingMoves();
+        }
+        else if (!scrollingOnCourse && callsOnScrollingStops) {
             callsOnScrollingStops();
         }
         // eslint-disable-next-line
@@ -188,46 +199,46 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
             gridTemplateColumns: `${verticalAxisWidth}px`,
             gridTemplateRows: `70px ${horizontalAxisHeight - 70}px calc(100% - ${horizontalAxisHeight}px`,
         } },
-        React.createElement("div", { className: "controles" },
-            React.createElement("div", { className: "div-dropdown-fechas-boton-hoy" },
-                React.createElement(DropdownNavegadorMeses, { minimumVisibleDate: minimumVisibleDate, onChangeAction: (valorDeOpcion) => {
-                        Funciones.scrollByDate(new Date(Number(Date.parse(sqlToJsDate(valorDeOpcion).toString()))), gridWrapperRef, leftPagination, cellsWidth);
-                    }, options: Funciones.defineMonthsArray(leftPagination, language) }),
-                React.createElement("button", { onClick: () => Funciones.scrollByDate(new Date(), gridWrapperRef, leftPagination, cellsWidth) }, language["Today"])),
-            React.createElement("div", { className: "div-botones-superior-derecho" })),
-        React.createElement("div", { className: "filtros-logo" }, logoUrl && React.createElement("img", { className: "logo", src: logoUrl, alt: "logo" })),
-        React.createElement("div", { className: "eje-vertical" },
-            React.createElement("div", { ref: destiniesColumnRef, className: "lista-anuncios", onScroll: (e) => {
+        React.createElement("div", { className: "controls" },
+            React.createElement("div", { className: "div-dates-navigation" },
+                React.createElement(DropdownMonthNavigation, { minimumVisibleDate: minimumVisibleDate, onChangeAction: (valorDeOpcion) => {
+                        Funciones.scrollByDate(new Date(Number(Date.parse(sqlToJsDate(valorDeOpcion).toString()))), gridWrapperRef, pastDaysQuantity, cellsWidth);
+                    }, options: Funciones.defineMonthsArray(pastDaysQuantity, futureDaysQuantity, language) }),
+                React.createElement("button", { onClick: () => Funciones.scrollByDate(new Date(), gridWrapperRef, pastDaysQuantity, cellsWidth) }, language["Today"])),
+            aditionalControlsComponents && (React.createElement("div", { className: "div-aditional-controls-components" }, aditionalControlsComponents))),
+        React.createElement("div", { className: "div-upper-left-component" }, upperLeftComponent),
+        React.createElement("div", { className: "vertical-axis" },
+            React.createElement("div", { ref: destiniesColumnRef, className: "div-list-element-column", onScroll: (e) => {
                     // Se puede hacer funcion
                     if (gridWrapperRef.current !== null)
                         gridWrapperRef.current.scrollTop = e.target.scrollTop;
                 } },
                 React.createElement(ListElementsColumn, { listHeight: cellsHeight * listElementsIdsArray.length, yOffset: yOffset, elementsHeight: cellsHeight, idsArray: visibleListElementsIds, ReactListElementChildren: ReactListElementChildren }))),
-        React.createElement("div", { className: "eje-horizontal" },
-            React.createElement("div", { className: "div-botones-fechas" },
-                React.createElement("button", { className: "boton-semana-pasada", onClick: () => {
+        React.createElement("div", { className: "horizontal-axis" },
+            React.createElement("div", { className: "div-weeks-buttons" },
+                React.createElement("button", { className: "past-week-button", onClick: () => {
                         // Se puede hacer funcion
                         if (datesRowRef.current !== null)
                             datesRowRef.current.scroll({
                                 left: datesRowRef.current.scrollLeft - cellsWidth * 7,
                             });
                     } },
-                    React.createElement(BootstrapIcons.BsChevronLeft, null)),
+                    React.createElement(BsChevronLeft, null)),
                 React.createElement("button", { onClick: () => {
                         // Se puede hacer funcion
                         if (datesRowRef.current !== null)
                             datesRowRef.current.scroll({
                                 left: datesRowRef.current.scrollLeft + cellsWidth * 7,
                             });
-                    }, className: "boton-semana-siguiente" },
-                    React.createElement(BootstrapIcons.BsChevronRight, null))),
-            React.createElement("div", { ref: datesRowRef, className: "div-fila-fechas", onScroll: (e) => {
+                    }, className: "next-week-button" },
+                    React.createElement(BsChevronRight, null))),
+            React.createElement("div", { ref: datesRowRef, className: "div-dates-row", onScroll: (e) => {
                     if (gridWrapperRef.current !== null)
                         gridWrapperRef.current.scrollLeft = e.target.scrollLeft;
                 } },
-                React.createElement(DatesRow, { visibleDates: visibleDates, width: (leftPagination + rightPagination) * cellsWidth, height: 64, cellsWidth: cellsWidth, cellsHeight: 64, offset: xOffset, language: language }))),
-        React.createElement("div", { className: "div-contenedor-principal" },
-            React.createElement("div", { ref: gridWrapperRef, className: "contendor-principal", onScroll: (e) => {
+                React.createElement(DatesRow, { visibleDates: visibleDates, width: (pastDaysQuantity + futureDaysQuantity) * cellsWidth, height: 64, cellsWidth: cellsWidth, cellsHeight: 64, offset: xOffset, language: language }))),
+        React.createElement("div", { className: "div-main-container" },
+            React.createElement("div", { ref: gridWrapperRef, className: "main-container", onScroll: (e) => {
                     if (datesRowRef.current !== null) {
                         datesRowRef.current.scrollLeft = e.target.scrollLeft;
                         setXPosition(e.target.scrollLeft);
@@ -236,15 +247,16 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
                         destiniesColumnRef.current.scrollTop = e.target.scrollTop;
                         setYPosition(e.target.scrollTop);
                     }
-                    if (dynamicPagination &&
+                    if (dynamicDaysQuantity &&
                         e.target.scrollLeft +
                             e.target.offsetWidth >
-                            (leftPagination + rightPagination) * cellsWidth - cellsWidth) {
-                        setRightPagination(rightPagination + 1);
+                            (pastDaysQuantity + futureDaysQuantity) * cellsWidth - cellsWidth) {
+                        setFutureDaysQuantity(futureDaysQuantity + 1);
                     }
-                    if (dynamicPagination &&
+                    if (pastDatesVisible &&
+                        dynamicDaysQuantity &&
                         e.target.scrollLeft < cellsWidth) {
-                        setLeftPagination(leftPagination + 1);
+                        setPastDaysQuantity(pastDaysQuantity + 1);
                         e.target.scrollLeft = cellsWidth * 3;
                     }
                     Funciones.authomaticScrollInGrid(draggingOverDateCells, clientXPositionOnGrid, clientYPositionOnGrid, cellsWidth, cellsHeight, e.target);
@@ -257,6 +269,6 @@ const Multicalendar = ({ multicalendarId, ReactCellChildren, ReactListElementChi
                         Funciones.startAuthomaticScrollInGrid(draggingOverDateCells, x, y, cellsWidth, cellsHeight, gridWrapperRef);
                     }
                 } },
-                React.createElement(DatesGrid, { gridWidth: (leftPagination + rightPagination) * cellsWidth, gridHeight: cellsHeight * listElementsIdsArray.length, xOffset: xOffset, yOffset: yOffset, cellsWidth: cellsWidth, cellsHeight: cellsHeight, visibleListElementsIdsArray: visibleListElementsIds, visibleDates: visibleDates, ReactCellChildren: ReactCellChildren })))));
+                React.createElement(DatesGrid, { gridWidth: (pastDaysQuantity + futureDaysQuantity) * cellsWidth, gridHeight: cellsHeight * listElementsIdsArray.length, xOffset: xOffset, yOffset: yOffset, cellsWidth: cellsWidth, cellsHeight: cellsHeight, visibleListElementsIdsArray: visibleListElementsIds, visibleDates: visibleDates, ReactCellChildren: ReactCellChildren })))));
 };
 export default Multicalendar;

package/dist/esm/components/Multicalendar/MulticalendarOwnFunctions.d.ts

@@ -63,7 +63,7 @@ export declare function defineListElementsArrayVisibleList(paginationHeight: num
  * @param language language object for traductions
  * @returns string of the date, month followed by year
  */
-export declare function defineMonthsArray(leftPagination: number, language: languageType): JSX.Element[];
+export declare function defineMonthsArray(leftPagination: number, rightPagination: number, language: languageType): JSX.Element[];
 /**
  *
  * @param holdingClic boolean to know if mouse id down

package/dist/esm/components/Multicalendar/MulticalendarOwnFunctions.js

@@ -95,7 +95,7 @@ export function defineListElementsArrayVisibleList(paginationHeight, chunkRender
     let array = [];
     for (let index = 0; index < paginationHeight + chunkRenderY * 2; index++) {
         if (listElementsIds[index + offset] && index + offset >= 0)
-            array[index] = Object.assign({}, listElementsIds[index + offset]);
+            array[index] = listElementsIds[index + offset];
     }
     return array;
 }
@@ -105,9 +105,9 @@ export function defineListElementsArrayVisibleList(paginationHeight, chunkRender
  * @param language language object for traductions
  * @returns string of the date, month followed by year
  */
-export function defineMonthsArray(leftPagination, language) {
+export function defineMonthsArray(leftPagination, rightPagination, language) {
     let minimumDateMilliseconds = Date.parse(new Date().toString()) - leftPagination * millisecondsOfOneDay;
-    let maximumDateMilliseconds = Date.parse(new Date().toString()) + leftPagination * millisecondsOfOneDay;
+    let maximumDateMilliseconds = Date.parse(new Date().toString()) + rightPagination * millisecondsOfOneDay;
     let array = [];
     let sideArray = [];
     for (let index = 0; index * millisecondsOfOneDay + minimumDateMilliseconds < maximumDateMilliseconds; index++) {

package/dist/esm/components/Multicalendar/subcomponents/composites/DatesGrid/DatesGrid.css

@@ -1,6 +1,7 @@
 .dates-grid {
-    box-sizing: border-box;
-  }
+  box-sizing: border-box;
+  overflow: hidden;
+}
 .dates-grid .div-cells-row-height {
-    box-sizing: border-box;
-  }
+  box-sizing: border-box;
+}

package/dist/esm/components/Multicalendar/subcomponents/individuals/DatesRow/DatesRow.js

@@ -30,7 +30,7 @@ const DatesRow = ({ visibleDates, width, height, cellsWidth, cellsHeight, offset
             height: height,
             paddingLeft: offset * cellsWidth,
         } }, visibleDates.length > 0 &&
-        visibleDates.map((dateObject) => (React.createElement("div", { className: "date-cell", style: {
+        visibleDates.map((dateObject) => (React.createElement("div", { key: dateObject.toString(), className: "date-cell", style: {
                 width: cellsWidth,
                 height: cellsHeight,
             } },

package/dist/esm/components/Multicalendar/types.d.ts

@@ -6,18 +6,22 @@ export interface MulticalendarPropsType {
   ReactListElementChildren: ReactListElementChildrenType;
   listElementsIdsArray: string[] | number[];
   language: languageType;
+  pastDatesVisible?: boolean
   cellsWidth?: number;
   cellsHeight?: number;
   verticalAxisWidth?: number;
   horizontalAxisHeight?: number;
-  horizontalInitialCellQuantity?: number;
+  pastDaysInitialQuantity?: number;
+  futureDaysInitialQuantity?: number;
   chunkRenderX?: number;
   chunkRenderY?: number;
   draggingOverDateCells?: boolean;
-  dynamicPagination?: boolean;
-  logoUrl?: string;
+  dynamicDaysQuantity?: boolean;
   waitTimeForCalls?: number;
+  callsOnScrollingMoves?: Function;
   callsOnScrollingStops?: Function;
+  aditionalControlsComponents?: JSX.Element | JSX.Element[]
+  upperLeftComponent?: JSX.Element
 }
 
 export interface RenderCoordinatesType {