loon-bulma-react 2023.0.22 → 2023.0.23

package/dist/components/Calendar/CalendarItems/CalendarColoredItem.d.ts

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import { MouseEvent } from 'react';
 import { EventOptions, BaseEventProps } from '../Props';
 declare type CalendarColoredItemProps<T extends BaseEventProps> = {
     /** Het event */
@@ -8,12 +8,11 @@ declare type CalendarColoredItemProps<T extends BaseEventProps> = {
     options?: EventOptions<T>;
     /** Onclick handler voor het event */
     onClick?: (event: T, clickEvent: MouseEvent<HTMLElement>) => void;
-    tooltip?: React.ReactNode;
 };
 /**
  * Component voor een event dat de hele dag duurt
  * @param props
  * @returns
  */
-export declare function CalendarColoredItem<T extends BaseEventProps>({ event, options, tooltip, onClick, desc, }: CalendarColoredItemProps<T>): JSX.Element;
+export declare function CalendarColoredItem<T extends BaseEventProps>({ event, options, onClick, desc, }: CalendarColoredItemProps<T>): JSX.Element;
 export {};

package/dist/components/Calendar/CalendarItems/CalendarItem.d.ts

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import { MouseEvent } from 'react';
 import { EventOptions, BaseEventProps } from '../Props';
 declare type CalendarItemProps<T extends BaseEventProps> = {
     desc: (event: T) => JSX.Element;
@@ -8,12 +8,11 @@ declare type CalendarItemProps<T extends BaseEventProps> = {
     options?: EventOptions<T>;
     /** Onclick handler */
     onClick?: (event: T, clickEvent: MouseEvent<HTMLElement>) => void;
-    tooltip?: React.ReactNode;
 };
 /**
  * Component voor een event met een tijdstip en NIET de hele dag duurt
  * @param props
  * @returns
  */
-export declare function CalendarItem<T extends BaseEventProps>({ event, options, tooltip, onClick, desc, }: CalendarItemProps<T>): JSX.Element;
+export declare function CalendarItem<T extends BaseEventProps>({ event, options, onClick, desc, }: CalendarItemProps<T>): JSX.Element;
 export {};

package/dist/components/Calendar/DayContainer.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BaseEventProps, CalendarOptions } from './Props';
 import { JSDateTime } from '~/utils';
+import { ColorProp } from '~/loon-react-bulma-types';
 declare type DayContainerProps<T extends BaseEventProps> = {
     /** Events op deze dag */
     events: T[];
@@ -14,11 +15,12 @@ declare type DayContainerProps<T extends BaseEventProps> = {
     date: JSDateTime;
     /** Behoort deze dag tot de huidige maand ? */
     isCurrentMonth?: boolean;
+    tooltipColor: ColorProp;
 };
 /**
  * Component voor de dag-container in de maand-view
  * @param props
  * @returns
  */
-export declare function DayContainer<T extends BaseEventProps>({ options, date, onDayClick, onEventClick, events, isCurrentMonth, }: DayContainerProps<T>): JSX.Element;
+export declare function DayContainer<T extends BaseEventProps>({ options, date, onDayClick, onEventClick, events, tooltipColor, isCurrentMonth, }: DayContainerProps<T>): JSX.Element;
 export {};

package/dist/components/Calendar/Week/AlldayContainer.d.ts

@@ -1,16 +1,18 @@
 import React from 'react';
 import { BaseEventProps, CalendarOptions } from '../Props';
+import { ColorProp } from '~/loon-react-bulma-types';
 declare type AlldayContainerProps<T extends BaseEventProps> = {
     events: T[];
     /** Wat te doen als een event aangeklikt wordt */
     onEventClick?: (event: T, clickEvent: React.MouseEvent<HTMLElement>) => void;
     /** Wat te doen als een dag aangeklikt wordt */
     options?: CalendarOptions<T>;
+    tooltipColor: ColorProp;
 };
 /**
  * Component voor allday objects in de calendar
  * @param props
  * @returns
  */
-export declare function AlldayContainer<T extends BaseEventProps>({ options, events, onEventClick }: AlldayContainerProps<T>): JSX.Element;
+export declare function AlldayContainer<T extends BaseEventProps>({ options, events, onEventClick, tooltipColor, }: AlldayContainerProps<T>): JSX.Element;
 export {};

package/dist/components/Calendar/Week/HourRow.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ColorProp } from '../../../loon-react-bulma-types';
 import { BaseEventProps, CalendarOptions } from '../Props';
 /**
  * Component om een uur-nummer weer te geven.
@@ -15,11 +16,12 @@ declare type HourSlotProps<T extends BaseEventProps> = {
     onEventClick?: (event: T, clickEvent: React.MouseEvent<HTMLElement>) => void;
     /** Options bij de calendar */
     options?: CalendarOptions<T>;
+    tooltipColor?: ColorProp;
 };
 /**
  * Component voor een uur-slot.
  * @param param0
  * @returns
  */
