@event-calendar/day-grid - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

index.js

@@ -1,5 +0,5 @@
-import { SvelteComponent, init, safe_not_equal, element, text, attr, insert, append, set_data, detach, space, noop, destroy_each, component_subscribe, create_slot, listen, is_function, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, run_all, set_store_value, binding_callbacks, action_destroyer, create_component, mount_component, destroy_component, group_outros, check_outros, empty } from 'svelte/internal';
-import { getContext, tick, onMount, afterUpdate, setContext } from 'svelte';
-import { derived } from 'svelte/store';
-import { cloneDate, subtractDay, addDay, hasYScroll, sortEventChunks, setMidnight, datesEqual, setContent, toEventWithLocalDates, toViewWithLocalDates, createEventContent, createDate, toLocalDate, toISOString, createEventChunk } from '@event-calendar/common';
+import { SvelteComponent, init, safe_not_equal, element, text, attr, insert, append, set_data, detach, space, noop, destroy_each, component_subscribe, create_slot, listen, is_function, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, run_all, set_store_value, binding_callbacks, action_destroyer, create_component, mount_component, destroy_component, stop_propagation, group_outros, check_outros, bubble, empty } from 'svelte/internal';
+import { getContext, tick, createEventDispatcher, onMount, afterUpdate, setContext } from 'svelte';
+import { derived, writable } from 'svelte/store';
+import { cloneDate, subtractDay, addDay, hasYScroll, sortEventChunks, setMidnight, datesEqual, setContent, toEventWithLocalDates, toViewWithLocalDates, createEventContent, height, ancestor, rect, createDate, toLocalDate, toISOString, assign, createEventChunk, intl } from '@event-calendar/common';
 
@@ -30,2 +30,7 @@ function days(state) {
         this._days = days(state);
+        this._hiddenEvents = writable({});
+        this._popup = writable({
+            date: null,
+            chunks: []
+        });
     }
@@ -36,3 +41,3 @@ }
 
