@event-calendar/core 0.7.0 → 0.8.2

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;
+}