-export declare function HourSlot<T extends BaseEventProps>({ events, onEventClick, options }: HourSlotProps<T>): JSX.Element;
+export declare function HourSlot<T extends BaseEventProps>({ events, onEventClick, options, tooltipColor, }: HourSlotProps<T>): JSX.Element;
 export {};

package/dist/components/Calendar/base-styles.d.ts

@@ -1,17 +1,6 @@
 import { CSSProperties } from "react";
 /** default style van events */
-export declare const eventStylesBase: {
-    transition: string;
-    fontSize: string;
-    height: string;
-    margin: string;
-    borderRadius: string;
-    textAlign: string;
-    paddingLeft: string;
-    paddingRight: string;
-    overflow: string;
-    textOverflow: string;
-};
+export declare const eventStylesBase: CSSProperties;
 /** default styling van de header */
 export declare const headerContainerStylesBase: CSSProperties;
 /** default styling van de grid */

package/dist/components/Tooltip/Tooltip.d.ts

@@ -2,13 +2,16 @@ import React from 'react';
 import { ColorProp } from '~/loon-react-bulma-types';
 declare type PositionProp = 'bottom';
 export declare class Tooltip extends React.Component<{
-    content: React.ReactNode;
+    content?: React.ReactNode;
     color?: ColorProp;
     children: React.ReactNode;
+    display?: 'block' | 'inline';
 }> {
     static defaultProps: {
         position: PositionProp;
         color: ColorProp;
+        content: React.ReactNode;
+        display: 'block' | 'inline';
     };
     state: {
         active: boolean;

package/dist/index.js

@@ -3509,78 +3509,9 @@ var eventKleurBlockStyleBase = {
   transition: 'background-color .2s ease-in-out'
 };
 
-var Tooltip = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Tooltip, _React$Component);
-  function Tooltip() {
-    var _this;
-    _this = _React$Component.apply(this, arguments) || this;
-    _this.state = {
-      active: false
-    };
-    _this.show = function () {
-      return _this.setState({
-        active: true
-      });
-    };
-    _this.hide = function () {
-      return _this.setState({
-        active: false
-      });
-    };
-    return _this;
-  }
-  var _proto = Tooltip.prototype;
-  _proto.render = function render() {
-    var _this$props = this.props,
-      content = _this$props.content,
-      children = _this$props.children,
-      color = _this$props.color;
-    var active = this.state.active;
-    var className = "tooltip is-bottom";
-    var arrowClassName = 'tooltip-arrow';
-    if (color === 'p') {
-      className += ' is-primary';
-      arrowClassName += ' is-primary';
-    } else if (color === 'i') {
-      className += ' is-info';
-      arrowClassName += ' is-info';
-    } else if (color === 'l') {
-      className += ' is-link';
-      arrowClassName += ' is-link';
-    } else if (color === 'd') {
-      className += ' is-danger';
-      arrowClassName += ' is-danger';
-    } else if (color === 's') {
-      className += ' is-success';
-      arrowClassName += ' is-success';
-    } else if (color === 'w') {
-      className += ' is-warning';
-      arrowClassName += ' is-warning';
-    } else {
-      className += " " + color;
-      arrowClassName += " " + color;
-    }
-    return React__default.createElement("span", {
-      className: "tooltip-wrapper",
-      onMouseEnter: this.show,
-      onMouseLeave: this.hide
-    }, children, active && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-      className: className
-    }, content), React__default.createElement("div", {
-      className: arrowClassName
-    })));
-  };
-  return Tooltip;
-}(React__default.Component);
-Tooltip.defaultProps = {
-  position: 'bottom',
-  color: 'l'
-};
-
 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),
@@ -3601,22 +3532,7 @@ function CalendarColoredItem(_ref) {
     });
   }, [event, isHovered]);
   var ref = React__default.useRef(null);
