loon-bulma-react 2023.0.9 → 2023.0.11

package/dist/index.js

@@ -1462,37 +1462,37 @@ var Message = function Message(_ref) {
     title = _ref.title,
     size = _ref.size,
     color = _ref.color;
-  var classes = 'message';
+  var className = 'message';
   var icon = freeSolidSvgIcons.faInfo;
   switch (color) {
     case 's':
-      classes += ' is-success';
+      className += ' is-success';
       icon = freeSolidSvgIcons.faCheck;
       break;
     case 'd':
-      classes += ' is-danger';
+      className += ' is-danger';
       icon = freeSolidSvgIcons.faExclamationTriangle;
       break;
     case 'w':
-      classes += ' is-warning';
+      className += ' is-warning';
       icon = freeSolidSvgIcons.faExclamation;
       break;
     case 'p':
-      classes += ' is-primary';
+      className += ' is-primary';
       icon = freeSolidSvgIcons.faInfo;
       break;
     case 'l':
-      classes += ' is-link';
+      className += ' is-link';
       icon = freeSolidSvgIcons.faInfo;
       break;
     default:
-      classes += ' is-info';
+      className += ' is-info';
       icon = freeSolidSvgIcons.faInfo;
       break;
   }
-  if (size === 's') classes += ' is-small';else if (size === 'l') classes += ' is-medium';else if (size === 'xl') classes += ' is-large';
+  if (size === 's') className += ' is-small';else if (size === 'l') className += ' is-medium';else if (size === 'xl') className += ' is-large';
   return React__default.createElement("article", {
-    className: classes
+    className: className
   }, title && React__default.createElement(Header$1, {
     title: title,
     icon: icon
@@ -2058,35 +2058,43 @@ function TabBarItem(_ref2) {
 }
 TabBar.Item = TabBarItem;
 
-function Tag(props) {
+function Tag(_ref) {
+  var children = _ref.children,
+    color = _ref.color,
+    size = _ref.size,
+    light = _ref.light,
+    rounded = _ref.rounded,
+    tooltip = _ref.tooltip,
+    onDismiss = _ref.onDismiss;
   var classes = 'tag';
-  classes += props.light ? ' is-light' : '';
-  classes += props.rounded ? ' is-rounded' : '';
-  if (props.color === 'p') classes += ' is-primary';else if (props.color === 'i') classes += ' is-info';else if (props.color === 'd') classes += ' is-danger';else if (props.color === 'w') classes += ' is-warning';else if (props.color === 's') classes += ' is-success';else if (props.color === 'dark') classes += ' is-dark';else if (props.color === 'light') classes += ' is-light';else classes += ' is-link';
-  if (props.size === 'm') classes += ' is-medium';else if (props.size === 'l') classes += ' is-large';
+  classes += light ? ' is-light' : '';
+  classes += rounded ? ' is-rounded' : '';
+  if (color === 'p') classes += ' is-primary';else if (color === 'i') classes += ' is-info';else if (color === 'd') classes += ' is-danger';else if (color === 'w') classes += ' is-warning';else if (color === 's') classes += ' is-success';else if (color === 'dark') classes += ' is-dark';else if (color === 'light') classes += ' is-light';else classes += ' is-link';
+  if (size === 'm') classes += ' is-medium';else if (size === 'l') classes += ' is-large';
   var handleDismiss = function handleDismiss(e) {
-    return props.onDismiss && props.onDismiss(e);
+    return onDismiss && onDismiss(e);
   };
   return React__default.createElement("span", {
     className: classes,
-    title: props.tooltip
-  }, props.children, props.onDismiss && React__default.createElement("button", {
+    title: tooltip
+  }, children, onDismiss && React__default.createElement("button", {
     className: "delete",
     onClick: function onClick(e) {
       return handleDismiss(e);
     }
   }));
 }
-function Tags(props) {
+function Tags(_ref2) {
+  var children = _ref2.children,
+    merged = _ref2.merged,
+    size = _ref2.size,
+    alignment = _ref2.alignment,
+    className = _ref2.className;
   var classes = 'tags';
-  if (props.size === 'm') classes += ' are-medium';else if (props.size === 'l') classes += ' are-large';
-  if (props.alignment === 'r') classes += ' is-right';else if (props.alignment === 'c') classes += ' is-centered';
-  if (props.merged) classes += ' has-addons';
-  classes = (classes + " " + (typeof props.className == 'function' ? props.className() : props.className)).trim();
-  var children = React__default.Children.map(props.children, function (child) {
-    if (child.type === Tag) return child;
-    return child;
-  });
+  if (size === 'm') classes += ' are-medium';else if (size === 'l') classes += ' are-large';
+  if (alignment === 'r') classes += ' is-right';else if (alignment === 'c') classes += ' is-centered';
+  if (merged) classes += ' has-addons';
+  classes = (classes + " " + className).trim();
   return React__default.createElement("div", {
     className: classes
   }, children);
@@ -2216,17 +2224,23 @@ function Subtitle(props) {
       }, txt);
   }
 }
-function TitleWithSubtitle(props) {
-  var _props$bulmaSize3;
-  var bulmaSize = parseInt(((_props$bulmaSize3 = props.bulmaSize) != null ? _props$bulmaSize3 : 3).toString());
-  var hSize = typeof props.headingSize == 'string' ? +props.headingSize.replace('h', '') : props.headingSize;
+function TitleWithSubtitle(_ref) {
+  var bulmaSizeVal = _ref.bulmaSize,
+    headingSize = _ref.headingSize,
+    titleTxt = _ref.titleTxt,
+    subtitleTxt = _ref.subtitleTxt,
+    className = _ref.className;
+  var bulmaSize = parseInt("" + (bulmaSizeVal != null ? bulmaSizeVal : 3));
+  var hSize = typeof headingSize == 'string' ? +headingSize.replace('h', '') : headingSize;
   var heading = hSize || bulmaSize;
-  return React__default.createElement("div", null, React__default.createElement(Title, {
-    txt: props.titleTxt,
+  return React__default.createElement("div", {
+    className: className
+  }, React__default.createElement(Title, {
+    txt: titleTxt,
     bulmaSize: bulmaSize,
     headingSize: heading
   }), React__default.createElement(Subtitle, {
-    txt: props.subtitleTxt,
+    txt: subtitleTxt,
     bulmaSize: bulmaSize + 2,
     headingSize: heading + 1
   }));
@@ -2344,8 +2358,8 @@ var ButtonGroup = function ButtonGroup(props) {
   var alignment = props.alignment,
     className = props.className,
     children = props.children;
-  var classNames = 'field is-grouped';
-  classNames += props.hasAddons ? ' has-addons' : '';
+  var classNames = 'field';
+  classNames += props.hasAddons ? ' has-addons' : ' is-grouped';
   if (alignment === 'c') classNames += ' is-grouped-centered';else if (alignment === 'r') classNames += ' is-grouped-right';else classNames += ' is-grouped-left';
   if (className) classNames += ' ' + className;
   return React__default.createElement("div", {
@@ -2880,7 +2894,7 @@ var JSDateTime = /*#__PURE__*/function () {
     var ignore = false;
     var allowed = 'ymdhHMsSWtZO';
     (format + ' ').split('').forEach(function (c) {
-      if (prevToken == '') counter = 1;else if (!ignore && c === prevToken && allowed.includes(c)) counter++;else if (!ignore && c === prevToken && !allowed.includes(c)) {
+      if (prevToken === '') counter = 1;else if (!ignore && c === prevToken && allowed.includes(c)) counter++;else if (!ignore && c === prevToken && !allowed.includes(c)) {
         counter++;
         rslt += prevToken;
       } else if (!ignore) {
@@ -3107,7 +3121,7 @@ var JSDateTime = /*#__PURE__*/function () {
     key: "weekDay",
     get:
     function get() {
-      return this._date.getDay() == 0 ? 7 : this._date.getDay();
+      return this._date.getDay() === 0 ? 7 : this._date.getDay();
     }
   }, {
     key: "hr",
@@ -3326,6 +3340,7 @@ var eventKleurBlockStyleBase = {
 function CalendarColoredItem(_ref) {
   var event = _ref.event,
     options = _ref.options,
+    tooltip = _ref.tooltip,
     _onClick = _ref.onClick,
     desc = _ref.desc;
   var _React$useState = React__default.useState(false),
@@ -3334,8 +3349,8 @@ function CalendarColoredItem(_ref) {
   var pickTextColor = React__default.useCallback(calculateTxtColor, []);
   var eventStyle = React__default.useMemo(function () {
     var bgColor = 'p';
-    if (event.evtColor) bgColor = event.evtColor(isHovered);else if (options !== null && options !== void 0 && options.evtColor) bgColor = options.evtColor(event, isHovered);
-    if (bgColor === 'p') bgColor = '#113670';else if (bgColor === 'i') bgColor = '#3b59ec';else if (bgColor === 'l') bgColor = '#2f47bc';else if (bgColor === 'd') bgColor = '#d91000';else if (bgColor === 's') bgColor = '#519c43';else if (bgColor === 'w') bgColor = '#eea720';
+    if (event.evtColor) bgColor = typeof event.evtColor === 'function' ? event.evtColor(isHovered) : event.evtColor;else if (options !== null && options !== void 0 && options.evtColor) bgColor = options.evtColor(event, isHovered);
+    if (bgColor === 'p') bgColor = "#0089b6";else if (bgColor === 'i') bgColor = "#3b59ec";else if (bgColor === 'l') bgColor = "2f47bc";else if (bgColor === 'd') bgColor = "#d91000";else if (bgColor === 's') bgColor = "#519c43";else if (bgColor === 'w') bgColor = "#eea720";
     bgColor += isHovered ? 'aa' : 'ff';
     var txtColor = pickTextColor(bgColor);
     return _extends({}, eventStylesBase, {
@@ -3351,6 +3366,7 @@ function CalendarColoredItem(_ref) {
     onClick: function onClick(e) {
       return _onClick && _onClick(event, e);
     },
+    title: tooltip,
     style: eventStyle,
     onMouseEnter: function onMouseEnter() {
       return setHovered(true);
@@ -3364,6 +3380,7 @@ function CalendarColoredItem(_ref) {
 function CalendarItem(_ref) {
   var event = _ref.event,
     options = _ref.options,
+    tooltip = _ref.tooltip,
     _onClick = _ref.onClick,
     desc = _ref.desc;
   var _React$useState = React__default.useState(false),
@@ -3381,8 +3398,8 @@ function CalendarItem(_ref) {
   }, [isHovered]);
   var eventSpan = React__default.useMemo(function () {
     var evtColor = 'p';
-    if (event.evtColor) evtColor = event.evtColor(isHovered);else if (options !== null && options !== void 0 && options.evtColor) evtColor = options.evtColor(event, isHovered);
-    if (evtColor === 'p') evtColor = '#113670';else if (evtColor === 'i') evtColor = '#3b59ec';else if (evtColor === 'l') evtColor = '#2f47bc';else if (evtColor === 'd') evtColor = '#d91000';else if (evtColor === 's') evtColor = '#519c43';else if (evtColor === 'w') evtColor = '#eea720';
+    if (event.evtColor) evtColor = typeof event.evtColor === 'function' ? event.evtColor(isHovered) : event.evtColor;else if (options !== null && options !== void 0 && options.evtColor) evtColor = options.evtColor(event, isHovered);
+    if (evtColor === 'p') evtColor = "#0089b6";else if (evtColor === 'i') evtColor = "#3b59ec";else if (evtColor === 'l') evtColor = "2f47bc";else if (evtColor === 'd') evtColor = "#d91000";else if (evtColor === 's') evtColor = "#519c43";else if (evtColor === 'w') evtColor = "#eea720";
     return _extends({}, eventKleurBlockStyleBase, {
       backgroundColor: evtColor
     });
@@ -3394,6 +3411,7 @@ function CalendarItem(_ref) {
       return _onClick && _onClick(event, e);
     },
     style: eventStyle,
+    title: tooltip,
     onMouseEnter: function onMouseEnter() {
       return setHovered(true);
     },
@@ -3452,7 +3470,7 @@ function MoreEventsView(_ref) {
       desc: function desc(evt) {
         return React__default.createElement("span", null, typeof evt.title == 'string' ? evt.title : evt.title());
       },
-      key: typeof evt.id == 'function' ? evt.id() : evt.id,
+      key: "" + (typeof evt.id === 'function' ? evt.id() : evt.id),
       event: evt,
       options: options === null || options === void 0 ? void 0 : options.allday,
       onClick: onEventClick
@@ -3460,7 +3478,7 @@ function MoreEventsView(_ref) {
       desc: function desc(evt) {
         return React__default.createElement(React__default.Fragment, null, React__default.createElement("strong", null, evt.startDateTime.timeHM), React__default.createElement("span", null, typeof evt.title == 'string' ? evt.title : evt.title()));
       },
-      key: typeof evt.id == 'function' ? evt.id() : evt.id,
+      key: "" + (typeof evt.id === 'function' ? evt.id() : evt.id),
       event: evt,
       options: options === null || options === void 0 ? void 0 : options.timed,
       onClick: onEventClick
@@ -3534,11 +3552,13 @@ function DayContainer(_ref) {
     }
   }, " ", date.monthLong)), React__default.createElement("div", null, events.map(function (evt, index) {
     var _options$event, _options$event2, _options$event3, _options$event4;
+    var key = "" + (typeof evt.id === 'function' ? evt.id() : evt.id);
     if (evt.allDay && index < 4) return React__default.createElement(CalendarColoredItem, {
       desc: function desc(evt) {
-        return React__default.createElement("span", null, typeof evt.title == 'string' ? evt.title : evt.title());
+        return React__default.createElement("span", null, typeof evt.title === 'string' ? evt.title : evt.title());
       },
-      key: typeof evt.id == 'function' ? evt.id() : evt.id,
+      tooltip: typeof evt.description === 'function' ? evt.description() : evt.description,
+      key: key,
       event: evt,
       options: options === null || options === void 0 ? void 0 : (_options$event = options.event) === null || _options$event === void 0 ? void 0 : _options$event.allday,
       onClick: onEventClick
@@ -3548,34 +3568,37 @@ function DayContainer(_ref) {
           style: {
             marginLeft: '3px'
           }
-        }, typeof evt.title == 'string' ? evt.title : evt.title()));
+        }, typeof evt.title === 'string' ? evt.title : evt.title()));
       },
-      key: typeof evt.id == 'function' ? evt.id() : evt.id,
+      tooltip: typeof evt.description === 'function' ? evt.description() : evt.description,
+      key: key,
       event: evt,
       options: options === null || options === void 0 ? void 0 : (_options$event2 = options.event) === null || _options$event2 === void 0 ? void 0 : _options$event2.timed,
       onClick: onEventClick
-    });else if (index == 4 && events.length > 5) return React__default.createElement(MoreEventsView, {
+    });else if (index === 4 && events.length > 5) return React__default.createElement(MoreEventsView, {
       key: date.dateShort + '-more',
       events: events,
       onEventClick: onEventClick,
       options: options === null || options === void 0 ? void 0 : options.event
-    });else if (index == 4 && evt.allDay) return React__default.createElement(CalendarColoredItem, {
+    });else if (index === 4 && evt.allDay) return React__default.createElement(CalendarColoredItem, {
       desc: function desc(evt) {
-        return React__default.createElement("span", null, typeof evt.title == 'string' ? evt.title : evt.title());
+        return React__default.createElement("span", null, typeof evt.title === 'string' ? evt.title : evt.title());
       },
-      key: typeof evt.id == 'function' ? evt.id() : evt.id,
+      tooltip: typeof evt.description === 'function' ? evt.description() : evt.description,
+      key: key,
       event: evt,
       options: options === null || options === void 0 ? void 0 : (_options$event3 = options.event) === null || _options$event3 === void 0 ? void 0 : _options$event3.allday,
       onClick: onEventClick
-    });else if (index == 4 && !evt.allDay) return React__default.createElement(CalendarItem, {
+    });else if (index === 4 && !evt.allDay) return React__default.createElement(CalendarItem, {
       desc: function desc(evt) {
         return React__default.createElement(React__default.Fragment, null, React__default.createElement("strong", null, evt.startDateTime.timeHM), React__default.createElement("span", {
           style: {
             marginLeft: '3px'
           }
-        }, typeof evt.title == 'string' ? evt.title : evt.title()));
+        }, typeof evt.title === 'string' ? evt.title : evt.title()));
       },
-      key: typeof evt.id == 'function' ? evt.id() : evt.id,
+      tooltip: typeof evt.description === 'function' ? evt.description() : evt.description,
+      key: key,
       event: evt,
       options: options === null || options === void 0 ? void 0 : (_options$event4 = options.event) === null || _options$event4 === void 0 ? void 0 : _options$event4.timed,
       onClick: onEventClick
@@ -3583,6 +3606,165 @@ function DayContainer(_ref) {
   })));
 }
 
+function FourweeksView(_ref) {
+  var _options$visibleDays;
+  var vd = _ref.viewDate,
+    options = _ref.options,
+    onEventClick = _ref.onEventClick,
+    onDayClick = _ref.onDayClick,
+    orgEvents = _ref.events;
+  var visibleDays = options !== null && options !== void 0 && options.visibleDays && (options === null || options === void 0 ? void 0 : (_options$visibleDays = options.visibleDays) === null || _options$visibleDays === void 0 ? void 0 : _options$visibleDays.size) !== 0 ? options === null || options === void 0 ? void 0 : options.visibleDays : new Set([1, 2, 3, 4, 5, 6, 7]);
+  var _React$useState = React__default.useState(vd instanceof Date ? JSDateTime.fromDate(vd, options === null || options === void 0 ? void 0 : options.locale) : vd.clone()),
+    viewDate = _React$useState[0],
+    setViewDate = _React$useState[1];
+  var eventConverterFn = React__default.useCallback(function (vd, evts) {
+    var _ref2;
+    var periodeNr = Math.ceil(vd.weekNr / 52 * 13);
+    var start = vd.clone();
+    while (Math.ceil(start.weekNr / 52 * 13) === periodeNr) {
+      start = start.plus({
+        days: -1
+      });
+    }
+    var end = vd.clone();
+    while (Math.ceil(end.weekNr / 52 * 13) === periodeNr) {
+      end = end.plus({
+        days: 1
+      });
+    }
+    start = start.plus({
+      days: 1
+    });
+    end = end.plus({
+      days: -1
+    });
+    var events = ((_ref2 = evts != null ? evts : orgEvents) != null ? _ref2 : []).map(function (e) {
+      e.allDay = e.allDay || !e.endDateTime;
+      if (e.startDateTime instanceof Date) e.startDateTime = JSDateTime.fromDate(e.startDateTime, options === null || options === void 0 ? void 0 : options.locale);
+      if (e.endDateTime && e.endDateTime instanceof Date) e.endDateTime = JSDateTime.fromDate(e.endDateTime, options === null || options === void 0 ? void 0 : options.locale);
+      return e;
+    }).filter(function (e) {
+      return e.startDateTime.isBetween([start, end]);
+    });
+    var currDate = start.clone();
+    var datesWithEvents = [];
+    while (currDate <= end) {
+      if (visibleDays.has(currDate.weekDay)) {
+        (function () {
+          var dayStart = currDate.startOf('day');
+          var dayEnd = currDate.endOf('day');
+          var dayEvents = events.filter(function (e) {
+            return e.startDateTime.isBetween([dayStart, dayEnd]);
+          }).sort(function (a, b) {
+            if (a.allDay && !b.allDay) return -1;
+            if (!a.allDay && b.allDay) return 1;
+            return a.startDateTime.valueOf() - b.startDateTime.valueOf();
+          });
+          datesWithEvents.push([currDate, dayEvents]);
+        })();
+      }
+      currDate = currDate.plus({
+        days: 1
+      });
+    }
+    return datesWithEvents;
+  }, []);
+  var _React$useState2 = React__default.useState(eventConverterFn(viewDate)),
+    datesWithEvents = _React$useState2[0],
+    setDatesWithEvents = _React$useState2[1];
+  React__default.useEffect(function () {
+    var newVd = vd instanceof Date ? JSDateTime.fromDate(vd, options === null || options === void 0 ? void 0 : options.locale) : vd.clone();
+    setViewDate(newVd);
+    setDatesWithEvents(eventConverterFn(newVd, orgEvents));
+  }, [vd, orgEvents, options === null || options === void 0 ? void 0 : options.locale]);
+  var gridContainerStyles = React__default.useMemo(function () {
+    return _extends({}, gridContainerStylesBase, {
+      gridTemplateColumns: "30px repeat(" + visibleDays.size + ", 1fr)"
+    });
+  }, [options === null || options === void 0 ? void 0 : options.visibleDays]);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: "lbr-grid-container",
+    style: gridContainerStyles
+  }, React__default.createElement(FourweeksHeader, {
+    visibleDays: visibleDays,
+    viewDate: viewDate
+  }), React__default.createElement(FourweeksViewDayBlocks, {
+    visibleDays: visibleDays,
+    viewDate: viewDate,
+    datesWithEvents: datesWithEvents,
+    options: options,
+    onDayClick: onDayClick,
+    onEventClick: onEventClick
+  })));
+}
+function FourweeksHeader(_ref3) {
+  var visibleDays = _ref3.visibleDays,
+    viewDate = _ref3.viewDate;
+  var dayNames = [];
+  var date = viewDate.startOf('week');
+  var end = viewDate.endOf('week');
+  var dayNums = Array.from(visibleDays).sort();
+  var count = 0;
+  while (date <= end && count < 7) {
+    if (dayNums.includes(date.weekDay)) dayNames.push(date.dayLong);
+    date = date.plus({
+      days: 1
+    });
+    count++;
+  }
+  var headerStyles = React__default.useMemo(function () {
+    return _extends({}, headerContainerStylesBase);
+  }, []);
+  var dayNameStyles = React__default.useMemo(function () {
+    return _extends({}, headerContainerStylesBase);
+  }, []);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    style: headerStyles
+  }), dayNames.map(function (d) {
+    return React__default.createElement("div", {
+      key: d,
+      style: dayNameStyles
+    }, d);
+  }));
+}
+function FourweeksViewDayBlocks(_ref4) {
+  var visibleDays = _ref4.visibleDays,
+    onDayClick = _ref4.onDayClick,
+    onEventClick = _ref4.onEventClick,
+    options = _ref4.options,
+    datesWithEvents = _ref4.datesWithEvents;
+  var weekLength = visibleDays.size;
+  var counter = 0;
+  return React__default.createElement(React__default.Fragment, null, datesWithEvents.map(function (_ref5) {
+    var date = _ref5[0],
+      events = _ref5[1];
+    if (counter == weekLength) counter = 0;
+    return React__default.createElement(React__default.Fragment, {
+      key: date.ISO
+    }, counter++ === 0 && React__default.createElement(WeekNumberCell, {
+      weekNr: date.weekNr
+    }), React__default.createElement(DayContainer, {
+      key: date.ISO,
+      date: date,
+      events: events,
+      onEventClick: onEventClick,
+      onDayClick: onDayClick,
+      options: options
+    }));
+  }));
+}
+function WeekNumberCell(_ref6) {
+  var weekNr = _ref6.weekNr;
+  var weekNumStyle = React__default.useMemo(function () {
+    return _extends({}, weekNumberStylesBase);
+  }, []);
+  return React__default.createElement("div", {
+    style: _extends({}, weekNumStyle, {
+      borderTopWidth: '0'
+    })
+  }, weekNr);
+}
+
 function MonthView(_ref) {
   var _options$visibleDays;
   var vd = _ref.viewDate,
@@ -3590,14 +3772,15 @@ function MonthView(_ref) {
     onEventClick = _ref.onEventClick,
     onDayClick = _ref.onDayClick,
     orgEvents = _ref.events;
-  var visibleDays = options !== null && options !== void 0 && options.visibleDays && (options === null || options === void 0 ? void 0 : (_options$visibleDays = options.visibleDays) === null || _options$visibleDays === void 0 ? void 0 : _options$visibleDays.size) != 0 ? options === null || options === void 0 ? void 0 : options.visibleDays : new Set([1, 2, 3, 4, 5, 6, 7]);
+  var visibleDays = options !== null && options !== void 0 && options.visibleDays && (options === null || options === void 0 ? void 0 : (_options$visibleDays = options.visibleDays) === null || _options$visibleDays === void 0 ? void 0 : _options$visibleDays.size) !== 0 ? options === null || options === void 0 ? void 0 : options.visibleDays : new Set([1, 2, 3, 4, 5, 6, 7]);
   var _React$useState = React__default.useState(vd instanceof Date ? JSDateTime.fromDate(vd, options === null || options === void 0 ? void 0 : options.locale) : vd.clone()),
     viewDate = _React$useState[0],
     setViewDate = _React$useState[1];
-  var eventConverterFn = React__default.useCallback(function (vd) {
+  var eventConverterFn = React__default.useCallback(function (vd, evts) {
+    var _ref2;
     var start = vd.startOf('month').startOf('week').startOf('day');
     var end = vd.endOf('month').endOf('week').startOf('day');
-    var events = orgEvents.map(function (e) {
+    var events = ((_ref2 = evts != null ? evts : orgEvents) != null ? _ref2 : []).map(function (e) {
       e.allDay = e.allDay || !e.endDateTime;
       if (e.startDateTime instanceof Date) e.startDateTime = JSDateTime.fromDate(e.startDateTime, options === null || options === void 0 ? void 0 : options.locale);
       if (e.endDateTime && e.endDateTime instanceof Date) e.endDateTime = JSDateTime.fromDate(e.endDateTime, options === null || options === void 0 ? void 0 : options.locale);
@@ -3628,13 +3811,13 @@ function MonthView(_ref) {
     }
     return datesWithEvents;
   }, []);
-  var _React$useState2 = React__default.useState(eventConverterFn(viewDate)),
+  var _React$useState2 = React__default.useState(eventConverterFn(viewDate, orgEvents)),
     datesWithEvents = _React$useState2[0],
     setDatesWithEvents = _React$useState2[1];
   React__default.useEffect(function () {
     var newVd = vd instanceof Date ? JSDateTime.fromDate(vd, options === null || options === void 0 ? void 0 : options.locale) : vd.clone();
     setViewDate(newVd);
-    setDatesWithEvents(eventConverterFn(newVd));
+    setDatesWithEvents(eventConverterFn(newVd, orgEvents));
   }, [vd, orgEvents, options === null || options === void 0 ? void 0 : options.locale]);
   var gridContainerStyles = React__default.useMemo(function () {
     return _extends({}, gridContainerStylesBase, {
@@ -3656,9 +3839,9 @@ function MonthView(_ref) {
     onEventClick: onEventClick
   })));
 }
-function MonthViewHeader(_ref2) {
-  var visibleDays = _ref2.visibleDays,
-    viewDate = _ref2.viewDate;
+function MonthViewHeader(_ref3) {
+  var visibleDays = _ref3.visibleDays,
+    viewDate = _ref3.viewDate;
   var dayNames = [];
   var date = viewDate.startOf('week');
   var end = viewDate.endOf('week');
@@ -3686,23 +3869,24 @@ function MonthViewHeader(_ref2) {
     }, d);
   }));
 }
-function MonthViewDayBlocks(_ref3) {
-  var visibleDays = _ref3.visibleDays,
-    onDayClick = _ref3.onDayClick,
-    onEventClick = _ref3.onEventClick,
-    options = _ref3.options,
-    datesWithEvents = _ref3.datesWithEvents;
+function MonthViewDayBlocks(_ref4) {
+  var visibleDays = _ref4.visibleDays,
+    onDayClick = _ref4.onDayClick,
+    onEventClick = _ref4.onEventClick,
+    options = _ref4.options,
+    datesWithEvents = _ref4.datesWithEvents;
   var weekLength = visibleDays.size;
   var counter = 0;
-  return React__default.createElement(React__default.Fragment, null, datesWithEvents.map(function (_ref4) {
-    var date = _ref4[0],
-      events = _ref4[1];
-    if (counter == weekLength) counter = 0;
+  return React__default.createElement(React__default.Fragment, null, datesWithEvents.map(function (_ref5) {
+    var date = _ref5[0],
+      events = _ref5[1];
+    if (counter === weekLength) counter = 0;
     return React__default.createElement(React__default.Fragment, {
       key: date.ISO
-    }, counter++ == 0 && React__default.createElement(WeekNumberCell, {
+    }, counter++ === 0 && React__default.createElement(WeekNumberCell$1, {
       weekNr: date.weekNr
     }), React__default.createElement(DayContainer, {
+      key: date.ISO,
       date: date,
       events: events,
       onEventClick: onEventClick,
@@ -3711,8 +3895,8 @@ function MonthViewDayBlocks(_ref3) {
     }));
   }));
 }
-function WeekNumberCell(_ref5) {
-  var weekNr = _ref5.weekNr;
+function WeekNumberCell$1(_ref6) {
+  var weekNr = _ref6.weekNr;
   var weekNumStyle = React__default.useMemo(function () {
     return _extends({}, weekNumberStylesBase);
   }, []);
@@ -3735,7 +3919,7 @@ function AlldayContainer(_ref) {
   }, events.map(function (e) {
     var _options$event;
     return React__default.createElement(CalendarItem, {
-      key: typeof e.id == 'function' ? e.id() : e.id,
+      key: "" + (typeof e.id === 'function' ? e.id() : e.id),
       event: e,
       onClick: onEventClick,
       options: options === null || options === void 0 ? void 0 : (_options$event = options.event) === null || _options$event === void 0 ? void 0 : _options$event.allday,
@@ -3786,7 +3970,7 @@ function HourSlot(_ref2) {
       options: options === null || options === void 0 ? void 0 : (_options$event = options.event) === null || _options$event === void 0 ? void 0 : _options$event.timed,
       event: evt,
       eventIndex: i,
-      key: typeof evt.id == 'function' ? evt.id() : evt.id,
+      key: "" + (typeof evt.id === 'function' ? evt.id() : evt.id),
       desc: function desc(e) {
         return React__default.createElement(React__default.Fragment, null, React__default.createElement("b", null, e.startDateTime.timeHM), React__default.createElement("span", null, " ", typeof e.title === 'function' ? e.title() : e.title));
       },
@@ -3809,7 +3993,7 @@ function WeekTimedItem(_ref3) {
   var ref = React__default.useRef(null);
   var eventStyle = React__default.useMemo(function () {
     var bgColor = 'p';
-    if (event.evtColor) bgColor = event.evtColor(isHovered);else if (options !== null && options !== void 0 && options.evtColor) bgColor = options.evtColor(event, isHovered);
+    if (event.evtColor) bgColor = typeof event.evtColor === 'function' ? event.evtColor(isHovered) : event.evtColor;else if (options !== null && options !== void 0 && options.evtColor) bgColor = options.evtColor(event, isHovered);
     if (bgColor === 'p') bgColor = "#0089b6";else if (bgColor === 'i') bgColor = "#3b59ec";else if (bgColor === 'l') bgColor = "2f47bc";else if (bgColor === 'd') bgColor = "#d91000";else if (bgColor === 's') bgColor = "#519c43";else if (bgColor === 'w') bgColor = "#eea720";
     bgColor += isHovered ? 'aa' : 'ff';
     var txtColor = pickTextColor(bgColor);
@@ -3847,24 +4031,25 @@ function WeekTimedItem(_ref3) {
   }, React__default.createElement("span", null, desc(event)));
 }
 
-function WeekView(props) {
+function WeekView(_ref) {
   var _options$visibleDays;
-  var vd = props.viewDate,
-    options = props.options,
-    onEventClick = props.onEventClick,
-    orgEvents = props.events,
-    onDayClick = props.onDayClick;
+  var vd = _ref.viewDate,
+    options = _ref.options,
+    onEventClick = _ref.onEventClick,
+    orgEvents = _ref.events,
+    onDayClick = _ref.onDayClick;
   var _React$useState = React__default.useState((_options$visibleDays = options === null || options === void 0 ? void 0 : options.visibleDays) != null ? _options$visibleDays : new Set([1, 2, 3, 4, 5, 6, 7])),
     visibleDays = _React$useState[0];
   var _React$useState2 = React__default.useState(vd instanceof Date ? JSDateTime.fromDate(vd, options === null || options === void 0 ? void 0 : options.locale) : vd.clone()),
     viewDate = _React$useState2[0],
     setViewDate = _React$useState2[1];
-  var eventConverterFn = React__default.useCallback(function (vd) {
+  var eventConverterFn = React__default.useCallback(function (vd, evts) {
+    var _ref2;
     var start = vd.startOf('week').startOf('day');
     var end = vd.endOf('week').plus({
       days: 1
     }).startOf('day');
-    var events = orgEvents.map(function (e) {
+    var events = ((_ref2 = evts != null ? evts : orgEvents) != null ? _ref2 : []).map(function (e) {
       e.allDay = e.allDay || !e.endDateTime;
       if (e.startDateTime instanceof Date) e.startDateTime = JSDateTime.fromDate(e.startDateTime, options === null || options === void 0 ? void 0 : options.locale);
       if (e.endDateTime && e.endDateTime instanceof Date) e.endDateTime = JSDateTime.fromDate(e.endDateTime, options === null || options === void 0 ? void 0 : options.locale);
@@ -3893,16 +4078,16 @@ function WeekView(props) {
         days: 1
       });
     }
-    var allday = datesWithEvents.map(function (_ref) {
-      var date = _ref[0],
-        events = _ref[1];
+    var allday = datesWithEvents.map(function (_ref3) {
+      var date = _ref3[0],
+        events = _ref3[1];
       return [date, events.filter(function (e) {
         return e.allDay;
       })];
     });
-    var timed = datesWithEvents.map(function (_ref2) {
-      var date = _ref2[0],
-        events = _ref2[1];
+    var timed = datesWithEvents.map(function (_ref4) {
+      var date = _ref4[0],
+        events = _ref4[1];
       return [date, events.filter(function (e) {
         return !e.allDay;
       })];
@@ -3918,7 +4103,7 @@ function WeekView(props) {
   React__default.useEffect(function () {
     var newVd = vd instanceof Date ? JSDateTime.fromDate(vd, options === null || options === void 0 ? void 0 : options.locale) : vd.clone();
     setViewDate(newVd);
-    setDatesWithEvents(eventConverterFn(newVd));
+    setDatesWithEvents(eventConverterFn(newVd, orgEvents));
   }, [vd, orgEvents, options === null || options === void 0 ? void 0 : options.visibleDays, options === null || options === void 0 ? void 0 : options.locale]);
   var gridContainerStyles = React__default.useMemo(function () {
     return _extends({}, gridContainerStylesBase, {
@@ -3942,9 +4127,9 @@ function WeekView(props) {
       height: '60px',
       borderBottom: 'thin solid #e1e1e1'
     })
-  }), datesWithEvents.allday.map(function (_ref3) {
-    var date = _ref3[0],
-      events = _ref3[1];
+  }), datesWithEvents.allday.map(function (_ref5) {
+    var date = _ref5[0],
+      events = _ref5[1];
     return React__default.createElement(AlldayContainer, {
       key: date.dayShort,
       events: events,
@@ -3956,9 +4141,9 @@ function WeekView(props) {
       key: hour
     }, React__default.createElement(HourNumber, {
       hour: hour
-    }), datesWithEvents.timed.map(function (_ref4) {
-      var date = _ref4[0],
-        events = _ref4[1];
+    }), datesWithEvents.timed.map(function (_ref6) {
+      var date = _ref6[0],
+        events = _ref6[1];
       var filteredEvts = events.filter(function (e) {
         return e.startDateTime.hour === hour;
       });
@@ -3971,11 +4156,11 @@ function WeekView(props) {
     }));
   })));
 }
-function Header$2(_ref5) {
-  var onDayClick = _ref5.onDayClick,
-    daysWithEvents = _ref5.daysWithEvents,
-    _ref5$options = _ref5.options,
-    options = _ref5$options === void 0 ? {} : _ref5$options;
+function Header$2(_ref7) {
+  var onDayClick = _ref7.onDayClick,
+    daysWithEvents = _ref7.daysWithEvents,
+    _ref7$options = _ref7.options,
+    options = _ref7$options === void 0 ? {} : _ref7$options;
   var headerStyle = React__default.useMemo(function () {
     return _extends({}, headerContainerStylesBase, {
       cursor: onDayClick ? 'pointer' : undefined
@@ -3998,11 +4183,11 @@ function Header$2(_ref5) {
       color: txtColor
     });
   }, []);
-  return React__default.createElement(React__default.Fragment, null, daysWithEvents.map(function (_ref6) {
-    var date = _ref6[0];
+  return React__default.createElement(React__default.Fragment, null, daysWithEvents.map(function (_ref8) {
+    var date = _ref8[0];
     return React__default.createElement("div", {
       style: dayNameStyles,
-      key: date.dateShort,
+      key: date.ISO,
       onClick: function onClick(e) {
         return onDayClick && onDayClick(date, e);
       }
@@ -4019,7 +4204,8 @@ function Header$2(_ref5) {
 
 var Calendar = {
   Month: MonthView,
-  Week: WeekView
+  Week: WeekView,
+  Fourweeks: FourweeksView
 };
 
 var InputError = function InputError(_ref) {