directual-web-components-v2 3.11.333 → 3.11.334

package/dist/index.css

@@ -8802,12 +8802,10 @@ div._x81-m._xmAnF h2 {
 ._2FxAd .rbc-btn-group {
   display: flex;
   align-items: center;
-  gap: 8px;
 }
 ._3JU7w {
   display: flex;
   align-items: center;
-  gap: 8px;
 }
 ._16uM4 {
   display: flex;
@@ -8830,6 +8828,25 @@ div._x81-m._xmAnF h2 {
 }
 ._UJo8u {
   margin-bottom: 0 !important;
+  min-height: 48px !important;
+}
+._ok3qh {
+  display: flex;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+  height: 48px;
+  justify-content: center;
+  align-items: center;
+  padding: 1px 8px;
+  text-decoration: none;
+  font-size: 32px;
+  color: var(--layout-text, #333333);
+  border: solid 1px var(--button-border);
+  border-radius: var(--border-radius);
+  background-color: var(--layout-secondary-bgr, #fff);
+  cursor: pointer;
+  outline: none;
 }
 ._2lVWM {
   display: flex;
@@ -9329,6 +9346,284 @@ div._x81-m._xmAnF h2 {
   width: 100%;
 }
 
+@keyframes _1XD3u {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(200%);
+  }
+}
+@keyframes _11i3G {
+  0% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.6;
+  }
+}
+@keyframes _3KYmW {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes _3N2L4 {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+._xgx0D {
+  position: relative;
+  background-color: var(--skeleton-bg, rgba(0, 0, 0, 0.06));
+  overflow: hidden;
+  border-radius: 4px;
+}
+._xgx0D::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3) 50%, transparent);
+  transform: translateX(-100%);
+  animation: _1XD3u 1.8s ease-in-out infinite;
+  pointer-events: none;
+}
+._11i3G {
+  position: relative;
+  background-color: var(--skeleton-bg, rgba(0, 0, 0, 0.06));
+  animation: _11i3G 1.5s ease-in-out infinite;
+}
+._1Eh3y {
+  pointer-events: none;
+}
+._2JLmU {
+  background: transparent;
+  cursor: default;
+}
+._2JLmU:hover {
+  background: transparent;
+}
+._3Sf-F {
+  width: 40px;
+  height: 16px;
+  position: relative;
+  background-color: var(--skeleton-bg, rgba(0, 0, 0, 0.06));
+  overflow: hidden;
+  border-radius: 4px;
+}
+._3Sf-F::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3) 50%, transparent);
+  transform: translateX(-100%);
+  animation: _1XD3u 1.8s ease-in-out infinite;
+  pointer-events: none;
+}
+._17k_P {
+  width: 50px;
+  height: 14px;
+  position: relative;
+  background-color: var(--skeleton-bg, rgba(0, 0, 0, 0.06));
+  overflow: hidden;
+  border-radius: 4px;
+}
+._17k_P::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3) 50%, transparent);
+  transform: translateX(-100%);
+  animation: _1XD3u 1.8s ease-in-out infinite;
+  pointer-events: none;
+}
+._1AhML {
+  width: 24px;
+  height: 24px;
+  position: relative;
+  background-color: var(--skeleton-bg, rgba(0, 0, 0, 0.06));
+  overflow: hidden;
+  border-radius: 4px;
+  border-radius: 11px;
+  border: none;
+}
+._1AhML::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3) 50%, transparent);
+  transform: translateX(-100%);
+  animation: _1XD3u 1.8s ease-in-out infinite;
+  pointer-events: none;
+}
+._1HTvQ {
+  width: 40px;
+  height: 14px;
+  position: relative;
+  background-color: var(--skeleton-bg, rgba(0, 0, 0, 0.06));
+  overflow: hidden;
+  border-radius: 4px;
+  margin-left: 4px;
+}
+._1HTvQ::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3) 50%, transparent);
+  transform: translateX(-100%);
+  animation: _1XD3u 1.8s ease-in-out infinite;
+  pointer-events: none;
+}
+._uWvBy {
+  color: var(--skeleton-dot, rgba(0, 0, 0, 0.15)) !important;
+  animation: _11i3G 1.5s ease-in-out infinite;
+}
+._2VOfa {
+  width: 36px;
+  height: 36px;
+  position: relative;
+  background-color: var(--skeleton-bg, rgba(0, 0, 0, 0.06));
+  overflow: hidden;
+  border-radius: 4px;
+  border-radius: 50%;
+}
+._2VOfa::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3) 50%, transparent);
+  transform: translateX(-100%);
+  animation: _1XD3u 1.8s ease-in-out infinite;
+  pointer-events: none;
+}
+._iIEl1 {
+  width: 100%;
+  height: 14px;
+  position: relative;
+  background-color: var(--skeleton-bg, rgba(0, 0, 0, 0.06));
+  overflow: hidden;
+  border-radius: 4px;
+  margin-bottom: 4px;
+}
+._iIEl1::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3) 50%, transparent);
+  transform: translateX(-100%);
+  animation: _1XD3u 1.8s ease-in-out infinite;
+  pointer-events: none;
+}
+._2T9Af {
+  width: 70%;
+  height: 12px;
+  position: relative;
+  background-color: var(--skeleton-bg, rgba(0, 0, 0, 0.06));
+  overflow: hidden;
+  border-radius: 4px;
+}
+._2T9Af::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3) 50%, transparent);
+  transform: translateX(-100%);
+  animation: _1XD3u 1.8s ease-in-out infinite;
+  pointer-events: none;
+}
+._3rF81 {
+  color: var(--skeleton-arrow, rgba(0, 0, 0, 0.15)) !important;
+  animation: _11i3G 1.5s ease-in-out infinite;
+  font-size: 20px;
+  line-height: 1;
+}
+._CjN0D {
+  animation: _3KYmW 0.2s ease-out;
+}
+._2J_wm {
+  animation: _3KYmW 0.3s ease-out;
+}
+._3N2L4 {
+  animation: _3N2L4 0.2s ease-out forwards;
+}
+._3KYmW {
+  animation: _3KYmW 0.3s ease-out forwards;
+}
+._2GaPy {
+  position: relative;
+}
+._3AZcy {
+  position: absolute;
+  top: -20px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: rgba(5, 142, 252, 0.1);
+  overflow: hidden;
+  border-radius: 1px;
+}
+._C1YFx {
+  height: 100%;
+  background: var(--custom-primary-color, var(--layout-accent, #058efc));
+  width: 0%;
+  transition: width 0.1s linear;
+  animation: _1A_0l 1s ease-in-out infinite;
+}
+@keyframes _1A_0l {
+  0% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.6;
+  }
+}
+._1beiT {
+  position: absolute;
+  top: -40px;
+  right: 0;
+  font-size: 12px;
+  color: var(--form-placeholder-disabled, #999);
+  background: var(--layout-secondary-bgr, #fff);
+  padding: 4px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--table-borders, rgba(0, 0, 0, 0.12));
+  z-index: 10;
+}
 ._3p51p {
   display: flex;
   gap: 0;

package/dist/index.js

@@ -27865,12 +27865,63 @@ FpsChat.settings = {
   }]
 };
 
-var styles$Q = {"calendar_wrapper":"_1Kd9p","tableLoadingOverlay":"_171jy","tableLoader":"_2mVTm","calendar_header":"_KeJXa","calendar_icon":"_3kOAJ","calendar_header_content":"_31JXU","calendar_title":"_x5UGi","calendar_description":"_p_cCT","customToolbar":"_2FxAd","navGroup":"_3JU7w","arrowButtons":"_16uM4","arrowBtn":"_OdLV7","viewGroup":"_h63QL","viewInput":"_UJo8u","saveGroup":"_2lVWM","rbc_calendar":"_YJ6pl"};
+var styles$Q = {"calendar_wrapper":"_1Kd9p","tableLoadingOverlay":"_171jy","tableLoader":"_2mVTm","calendar_header":"_KeJXa","calendar_icon":"_3kOAJ","calendar_header_content":"_31JXU","calendar_title":"_x5UGi","calendar_description":"_p_cCT","customToolbar":"_2FxAd","navGroup":"_3JU7w","arrowButtons":"_16uM4","arrowBtn":"_OdLV7","viewGroup":"_h63QL","viewInput":"_UJo8u","datePicker":"_ok3qh","saveGroup":"_2lVWM","rbc_calendar":"_YJ6pl"};
 
-var styles$R = {"cardWeekGrid":"_3p51p","dayColumn":"_24AHL","dayColumnToday":"_2l38a","dayColumnHoliday":"_D_Zbr","dayHeader":"_2U9B_","dayHeaderToday":"_1QfDv","dayHeaderHoliday":"_1ReXH","dayOfWeek":"_1r7Ng","dayName":"_3lcLW","dayDate":"_1z3Am","dayStats":"_kipu5","counterBadge":"_73OWS","counterBadgeEmpty":"_1sGEE","counterBadgeOverflow":"_3HMTt","counterSlots":"_1crO6","dayOccupancy":"_3XUof","eventsList":"_2mTXM","eventsListDragOver":"_1AX7i","eventCard":"_87MAN","eventCardOverflow":"_2iAUQ","avatar":"_1DWib","eventArrow":"_35zym","eventCardInactive":"_2MxuX","statusDot":"_bMgwj","statusDotActive":"_2rctI","statusDotOverflow":"_2K_cd","statusDotInactive":"_38bqC","eventCardDragging":"_1U-yM","avatarImg":"_39viT","eventInfo":"_3soOX","eventTitle":"_2qD-g","eventRole":"_7KTAx"};
+var styles$R = {"skeletonBase":"_xgx0D","skeletonWave":"_1XD3u","skeletonPulse":"_11i3G","skeletonColumn":"_1Eh3y","skeletonHeader":"_2JLmU","skeletonDayOfWeek":"_3Sf-F","skeletonDayDate":"_17k_P","skeletonBadge":"_1AhML","skeletonSlots":"_1HTvQ","skeletonDot":"_uWvBy","skeletonAvatar":"_2VOfa","skeletonTitle":"_iIEl1","skeletonRole":"_2T9Af","skeletonArrow":"_3rF81","skeletonWrapper":"_CjN0D","fadeIn":"_3KYmW","contentWrapper":"_2J_wm","fadeOut":"_3N2L4","skeletonContainer":"_2GaPy","loadingProgress":"_3AZcy","loadingProgressBar":"_C1YFx","progressPulse":"_1A_0l","loadingTimer":"_1beiT","cardWeekGrid":"_3p51p","dayColumn":"_24AHL","dayColumnToday":"_2l38a","dayColumnHoliday":"_D_Zbr","dayHeader":"_2U9B_","dayHeaderToday":"_1QfDv","dayHeaderHoliday":"_1ReXH","dayOfWeek":"_1r7Ng","dayName":"_3lcLW","dayDate":"_1z3Am","dayStats":"_kipu5","counterBadge":"_73OWS","counterBadgeEmpty":"_1sGEE","counterBadgeOverflow":"_3HMTt","counterSlots":"_1crO6","dayOccupancy":"_3XUof","eventsList":"_2mTXM","eventsListDragOver":"_1AX7i","eventCard":"_87MAN","eventCardOverflow":"_2iAUQ","avatar":"_1DWib","eventArrow":"_35zym","eventCardInactive":"_2MxuX","statusDot":"_bMgwj","statusDotActive":"_2rctI","statusDotOverflow":"_2K_cd","statusDotInactive":"_38bqC","eventCardDragging":"_1U-yM","avatarImg":"_39viT","eventInfo":"_3soOX","eventTitle":"_2qD-g","eventRole":"_7KTAx"};
 
-const _excluded$9 = ["date", "events", "onSelectEvent", "onSelectSlot", "localizer", "culture", "dailySlots", "getSlotsForDay", "showNewEventButton", "showWeekends", "cardWeekDragEnabled", "cardWeekOnEventDrop", "onEventDrop", "showAvatar", "showDotInCardWeek", "primaryColor", "dangerColor", "isEventActive"];
-const EventCard = _ref => {
+const _excluded$9 = ["date", "events", "onSelectEvent", "onSelectSlot", "localizer", "culture", "dailySlots", "getSlotsForDay", "showNewEventButton", "showWeekends", "cardWeekDragEnabled", "cardWeekOnEventDrop", "onEventDrop", "showAvatar", "showDotInCardWeek", "primaryColor", "dangerColor", "loading", "isEventActive"];
+const CardWeekSkeleton = _ref => {
+  let {
+    daysCount = 7,
+    showAvatar = true,
+    showDotInCardWeek = true
+  } = _ref;
+  const skeletonCounts = React.useMemo(() => {
+    return Array.from({
+      length: daysCount
+    }).map(() => Math.floor(Math.random() * 3) + 2);
+  }, [daysCount]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: styles$R.cardWeekGrid
+  }, Array.from({
+    length: daysCount
+  }).map((_, dayIndex) => /*#__PURE__*/React__default.createElement("div", {
+    key: dayIndex,
+    className: styles$R.dayColumn + " " + styles$R.skeletonColumn
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: styles$R.dayHeader + " " + styles$R.skeletonHeader
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: styles$R.dayName
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: styles$R.skeletonDayOfWeek
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: styles$R.skeletonDayDate
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: styles$R.dayStats
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: styles$R.skeletonSlots
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: styles$R.eventsList
+  }, Array.from({
+    length: skeletonCounts[dayIndex]
+  }).map((_, eventIndex) => /*#__PURE__*/React__default.createElement("div", {
+    key: eventIndex,
+    className: styles$R.eventCard + " " + styles$R.skeletonCard
+  }, showDotInCardWeek && /*#__PURE__*/React__default.createElement("div", {
+    className: styles$R.statusDot + " " + styles$R.skeletonDot
+  }, "\u25CF"), showAvatar && /*#__PURE__*/React__default.createElement("div", {
+    className: styles$R.avatar + " " + styles$R.skeletonAvatar
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: styles$R.eventInfo
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: styles$R.eventTitle + " " + styles$R.skeletonTitle
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: styles$R.eventRole + " " + styles$R.skeletonRole
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: styles$R.eventArrow + " " + styles$R.skeletonArrow
+  }, "\u203A")))))));
+};
+const EventCard = _ref2 => {
   let {
     event,
     onSelect,
@@ -27881,7 +27932,7 @@ const EventCard = _ref => {
     dangerColor = '',
     showAvatar = true,
     showDotInCardWeek = true
-  } = _ref;
+  } = _ref2;
   const firstLetter = (event.title || 'U')[0].toUpperCase();
   const cardClassName = [styles$R.eventCard, isDragging ? styles$R.eventCardDragging : '', status === 'overflow' ? styles$R.eventCardOverflow : '', status === 'inactive' ? styles$R.eventCardInactive : ''].filter(Boolean).join(' ');
   const dotClassName = [styles$R.statusDot, status === 'active' ? styles$R.statusDotActive : '', status === 'overflow' ? styles$R.statusDotOverflow : '', status === 'inactive' ? styles$R.statusDotInactive : ''].filter(Boolean).join(' ');
@@ -27913,7 +27964,7 @@ const EventCard = _ref => {
     className: styles$R.eventArrow
   }, "\u203A"));
 };
