@event-calendar/core 0.8.1 → 0.8.2

package/index.js

@@ -439,7 +439,7 @@ function parseOpts(opts, state) {
     }
 }
 
-/* packages/core/src/Buttons.svelte generated by Svelte v3.46.3 */
+/* packages/core/src/Buttons.svelte generated by Svelte v3.46.4 */
 
 function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -842,7 +842,7 @@ class Buttons extends SvelteComponent {
 	}
 }
 
-/* packages/core/src/Toolbar.svelte generated by Svelte v3.46.3 */
+/* packages/core/src/Toolbar.svelte generated by Svelte v3.46.4 */
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -1212,7 +1212,7 @@ class Toolbar extends SvelteComponent {
 	}
 }
 
-/* packages/core/src/Calendar.svelte generated by Svelte v3.46.3 */
+/* packages/core/src/Calendar.svelte generated by Svelte v3.46.4 */
 
 function create_fragment(ctx) {
 	let div;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource view",
   "keywords": ["calendar", "event", "resource", "full-sized"],
@@ -12,13 +12,14 @@
   },
   "license": "MIT",
   "type": "module",
+  "svelte": "src/index.js",
   "exports": {
     ".": "./index.js",
     "./index.css": "./index.css",
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@event-calendar/common": "~0.8.1",
-    "svelte": "^3.46.3"
+    "@event-calendar/common": "~0.8.2",
+    "svelte": "^3.46.4"
   }
 }

package/src/Buttons.svelte