-function get_each_context$3(ctx, list, i) {
+function get_each_context$4(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -44,3 +49,3 @@ child_ctx[8] = list[i];
 // (10:2) {#each $_days as day}
-function create_each_block$3(ctx) {
+function create_each_block$4(ctx) {
 	let div;
@@ -74,3 +79,3 @@ let t_value = /*$_intlDayHeader*/ ctx[3].format(/*day*/ ctx[8]) + "";
 
-function create_fragment$5(ctx) {
+function create_fragment$6(ctx) {
 	let div2;
@@ -87,3 +92,3 @@ let div0;
 	for (let i = 0; i < each_value.length; i += 1) {
-		each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
+		each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
 	}
@@ -126,3 +131,3 @@
 				for (i = 0; i < each_value.length; i += 1) {
-					const child_ctx = get_each_context$3(ctx, each_value, i);
+					const child_ctx = get_each_context$4(ctx, each_value, i);
 
@@ -132,3 +137,3 @@ if (each_blocks[i]) {
 					} else {
-						each_blocks[i] = create_each_block$3(child_ctx);
+						each_blocks[i] = create_each_block$4(child_ctx);
 						each_blocks[i].c();
@@ -169,3 +174,3 @@ each_blocks[i].m(div0, null);
 
-function instance$5($$self, $$props, $$invalidate) {
+function instance$6($$self, $$props, $$invalidate) {
 	let $theme;
@@ -197,3 +202,3 @@ let $_scrollable;
 		super();
-		init(this, options, instance$5, create_fragment$5, safe_not_equal, {});
+		init(this, options, instance$6, create_fragment$6, safe_not_equal, {});
 	}
@@ -204,3 +209,3 @@ }
 
-function create_fragment$4(ctx) {
+function create_fragment$5(ctx) {
 	let div1;
@@ -213,4 +218,4 @@ let div0;
 	let dispose;
-	const default_slot_template = /*#slots*/ ctx[10].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[9], null);
+	const default_slot_template = /*#slots*/ ctx[12].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[11], null);
 
@@ -223,3 +228,6 @@ return {
 			attr(div0, "class", div0_class_value = /*$theme*/ ctx[1].content);
-			attr(div1, "class", div1_class_value = "" + (/*$theme*/ ctx[1].body + " " + /*$theme*/ ctx[1].month));
+
+			attr(div1, "class", div1_class_value = "" + (/*$theme*/ ctx[1].body + " " + /*$theme*/ ctx[1].month + (/*$dayMaxEvents*/ ctx[2] === true
+			? ' ' + /*$theme*/ ctx[1].uniform
+			: '')));
 		},
@@ -234,3 +242,3 @@ m(target, anchor) {
 
-			/*div1_binding*/ ctx[11](div1);
+			/*div1_binding*/ ctx[13](div1);
 			current = true;
@@ -240,5 +248,5 @@
 				dispose = [
-					listen(window, "resize", /*recheckScrollable*/ ctx[7]),
+					listen(window, "resize", /*recheckScrollable*/ ctx[9]),
 					listen(div1, "scroll", function () {
-						if (is_function(/*$_scroll*/ ctx[2])) /*$_scroll*/ ctx[2].apply(this, arguments);
+						if (is_function(/*$_scroll*/ ctx[3])) /*$_scroll*/ ctx[3].apply(this, arguments);
 					})
@@ -254,3 +262,3 @@ ];
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & /*$$scope*/ 512)) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 2048)) {
 					update_slot_base(
@@ -260,6 +268,6 @@ default_slot,
 						ctx,
-						/*$$scope*/ ctx[9],
+						/*$$scope*/ ctx[11],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[9])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[9], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[11])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[11], dirty, null),
 						null
@@ -274,3 +282,5 @@ );
 
-			if (!current || dirty & /*$theme*/ 2 && div1_class_value !== (div1_class_value = "" + (/*$theme*/ ctx[1].body + " " + /*$theme*/ ctx[1].month))) {
+			if (!current || dirty & /*$theme, $dayMaxEvents*/ 6 && div1_class_value !== (div1_class_value = "" + (/*$theme*/ ctx[1].body + " " + /*$theme*/ ctx[1].month + (/*$dayMaxEvents*/ ctx[2] === true
+			? ' ' + /*$theme*/ ctx[1].uniform
+			: '')))) {
 				attr(div1, "class", div1_class_value);
@@ -291,3 +301,3 @@ }
 			if (default_slot) default_slot.d(detaching);
-			/*div1_binding*/ ctx[11](null);
+			/*div1_binding*/ ctx[13](null);
 			mounted = false;
@@ -299,12 +309,14 @@ run_all(dispose);
 
-function instance$4($$self, $$props, $$invalidate) {
+function instance$5($$self, $$props, $$invalidate) {
 	let $_scrollable;
 	let $_events;
 	let $theme;
+	let $dayMaxEvents;
 	let $_scroll;
 	let { $$slots: slots = {}, $$scope } = $$props;
-	let { _events, _scrollable, _scroll, theme } = getContext('state');
-	component_subscribe($$self, _events, value => $$invalidate(8, $_events = value));
-	component_subscribe($$self, _scrollable, value => $$invalidate(12, $_scrollable = value));
-	component_subscribe($$self, _scroll, value => $$invalidate(2, $_scroll = value));
+	let { dayMaxEvents, _events, _scrollable, _scroll, theme } = getContext('state');
+	component_subscribe($$self, dayMaxEvents, value => $$invalidate(2, $dayMaxEvents = value));
+	component_subscribe($$self, _events, value => $$invalidate(10, $_events = value));
+	component_subscribe($$self, _scrollable, value => $$invalidate(14, $_scrollable = value));
+	component_subscribe($$self, _scroll, value => $$invalidate(3, $_scroll = value));
 	component_subscribe($$self, theme, value => $$invalidate(1, $theme = value));
@@ -325,7 +337,7 @@ let el;
 	$$self.$$set = $$props => {
-		if ('$$scope' in $$props) $$invalidate(9, $$scope = $$props.$$scope);
+		if ('$$scope' in $$props) $$invalidate(11, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*el, $_events*/ 257) {
+		if ($$self.$$.dirty & /*el, $_events*/ 1025) {
 			if (el && $_events) {
@@ -340,3 +352,5 @@ tick().then(recheckScrollable);
 		$theme,
+		$dayMaxEvents,
 		$_scroll,
+		dayMaxEvents,
 		_events,
@@ -357,3 +371,3 @@ _scrollable,
 		super();
-		init(this, options, instance$4, create_fragment$4, safe_not_equal, {});
+		init(this, options, instance$5, create_fragment$5, safe_not_equal, {});
 	}
@@ -372,23 +386,34 @@ }
     for (let chunk of chunks) {
-        while (hiddenDays.includes(chunk.start.getUTCDay())) {
-            // Try to move the start up to the first visible day
-            let start = addDay(setMidnight(cloneDate(chunk.start)));
-            if (start > chunk.end) {
-                break;
-            }
-            chunk.start = start;
-        }
-        chunk.date = setMidnight(cloneDate(chunk.start));
-        chunk.days = 1;
-        let date = addDay(cloneDate(chunk.date));
+        let dates = [];
+        let date = setMidnight(cloneDate(chunk.start));
         while (chunk.end > date) {
-            ++chunk.days;
-            let key = date.getTime();
-            if (longChunks[key]) {
-                longChunks[key].push(chunk);
-            } else {
-                longChunks[key] = [chunk];
+            if (!hiddenDays.includes(date.getUTCDay())) {
+                dates.push(cloneDate(date));
+                if (dates.length > 1) {
+                    let key = date.getTime();
+                    if (longChunks[key]) {
+                        longChunks[key].push(chunk);
+                    } else {
+                        longChunks[key] = [chunk];
+                    }
+                }
             }
             addDay(date);
         }
+        if (dates.length) {
+            chunk.date = dates[0];
+            chunk.days = dates.length;
+            chunk.dates = dates;
+            if (chunk.start < dates[0]) {
+                chunk.start = dates[0];
+            }
+            if (setMidnight(cloneDate(chunk.end)) > dates[dates.length - 1]) {
+                chunk.end = dates[dates.length - 1];
+            }
+        } else {
+            chunk.date = setMidnight(cloneDate(chunk.start));
+            chunk.days = 1;
+            chunk.dates = [chunk.date];
+        }
+
         if (prevChunk && datesEqual(prevChunk.date, chunk.date)) {
@@ -405,3 +430,3 @@ chunk.prev = prevChunk;
 
-function create_fragment$3(ctx) {
+function create_fragment$4(ctx) {
 	let div;
@@ -420,19 +445,19 @@ let setContent_action;
 			insert(target, div, anchor);
-			/*div_binding*/ ctx[38](div);
+			/*div_binding*/ ctx[44](div);
 
 			if (!mounted) {
 				dispose = [
-					listen(window, "resize", /*reposition*/ ctx[26]),
+					listen(window, "resize", /*reposition*/ ctx[29]),
 					action_destroyer(setContent_action = setContent.call(null, div, /*content*/ ctx[4])),
 					listen(div, "click", function () {
-						if (is_function(/*createHandler*/ ctx[24](/*$eventClick*/ ctx[6], /*display*/ ctx[5]))) /*createHandler*/ ctx[24](/*$eventClick*/ ctx[6], /*display*/ ctx[5]).apply(this, arguments);
+						if (is_function(/*createClickHandler*/ ctx[27](/*$eventClick*/ ctx[6], /*display*/ ctx[5]))) /*createClickHandler*/ ctx[27](/*$eventClick*/ ctx[6], /*display*/ ctx[5]).apply(this, arguments);
 					}),
 					listen(div, "mouseenter", function () {
-						if (is_function(/*createHandler*/ ctx[24](/*$eventMouseEnter*/ ctx[7], /*display*/ ctx[5]))) /*createHandler*/ ctx[24](/*$eventMouseEnter*/ ctx[7], /*display*/ ctx[5]).apply(this, arguments);
+						if (is_function(/*createHandler*/ ctx[26](/*$eventMouseEnter*/ ctx[7], /*display*/ ctx[5]))) /*createHandler*/ ctx[26](/*$eventMouseEnter*/ ctx[7], /*display*/ ctx[5]).apply(this, arguments);
 					}),
 					listen(div, "mouseleave", function () {
-						if (is_function(/*createHandler*/ ctx[24](/*$eventMouseLeave*/ ctx[8], /*display*/ ctx[5]))) /*createHandler*/ ctx[24](/*$eventMouseLeave*/ ctx[8], /*display*/ ctx[5]).apply(this, arguments);
+						if (is_function(/*createHandler*/ ctx[26](/*$eventMouseLeave*/ ctx[8], /*display*/ ctx[5]))) /*createHandler*/ ctx[26](/*$eventMouseLeave*/ ctx[8], /*display*/ ctx[5]).apply(this, arguments);
 					}),
 					listen(div, "pointerdown", function () {
-						if (is_function(/*createPointerDownHandler*/ ctx[25](/*$_draggable*/ ctx[9], /*display*/ ctx[5], /*event*/ ctx[0]))) /*createPointerDownHandler*/ ctx[25](/*$_draggable*/ ctx[9], /*display*/ ctx[5], /*event*/ ctx[0]).apply(this, arguments);
+						if (is_function(/*createPointerDownHandler*/ ctx[28](/*$_draggable*/ ctx[9], /*display*/ ctx[5], /*event*/ ctx[0]))) /*createPointerDownHandler*/ ctx[28](/*$_draggable*/ ctx[9], /*display*/ ctx[5], /*event*/ ctx[0]).apply(this, arguments);
 					})
@@ -461,3 +486,3 @@ ];
 			if (detaching) detach(div);
-			/*div_binding*/ ctx[38](null);
+			/*div_binding*/ ctx[44](null);
 			mounted = false;
@@ -469,3 +494,5 @@ run_all(dispose);
 
-function instance$3($$self, $$props, $$invalidate) {
+function instance$4($$self, $$props, $$invalidate) {
+	let $_hiddenEvents;
+	let $dayMaxEvents;
 	let $_interaction;
@@ -487,17 +514,22 @@ let $_view;
 	let { longChunks = {} } = $$props;
-	let { displayEventEnd, eventBackgroundColor, eventClick, eventColor, eventContent, eventDidMount, eventMouseEnter, eventMouseLeave, theme, _view, _intlEventTime, _interaction, _classes, _draggable } = getContext('state');
-	component_subscribe($$self, displayEventEnd, value => $$invalidate(34, $displayEventEnd = value));
-	component_subscribe($$self, eventBackgroundColor, value => $$invalidate(37, $eventBackgroundColor = value));
+	let { inPopup = false } = $$props;
+	let { dayMaxEvents, displayEventEnd, eventBackgroundColor, eventClick, eventColor, eventContent, eventDidMount, eventMouseEnter, eventMouseLeave, theme, _view, _intlEventTime, _interaction, _classes, _draggable } = getContext('state');
+	component_subscribe($$self, dayMaxEvents, value => $$invalidate(46, $dayMaxEvents = value));
+	component_subscribe($$self, displayEventEnd, value => $$invalidate(40, $displayEventEnd = value));
+	component_subscribe($$self, eventBackgroundColor, value => $$invalidate(43, $eventBackgroundColor = value));
 	component_subscribe($$self, eventClick, value => $$invalidate(6, $eventClick = value));
-	component_subscribe($$self, eventColor, value => $$invalidate(36, $eventColor = value));
-	component_subscribe($$self, eventContent, value => $$invalidate(33, $eventContent = value));
-	component_subscribe($$self, eventDidMount, value => $$invalidate(41, $eventDidMount = value));
+	component_subscribe($$self, eventColor, value => $$invalidate(42, $eventColor = value));
+	component_subscribe($$self, eventContent, value => $$invalidate(39, $eventContent = value));
+	component_subscribe($$self, eventDidMount, value => $$invalidate(48, $eventDidMount = value));
 	component_subscribe($$self, eventMouseEnter, value => $$invalidate(7, $eventMouseEnter = value));
 	component_subscribe($$self, eventMouseLeave, value => $$invalidate(8, $eventMouseLeave = value));
-	component_subscribe($$self, theme, value => $$invalidate(32, $theme = value));
-	component_subscribe($$self, _view, value => $$invalidate(30, $_view = value));
-	component_subscribe($$self, _intlEventTime, value => $$invalidate(31, $_intlEventTime = value));
-	component_subscribe($$self, _interaction, value => $$invalidate(40, $_interaction = value));
-	component_subscribe($$self, _classes, value => $$invalidate(35, $_classes = value));
+	component_subscribe($$self, theme, value => $$invalidate(38, $theme = value));
+	component_subscribe($$self, _view, value => $$invalidate(36, $_view = value));
+	component_subscribe($$self, _intlEventTime, value => $$invalidate(37, $_intlEventTime = value));
+	component_subscribe($$self, _interaction, value => $$invalidate(47, $_interaction = value));
+	component_subscribe($$self, _classes, value => $$invalidate(41, $_classes = value));
 	component_subscribe($$self, _draggable, value => $$invalidate(9, $_draggable = value));
+	let { _hiddenEvents } = getContext('view-state');
+	component_subscribe($$self, _hiddenEvents, value => $$invalidate(35, $_hiddenEvents = value));
+	createEventDispatcher();
 	let el;
@@ -510,2 +542,3 @@ let event;
 	let margin = 1;
+	let hidden = false;
 	let display;
@@ -537,5 +570,13 @@
 
+	function createClickHandler(fn, display) {
+		let handler = createHandler(fn, display);
+
+		return handler
+		? jsEvent => !jsEvent.ecClosingPopup && handler(jsEvent)
+		: handler;
+	}
+
 	function createPointerDownHandler(draggable, display, event) {
 		return display === 'auto' && draggable(event)
-		? jsEvent => $_interaction.drag.startDayGrid(event, el, jsEvent)
+		? jsEvent => $_interaction.drag.startDayGrid(event, el, jsEvent, inPopup)
 		: undefined;
@@ -545,11 +586,10 @@ }
 	function reposition() {
-		if (!el || display === 'preview') {
+		if (!el || display === 'preview' || inPopup) {
 			return;
 		}
 
-		let c = chunk;
-		c.top = 0;
+		$$invalidate(30, chunk.top = 0, chunk);
 
-		if (c.prev) {
-			if (c.prev.bottom === undefined) {
+		if (chunk.prev) {
+			if (chunk.prev.bottom === undefined) {
 				// 'prev' is not ready yet, try again later
@@ -561,8 +601,8 @@ tick().then(reposition);
 
-			c.top = c.prev.bottom + 1;
+			$$invalidate(30, chunk.top = chunk.prev.bottom + 1, chunk);
 		}
 
-		c.bottom = c.top + el.offsetHeight;
+		$$invalidate(30, chunk.bottom = chunk.top + height(el), chunk);
 		let m = 1;
-		let key = c.date.getTime();
+		let key = chunk.date.getTime();
 
@@ -578,7 +618,7 @@ if (longChunks[key]) {
 
-				if (c.top < longChunk.bottom && c.bottom > longChunk.top) {
-					let offset = longChunk.bottom - c.top + 1;
+				if (chunk.top < longChunk.bottom && chunk.bottom > longChunk.top) {
+					let offset = longChunk.bottom - chunk.top + 1;
 					m += offset;
-					c.top += offset;
-					c.bottom += offset;
+					$$invalidate(30, chunk.top += offset, chunk);
+					$$invalidate(30, chunk.bottom += offset, chunk);
 				}
@@ -588,5 +628,59 @@ }
 
-		$$invalidate(29, margin = m);
+		$$invalidate(33, margin = m);
+
+		if ($dayMaxEvents === true) {
+			hide();
+		}
 	}
 
+	function hide() {
+		if (!el) {
+			return;
+		}
+
+		let dayEl = ancestor(el, 2);
+		let h = height(dayEl) - height(dayEl.firstElementChild) - footHeight(dayEl);
+		$$invalidate(34, hidden = chunk.bottom > h);
+		cloneDate(chunk.date);
+		let update = false;
+
+		// Hide or show the event throughout all days
+		for (let date of chunk.dates) {
+			let hiddenEvents = $_hiddenEvents[date.getTime()];
+
+			if (hiddenEvents) {
+				let size = hiddenEvents.size;
+
+				if (hidden) {
+					hiddenEvents.add(chunk.event);
+				} else {
+					hiddenEvents.delete(chunk.event);
+				}
+
+				if (size !== hiddenEvents.size) {
+					update = true;
+				}
+			}
+		}
+
+		if (update) {
+			_hiddenEvents.set($_hiddenEvents);
+		}
+	}
+
+	function footHeight(dayEl) {
+		let h = 0;
+
+		for (let i = 0; i < chunk.days; ++i) {
+			h = Math.max(h, height(dayEl.lastElementChild));
+			dayEl = dayEl.nextElementSibling;
+
+			if (!dayEl) {
+				break;
+			}
+		}
+
+		return h;
+	}
+
 	function div_binding($$value) {
@@ -600,12 +694,13 @@ binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 	$$self.$$set = $$props => {
-		if ('chunk' in $$props) $$invalidate(27, chunk = $$props.chunk);
-		if ('longChunks' in $$props) $$invalidate(28, longChunks = $$props.longChunks);
+		if ('chunk' in $$props) $$invalidate(30, chunk = $$props.chunk);
+		if ('longChunks' in $$props) $$invalidate(31, longChunks = $$props.longChunks);
+		if ('inPopup' in $$props) $$invalidate(32, inPopup = $$props.inPopup);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*chunk*/ 134217728) {
+		if ($$self.$$.dirty[0] & /*chunk*/ 1073741824) {
 			$$invalidate(0, event = chunk.event);
 		}
 
-		if ($$self.$$.dirty[0] & /*event, chunk, margin, style*/ 671088649 | $$self.$$.dirty[1] & /*$eventBackgroundColor, $eventColor, $_classes, $theme*/ 114) {
+		if ($$self.$$.dirty[0] & /*event, chunk, style*/ 1073741833 | $$self.$$.dirty[1] & /*$eventBackgroundColor, $eventColor, margin, hidden, $_classes, $theme*/ 7308) {
 			{
@@ -623,2 +718,6 @@ $$invalidate(5, display = event.display);
 
+				if (hidden) {
+					$$invalidate(3, style += 'visibility:hidden;');
+				}
+
 				$$invalidate(2, classes = $_classes($theme.event, event));
@@ -628,6 +727,12 @@ }
 
-		if ($$self.$$.dirty[0] & /*chunk, $_view*/ 1207959552 | $$self.$$.dirty[1] & /*$displayEventEnd, $eventContent, $theme, $_intlEventTime*/ 15) {
+		if ($$self.$$.dirty[0] & /*chunk*/ 1073741824 | $$self.$$.dirty[1] & /*$displayEventEnd, $eventContent, $theme, $_intlEventTime, $_view*/ 992) {
 			// Content
 			$$invalidate(4, [timeText, content] = createEventContent(chunk, $displayEventEnd, $eventContent, $theme, $_intlEventTime, $_view), content);
 		}
+
+		if ($$self.$$.dirty[1] & /*$_hiddenEvents*/ 16) {
+			if ($_hiddenEvents) {
+				tick().then(reposition);
+			}
+		}
 	};
@@ -646,2 +751,3 @@
 		$_draggable,
+		dayMaxEvents,
 		displayEventEnd,
@@ -661,3 +767,5 @@ eventBackgroundColor,
 		_draggable,
+		_hiddenEvents,
 		createHandler,
+		createClickHandler,
 		createPointerDownHandler,
@@ -667,3 +775,6 @@ reposition,
 		longChunks,
+		inPopup,
 		margin,
+		hidden,
+		$_hiddenEvents,
 		$_view,
@@ -684,6 +795,299 @@ $_intlEventTime,
 		super();
-		init(this, options, instance$3, create_fragment$3, safe_not_equal, { chunk: 27, longChunks: 28 }, null, [-1, -1]);
+		init(this, options, instance$4, create_fragment$4, safe_not_equal, { chunk: 30, longChunks: 31, inPopup: 32 }, null, [-1, -1]);
 	}
 }
 
+/** Dispatch event on click outside of node */
+function clickOutside(node) {
+
+    const handleClick = clickEvent => {
+        if (node && !node.contains(clickEvent.target)) {
+            node.dispatchEvent(
+                new CustomEvent('clickoutside', {detail: {clickEvent}})
+            );
+        }
+    };
+
+    document.addEventListener('click', handleClick, true);
+
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        }
+    };
+}
+
+/* packages/day-grid/src/Popup.svelte generated by Svelte v3.42.4 */
+
+function get_each_context$3(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[12] = list[i];
+	return child_ctx;
+}
+
+// (50:8) {#each $_popup.chunks as chunk}
+function create_each_block$3(ctx) {
+	let event;
+	let current;
+
+	event = new Event({
+			props: { chunk: /*chunk*/ ctx[12], inPopup: true }
+		});
+
+	return {
+		c() {
+			create_component(event.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(event, target, anchor);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const event_changes = {};
+			if (dirty & /*$_popup*/ 4) event_changes.chunk = /*chunk*/ ctx[12];
+			event.$set(event_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(event.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(event.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(event, detaching);
+		}
+	};
+}
+
+function create_fragment$3(ctx) {
+	let div2;
+	let div0;
+	let t0_value = /*$_intlDayPopover*/ ctx[4].format(/*$_popup*/ ctx[2].date) + "";
+	let t0;
+	let t1;
+	let a;
+	let div0_class_value;
+	let t3;
+	let div1;
+	let div1_class_value;
+	let div2_class_value;
+	let current;
+	let mounted;
+	let dispose;
+	let each_value = /*$_popup*/ ctx[2].chunks;
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
+	}
+
+	const out = i => transition_out(each_blocks[i], 1, 1, () => {
+		each_blocks[i] = null;
+	});
+
+	return {
+		c() {
+			div2 = element("div");
+			div0 = element("div");
+			t0 = text(t0_value);
+			t1 = space();
+			a = element("a");
+			a.textContent = "×";
+			t3 = space();
+			div1 = element("div");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			attr(div0, "class", div0_class_value = /*$theme*/ ctx[3].dayHead);
+			attr(div1, "class", div1_class_value = /*$theme*/ ctx[3].events);
+			attr(div2, "class", div2_class_value = /*$theme*/ ctx[3].popup);
+			attr(div2, "style", /*style*/ ctx[1]);
+		},
+		m(target, anchor) {
+			insert(target, div2, anchor);
+			append(div2, div0);
+			append(div0, t0);
+			append(div0, t1);
+			append(div0, a);
+			append(div2, t3);
+			append(div2, div1);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(div1, null);
+			}
+
+			/*div2_binding*/ ctx[11](div2);
+			current = true;
+
+			if (!mounted) {
+				dispose = [
+					listen(a, "click", stop_propagation(/*close*/ ctx[8])),
+					listen(div2, "click", stop_propagation(/*click_handler*/ ctx[10])),
+					action_destroyer(clickOutside.call(null, div2)),
+					listen(div2, "clickoutside", /*handleClickOutside*/ ctx[9])
+				];
+
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if ((!current || dirty & /*$_intlDayPopover, $_popup*/ 20) && t0_value !== (t0_value = /*$_intlDayPopover*/ ctx[4].format(/*$_popup*/ ctx[2].date) + "")) set_data(t0, t0_value);
+
+			if (!current || dirty & /*$theme*/ 8 && div0_class_value !== (div0_class_value = /*$theme*/ ctx[3].dayHead)) {
+				attr(div0, "class", div0_class_value);
+			}
+
+			if (dirty & /*$_popup*/ 4) {
+				each_value = /*$_popup*/ ctx[2].chunks;
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context$3(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+						transition_in(each_blocks[i], 1);
+					} else {
+						each_blocks[i] = create_each_block$3(child_ctx);
+						each_blocks[i].c();
+						transition_in(each_blocks[i], 1);
+						each_blocks[i].m(div1, null);
+					}
+				}
+
+				group_outros();
+
+				for (i = each_value.length; i < each_blocks.length; i += 1) {
+					out(i);
+				}
+
+				check_outros();
+			}
+
+			if (!current || dirty & /*$theme*/ 8 && div1_class_value !== (div1_class_value = /*$theme*/ ctx[3].events)) {
+				attr(div1, "class", div1_class_value);
+			}
+
+			if (!current || dirty & /*$theme*/ 8 && div2_class_value !== (div2_class_value = /*$theme*/ ctx[3].popup)) {
+				attr(div2, "class", div2_class_value);
+			}
+
+			if (!current || dirty & /*style*/ 2) {
+				attr(div2, "style", /*style*/ ctx[1]);
+			}
+		},
+		i(local) {
+			if (current) return;
+
+			for (let i = 0; i < each_value.length; i += 1) {
+				transition_in(each_blocks[i]);
+			}
+
+			current = true;
+		},
+		o(local) {
+			each_blocks = each_blocks.filter(Boolean);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				transition_out(each_blocks[i]);
+			}
+
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div2);
+			destroy_each(each_blocks, detaching);
+			/*div2_binding*/ ctx[11](null);
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+function instance$3($$self, $$props, $$invalidate) {
+	let $_popup;
+	let $theme;
+	let $_intlDayPopover;
+	let { theme, _intlDayPopover } = getContext('state');
+	component_subscribe($$self, theme, value => $$invalidate(3, $theme = value));
+	component_subscribe($$self, _intlDayPopover, value => $$invalidate(4, $_intlDayPopover = value));
+	let { _popup } = getContext('view-state');
+	component_subscribe($$self, _popup, value => $$invalidate(2, $_popup = value));
+	let el;
+	let style = '';
+
+	onMount(() => {
+		let dayEl = ancestor(el, 1);
+		let bodyEl = ancestor(dayEl, 3);
+		let popupRect = rect(el);
+		let bodyRect = rect(bodyEl);
+
+		if (!dayEl.previousElementSibling) {
+			$$invalidate(1, style = 'left:0;');
+		} else if (!dayEl.nextElementSibling) {
+			$$invalidate(1, style = 'right:0;');
+		} else {
+			let left = (dayEl.offsetWidth - popupRect.width) / 2;
+			$$invalidate(1, style = `left:${left}px;`);
+		}
+
+		let top = (dayEl.offsetHeight - popupRect.height) / 2;
+
+		if (popupRect.top + top < bodyRect.top) {
+			top = bodyRect.top - popupRect.top;
+		} else if (popupRect.bottom + top > bodyRect.bottom) {
+			top = bodyRect.bottom - popupRect.bottom;
+		}
+
+		$$invalidate(1, style += `top:${top}px;`);
+	});
+
+	function close(e) {
+		set_store_value(_popup, $_popup.date = null, $_popup);
+	}
+
+	function handleClickOutside(e) {
+		close();
+		e.detail.clickEvent.ecClosingPopup = true;
+	}
+
+	function click_handler(event) {
+		bubble.call(this, $$self, event);
+	}
+
+	function div2_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			el = $$value;
+			$$invalidate(0, el);
+		});
+	}
+
+	return [
+		el,
+		style,
+		$_popup,
+		$theme,
+		$_intlDayPopover,
+		theme,
+		_intlDayPopover,
+		_popup,
+		close,
+		handleClickOutside,
+		click_handler,
+		div2_binding
+	];
+}
+
+class Popup extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance$3, create_fragment$3, safe_not_equal, {});
+	}
+}
+
 /* packages/day-grid/src/Day.svelte generated by Svelte v3.42.4 */
@@ -693,8 +1097,8 @@
 	const child_ctx = ctx.slice();
-	child_ctx[25] = list[i];
+	child_ctx[36] = list[i];
 	return child_ctx;
 }
 
-// (73:1) {#if interactionChunks[1] && datesEqual(interactionChunks[1].date, date)}
-function create_if_block_1(ctx) {
+// (110:1) {#if interactionChunks[1] && datesEqual(interactionChunks[1].date, date)}
+function create_if_block_3(ctx) {
 	let div;
@@ -713,3 +1117,3 @@ let event;
 			create_component(event.$$.fragment);
-			attr(div, "class", div_class_value = /*$theme*/ ctx[8].events);
+			attr(div, "class", div_class_value = /*$theme*/ ctx[11].events);
 		},
@@ -723,6 +1127,6 @@ m(target, anchor) {
 			const event_changes = {};
-			if (dirty & /*interactionChunks*/ 4) event_changes.chunk = /*interactionChunks*/ ctx[2][1];
+			if (dirty[0] & /*interactionChunks*/ 4) event_changes.chunk = /*interactionChunks*/ ctx[2][1];
 			event.$set(event_changes);
 
-			if (!current || dirty & /*$theme*/ 256 && div_class_value !== (div_class_value = /*$theme*/ ctx[8].events)) {
+			if (!current || dirty[0] & /*$theme*/ 2048 && div_class_value !== (div_class_value = /*$theme*/ ctx[11].events)) {
 				attr(div, "class", div_class_value);
@@ -747,4 +1151,4 @@ }
 
-// (78:1) {#if interactionChunks[0] && datesEqual(interactionChunks[0].date, date)}
-function create_if_block(ctx) {
+// (115:1) {#if interactionChunks[0] && datesEqual(interactionChunks[0].date, date)}
+function create_if_block_2(ctx) {
 	let div;
@@ -763,3 +1167,3 @@ let event;
 			create_component(event.$$.fragment);
-			attr(div, "class", div_class_value = "" + (/*$theme*/ ctx[8].events + " " + /*$theme*/ ctx[8].preview));
+			attr(div, "class", div_class_value = "" + (/*$theme*/ ctx[11].events + " " + /*$theme*/ ctx[11].preview));
 		},
@@ -773,6 +1177,6 @@ m(target, anchor) {
 			const event_changes = {};
-			if (dirty & /*interactionChunks*/ 4) event_changes.chunk = /*interactionChunks*/ ctx[2][0];
+			if (dirty[0] & /*interactionChunks*/ 4) event_changes.chunk = /*interactionChunks*/ ctx[2][0];
 			event.$set(event_changes);
 
-			if (!current || dirty & /*$theme*/ 256 && div_class_value !== (div_class_value = "" + (/*$theme*/ ctx[8].events + " " + /*$theme*/ ctx[8].preview))) {
+			if (!current || dirty[0] & /*$theme*/ 2048 && div_class_value !== (div_class_value = "" + (/*$theme*/ ctx[11].events + " " + /*$theme*/ ctx[11].preview))) {
 				attr(div, "class", div_class_value);
@@ -797,3 +1201,3 @@ }
 
-// (84:2) {#each dayChunks as chunk}
+// (121:2) {#each dayChunks as chunk}
 function create_each_block$2(ctx) {
@@ -805,3 +1209,3 @@ let event;
 			props: {
-				chunk: /*chunk*/ ctx[25],
+				chunk: /*chunk*/ ctx[36],
 				longChunks: /*longChunks*/ ctx[1]
@@ -821,4 +1225,4 @@ }
 			const event_changes = {};
-			if (dirty & /*dayChunks*/ 8) event_changes.chunk = /*chunk*/ ctx[25];
-			if (dirty & /*longChunks*/ 2) event_changes.longChunks = /*longChunks*/ ctx[1];
+			if (dirty[0] & /*dayChunks*/ 8) event_changes.chunk = /*chunk*/ ctx[36];
+			if (dirty[0] & /*longChunks*/ 2) event_changes.longChunks = /*longChunks*/ ctx[1];
 			event.$set(event_changes);
@@ -841,4 +1245,67 @@ },
 
+// (125:1) {#if $_popup.date && datesEqual(date, $_popup.date)}
+function create_if_block_1(ctx) {
+	let popup;
+	let current;
+	popup = new Popup({});
+
+	return {
+		c() {
+			create_component(popup.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(popup, target, anchor);
+			current = true;
+		},
+		i(local) {
+			if (current) return;
+			transition_in(popup.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(popup.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(popup, detaching);
+		}
+	};
+}
+
+// (129:2) {#if hiddenEvents.size}
+function create_if_block(ctx) {
+	let a;
+	let setContent_action;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			a = element("a");
+		},
+		m(target, anchor) {
+			insert(target, a, anchor);
+
+			if (!mounted) {
+				dispose = [
+					listen(a, "click", stop_propagation(/*showMore*/ ctx[25])),
+					action_destroyer(setContent_action = setContent.call(null, a, /*moreLink*/ ctx[5]))
+				];
+
+				mounted = true;
+			}
+		},
+		p(ctx, dirty) {
+			if (setContent_action && is_function(setContent_action.update) && dirty[0] & /*moreLink*/ 32) setContent_action.update.call(null, /*moreLink*/ ctx[5]);
+		},
+		d(detaching) {
+			if (detaching) detach(a);
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
 function create_fragment$2(ctx) {
-	let div2;
+	let div3;
 	let div0;
@@ -849,14 +1316,19 @@ let t0_value = /*date*/ ctx[0].getUTCDate() + "";
 	let t1;
-	let show_if_1 = /*interactionChunks*/ ctx[2][1] && datesEqual(/*interactionChunks*/ ctx[2][1].date, /*date*/ ctx[0]);
+	let show_if_2 = /*interactionChunks*/ ctx[2][1] && datesEqual(/*interactionChunks*/ ctx[2][1].date, /*date*/ ctx[0]);
 	let t2;
-	let show_if = /*interactionChunks*/ ctx[2][0] && datesEqual(/*interactionChunks*/ ctx[2][0].date, /*date*/ ctx[0]);
+	let show_if_1 = /*interactionChunks*/ ctx[2][0] && datesEqual(/*interactionChunks*/ ctx[2][0].date, /*date*/ ctx[0]);
 	let t3;
 	let div1;
 	let div1_class_value;
+	let t4;
+	let show_if = /*$_popup*/ ctx[6].date && datesEqual(/*date*/ ctx[0], /*$_popup*/ ctx[6].date);
+	let t5;
+	let div2;
 	let div2_class_value;
+	let div3_class_value;
 	let current;
 	let mounted;
 	let dispose;
-	let if_block0 = show_if_1 && create_if_block_1(ctx);
-	let if_block1 = show_if && create_if_block(ctx);
+	let if_block0 = show_if_2 && create_if_block_3(ctx);
+	let if_block1 = show_if_1 && create_if_block_2(ctx);
 	let each_value = /*dayChunks*/ ctx[3];
@@ -873,5 +1345,8 @@ let each_blocks = [];
 
+	let if_block2 = show_if && create_if_block_1();
+	let if_block3 = /*hiddenEvents*/ ctx[4].size && create_if_block(ctx);
+
 	return {
 		c() {
-			div2 = element("div");
+			div3 = element("div");
 			div0 = element("div");
@@ -890,21 +1365,27 @@ t0 = text(t0_value);
 
-			attr(div0, "class", div0_class_value = /*$theme*/ ctx[8].dayHead);
-			attr(div1, "class", div1_class_value = /*$theme*/ ctx[8].events);
+			t4 = space();
+			if (if_block2) if_block2.c();
+			t5 = space();
+			div2 = element("div");
+			if (if_block3) if_block3.c();
+			attr(div0, "class", div0_class_value = /*$theme*/ ctx[11].dayHead);
+			attr(div1, "class", div1_class_value = /*$theme*/ ctx[11].events);
+			attr(div2, "class", div2_class_value = /*$theme*/ ctx[11].dayFoot);
 
-			attr(div2, "class", div2_class_value = "" + (/*$theme*/ ctx[8].day + (/*isToday*/ ctx[5] ? ' ' + /*$theme*/ ctx[8].today : '') + (/*otherMonth*/ ctx[6]
-			? ' ' + /*$theme*/ ctx[8].otherMonth
-			: '') + (/*highlight*/ ctx[7]
-			? ' ' + /*$theme*/ ctx[8].highlight
+			attr(div3, "class", div3_class_value = "" + (/*$theme*/ ctx[11].day + (/*isToday*/ ctx[8] ? ' ' + /*$theme*/ ctx[11].today : '') + (/*otherMonth*/ ctx[9]
+			? ' ' + /*$theme*/ ctx[11].otherMonth
+			: '') + (/*highlight*/ ctx[10]
+			? ' ' + /*$theme*/ ctx[11].highlight
 			: '')));
 		},
 		m(target, anchor) {
-			insert(target, div2, anchor);
-			append(div2, div0);
+			insert(target, div3, anchor);
+			append(div3, div0);
 			append(div0, t0);
-			append(div2, t1);
-			if (if_block0) if_block0.m(div2, null);
-			append(div2, t2);
-			if (if_block1) if_block1.m(div2, null);
-			append(div2, t3);
-			append(div2, div1);
+			append(div3, t1);
+			if (if_block0) if_block0.m(div3, null);
+			append(div3, t2);
+			if (if_block1) if_block1.m(div3, null);
+			append(div3, t3);
+			append(div3, div1);
 
@@ -915,3 +1396,8 @@ for (let i = 0; i < each_blocks.length; i += 1) {
 
-			/*div2_binding*/ ctx[22](div2);
+			append(div3, t4);
+			if (if_block2) if_block2.m(div3, null);
+			append(div3, t5);
+			append(div3, div2);
+			if (if_block3) if_block3.m(div2, null);
+			/*div3_binding*/ ctx[31](div3);
 			current = true;
@@ -921,10 +1407,10 @@
 				dispose = [
-					listen(div2, "click", function () {
-						if (is_function(/*createClickHandler*/ ctx[17](/*$dateClick*/ ctx[9]))) /*createClickHandler*/ ctx[17](/*$dateClick*/ ctx[9]).apply(this, arguments);
+					listen(div3, "click", function () {
+						if (is_function(/*createClickHandler*/ ctx[23](/*$dateClick*/ ctx[12]))) /*createClickHandler*/ ctx[23](/*$dateClick*/ ctx[12]).apply(this, arguments);
 					}),
-					listen(div2, "pointerenter", function () {
-						if (is_function(/*createPointerEnterHandler*/ ctx[18](/*$_interaction*/ ctx[10]))) /*createPointerEnterHandler*/ ctx[18](/*$_interaction*/ ctx[10]).apply(this, arguments);
+					listen(div3, "pointerenter", function () {
+						if (is_function(/*createPointerEnterHandler*/ ctx[24](/*$_interaction*/ ctx[13]))) /*createPointerEnterHandler*/ ctx[24](/*$_interaction*/ ctx[13]).apply(this, arguments);
 					}),
-					listen(div2, "pointerleave", function () {
-						if (is_function(createPointerLeaveHandler(/*$_interaction*/ ctx[10]))) createPointerLeaveHandler(/*$_interaction*/ ctx[10]).apply(this, arguments);
+					listen(div3, "pointerleave", function () {
+						if (is_function(createPointerLeaveHandler(/*$_interaction*/ ctx[13]))) createPointerLeaveHandler(/*$_interaction*/ ctx[13]).apply(this, arguments);
 					})
@@ -936,24 +1422,24 @@ ];
 		},
-		p(new_ctx, [dirty]) {
+		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			if ((!current || dirty & /*date*/ 1) && t0_value !== (t0_value = /*date*/ ctx[0].getUTCDate() + "")) set_data(t0, t0_value);
+			if ((!current || dirty[0] & /*date*/ 1) && t0_value !== (t0_value = /*date*/ ctx[0].getUTCDate() + "")) set_data(t0, t0_value);
 
-			if (!current || dirty & /*$theme*/ 256 && div0_class_value !== (div0_class_value = /*$theme*/ ctx[8].dayHead)) {
+			if (!current || dirty[0] & /*$theme*/ 2048 && div0_class_value !== (div0_class_value = /*$theme*/ ctx[11].dayHead)) {
 				attr(div0, "class", div0_class_value);
 			}
 
-			if (dirty & /*interactionChunks, date*/ 5) show_if_1 = /*interactionChunks*/ ctx[2][1] && datesEqual(/*interactionChunks*/ ctx[2][1].date, /*date*/ ctx[0]);
+			if (dirty[0] & /*interactionChunks, date*/ 5) show_if_2 = /*interactionChunks*/ ctx[2][1] && datesEqual(/*interactionChunks*/ ctx[2][1].date, /*date*/ ctx[0]);
 
-			if (show_if_1) {
+			if (show_if_2) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 
-					if (dirty & /*interactionChunks, date*/ 5) {
+					if (dirty[0] & /*interactionChunks, date*/ 5) {
 						transition_in(if_block0, 1);
 					}
 				} else {
-					if_block0 = create_if_block_1(ctx);
+					if_block0 = create_if_block_3(ctx);
 					if_block0.c();
 					transition_in(if_block0, 1);
-					if_block0.m(div2, t2);
+					if_block0.m(div3, t2);
 				}
@@ -970,16 +1456,16 @@ } else if (if_block0) {
 
-			if (dirty & /*interactionChunks, date*/ 5) show_if = /*interactionChunks*/ ctx[2][0] && datesEqual(/*interactionChunks*/ ctx[2][0].date, /*date*/ ctx[0]);
+			if (dirty[0] & /*interactionChunks, date*/ 5) show_if_1 = /*interactionChunks*/ ctx[2][0] && datesEqual(/*interactionChunks*/ ctx[2][0].date, /*date*/ ctx[0]);
 
-			if (show_if) {
+			if (show_if_1) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 
-					if (dirty & /*interactionChunks, date*/ 5) {
+					if (dirty[0] & /*interactionChunks, date*/ 5) {
 						transition_in(if_block1, 1);
 					}
 				} else {
-					if_block1 = create_if_block(ctx);
+					if_block1 = create_if_block_2(ctx);
 					if_block1.c();
 					transition_in(if_block1, 1);
-					if_block1.m(div2, t3);
+					if_block1.m(div3, t3);
 				}
@@ -996,3 +1482,3 @@ } else if (if_block1) {
 
-			if (dirty & /*dayChunks, longChunks*/ 10) {
+			if (dirty[0] & /*dayChunks, longChunks*/ 10) {
 				each_value = /*dayChunks*/ ctx[3];
@@ -1024,13 +1510,53 @@ let i;
 
-			if (!current || dirty & /*$theme*/ 256 && div1_class_value !== (div1_class_value = /*$theme*/ ctx[8].events)) {
+			if (!current || dirty[0] & /*$theme*/ 2048 && div1_class_value !== (div1_class_value = /*$theme*/ ctx[11].events)) {
 				attr(div1, "class", div1_class_value);
 			}
 
-			if (!current || dirty & /*$theme, isToday, otherMonth, highlight*/ 480 && div2_class_value !== (div2_class_value = "" + (/*$theme*/ ctx[8].day + (/*isToday*/ ctx[5] ? ' ' + /*$theme*/ ctx[8].today : '') + (/*otherMonth*/ ctx[6]
-			? ' ' + /*$theme*/ ctx[8].otherMonth
-			: '') + (/*highlight*/ ctx[7]
-			? ' ' + /*$theme*/ ctx[8].highlight
-			: '')))) {
+			if (dirty[0] & /*$_popup, date*/ 65) show_if = /*$_popup*/ ctx[6].date && datesEqual(/*date*/ ctx[0], /*$_popup*/ ctx[6].date);
+
+			if (show_if) {
+				if (if_block2) {
+					if (dirty[0] & /*$_popup, date*/ 65) {
+						transition_in(if_block2, 1);
+					}
+				} else {
+					if_block2 = create_if_block_1();
+					if_block2.c();
+					transition_in(if_block2, 1);
+					if_block2.m(div3, t5);
+				}
+			} else if (if_block2) {
+				group_outros();
+
+				transition_out(if_block2, 1, 1, () => {
+					if_block2 = null;
+				});
+
+				check_outros();
+			}
+
+			if (/*hiddenEvents*/ ctx[4].size) {
+				if (if_block3) {
+					if_block3.p(ctx, dirty);
+				} else {
+					if_block3 = create_if_block(ctx);
+					if_block3.c();
+					if_block3.m(div2, null);
+				}
+			} else if (if_block3) {
+				if_block3.d(1);
+				if_block3 = null;
+			}
+
+			if (!current || dirty[0] & /*$theme*/ 2048 && div2_class_value !== (div2_class_value = /*$theme*/ ctx[11].dayFoot)) {
 				attr(div2, "class", div2_class_value);
 			}
+
+			if (!current || dirty[0] & /*$theme, isToday, otherMonth, highlight*/ 3840 && div3_class_value !== (div3_class_value = "" + (/*$theme*/ ctx[11].day + (/*isToday*/ ctx[8] ? ' ' + /*$theme*/ ctx[11].today : '') + (/*otherMonth*/ ctx[9]
+			? ' ' + /*$theme*/ ctx[11].otherMonth
+			: '') + (/*highlight*/ ctx[10]
+			? ' ' + /*$theme*/ ctx[11].highlight
+			: '')))) {
+				attr(div3, "class", div3_class_value);
+			}
 		},
@@ -1046,2 +1572,3 @@ i(local) {
 
+			transition_in(if_block2);
 			current = true;
@@ -1058,10 +1585,13 @@ },
 
+			transition_out(if_block2);
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(div2);
+			if (detaching) detach(div3);
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
 			destroy_each(each_blocks, detaching);
-			/*div2_binding*/ ctx[22](null);
+			if (if_block2) if_block2.d();
+			if (if_block3) if_block3.d();
+			/*div3_binding*/ ctx[31](null);
 			mounted = false;
@@ -1080,3 +1610,6 @@ run_all(dispose);
 function instance$2($$self, $$props, $$invalidate) {
+	let $_popup;
 	let $_view;
+	let $moreLinkContent;
+	let $_hiddenEvents;
 	let $highlightedDates;
@@ -1091,12 +1624,21 @@ let $currentDate;
 	let { interactionChunks = [] } = $$props;
-	let { date: currentDate, dateClick, highlightedDates, _view, theme, _interaction } = getContext('state');
-	component_subscribe($$self, currentDate, value => $$invalidate(21, $currentDate = value));
-	component_subscribe($$self, dateClick, value => $$invalidate(9, $dateClick = value));
-	component_subscribe($$self, highlightedDates, value => $$invalidate(20, $highlightedDates = value));
-	component_subscribe($$self, _view, value => $$invalidate(23, $_view = value));
-	component_subscribe($$self, theme, value => $$invalidate(8, $theme = value));
-	component_subscribe($$self, _interaction, value => $$invalidate(10, $_interaction = value));
+	let { date: currentDate, dateClick, dayMaxEvents, highlightedDates, moreLinkContent, theme, _view, _interaction } = getContext('state');
+	component_subscribe($$self, currentDate, value => $$invalidate(30, $currentDate = value));
+	component_subscribe($$self, dateClick, value => $$invalidate(12, $dateClick = value));
+	component_subscribe($$self, highlightedDates, value => $$invalidate(29, $highlightedDates = value));
+	component_subscribe($$self, moreLinkContent, value => $$invalidate(27, $moreLinkContent = value));
+	component_subscribe($$self, theme, value => $$invalidate(11, $theme = value));
+	component_subscribe($$self, _view, value => $$invalidate(32, $_view = value));
+	component_subscribe($$self, _interaction, value => $$invalidate(13, $_interaction = value));
+	let { _hiddenEvents, _popup } = getContext('view-state');
+	component_subscribe($$self, _hiddenEvents, value => $$invalidate(28, $_hiddenEvents = value));
+	component_subscribe($$self, _popup, value => $$invalidate(6, $_popup = value));
 	let el;
 	let dayChunks;
-	let today = setMidnight(createDate()), isToday, otherMonth, highlight;
+	let today = setMidnight(createDate());
+	let isToday;
+	let otherMonth;
+	let highlight;
+	let hiddenEvents = new Set(); // hidden events of this day
+	let moreLink = '';
 
@@ -1106,3 +1648,3 @@ function createClickHandler(fn) {
 		? jsEvent => {
-				fn({
+				!jsEvent.ecClosingPopup && fn({
 					date: toLocalDate(date),
@@ -1124,6 +1666,16 @@ dateStr: toISOString(date),
 
-	function div2_binding($$value) {
+	function showMore() {
+		setPopupChunks();
+		set_store_value(_popup, $_popup.date = date, $_popup);
+	}
+
+	function setPopupChunks() {
+		let nextDay = addDay(cloneDate(date));
+		set_store_value(_popup, $_popup.chunks = dayChunks.concat(longChunks[date.getTime()] || []).map(c => assign({}, c, createEventChunk(c.event, date, nextDay), { days: 1, dates: [date] })).sort((a, b) => a.top - b.top), $_popup);
+	}
+
+	function div3_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			el = $$value;
-			$$invalidate(4, el);
+			$$invalidate(7, el);
 		});
@@ -1134,3 +1686,3 @@ }
 		if ('date' in $$props) $$invalidate(0, date = $$props.date);
-		if ('chunks' in $$props) $$invalidate(19, chunks = $$props.chunks);
+		if ('chunks' in $$props) $$invalidate(26, chunks = $$props.chunks);
 		if ('longChunks' in $$props) $$invalidate(1, longChunks = $$props.longChunks);
@@ -1141,5 +1693,7 @@ if ('interactionChunks' in $$props) $$invalidate(2, interactionChunks = $$props.interactionChunks);
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*chunks, date, dayChunks*/ 524297) {
+		if ($$self.$$.dirty[0] & /*hiddenEvents, chunks, date, dayChunks*/ 67108889) {
 			{
 				$$invalidate(3, dayChunks = []);
+				hiddenEvents.clear();
+				((($$invalidate(4, hiddenEvents), $$invalidate(26, chunks)), $$invalidate(0, date)), $$invalidate(3, dayChunks));
 
@@ -1149,3 +1703,35 @@ for (let chunk of chunks) {
 						dayChunks.push(chunk);
+					} // if ($dayMaxEvents !== false && dayChunks.length > $dayMaxEvents) {
+					// 	chunk.hidden = true;
+				} // }
+			}
+		}
+
+		if ($$self.$$.dirty[0] & /*date, hiddenEvents*/ 17) {
+			set_store_value(_hiddenEvents, $_hiddenEvents[date.getTime()] = hiddenEvents, $_hiddenEvents);
+		}
+
+		if ($$self.$$.dirty[0] & /*date, $currentDate, $highlightedDates*/ 1610612737) {
+			{
+				$$invalidate(8, isToday = datesEqual(date, today));
+				$$invalidate(9, otherMonth = date.getUTCMonth() !== $currentDate.getUTCMonth());
+				$$invalidate(10, highlight = $highlightedDates.some(d => datesEqual(d, date)));
+			}
+		}
+
+		if ($$self.$$.dirty[0] & /*$_hiddenEvents, hiddenEvents, $moreLinkContent, moreLink*/ 402653232) {
+			if ($_hiddenEvents && hiddenEvents.size) {
+				// make Svelte update this block on $_hiddenEvents update
+				let text = '+' + hiddenEvents.size + ' more';
+
+				if ($moreLinkContent) {
+					$$invalidate(5, moreLink = is_function($moreLinkContent)
+					? $moreLinkContent({ num: hiddenEvents.size, text })
+					: $moreLinkContent);
+
+					if (typeof moreLink === 'string') {
+						$$invalidate(5, moreLink = { html: moreLink });
 					}
+				} else {
+					$$invalidate(5, moreLink = { html: text });
 				}
@@ -1155,7 +1741,5 @@ }
 
-		if ($$self.$$.dirty & /*date, $currentDate, $highlightedDates*/ 3145729) {
-			{
-				$$invalidate(5, isToday = datesEqual(date, today));
-				$$invalidate(6, otherMonth = date.getUTCMonth() !== $currentDate.getUTCMonth());
-				$$invalidate(7, highlight = $highlightedDates.some(d => datesEqual(d, date)));
+		if ($$self.$$.dirty[0] & /*$_popup, date, longChunks, dayChunks*/ 75) {
+			if ($_popup.date && datesEqual(date, $_popup.date) && longChunks && dayChunks) {
+				setPopupChunks();
 			}
@@ -1170,2 +1754,5 @@ }
 		dayChunks,
+		hiddenEvents,
+		moreLink,
+		$_popup,
 		el,
@@ -1181,11 +1768,17 @@ isToday,
 		highlightedDates,
+		moreLinkContent,
+		theme,
 		_view,
-		theme,
 		_interaction,
+		_hiddenEvents,
+		_popup,
 		createClickHandler,
 		createPointerEnterHandler,
+		showMore,
 		chunks,
+		$moreLinkContent,
+		$_hiddenEvents,
 		$highlightedDates,
 		$currentDate,
-		div2_binding
+		div3_binding
 	];
@@ -1198,8 +1791,17 @@ }
 
-		init(this, options, instance$2, create_fragment$2, safe_not_equal, {
-			date: 0,
-			chunks: 19,
-			longChunks: 1,
-			interactionChunks: 2
-		});
+		init(
+			this,
+			options,
+			instance$2,
+			create_fragment$2,
+			safe_not_equal,
+			{
+				date: 0,
+				chunks: 26,
+				longChunks: 1,
+				interactionChunks: 2
+			},
+			null,
+			[-1, -1]
+		);
 	}
@@ -1443,11 +2045,11 @@ }
 	const child_ctx = ctx.slice();
-	child_ctx[8] = list[i];
+	child_ctx[10] = list[i];
 	return child_ctx;
 }
 
-// (31:1) {#each weeks as dates}
+// (34:1) {#each weeks as dates}
 function create_each_block(ctx) {
 	let week;
 	let current;
-	week = new Week({ props: { dates: /*dates*/ ctx[8] } });
+	week = new Week({ props: { dates: /*dates*/ ctx[10] } });
 
@@ -1464,3 +2066,3 @@ return {
 			const week_changes = {};
-			if (dirty & /*weeks*/ 1) week_changes.dates = /*dates*/ ctx[8];
+			if (dirty & /*weeks*/ 1) week_changes.dates = /*dates*/ ctx[10];
 			week.$set(week_changes);
@@ -1483,3 +2085,3 @@ },
 
-// (30:0) <Body>
+// (33:0) <Body>
 function create_default_slot(ctx) {
@@ -1597,3 +2199,3 @@ let each_1_anchor;
 
-			if (dirty & /*$$scope, weeks*/ 2049) {
+			if (dirty & /*$$scope, weeks*/ 8193) {
 				body_changes.$$scope = { dirty, ctx };
@@ -1625,8 +2227,11 @@ }
 	let $_viewDates;
+	let $_hiddenEvents;
 	let $hiddenDays;
 	let { _viewDates, hiddenDays, theme } = getContext('state');
-	component_subscribe($$self, _viewDates, value => $$invalidate(4, $_viewDates = value));
-	component_subscribe($$self, hiddenDays, value => $$invalidate(5, $hiddenDays = value));
+	component_subscribe($$self, _viewDates, value => $$invalidate(5, $_viewDates = value));
+	component_subscribe($$self, hiddenDays, value => $$invalidate(6, $hiddenDays = value));
 	let state = new State(getContext('state'));
 	setContext('view-state', state);
+	let { _hiddenEvents } = state;
+	component_subscribe($$self, _hiddenEvents, value => $$invalidate(7, $_hiddenEvents = value));
 	let weeks;
@@ -1636,6 +2241,7 @@ let days;
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*$hiddenDays, $_viewDates, days, weeks*/ 57) {
+		if ($$self.$$.dirty & /*$hiddenDays, $_viewDates, days, weeks*/ 113) {
 			{
 				$$invalidate(0, weeks = []);
-				$$invalidate(3, days = 7 - $hiddenDays.length);
+				$$invalidate(4, days = 7 - $hiddenDays.length);
+				set_store_value(_hiddenEvents, $_hiddenEvents = {}, $_hiddenEvents);
 
@@ -1655,3 +2261,3 @@ for (let i = 0; i < $_viewDates.length / days; ++i) {
 
-	return [weeks, _viewDates, hiddenDays, days, $_viewDates, $hiddenDays];
+	return [weeks, _viewDates, hiddenDays, _hiddenEvents, days, $_viewDates, $hiddenDays];
 }
@@ -1668,5 +2274,11 @@
 	createOptions(options) {
+		options.dayMaxEvents = false;
+		options.dayPopoverFormat = {month: 'long', day: 'numeric', year: 'numeric'};
+		options.moreLinkContent = undefined;
 		// Common options
 		options.buttonText.dayGridMonth = 'month';
+		options.theme.uniform = 'ec-uniform';
+		options.theme.dayFoot = 'ec-day-foot';
 		options.theme.month = 'ec-month';
+		options.theme.popup = 'ec-popup';
 		options.view = 'dayGridMonth';
@@ -1681,2 +2293,6 @@ options.views.dayGridMonth = {
 		};
+	},
+
+	createStores(state) {
+		state._intlDayPopover = intl(state.locale, state.dayPopoverFormat);
 	}
@@ -1683,0 +2299,0 @@ };

package.json

 {
   "name": "@event-calendar/day-grid",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "title": "Event Calendar DayGrid plugin",
@@ -20,5 +20,5 @@ "description": "Full-sized drag & drop event calendar with resource view",
   "dependencies": {
-    "@event-calendar/common": "~0.6.0",
+    "@event-calendar/common": "~0.7.0",
     "svelte": "^3.42.4"
   }
 }

README.md

@@ -7,3 +7,3 @@ # Event Calendar [![](https://data.jsdelivr.com/v1/package/npm/@event-calendar/build/badge)](https://www.jsdelivr.com/package/npm/@event-calendar/build)
 
-* Lightweight (40.8kb [br](https://en.wikipedia.org/wiki/Brotli) compressed `modern` version)
+* Lightweight (41.9kb [br](https://en.wikipedia.org/wiki/Brotli) compressed `modern` version)
 * Zero-dependency (pre-built bundle)
@@ -29,2 +29,4 @@ * Used by [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
   - [dayHeaderFormat](#dayheaderformat)
+  - [dayMaxEvents](#daymaxevents)
+  - [dayPopoverFormat](#daypopoverformat)
   - [displayEventEnd](#displayeventend)
@@ -40,5 +42,5 @@ - [dragScroll](#dragscroll)
   - [eventDidMount](#eventdidmount)
-  - [eventDragMinDistance](#eventdragmindistance)
   </td><td>
 
+  - [eventDragMinDistance](#eventdragmindistance)
   - [eventDragStart](#eventdragstart)
@@ -67,2 +69,3 @@ - [eventDragStop](#eventdragstop)
   - [monthMode](#monthmode)
+  - [moreLinkContent](#morelinkcontent)
   - [noEventsClick](#noeventsclick)
@@ -368,2 +371,20 @@ - [noEventsContent](#noeventscontent)
 
+### dayMaxEvents
+- Type `boolean`
+- Default `false`
+
+Determines the maximum number of stacked event levels for a given day in the `dayGrid` view.
+
+If there are too many events, a link like `+2 more` is displayed.
+
+Currently, only the value `true` is supported, which limits the number of events to the height of the day cell.
+
+### dayPopoverFormat
+- Type `object` or `function`
+- Default `{month: 'long', day: 'numeric', year: 'numeric'}`
+
+Defines the date format of title of the popover created by the [dayMaxEvents](#daymaxevents) option.
+
+This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns formatted string:
+
 ### displayEventEnd
@@ -1148,2 +1169,36 @@ - Type `boolean`
 
+### moreLinkContent
+- Type `string`, `object`or `function`
+- Default `undefined`
+
+Defines the text that is displayed instead of the default `+2 more` created by the [dayMaxEvents](#daymaxevents) option.
+
+This value can be either a string containing HTML `'<p>...</p>'`, an object containing the HTML string `{html: '<p>...</p>'}`, an object containing an array of DOM nodes `{domNodes: [node1, node2, ...]}` or a function that returns any of the above formats:
+
+```js
+function (arg) {
+  // return string or object
+}
+```
+`arg` is an object with the following properties:
+<table>
+<tr>
+<td>
+
+`num`
+</td>
+<td>The number of hidden events</td>
+</tr>
+<tr>
+<td>
+
+`text`
+</td>
+<td>
+
+The default text like `+2 more`
+</td>
+</tr>
+</table>
+
 ### noEventsClick
@@ -1274,3 +1329,3 @@ - Type `function`
 - Type `object` or `function`
-- Default `{calendar: 'ec', header: 'ec-header', withScroll: 'ec-with-scroll', hiddenScroll: 'ec-hidden-scroll', body: 'ec-body', week: 'ec-week', compact: 'ec-compact', toolbar: 'ec-toolbar', sidebar: 'ec-sidebar', content: 'ec-content', lines: 'ec-lines', line: 'ec-line', days: 'ec-days', day: 'ec-day', dayHead: 'ec-day-head', today: 'ec-today', otherMonth: 'ec-other-month', highlight: 'ec-highlight', events: 'ec-events', event: 'ec-event', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', bgEvents: 'ec-bg-events', bgEvent: 'ec-bg-event', hiddenTimes: 'ec-hidden-times', time: 'ec-time', button: 'ec-button', buttonGroup: 'ec-button-group', icon: 'ec-icon', active: 'ec-active', title: 'ec-title', month: 'ec-month', daySide: 'ec-day-side', eventTag: 'ec-event-tag', list: 'ec-list', noEvents: 'ec-no-events', resource: 'ec-resource', resourceTitle: 'ec-resource-title'}`
+- Default `{calendar: 'ec', header: 'ec-header', withScroll: 'ec-with-scroll', hiddenScroll: 'ec-hidden-scroll', body: 'ec-body', week: 'ec-week', compact: 'ec-compact', toolbar: 'ec-toolbar', sidebar: 'ec-sidebar', content: 'ec-content', lines: 'ec-lines', line: 'ec-line', days: 'ec-days', day: 'ec-day', dayHead: 'ec-day-head', today: 'ec-today', otherMonth: 'ec-other-month', highlight: 'ec-highlight', events: 'ec-events', event: 'ec-event', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', bgEvents: 'ec-bg-events', bgEvent: 'ec-bg-event', hiddenTimes: 'ec-hidden-times', time: 'ec-time', button: 'ec-button', buttonGroup: 'ec-button-group', icon: 'ec-icon', active: 'ec-active', title: 'ec-title', uniform: 'ec-uniform', dayFoot: 'ec-day-foot', month: 'ec-month', popup: 'ec-popup', daySide: 'ec-day-side', eventTag: 'ec-event-tag', list: 'ec-list', noEvents: 'ec-no-events', resource: 'ec-resource', resourceTitle: 'ec-resource-title', draggable: 'ec-draggable', ghost: 'ec-ghost', preview: 'ec-preview', pointer: 'ec-pointer'}`
 
@@ -1516,3 +1571,3 @@ Defines the CSS classes that the Event Calendar uses to generate HTML markup.
 
-In addition, in your callback functions, you may get the `'ghost'` and `'preview'` for this property, which are internal values and are used to display events during drag-and-drop operations
+In addition, in your callback functions, you may get the `'ghost'`, `'preview'` and `'pointer'` for this property, which are internal values and are used, for example, to display events during drag-and-drop operations
 </td>
@@ -1519,0 +1574,0 @@ </tr>

No alert changes

Improved metrics

Total package byte prevSize

101719

increased by21.6%

Lines of code

1929

increased by38.18%

Number of lines in readme file

1870

increased by3.03%

Dependency changes

• + Added@event-calendar/common@0.7.1(transitive)

• - Removed@event-calendar/common@0.6.0(transitive)

• Updated@event-calendar/common@~0.7.0