-  if (tooltip) return React__default.createElement(Tooltip, {
-    content: tooltip,
-    color: "is-light"
-  }, React__default.createElement("div", {
-    ref: ref,
-    onClick: function onClick(e) {
-      return _onClick && _onClick(event, e);
-    },
-    style: eventStyle,
-    onMouseEnter: function onMouseEnter() {
-      return setHovered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setHovered(false);
-    }
-  }, React__default.createElement("span", null, desc(event))));else return React__default.createElement("div", {
+  return React__default.createElement("div", {
     ref: ref,
     onClick: function onClick(e) {
       return _onClick && _onClick(event, e);
@@ -3634,7 +3550,6 @@ 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),
@@ -3659,24 +3574,7 @@ function CalendarItem(_ref) {
     });
   }, [event, isHovered]);
   var ref = React__default.useRef(null);
-  if (tooltip) return React__default.createElement(Tooltip, {
-    color: "is-light",
-    content: tooltip
-  }, React__default.createElement("div", {
-    ref: ref,
-    onClick: function onClick(e) {
-      return _onClick && _onClick(event, e);
-    },
-    style: eventStyle,
-    onMouseEnter: function onMouseEnter() {
-      return setHovered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setHovered(false);
-    }
-  }, React__default.createElement("span", {
-    style: eventSpan
-  }), desc(event)));else return React__default.createElement("div", {
+  return React__default.createElement("div", {
     ref: ref,
     onClick: function onClick(e) {
       return _onClick && _onClick(event, e);
@@ -3772,12 +3670,87 @@ function MoreEventsView(_ref) {
   }), React__default.createElement("span", null, "Toon minder"))));
 }
 
+var Tooltip = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Tooltip, _React$Component);
+  function Tooltip() {
+    var _this;
+    _this = _React$Component.apply(this, arguments) || this;
+    _this.state = {
+      active: false
+    };
+    _this.show = function () {
+      return _this.setState({
+        active: true
+      });
+    };
+    _this.hide = function () {
+      return _this.setState({
+        active: false
+      });
+    };
+    return _this;
+  }
+  var _proto = Tooltip.prototype;
+  _proto.render = function render() {
+    var _this$props = this.props,
+      content = _this$props.content,
+      children = _this$props.children,
+      color = _this$props.color,
+      display = _this$props.display;
+    var active = this.state.active;
+    if (!content) return React__default.createElement(React__default.Fragment, null, children);else {
+      var className = "tooltip is-bottom";
+      var arrowClassName = 'tooltip-arrow';
+      if (color === 'p') {
+        className += ' is-primary';
+        arrowClassName += ' is-primary';
+      } else if (color === 'i') {
+        className += ' is-info';
+        arrowClassName += ' is-info';
+      } else if (color === 'l') {
+        className += ' is-link';
+        arrowClassName += ' is-link';
+      } else if (color === 'd') {
+        className += ' is-danger';
+        arrowClassName += ' is-danger';
+      } else if (color === 's') {
+        className += ' is-success';
+        arrowClassName += ' is-success';
+      } else if (color === 'w') {
+        className += ' is-warning';
+        arrowClassName += ' is-warning';
+      } else {
+        className += " " + color;
+        arrowClassName += " " + color;
+      }
+      return React__default.createElement("div", {
+        className: display === 'block' ? 'tooltip-wrapper-block' : 'tooltip-wrapper-inline',
+        onMouseEnter: this.show,
+        onMouseLeave: this.hide
+      }, children, active && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+        className: className
+      }, content), React__default.createElement("div", {
+        className: arrowClassName
+      })));
+    }
+  };
+  return Tooltip;
+}(React__default.Component);
+Tooltip.defaultProps = {
+  position: 'bottom',
+  color: 'l',
+  content: undefined,
+  display: 'inline'
+};
+
 function DayContainer(_ref) {
   var options = _ref.options,
     date = _ref.date,
     onDayClick = _ref.onDayClick,
     onEventClick = _ref.onEventClick,
     events = _ref.events,
+    _ref$tooltipColor = _ref.tooltipColor,
+    tooltipColor = _ref$tooltipColor === void 0 ? 'is-light' : _ref$tooltipColor,
     _ref$isCurrentMonth = _ref.isCurrentMonth,
     isCurrentMonth = _ref$isCurrentMonth === void 0 ? true : _ref$isCurrentMonth;
   var _React$useState = React__default.useState(false),
@@ -3829,16 +3802,24 @@ function DayContainer(_ref) {
   }, " ", date.monthLong)), React__default.createElement("div", null, events.map(function (evt, index) {
     var _ref2, _options$event, _options$event2, _options$event3, _options$event4;
     var key = (_ref2 = "" + (typeof evt.id === 'function' ? evt.id() : evt.id)) != null ? _ref2 : index;
-    if (evt.allDay && index < 4) return React__default.createElement(CalendarColoredItem, {
+    if (evt.allDay && index < 4) return React__default.createElement(Tooltip, {
+      key: key,
+      display: "block",
+      color: tooltipColor,
+      content: typeof evt.description === 'function' ? evt.description() : evt.description
+    }, React__default.createElement(CalendarColoredItem, {
       desc: function desc(evt) {
         return React__default.createElement("span", null, typeof evt.title === 'string' ? evt.title : evt.title());
       },
-      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
-    });else if (!evt.allDay && index < 4) return React__default.createElement(CalendarItem, {
+    }));else if (!evt.allDay && index < 4) return React__default.createElement(Tooltip, {
+      key: key,
+      display: "block",
+      color: tooltipColor,
+      content: typeof evt.description === 'function' ? evt.description() : evt.description
+    }, 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: {
@@ -3846,26 +3827,32 @@ function DayContainer(_ref) {
           }
         }, typeof evt.title === 'string' ? evt.title : evt.title()));
       },
-      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(Tooltip, {
+      key: key,
+      display: "block",
+      color: tooltipColor,
+      content: typeof evt.description === 'function' ? evt.description() : evt.description
+    }, React__default.createElement(CalendarColoredItem, {
       desc: function desc(evt) {
         return React__default.createElement("span", null, typeof evt.title === 'string' ? evt.title : evt.title());
       },
-      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(Tooltip, {
+      key: key,
+      display: "block",
+      color: tooltipColor,
+      content: typeof evt.description === 'function' ? evt.description() : evt.description
+    }, 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: {
@@ -3873,12 +3860,10 @@ function DayContainer(_ref) {
           }
         }, typeof evt.title === 'string' ? evt.title : evt.title()));
       },
-      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
-    });else return null;
+    }));else return null;
   })));
 }
 