@@ -0,0 +1,41 @@
+<script>
+	import {getContext} from 'svelte';
+	import {createDate, cloneDate, subtractDay, addDuration, subtractDuration, setMidnight} from '@event-calendar/common';
+
+	export let buttons;
+
+	let {_currentRange, _viewTitle, buttonText, date, duration, hiddenDays, theme, view} = getContext('state');
+
+	let today = setMidnight(createDate()), isToday;
+
+	$: isToday = today >= $_currentRange.start && today < $_currentRange.end || null;
+
+	function prev() {
+		let d = subtractDuration($date, $duration);
+		if ($hiddenDays.length && $hiddenDays.length < 7) {
+			while ($hiddenDays.includes(d.getUTCDay())) {
+				subtractDay(d);
+			}
+		}
+		$date = d;
+	}
+
+	function next() {
+		$date = addDuration($date, $duration);
+	}
+</script>
+
+{#each buttons as button}
+	{#if button == ''}
+	{:else if button == 'title'}
+		<h2 class="{$theme.title}">{$_viewTitle}</h2>
+	{:else if button == 'prev'}
+		<button class="{$theme.button} ec-{button}" on:click={prev}><i class="{$theme.icon} ec-{button}"></i></button>
+	{:else if button === 'next'}
+		<button class="{$theme.button} ec-{button}" on:click={next}><i class="{$theme.icon} ec-{button}"></i></button>
+	{:else if button === 'today'}
+		<button class="{$theme.button} ec-{button}" on:click={() => $date = cloneDate(today)} disabled={isToday}>{$buttonText[button]}</button>
+	{:else}
+		<button class="{$theme.button}{$view === button ? ' ' + $theme.active : ''} ec-{button}" on:click={() => $view = button}>{$buttonText[button]}</button>
+	{/if}
+{/each}

package/src/Calendar.svelte

@@ -0,0 +1,91 @@
+<script>
+	import './index.scss';
+	import {setContext} from 'svelte';
+	import {get} from 'svelte/store';
+	import {diff} from './storage/options';
+	import State from './storage/state';
+	import Toolbar from './Toolbar.svelte';
+	import {assign, toEventWithLocalDates, toViewWithLocalDates} from '@event-calendar/common';
+
+	export let plugins = [];
+	export let options = {};
+
+	let state = new State(plugins, options);
+	setContext('state', state);
+
+	let {_viewComponent, _interaction, _events, events, eventSources, height, theme} = state;
+
+	// Reactively update options that did change
+	$: for (let [name, value] of diff(options)) {
+		setOption(name, value);
+	}
+
+	export function setOption(name, value) {
+		if (state.hasOwnProperty(name)) {
+			if (state[name].parse) {
+				value = state[name].parse(value);
+			}
+			state[name].set(value);
+		}
+		return this;
+	}
+
+	export function getOption(name) {
+		return state.hasOwnProperty(name) ? get(state[name]) : undefined;
+	}
+
+	export function refetchEvents() {
+		state._fetchedRange.set({start: undefined, end: undefined});
+		return this;
+	}
+
+	export function getEventById(id) {
+		for (let event of get(state._events)) {
+			if (event.id == id) {
+				return toEventWithLocalDates(event);
+			}
+		}
+		return null;
+	}
+
+	export function addEvent(event) {
+		updateEvents(events => events.concat(state.events.parse([event])));
+		return this;
+	}
+
+	export function updateEvent(event) {
+		updateEvents(events => {
+			for (let e of events) {
+				if (e.id == event.id) {
+					assign(e, state.events.parse([event])[0]);
+					break;
+				}
+			}
+			return events;
+		});
+		return this;
+	}
+
+	export function removeEventById(id) {
+		updateEvents(events => events.filter(event => event.id != id));
+		return this;
+	}
+
+	export function getView() {
+		return toViewWithLocalDates(state._view.get());
+	}
+
+	function updateEvents(func) {
+		if ($eventSources.length) {
+			$_events = func($_events);
+		} else {
+			$events = func($events);
+		}
+	}
+</script>
+
+<div class="{$theme.calendar}" style="height: {$height}">
+	<Toolbar/>
+	<svelte:component this={$_viewComponent}/>
+	<svelte:component this={$_interaction.component}/>
+</div>

package/src/Toolbar.svelte

@@ -0,0 +1,34 @@
+<script>
+	import {getContext} from 'svelte';
+	import Buttons from './Buttons.svelte';
+
+	let {headerToolbar, theme} = getContext('state');
+
+	let sections = {
+		start: [],
+		center: [],
+		end: []
+	};
+
+	$: {
+		for (let key of Object.keys(sections)) {
+			sections[key] = $headerToolbar[key].split(' ').map(group => group.split(','));
+		}
+	}
+</script>
+
+<div class="{$theme.toolbar}">
+	{#each Object.keys(sections) as key}
+		<div>
+			{#each sections[key] as buttons}
+				{#if buttons.length > 1}
+					<div class="{$theme.buttonGroup}">
+						<Buttons {buttons}/>
+					</div>
+				{:else}
+					<Buttons {buttons}/>
+				{/if}
+			{/each}
+		</div>
+	{/each}
+</div>

package/src/index.js

@@ -0,0 +1,3 @@
+import Calendar from './Calendar.svelte';
+
+export {Calendar as default};

package/src/index.scss

@@ -0,0 +1,507 @@
+/* Grid */
+.ec-flex {
+  display: flex;
+}
+
+.ec-body.ec-month,
+.ec-days,
+.ec-day,
+.ec-day-title,
+.ec-resource {
+  flex: 1 1 0%; /* % for ie11 */
+  min-width: 0;
+  max-width: 100%;
+}
+
+.ec {
+  display: flex;
+  flex-direction: column;
+
+  /* Scrollbar */
+  ::-webkit-scrollbar {
+    background: #fff;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border: 4px solid #fff;
+    box-shadow: none;
+    background: #dadce0;
+    border-radius: 8px;
+    min-height: 40px;
+  }
+
+  :hover::-webkit-scrollbar-thumb {
+    background: #bdc1c6;
+  }
+}
+
+.ec-hidden-scroll {
+  display: none;
+  overflow-y: scroll;
+  visibility: hidden;
+  flex-shrink: 0;
+
+  .ec-with-scroll & {
+    display: block;
+  }
+}
+
+/* Toolbar */
+.ec-toolbar {
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1em;
+
+  > * {
+    margin-bottom: -.5em;
+
+    > * {
+      margin-bottom: .5em;
+
+      &:not(:last-child) {
+        margin-right: .75em;
+      }
+    }
+  }
+}
+
+.ec-title {
+  margin: 0;
+}
+
+.ec-button {
+  background-color: #fff;
+  border: 1px solid #ced4da;
+  padding: .375rem .75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: .25rem;
+
+  &:not(:disabled) {
+    color: #212529;
+    cursor: pointer;
+  }
+
+  &:not(:disabled):hover,
+  &.ec-active {
+    background-color: #ececec;
+    border-color: #b1bbc4;
+  }
+}
+
+.ec-button-group {
+  display: inline-flex;
+
+  .ec-button:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-left: -1px;
+  }
+
+  .ec-button:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.ec-icon {
+  display: inline-block;
+  width: 1em;
+
+  &.ec-prev:after,
+  &.ec-next:after {
+    content: '';
+    position: relative;
+    width: .5em;
+    height: .5em;
+    border-top: 2px solid #212529;
+    border-right: 2px solid #212529;
+    display: inline-block;
+  }
+
+  &.ec-prev:after {
+    transform: rotate(-135deg) translate(-2px, 2px);
+  }
+
+  &.ec-next:after {
+    transform: rotate(45deg) translate(-2px, 2px);
+  }
+}
+
+/* Header */
+.ec-header,
+.ec-body,
+.ec-days,
+.ec-day {
+  border: 1px solid #dadce0;
+}
+
+.ec-header {
+  display: flex;
+  flex-shrink: 0;
+
+  .ec-resource {
+    flex-direction: column;
+
+    .ec-days {
+      border-top-style: solid;
+    }
+  }
+
+  .ec-days {
+    border-bottom: none;
+  }
+
+  .ec-day {
+    min-height: 24px;
+    line-height: 24px;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+/* Body */
+.ec-body {
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  &:not(.ec-list) {
+    border-top: none;
+  }
+}
+
+.ec-sidebar {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+  padding: 0 4px 0 8px;
+}
+
+.ec-content {
+  display: flex;
+
+  .ec-month & {
+    flex-direction: column;
+    height: 100%; /* ie11 */
+  }
+
+  .ec-month.ec-uniform & {
+    overflow: hidden;
+  }
+
+  .ec-list & {
+    flex-direction: column;
+  }
+}
+
+.ec-resource {
+  display: flex;
+}
+
+.ec-days {
+  display: flex;
+  border-style: none none solid;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .ec-month &,
+  .ec-resource & {
+    flex: 1 0 auto; /* ie11 */
+  }
+
+  .ec-month.ec-uniform & {
+    flex: 1 1 0%;
+    min-height: 0;
+  }
+}
+
+.ec-day {
+  border-style: none none none solid;
+
+  &.ec-today {
+    background-color: #fcf8e3;
+  }
+
+  &.ec-highlight {
+    background-color: #e5f7fe;
+  }
+
+  .ec-month.ec-body & {
+    min-height: 5em;
+    position: relative;
+  }
+
+  .ec-month.ec-uniform & {
+    min-height: 0;
+  }
+
+  .ec-month &:first-child {
+    border-left: none;
+  }
+
+  &.ec-other-month .ec-day-head {
+    opacity: .3;
+  }
+
+  .ec-list & {
+    flex: 1 0 auto; /* ie11 */
+    background-color: #fff;
+    border-style: solid none;
+    padding: 8px 14px;
+    font-weight: bold;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+
+    &:first-child {
+      border-top: none;
+    }
+  }
+}
+
+.ec-month {
+  .ec-day-head {
+    text-align: right;
+    padding: 4px 4px 3px;
+  }
+
+  .ec-day-foot {
+    position: absolute;
+    bottom: 0;
+    padding: 2px;
+    font-size: .85em;
+
+    a {
+      cursor: pointer;
+    }
+  }
+}
+
+.ec-list {
+  .ec-day-side {
+    float: right;
+  }
+
+  .ec-no-events {
+    text-align: center;
+    padding: 5em 0;
+  }
+}
+
+.ec-events {
+  margin: 0 6px 0 0;
+
+  .ec-week &,
+  &.ec-preview {
+    position: relative;
+  }
+}
+
+.ec-event {
+  display: flex;
+  flex-direction: column;
+  padding: 2px;
+  color: #fff;
+  box-sizing: border-box;
+  box-shadow: 0 0 1px 0 #dadce0;
+  background-color: #039be5;
+  border-radius: 3px;
+  font-size: .85em;
+  line-height: 1.5;
+  z-index: 1;  // put it above the pointer event (for multi-day events in month view)
+
+  .ec-month & {
+    position: relative;
+    flex-direction: row;
+  }
+
+  .ec-week & {
+    position: absolute;
+  }
+
+  .ec-list & {
+    flex-direction: row;
+    padding: 8px 14px;
+    color: inherit;
+    background-color: transparent;
+    border-radius: 0;
+  }
+
+  &.ec-preview {
+    cursor: pointer;
+    position: absolute;
+    z-index: 1000;
+    width: 100%;
+    user-select: none;
+    opacity: .8;
+  }
+
+  &.ec-pointer {
+    color: inherit;
+    pointer-events: none;
+    user-select: none;
+    position: absolute;
+    z-index: 0;
+    box-shadow: none;
+    display: none;
+    .ec-day:hover & {
+      display: flex;
+    }
+  }
+}
+
+.ec-event-tag {
+  width: 4px;
+  border-radius: 2px;
+  margin-right: 8px;
+}
+
+.ec-event-time {
+  overflow: hidden;
+  white-space: nowrap;
+  margin: 0 0 1px 0;
+  flex-shrink: 0;
+
+  .ec-month & {
+    margin: 0 3px 0 0;
+    max-width: 100%;
+    text-overflow: ellipsis;
+  }
+}
+
+.ec-event-title {
+  overflow: hidden;
+
+  .ec-month & {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .ec-week & {
+    position: sticky;
+    top: 0;
+  }
+
+  .ec-list & {
+    font-size: 1rem;
+  }
+}
+
+.ec-draggable {
+  cursor: pointer;
+  user-select: none;
+  touch-action: none;
+}
+
+.ec-ghost {
+  opacity: .5;
+  user-select: none;
+  touch-action: none;
+}
+
+.ec-bg-events {
+  position: relative;
+}
+
+.ec-bg-event {
+  position: absolute;
+  background-color: #dadce0;
+  opacity: 0.3;
+  width: 100%;
+}
+
+.ec-hidden-times {
+  visibility: hidden;
+  overflow-y: hidden;
+  height: 0;
+}
+
+.ec-time,
+.ec-line {
+  height: 24px;
+}
+
+.ec-time {
+  position: relative;
+  line-height: 24px;
+  top: -12px;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.ec-lines {
+  width: 8px;
+}
+
+.ec-line:not(:first-child):after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  border-bottom: 1px solid #dadce0;
+  pointer-events: none;
+}
+
+.ec-body:not(.ec-compact) .ec-line:nth-child(even):after {
+  border-bottom-style: dotted;
+}
+
+.ec-popup {
+  position: absolute;
+  top: 0;
+  width: 110%;
+  min-width: 180px;
+  z-index: 1010;
+  padding: 8px 10px 14px;
+  background-color: #fff;
+  border-radius: 6px;
+  outline: 1px solid transparent;
+  box-shadow: 0 1px 3px 0 rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15);
+
+  .ec-day-head {
+    text-align: left;
+    display: flex;
+    justify-content: space-between;
+
+    a {
+      cursor: pointer;
+      font-size: 1.5em;
+      line-height: .8;
+    }
+  }
+
+  .ec-events {
+    margin: 0;
+  }
+}
+
+.ec-extra {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  margin-left: -6.5px;
+}
+
+.ec-now-indicator {
+  position: absolute;
+  z-index: 1005;
+  width: 100%;
+  border-top: #ea4335 solid 2px;
+  pointer-events: none;
+
+  &:before {
+    background: #ea4335;
+    border-radius: 50%;
+    content: "";
+    position: absolute;
+    height: 12px;
+    margin-top: -7px;
+    width: 12px;
+    pointer-events: none;
+  }
+}

package/src/storage/options.js

@@ -0,0 +1,150 @@
+import {assign, createDate, createDuration, setMidnight} from '@event-calendar/common';
+import {createEvents, createEventSources} from '@event-calendar/common';
+import {is_function} from 'svelte/internal';
+
+export function createOptions(plugins) {
+    let options = {
+        buttonText: {
+            today: 'today',
+        },
+        date: new Date(),
+        dateClick: undefined,
+        datesSet: undefined,
+        dayHeaderFormat: {
+            weekday: 'short',
+            month: 'numeric',
+            day: 'numeric'
+        },
+        displayEventEnd: true,
+        duration: {weeks: 1},
+        events: [],
+        eventBackgroundColor: undefined,
+        eventClick: undefined,
+        eventColor: undefined,
+        eventContent: undefined,
+        eventDidMount: undefined,
+        eventMouseEnter: undefined,
+        eventMouseLeave: undefined,
+        eventSources: [],
+        eventTimeFormat: {
+            hour: 'numeric',
+            minute: '2-digit'
+        },
+        firstDay: 0,
+        flexibleSlotTimeLimits: false,  // ec option
+        headerToolbar: {
+            start: 'title',
+            center: '',
+            end: 'today prev,next'
+        },
+        height: 'auto',
+        hiddenDays: [],
+        highlightedDates: [],  // ec option
+        lazyFetching: true,
+        loading: undefined,
+        locale: undefined,
+        monthMode: false,
+        nowIndicator: false,
+        scrollTime: '06:00:00',
+        slotDuration: '00:30:00',
+        slotHeight: 24,  // ec option
+        slotLabelFormat: {
+            hour: 'numeric',
+            minute: '2-digit'
+        },
+        slotMaxTime: '24:00:00',
+        slotMinTime: '00:00:00',
+        theme: {
+            active: 'ec-active',
+            bgEvent: 'ec-bg-event',
+            bgEvents: 'ec-bg-events',
+            body: 'ec-body',
+            button: 'ec-button',
+            buttonGroup: 'ec-button-group',
+            calendar: 'ec',
+            compact: 'ec-compact',
+            content: 'ec-content',
+            day: 'ec-day',
+            dayHead: 'ec-day-head',
+            days: 'ec-days',
+            event: 'ec-event',
+            eventTime: 'ec-event-time',
+            eventTitle: 'ec-event-title',
+            events: 'ec-events',
+            extra: 'ec-extra',
+            handle: 'ec-handle',
+            header: 'ec-header',
+            hiddenScroll: 'ec-hidden-scroll',
+            hiddenTimes: 'ec-hidden-times',
+            highlight: 'ec-highlight',
+            icon: 'ec-icon',
+            line: 'ec-line',
+            lines: 'ec-lines',
+            nowIndicator: 'ec-now-indicator',
+            otherMonth: 'ec-other-month',
+            sidebar: 'ec-sidebar',
+            today: 'ec-today',
+            time: 'ec-time',
+            title: 'ec-title',
+            toolbar: 'ec-toolbar',
+            week: 'ec-week',
+            withScroll: 'ec-with-scroll'
+        },
+        titleFormat: {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric'
+        },
+        view: undefined,
+        viewDidMount: undefined,
+        views: {}
+    };
+
+    for (let plugin of plugins) {
+        if ('createOptions' in plugin) {
+            plugin.createOptions(options);
+        }
+    }
+
+    return options;
+}
+
+export function createParsers(options, plugins) {
+    let parsers = {
+        buttonText: input => is_function(input) ? input(options.buttonText) : input,
+        date: date => setMidnight(createDate(date)),
+        duration: createDuration,
+        events: createEvents,
+        eventSources: createEventSources,
+        hiddenDays: days => [...new Set(days)],
+        highlightedDates: dates => dates.map(createDate),
+        scrollTime: createDuration,
+        slotDuration: createDuration,
+        slotMaxTime: createDuration,
+        slotMinTime: createDuration,
+        theme: input => is_function(input) ? input(options.theme) : input
+    };
+
+    for (let plugin of plugins) {
+        if ('createParsers' in plugin) {
+            plugin.createParsers(parsers, options);
+        }
+    }
+
+    return parsers;
+}
+
+let prev;
+export function diff(options) {
+    let diff = [];
+    if (prev) {
+        for (let name of Object.keys(options)) {
+            if (options[name] !== prev[name]) {
+                diff.push([name, options[name]]);
+            }
+        }
+    }
+    prev = assign({}, options);
+
+    return diff;
+}

package/src/storage/state.js

@@ -0,0 +1,114 @@
+import {writable} from 'svelte/store';
+import {is_function, tick, noop, identity} from 'svelte/internal';
+import {createOptions, createParsers} from './options';
+import {
+    activeRange,
+    currentRange,
+    events,
+    viewDates,
+    viewTitle,
+    view as view2  // hack to avoid a runtime error in SvelteKit dev mode (ReferenceError: view is not defined)
+} from './stores';
+import {writable2, intl, intlRange} from '@event-calendar/common';
+import {assign} from '@event-calendar/common';
+
+export default class {
+    constructor(plugins, input) {
+        plugins = plugins || [];
+
+        // Create options
+        let options = createOptions(plugins);
+        let parsers = createParsers(options, plugins);
+
+        // Create stores for options
+        for (let [option, value] of Object.entries(options)) {
+            this[option] = writable2(value, parsers[option]);
+        }
+
+        // Private stores
+        this._currentRange = currentRange(this);
+        this._activeRange = activeRange(this);
+        this._fetchedRange = writable({start: undefined, end: undefined});
+        this._events = events(this);
+        this._intlEventTime = intl(this.locale, this.eventTimeFormat);
+        this._intlSlotLabel = intl(this.locale, this.slotLabelFormat);
+        this._intlDayHeader = intl(this.locale, this.dayHeaderFormat);
+        this._titleIntlRange = intlRange(this.locale, this.titleFormat);
+        this._scrollable = writable(false);
+        this._viewTitle = viewTitle(this);
+        this._viewDates = viewDates(this);
+        this._view = view2(this);
+        this._viewComponent = writable(undefined);
+        // Interaction
+        this._interaction = writable({});
+        this._interactionEvents = writable([null, null]);  // drag, pointer
+        this._draggable = writable(noop);
+        this._classes = writable(identity);
+        this._scroll = writable(undefined);
+
+        // Let plugins create their private stores
+        for (let plugin of plugins) {
+            if ('createStores' in plugin) {
+                plugin.createStores(this);
+            }
+        }
+
+        if (input.view) {
+            // Set initial view based on input
+            this.view.set(input.view);
+        }
+
+        // Set options for each view
+        let commonOpts = assign({}, options, input);
+        parseOpts(commonOpts, this);
+        let views = new Set([...Object.keys(options.views), ...Object.keys(input.views || {})]);
+        for (let view of views) {
+            let viewOpts = assign({}, options.views[view] || {}, input.views && input.views[view] || {});
+            parseOpts(viewOpts, this);
+            let opts = assign({}, commonOpts, viewOpts);
+            // Change view component when view changes
+            this.view.subscribe(newView => {
+                if (newView === view) {
+                    this._viewComponent.set(opts.component);
+                    if (is_function(opts.viewDidMount)) {
+                        tick().then(() => opts.viewDidMount(this._view.get()));
+                    }
+                }
+            });
+            for (let key of Object.keys(opts)) {
+                if (this.hasOwnProperty(key) && key[0] !== '_') {
+                    let {set, _set, ...rest} = this[key];
+
+                    if (!_set) {
+                        // Original set
+                        _set = set;
+                    }
+
+                    this[key] = {
+                        // Set value in all views
+                        set: value => {opts[key] = value; set(value);},
+                        _set,
+                        ...rest
+                    };
+
+                    // Change value when view changes
+                    this.view.subscribe(newView => {
+                        if (newView === view) {
+                            _set(opts[key]);
+                        }
+                    });
+                }
+            }
+        }
+    }
+}
+
+function parseOpts(opts, state) {
+    for (let key of Object.keys(opts)) {
+        if (state.hasOwnProperty(key) && key[0] !== '_') {
+            if (state[key].parse) {
+                opts[key] = state[key].parse(opts[key]);
+            }
+        }
+    }
+}

package/src/storage/stores.js

@@ -0,0 +1,206 @@
+import {derived, writable} from 'svelte/store';
+import {is_function, noop, tick} from 'svelte/internal';
+import {
+    DAY_IN_SECONDS,
+    cloneDate,
+    addDuration,
+    addDay,
+    subtractDay,
+    toISOString,
+    nextClosestDay,
+    prevClosestDay,
+    setMidnight,
+    toLocalDate
+} from '@event-calendar/common';
+import {derived2} from '@event-calendar/common';
+import {createEvents} from '@event-calendar/common';
+import {createView} from '@event-calendar/common';
+import {assign} from '@event-calendar/common';
+
+export function activeRange(state) {
+    let _activeRange = derived(
+        [state._currentRange, state.firstDay, state.monthMode, state.slotMinTime, state.slotMaxTime],
+        ([$_currentRange, $firstDay, $monthMode, $slotMinTime, $slotMaxTime]) => {
+            let start = cloneDate($_currentRange.start);
+            let end = cloneDate($_currentRange.end);
+
+            if ($monthMode) {
+                // First day of week
+                prevClosestDay(start, $firstDay);
+                nextClosestDay(end, $firstDay);
+            } else if ($slotMaxTime.days || $slotMaxTime.seconds > DAY_IN_SECONDS) {
+                addDuration(subtractDay(end), $slotMaxTime);
+                let start2 = subtractDay(cloneDate(end));
+                if (start2 < start) {
+                    start = start2;
+                }
+            }
+
+            return {start, end};
+        }
+    );
+
+    let debounce = 0;
+    derived([_activeRange, state.datesSet], ([$_activeRange, $datesSet]) => {
+        if ($datesSet && !debounce) {
+            ++debounce;
+            tick().then(() => {
+                --debounce;
+                $datesSet({
+                    start: toLocalDate($_activeRange.start),
+                    end: toLocalDate($_activeRange.end),
+                    startStr: toISOString($_activeRange.start),
+                    endStr: toISOString($_activeRange.end)
+                });
+            });
+        }
+    }).subscribe(noop);
+
+    return _activeRange;
+}
+
+export function currentRange(state) {
+    return derived(
+        [state.date, state.duration, state.monthMode, state.firstDay],
+        ([$date, $duration, $monthMode, $firstDay]) => {
+            let start = cloneDate($date), end;
+            if ($monthMode) {
+                start.setDate(1);
+            } else if ($duration.inWeeks) {
+                // First day of week
+                prevClosestDay(start, $firstDay);
+            }
+            end = addDuration(cloneDate(start), $duration);
+
+            return {start, end};
+        }
+    );
+}
+
+export function viewDates(state) {
+    return derived2([state._activeRange, state.hiddenDays], ([$_activeRange, $hiddenDays]) => {
+        let dates = [];
+        let date = setMidnight(cloneDate($_activeRange.start));
+        let end = setMidnight(cloneDate($_activeRange.end));
+        while (date < end) {
+            if (!$hiddenDays.includes(date.getUTCDay())) {
+                dates.push(cloneDate(date));
+            }
+            addDay(date);
+        }
+        if (!dates.length && $hiddenDays.length && $hiddenDays.length < 7) {
+            // Try to move the date
+            state.date.update(date => {
+                while ($hiddenDays.includes(date.getUTCDay())) {
+                    addDay(date);
+                }
+                return date;
+            });
+            dates = state._viewDates.get();
+        }
+
+        return dates;
+    });
+}
+
+export function viewTitle(state) {
+    return derived(
+        [state.date, state._activeRange, state._titleIntlRange, state.monthMode],
+        ([$date, $_activeRange, $_titleIntlRange, $monthMode]) => {
+            return $monthMode
+                ? $_titleIntlRange.format($date, $date)
+                : $_titleIntlRange.format($_activeRange.start, subtractDay(cloneDate($_activeRange.end)));
+        }
+    );
+}
+
+export function view(state) {
+    return derived2([state.view, state._viewTitle, state._currentRange, state._activeRange], args => createView(...args));
+}
+
+export function events(state) {
+    let _events = writable([]);
+    let abortController;
+    let fetching = 0;
+    derived(
+        [state.events, state.eventSources, state._activeRange, state._fetchedRange, state.lazyFetching, state.loading],
+        (values, set) => tick().then(() => {
+            let [$events, $eventSources, $_activeRange, $_fetchedRange, $lazyFetching, $loading] = values;
+            if (!$eventSources.length) {
+                set($events);
+                return;
+            }
+            // Do not fetch if new range is within the previous one
+            if (!$_fetchedRange.start || $_fetchedRange.start > $_activeRange.start || $_fetchedRange.end < $_activeRange.end || !$lazyFetching) {
+                if (abortController) {
+                    // Abort previous request
+                    abortController.abort();
+                }
+                // Create new abort controller
+                abortController = new AbortController();
+                // Call loading hook
+                if (is_function($loading) && !fetching) {
+                    $loading(true);
+                }
+                let stopLoading = () => {
+                    if (--fetching === 0 && is_function($loading)) {
+                        $loading(false);
+                    }
+                };
+                let events = [];
+                // Prepare handlers
+                let failure = e => stopLoading();
+                let success = data => {
+                    events = events.concat(createEvents(data));
+                    set(events);
+                    stopLoading();
+                };
+                // Prepare other stuff
+                let startStr = toISOString($_activeRange.start)
+                let endStr = toISOString($_activeRange.end);
+                // Loop over event sources
+                for (let source of $eventSources) {
+                    if (is_function(source.events)) {
+                        // Events as a function
+                        let result = source.events({
+                            start: toLocalDate($_activeRange.start),
+                            end: toLocalDate($_activeRange.end),
+                            startStr,
+                            endStr
+                        }, success, failure);
+                        if (result !== undefined) {
+                            Promise.resolve(result).then(success, failure);
+                        }
+                    } else {
+                        // Events as a JSON feed
+                        // Prepare params
+                        let params = is_function(source.extraParams) ? source.extraParams() : assign({}, source.extraParams);
+                        params.start = startStr;
+                        params.end = endStr;
+                        params = new URLSearchParams(params);
+                        // Prepare fetch
+                        let url = source.url, headers = {}, body;
+                        if (['GET', 'HEAD'].includes(source.method)) {
+                            url += (url.includes('?') ? '&' : '?') + params;
+                        } else {
+                            headers['content-type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
+                            body = String(params);  // Safari 10.1 doesn't convert to string automatically
+                        }
+                        // Do the fetch
+                        fetch(url, {method: source.method, headers, body, signal: abortController.signal, credentials: 'same-origin'})
+                            .then(response => response.json())
+                            .then(success)
+                            .catch(failure);
+                    }
+                    ++fetching;
+                }
+                // Save current range for future requests
+                $_fetchedRange.start = $_activeRange.start;
+                $_fetchedRange.end = $_activeRange.end;
+            }
+        }),
+        []
+    ).subscribe(_events.set);
+
+    return _events;
+}