-const CardWeekView = _ref2 => {
+const CardWeekView = _ref3 => {
   let {
       date,
       events,
@@ -27931,9 +27982,10 @@ const CardWeekView = _ref2 => {
       showDotInCardWeek = true,
       primaryColor = '',
       dangerColor = '',
+      loading = false,
       isEventActive = null
-    } = _ref2,
-    rest = _objectWithoutPropertiesLoose(_ref2, _excluded$9);
+    } = _ref3,
+    rest = _objectWithoutPropertiesLoose(_ref3, _excluded$9);
   const dragEnabled = cardWeekDragEnabled;
   const momentLocale = (culture || 'en-GB').split('-')[0] || 'en';
   const handleEventDrop = cardWeekOnEventDrop || onEventDrop;
@@ -27945,6 +27997,7 @@ const CardWeekView = _ref2 => {
     }, (_, i) => moment__default(start).add(i, 'days').locale(momentLocale));
   }, [date, momentLocale, daysCount]);
   const eventsByDay = React.useMemo(() => {
+    if (loading) return {};
     const map = {};
     weekDays.forEach(day => {
       const key = day.format('YYYY-MM-DD');
@@ -27963,10 +28016,10 @@ const CardWeekView = _ref2 => {
       });
     });
     return map;
-  }, [events, weekDays]);
+  }, [events, weekDays, loading]);
   const isToday = day => moment__default(day).isSame(moment__default(), 'day');
   const handleDayClick = day => {
-    if (onSelectSlot && showNewEventButton) {
+    if (onSelectSlot && showNewEventButton && !loading) {
       onSelectSlot({
         start: moment__default(day).startOf('day').toDate(),
         end: moment__default(day).add(1, 'day').endOf('day').toDate(),
@@ -27975,6 +28028,7 @@ const CardWeekView = _ref2 => {
     }
   };
   const handleDragEnd = React.useCallback(result => {
+    if (loading) return;
     const {
       destination,
       source,
@@ -27997,7 +28051,14 @@ const CardWeekView = _ref2 => {
         end: newEnd
       });
     }
-  }, [events, handleEventDrop]);
+  }, [events, handleEventDrop, loading]);
+  if (loading) {
+    return /*#__PURE__*/React__default.createElement(CardWeekSkeleton, {
+      daysCount: daysCount,
+      showAvatar: showAvatar,
+      showDotInCardWeek: showDotInCardWeek
+    });
+  }
   const renderDayColumn = day => {
     const key = day.format('YYYY-MM-DD');
     const dayEvents = eventsByDay[key] || [];
@@ -28064,11 +28125,11 @@ const CardWeekView = _ref2 => {
       ref: provided.innerRef
     }, provided.droppableProps, {
       className: styles$R.eventsList + " " + (snapshot.isDraggingOver ? styles$R.eventsListDragOver : '')
-    }), eventsWithStatus.map((_ref3, index) => {
+    }), eventsWithStatus.map((_ref4, index) => {
       let {
         event,
         status
-      } = _ref3;
+      } = _ref4;
       return /*#__PURE__*/React__default.createElement(reactBeautifulDnd.Draggable, {
         key: String(event.id),
         draggableId: String(event.id),
@@ -28086,11 +28147,11 @@ const CardWeekView = _ref2 => {
       }));
     }), provided.placeholder)) : /*#__PURE__*/React__default.createElement("div", {
       className: styles$R.eventsList
-    }, eventsWithStatus.map(_ref4 => {
+    }, eventsWithStatus.map(_ref5 => {
       let {
         event,
         status
-      } = _ref4;
+      } = _ref5;
       return /*#__PURE__*/React__default.createElement(EventCard, {
         key: event.id,
         event: event,
@@ -28116,7 +28177,7 @@ const CardWeekView = _ref2 => {
     onDragEnd: handleDragEnd
   }, grid) : grid;
 };
-CardWeekView.title = (date, _ref5) => {
+CardWeekView.title = (date, _ref6) => {
   const start = moment__default(date).startOf('isoWeek');
   const end = moment__default(date).endOf('isoWeek');
   return start.format('DD.MM') + ' - ' + end.format('DD.MM');
@@ -28177,6 +28238,7 @@ function BigCalendar(props) {
   const [currentView, setCurrentView] = React.useState(_$1__default.get(data, "params.view.defaultView", "card_week"));
   const [hasChanges, setHasChanges] = React.useState(false);
   const [slotRules, setSlotRules] = React.useState(null);
+  const [selectedDate, setSelectedDate] = React.useState(null);
   const [dql, setDQL] = React.useState('');
   const [sort, setSort] = React.useState({});
   function performFiltering(newDql, newSort) {
@@ -28184,9 +28246,31 @@ function BigCalendar(props) {
     setSort(prev => _$1__default.isEqual(prev, newSort) ? prev : newSort);
   }
   const dqlService = React.useMemo(() => _$1__default.debounce(performFiltering, 600), []);
-  const [visibleRange, setVisibleRange] = React.useState({
-    start: moment__default().startOf('month').toDate(),
-    end: moment__default().endOf('month').toDate()
+  const [visibleRange, setVisibleRange] = React.useState(() => {
+    if (currentView === 'month') {
+      return {
+        start: moment__default().startOf('month').toDate(),
+        end: moment__default().endOf('month').toDate()
+      };
+    }
+    if (currentView === 'week') {
+      return {
+        start: moment__default().startOf('week').toDate(),
+        end: moment__default().endOf('week').toDate()
+      };
+    }
+    if (currentView === 'day') {
+      return {
+        start: moment__default().startOf('day').toDate(),
+        end: moment__default().endOf('day').toDate()
+      };
+    }
+    if (currentView === 'card_week') {
+      return {
+        start: moment__default().startOf('week').toDate(),
+        end: moment__default().endOf('week').toDate()
+      };
+    }
   });
   const {
     defaultDate,
@@ -28344,32 +28428,6 @@ function BigCalendar(props) {
       frontEvents
     });
   };
-  const setVisibleRangeByDefault = () => {
-    if (currentView === 'month') {
-      setVisibleRange({
-        start: moment__default().startOf('month').toDate(),
-        end: moment__default().endOf('month').toDate()
-      });
-    }
-    if (currentView === 'week') {
-      setVisibleRange({
-        start: moment__default().startOf('week').toDate(),
-        end: moment__default().endOf('week').toDate()
-      });
-    }
-    if (currentView === 'day') {
-      setVisibleRange({
-        start: moment__default().startOf('day').toDate(),
-        end: moment__default().endOf('day').toDate()
-      });
-    }
-    if (currentView === 'card_week') {
-      setVisibleRange({
-        start: moment__default().startOf('week').toDate(),
-        end: moment__default().endOf('week').toDate()
-      });
-    }
-  };
   const createDqlStringMain = () => {
     const dqlParts = [];
     if (dql) dqlParts.push(dql);
@@ -28386,9 +28444,6 @@ function BigCalendar(props) {
   };
   const getEventsFromAPI = () => {
     if (!sl) return;
-    if (!visibleRange.start || !visibleRange.end) {
-      setVisibleRangeByDefault();
-    }
     setLoading(true);
     if (sl_rules) {
       callEndpointGET(sl_rules, {}, {
@@ -28563,6 +28618,10 @@ function BigCalendar(props) {
     const goToCurrent = () => {
       toolbar.onNavigate('TODAY');
     };
+    const goToDate = date => {
+      toolbar.onNavigate('DATE', date);
+      setSelectedDate(date);
+    };
     const label = () => {
       return toolbar.label;
     };
@@ -28592,11 +28651,38 @@ function BigCalendar(props) {
       className: "rbc-btn-group " + (styles$Q.navGroup )
     }, /*#__PURE__*/React__default.createElement(Button, {
       onClick: goToBack
-    }, '← ' + (dict[lang]['bigCalendar'][currentView === 'card_week' ? 'week' : currentView] || '')), /*#__PURE__*/React__default.createElement(Button, {
+    }, /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        fontSize: '1.5rem',
+        fontWeight: 'bold'
+      }
+    }, "\u2190")), /*#__PURE__*/React__default.createElement(Button, {
       onClick: goToCurrent
     }, dict[lang]['bigCalendar']['today']), /*#__PURE__*/React__default.createElement(Button, {
       onClick: goToNext
-    }, (dict[lang]['bigCalendar'][currentView === 'card_week' ? 'week' : currentView] || '') + ' →')), /*#__PURE__*/React__default.createElement("span", {
+    }, /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        fontSize: '1.5rem',
+        fontWeight: 'bold'
+      }
+    }, "\u2192")), /*#__PURE__*/React__default.createElement(Datetime, {
+      locale: culture.split('-')[0] || 'en',
+      closeOnSelect: true,
+      onChange: value => {
+        goToDate(value && value.toDate());
+      },
+      renderInput: (props, openCalendar) => {
+        return /*#__PURE__*/React__default.createElement("div", {
+          className: styles$Q.datePicker,
+          onClick: e => {
+            e.stopPropagation();
+            openCalendar(e);
+          }
+        }, /*#__PURE__*/React__default.createElement("span", {
+          className: "icon icon-calendar"
+        }));
+      }
+    })), /*#__PURE__*/React__default.createElement("span", {
       className: "rbc-toolbar-label"
     }, label()), !hideViewSelector && /*#__PURE__*/React__default.createElement("span", {
       className: "rbc-btn-group " + (styles$Q.viewGroup )
@@ -28698,13 +28784,14 @@ function BigCalendar(props) {
       showDotInCardWeek: showDotInCardWeek,
       primaryColor: primaryColor,
       dangerColor: dangerColor,
+      loading: loading,
       isEventActive: conditionOne ? event => evaluateCondition(conditionOne, event) : null
     }));
     Wrapper.title = CardWeekView.title;
     Wrapper.navigate = CardWeekView.navigate;
     Wrapper.range = CardWeekView.range;
     return Wrapper;
-  }, [dailySlots, showWeekends, showDragAndDrop, conditionOne, slotRules, getSlotsForDay]);
+  }, [dailySlots, showWeekends, showDragAndDrop, conditionOne, slotRules, getSlotsForDay, loading]);
   const allViews = React.useMemo(() => ({
     month: true,
     week: true,