@@ -4012,6 +3997,7 @@ function FourweeksViewDayBlocks(_ref4) {
   var weekLength = visibleDays.size;
   var counter = 0;
   return React__default.createElement(React__default.Fragment, null, datesWithEvents.map(function (_ref5) {
+    var _options$tooltipColor;
     var date = _ref5[0],
       events = _ref5[1];
     if (counter == weekLength) counter = 0;
@@ -4023,6 +4009,7 @@ function FourweeksViewDayBlocks(_ref4) {
       key: date.ISO,
       date: date,
       events: events,
+      tooltipColor: (_options$tooltipColor = options === null || options === void 0 ? void 0 : options.tooltipColor) != null ? _options$tooltipColor : 'is-light',
       onEventClick: onEventClick,
       onDayClick: onDayClick,
       options: options
@@ -4157,6 +4144,7 @@ function MonthViewDayBlocks(_ref4) {
   var weekLength = visibleDays.size;
   var counter = 0;
   return React__default.createElement(React__default.Fragment, null, datesWithEvents.map(function (_ref5) {
+    var _options$tooltipColor;
     var date = _ref5[0],
       events = _ref5[1];
     if (counter === weekLength) counter = 0;
@@ -4168,6 +4156,7 @@ function MonthViewDayBlocks(_ref4) {
       key: date.ISO,
       date: date,
       events: events,
+      tooltipColor: (_options$tooltipColor = options === null || options === void 0 ? void 0 : options.tooltipColor) != null ? _options$tooltipColor : 'is-light',
       onEventClick: onEventClick,
       onDayClick: onDayClick,
       options: options,
@@ -4190,7 +4179,8 @@ function WeekNumberCell$1(_ref6) {
 function AlldayContainer(_ref) {
   var options = _ref.options,
     events = _ref.events,
-    onEventClick = _ref.onEventClick;
+    onEventClick = _ref.onEventClick,
+    tooltipColor = _ref.tooltipColor;
   var dayContainerStyle = React__default.useMemo(function () {
     return _extends({}, dayContainerStyleBase);
   }, []);
@@ -4198,15 +4188,19 @@ function AlldayContainer(_ref) {
     style: dayContainerStyle
   }, events.map(function (e) {
     var _options$event;
-    return React__default.createElement(CalendarItem, {
+    return React__default.createElement(Tooltip, {
       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,
+      display: "block",
+      color: tooltipColor,
+      content: typeof e.description === 'function' ? e.description() : e.description
+    }, React__default.createElement(CalendarItem, {
       desc: function desc(e) {
         return React__default.createElement("span", null, typeof e.title == 'function' ? e.title() : e.title);
-      }
-    });
+      },
+      event: e,
+      options: options === null || options === void 0 ? void 0 : (_options$event = options.event) === null || _options$event === void 0 ? void 0 : _options$event.allday,
+      onClick: onEventClick
+    }));
   }));
 }
 
@@ -4227,7 +4221,8 @@ function HourSlot(_ref2) {
   var _ref$current;
   var events = _ref2.events,
     onEventClick = _ref2.onEventClick,
-    options = _ref2.options;
+    options = _ref2.options,
+    tooltipColor = _ref2.tooltipColor;
   var hourSlotStyle = React__default.useMemo(function () {
     return {
       maxHeight: '60px',
@@ -4247,12 +4242,15 @@ function HourSlot(_ref2) {
   }, events.map(function (evt, i) {
     var _options$event;
     return React__default.createElement(WeekTimedItem, {
+      tooltipColor: tooltipColor,
+      key: "" + (typeof evt.id === 'function' ? evt.id() : evt.id),
       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),
       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));
+        var title = typeof e.title === 'function' ? e.title() : e.title;
+        if (title.length > 80) title = title.substring(0, 80) + '...';
+        return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", null, React__default.createElement("b", null, e.startDateTime.timeHM)), React__default.createElement("div", null, title));
       },
       onClick: onEventClick,
       eventWidth: eventWidth
@@ -4264,6 +4262,7 @@ function WeekTimedItem(_ref3) {
     options = _ref3.options,
     eventWidth = _ref3.eventWidth,
     eventIndex = _ref3.eventIndex,
+    tooltipColor = _ref3.tooltipColor,
     _onClick = _ref3.onClick,
     desc = _ref3.desc;
   var _React$useState = React__default.useState(false),
@@ -4288,15 +4287,19 @@ function WeekTimedItem(_ref3) {
       color: txtColor,
       margin: '0',
       marginX: '2px',
+      paddingLeft: '3px',
+      paddingTop: '3px',
       marginTop: start.minute + "px",
-      height: minutesAsPixels + "px",
+      height: (minutesAsPixels < 30 ? 30 : minutesAsPixels) + "px",
       width: eventWidth,
       lineHeight: '1.05em',
+      overflow: 'visible',
       marginLeft: eventIndex * eventWidth + "px",
       cursor: _onClick ? 'pointer' : 'default'
     });
   }, [event, isHovered, eventWidth, eventIndex]);
   return React__default.createElement("div", {
+    key: "" + (typeof event.id === 'function' ? event.id() : event.id),
     ref: ref,
     onClick: function onClick(e) {
       return _onClick && _onClick(event, e);
@@ -4308,7 +4311,21 @@ function WeekTimedItem(_ref3) {
     onMouseLeave: function onMouseLeave() {
       return setHovered(false);
     }
-  }, React__default.createElement("span", null, desc(event)));
+  }, React__default.createElement(Tooltip, {
+    key: "" + (typeof event.id === 'function' ? event.id() : event.id),
+    display: "block",
+    color: tooltipColor,
+    content: typeof event.description === 'function' ? event.description() : event.description
+  }, React__default.createElement("span", {
+    style: {
+      overflow: 'clip',
+      textOverflow: 'ellipsis',
+      position: 'absolute',
+      left: '3px',
+      right: '3px',
+      top: '3px'
+    }
+  }, desc(event))));
 }
 
 function WeekView(_ref) {
@@ -4408,13 +4425,15 @@ function WeekView(_ref) {
       borderBottom: 'thin solid #e1e1e1'
     })
   }), datesWithEvents.allday.map(function (_ref5) {
+    var _options$tooltipColor;
     var date = _ref5[0],
       events = _ref5[1];
     return React__default.createElement(AlldayContainer, {
       key: date.dayShort,
       events: events,
       onEventClick: onEventClick,
-      options: options
+      options: options,
+      tooltipColor: (_options$tooltipColor = options === null || options === void 0 ? void 0 : options.tooltipColor) != null ? _options$tooltipColor : 'is-light'
     });
   }), hours.map(function (hour) {
     return React__default.createElement(React__default.Fragment, {
@@ -4422,12 +4441,14 @@ function WeekView(_ref) {
     }, React__default.createElement(HourNumber, {
       hour: hour
     }), datesWithEvents.timed.map(function (_ref6) {
+      var _options$tooltipColor2;
       var date = _ref6[0],
         events = _ref6[1];
       var filteredEvts = events.filter(function (e) {
         return e.startDateTime.hour === hour;
       });
       return React__default.createElement(HourSlot, {
+        tooltipColor: (_options$tooltipColor2 = options === null || options === void 0 ? void 0 : options.tooltipColor) != null ? _options$tooltipColor2 : 'is-light',
         key: date.dayShort + '-' + hour,
         events: filteredEvts,
         onEventClick: onEventClick,