@zeedhi/zd-calendar-vue 1.0.0

package/dist/calendar-vue.esm.js

@@ -0,0 +1,814 @@
+import { Prop, Component } from 'vue-property-decorator';
+import { PropWatch, ZdComponentRender } from '@zeedhi/vuetify';
+import { Calendar } from '@zeedhi/zd-calendar-common';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+let ZdCalendar = class ZdCalendar extends ZdComponentRender {
+    constructor() {
+        super(...arguments);
+        this.instanceType = Calendar;
+        this.selectedOpen = false;
+        this.selectedElement = null;
+        this.selectedEvent = {};
+    }
+    mounted() {
+        this.$refs.calendar.checkChange();
+    }
+    prev() {
+        this.$refs.calendar.prev();
+    }
+    next() {
+        this.$refs.calendar.next();
+    }
+    setToday() {
+        this.instance.value = '';
+    }
+    setType(select) {
+        const { value } = select.instance.value;
+        this.instance.type = value;
+    }
+    viewDay({ date }) {
+        this.instance.value = date;
+        this.instance.type = 'day';
+    }
+    showEvent({ nativeEvent, event }) {
+        const open = () => {
+            this.selectedEvent = event;
+            this.selectedElement = nativeEvent.target;
+            requestAnimationFrame(() => { requestAnimationFrame(() => { this.selectedOpen = true; }); });
+        };
+        if (this.selectedOpen) {
+            this.selectedOpen = false;
+            requestAnimationFrame(() => requestAnimationFrame(() => open()));
+        }
+        else {
+            open();
+        }
+        nativeEvent.stopPropagation();
+    }
+};
+__decorate([
+    Prop({ type: [String, Array], default: undefined }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "categories", void 0);
+__decorate([
+    PropWatch({ type: [String, Number], default: 1 }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "categoryDays", void 0);
+__decorate([
+    PropWatch({ type: String, default: undefined }),
+    __metadata("design:type", String)
+], ZdCalendar.prototype, "title", void 0);
+__decorate([
+    PropWatch({ type: [String, Boolean], default: undefined }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "showHeader", void 0);
+__decorate([
+    PropWatch({ type: String, default: undefined }),
+    __metadata("design:type", String)
+], ZdCalendar.prototype, "categoryForInvalid", void 0);
+__decorate([
+    PropWatch({ type: Boolean, default: false }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "categoryHideDynamic", void 0);
+__decorate([
+    PropWatch({ type: Boolean, default: false }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "categoryShowAll", void 0);
+__decorate([
+    Prop({ type: [String, Function], default: undefined }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "categoryText", void 0);
+__decorate([
+    PropWatch({ type: String, default: 'primary' }),
+    __metadata("design:type", String)
+], ZdCalendar.prototype, "color", void 0);
+__decorate([
+    Prop({ type: Function, default: null }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "dayFormat", void 0);
+__decorate([
+    PropWatch({ type: [String, Number, Date], default: undefined }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "end", void 0);
+__decorate([
+    PropWatch({ type: [String, Function], default: 'category' }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "eventCategory", void 0);
+__decorate([
+    PropWatch({ type: [String, Function], default: 'primary' }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "eventColor", void 0);
+__decorate([
+    PropWatch({ type: String, default: 'end' }),
+    __metadata("design:type", String)
+], ZdCalendar.prototype, "eventEnd", void 0);
+__decorate([
+    PropWatch({ type: Number, default: 20 }),
+    __metadata("design:type", Number)
+], ZdCalendar.prototype, "eventHeight", void 0);
+__decorate([
+    PropWatch({ type: Number, default: 1 }),
+    __metadata("design:type", Number)
+], ZdCalendar.prototype, "eventMarginBottom", void 0);
+__decorate([
+    PropWatch({ type: Boolean, default: true }),
+    __metadata("design:type", Boolean)
+], ZdCalendar.prototype, "eventMore", void 0);
+__decorate([
+    PropWatch({ type: String, default: 'CALENDAR_MORE' }),
+    __metadata("design:type", String)
+], ZdCalendar.prototype, "eventMoreText", void 0);
+__decorate([
+    PropWatch({ type: [String, Function], default: 'name' }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "eventName", void 0);
+__decorate([
+    PropWatch({ type: [String, Function], default: 'stack' }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "eventOverlapMode", void 0);
+__decorate([
+    PropWatch({ type: [String, Number], default: 60 }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "eventOverlapThreshold", void 0);
+__decorate([
+    Prop({ type: [String, Object], default: undefined }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "eventRipple", void 0);
+__decorate([
+    PropWatch({ type: String, default: 'start' }),
+    __metadata("design:type", String)
+], ZdCalendar.prototype, "eventStart", void 0);
+__decorate([
+    Prop({ type: [String, Function], default: 'white' }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "eventTextColor", void 0);
+__decorate([
+    Prop({ type: [String, Function], default: 'timed' }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "eventTimed", void 0);
+__decorate([
+    Prop({ type: Array, default: () => [] }),
+    __metadata("design:type", Array)
+], ZdCalendar.prototype, "calendarEvents", void 0);
+__decorate([
+    Prop({ type: [String, Number], default: 0 }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "firstInterval", void 0);
+__decorate([
+    PropWatch({ type: [String, Number, Object], default: 0 }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "firstTime", void 0);
+__decorate([
+    PropWatch({ type: Boolean, default: false }),
+    __metadata("design:type", Boolean)
+], ZdCalendar.prototype, "hideHeader", void 0);
+__decorate([
+    Prop({ type: [String, Number], default: 24 }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "intervalCount", void 0);
+__decorate([
+    Prop({ type: Function, default: null }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "intervalFormat", void 0);
+__decorate([
+    PropWatch({ type: [String, Number], default: 48 }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "intervalHeight", void 0);
+__decorate([
+    PropWatch({ type: [String, Number], default: 60 }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "intervalMinutes", void 0);
+__decorate([
+    Prop({ type: Function, default: null }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "intervalStyle", void 0);
+__decorate([
+    PropWatch({ type: [String, Number], default: 60 }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "intervalWidth", void 0);
+__decorate([
+    PropWatch({ type: String, default: 'pt-BR' }),
+    __metadata("design:type", String)
+], ZdCalendar.prototype, "locale", void 0);
+__decorate([
+    PropWatch({ type: [String, Number], default: 0 }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "localeFirstDayOfYear", void 0);
+__decorate([
+    PropWatch({ type: Number, default: 7 }),
+    __metadata("design:type", Number)
+], ZdCalendar.prototype, "maxDays", void 0);
+__decorate([
+    PropWatch({ type: [Number, String], default: 1 }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "minWeeks", void 0);
+__decorate([
+    Prop({ type: Function, default: null }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "monthFormat", void 0);
+__decorate([
+    PropWatch({ type: String, default: undefined }),
+    __metadata("design:type", String)
+], ZdCalendar.prototype, "now", void 0);
+__decorate([
+    PropWatch({ type: Boolean, default: true }),
+    __metadata("design:type", Boolean)
+], ZdCalendar.prototype, "shortIntervals", void 0);
+__decorate([
+    PropWatch({ type: Boolean, default: true }),
+    __metadata("design:type", Boolean)
+], ZdCalendar.prototype, "shortMonths", void 0);
+__decorate([
+    PropWatch({ type: Boolean, default: true }),
+    __metadata("design:type", Boolean)
+], ZdCalendar.prototype, "shortWeekDays", void 0);
+__decorate([
+    Prop({ type: Function, default: null }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "showIntervalLabel", void 0);
+__decorate([
+    PropWatch({ type: Boolean, default: true }),
+    __metadata("design:type", Boolean)
+], ZdCalendar.prototype, "showMonthOnFirst", void 0);
+__decorate([
+    PropWatch({ type: Boolean, default: false }),
+    __metadata("design:type", Boolean)
+], ZdCalendar.prototype, "showWeek", void 0);
+__decorate([
+    PropWatch({ type: [String, Number, Date], default: () => (new Date()) }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "start", void 0);
+__decorate([
+    PropWatch({ type: String, default: 'month' }),
+    __metadata("design:type", String)
+], ZdCalendar.prototype, "type", void 0);
+__decorate([
+    PropWatch({ type: [String, Number, Date], default: undefined }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "value", void 0);
+__decorate([
+    Prop({ type: Function, default: null }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "weekdayFormat", void 0);
+__decorate([
+    Prop({ type: [String, Array], default: () => [0, 1, 2, 3, 4, 5, 6, 7] }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "weekDay", void 0);
+__decorate([
+    PropWatch({ type: Object, default: undefined }),
+    __metadata("design:type", Object)
+], ZdCalendar.prototype, "selectTypeData", void 0);
+ZdCalendar = __decorate([
+    Component
+], ZdCalendar);
+var script = ZdCalendar;
+
+function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+    if (typeof shadowMode !== 'boolean') {
+        createInjectorSSR = createInjector;
+        createInjector = shadowMode;
+        shadowMode = false;
+    }
+    // Vue.extend constructor export interop.
+    const options = typeof script === 'function' ? script.options : script;
+    // render functions
+    if (template && template.render) {
+        options.render = template.render;
+        options.staticRenderFns = template.staticRenderFns;
+        options._compiled = true;
+        // functional template
+        if (isFunctionalTemplate) {
+            options.functional = true;
+        }
+    }
+    // scopedId
+    if (scopeId) {
+        options._scopeId = scopeId;
+    }
+    let hook;
+    if (moduleIdentifier) {
+        // server build
+        hook = function (context) {
+            // 2.3 injection
+            context =
+                context || // cached call
+                    (this.$vnode && this.$vnode.ssrContext) || // stateful
+                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
+            // 2.2 with runInNewContext: true
+            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+                context = __VUE_SSR_CONTEXT__;
+            }
+            // inject component styles
+            if (style) {
+                style.call(this, createInjectorSSR(context));
+            }
+            // register component module identifier for async chunk inference
+            if (context && context._registeredComponents) {
+                context._registeredComponents.add(moduleIdentifier);
+            }
+        };
+        // used by ssr in case component is cached and beforeCreate
+        // never gets called
+        options._ssrRegister = hook;
+    }
+    else if (style) {
+        hook = shadowMode
+            ? function (context) {
+                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
+            }
+            : function (context) {
+                style.call(this, createInjector(context));
+            };
+    }
+    if (hook) {
+        if (options.functional) {
+            // register for functional component in vue file
+            const originalRender = options.render;
+            options.render = function renderWithStyleInjection(h, context) {
+                hook.call(context);
+                return originalRender(h, context);
+            };
+        }
+        else {
+            // inject component registration as beforeCreate hook
+            const existing = options.beforeCreate;
+            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+        }
+    }
+    return script;
+}
+
+const isOldIE = typeof navigator !== 'undefined' &&
+    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
+function createInjector(context) {
+    return (id, style) => addStyle(id, style);
+}
+let HEAD;
+const styles = {};
+function addStyle(id, css) {
+    const group = isOldIE ? css.media || 'default' : id;
+    const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
+    if (!style.ids.has(id)) {
+        style.ids.add(id);
+        let code = css.source;
+        if (css.map) {
+            // https://developer.chrome.com/devtools/docs/javascript-debugging
+            // this makes source maps inside style tags work properly in Chrome
+            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
+            // http://stackoverflow.com/a/26603875
+            code +=
+                '\n/*# sourceMappingURL=data:application/json;base64,' +
+                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
+                    ' */';
+        }
+        if (!style.element) {
+            style.element = document.createElement('style');
+            style.element.type = 'text/css';
+            if (css.media)
+                style.element.setAttribute('media', css.media);
+            if (HEAD === undefined) {
+                HEAD = document.head || document.getElementsByTagName('head')[0];
+            }
+            HEAD.appendChild(style.element);
+        }
+        if ('styleSheet' in style.element) {
+            style.styles.push(code);
+            style.element.styleSheet.cssText = style.styles
+                .filter(Boolean)
+                .join('\n');
+        }
+        else {
+            const index = style.ids.size - 1;
+            const textNode = document.createTextNode(code);
+            const nodes = style.element.childNodes;
+            if (nodes[index])
+                style.element.removeChild(nodes[index]);
+            if (nodes.length)
+                style.element.insertBefore(textNode, nodes[index]);
+            else
+                style.element.appendChild(textNode);
+        }
+    }
+}
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(
+    "v-row",
+    { staticClass: "fill-height zd-calendar-content" },
+    [
+      _c(
+        "v-col",
+        [
+          _c(
+            "div",
+            {
+              directives: [
+                {
+                  name: "show",
+                  rawName: "v-show",
+                  value: _vm.instance.showHeader,
+                  expression: "instance.showHeader",
+                },
+              ],
+              class: [
+                "zd-toolbar-calendar",
+                { "theme--dark": _vm.instance.dark || _vm.$vuetify.theme.dark },
+                {
+                  "theme--light":
+                    _vm.instance.light || !_vm.$vuetify.theme.dark,
+                },
+              ],
+              attrs: {
+                name: "toolbar_" + _vm.instance.name,
+                height: "64",
+                dark: _vm.instance.dark,
+                light: _vm.instance.light,
+              },
+            },
+            [
+              _c(
+                "div",
+                [
+                  _c("zd-button", {
+                    staticClass: "mr-4",
+                    attrs: {
+                      name: "setTodayButton_" + _vm.instance.name,
+                      label: "$t(CALENDAR_TODAY)",
+                    },
+                    on: {
+                      click: function ($event) {
+                        return _vm.setToday()
+                      },
+                    },
+                  }),
+                  _vm._v(" "),
+                  _c(
+                    "zd-button",
+                    _vm._b(
+                      {
+                        attrs: {
+                          name: "prevButtonCalendar_" + _vm.instance.name,
+                        },
+                        on: {
+                          click: function ($event) {
+                            return _vm.prev()
+                          },
+                        },
+                      },
+                      "zd-button",
+                      {
+                        icon: true,
+                        fab: true,
+                        small: true,
+                        iconName: "prev",
+                      },
+                      false
+                    )
+                  ),
+                  _vm._v(" "),
+                  _c(
+                    "zd-button",
+                    _vm._b(
+                      {
+                        attrs: {
+                          name: "nextButtonCalendar_" + _vm.instance.name,
+                        },
+                        on: {
+                          click: function ($event) {
+                            return _vm.next()
+                          },
+                        },
+                      },
+                      "zd-button",
+                      {
+                        icon: true,
+                        fab: true,
+                        small: true,
+                        iconName: "next",
+                      },
+                      false
+                    )
+                  ),
+                ],
+                1
+              ),
+              _vm._v(" "),
+              _vm.instance.title
+                ? _c("div", [
+                    _c("h3", [
+                      _vm._v(
+                        "\n\t\t\t\t\t\t" +
+                          _vm._s(_vm.instance.title) +
+                          "\n\t\t\t\t\t"
+                      ),
+                    ]),
+                  ])
+                : _vm._e(),
+              _vm._v(" "),
+              _c(
+                "div",
+                [
+                  _c(
+                    "zd-select",
+                    _vm._b(
+                      {
+                        ref: "selectCalendarType",
+                        staticClass: "zd-select-calendar-type",
+                        attrs: {
+                          name: "selectCalendarType_" + _vm.instance.name,
+                        },
+                        on: {
+                          change: function ($event) {
+                            return _vm.setType(_vm.$refs.selectCalendarType)
+                          },
+                        },
+                      },
+                      "zd-select",
+                      {
+                        value: _vm.instance.type,
+                        dataText: "name",
+                        dataValue: "value",
+                        clearable: false,
+                        autocomplete: false,
+                        showLabel: false,
+                        showHelper: false,
+                        dense: true,
+                        returnObject: true,
+                        dark: _vm.instance.dark,
+                        light: _vm.instance.light,
+                        datasource: _vm.instance.selectTypeData || {
+                          data: [
+                            { name: _vm.$t("CALENDAR_MONTH"), value: "month" },
+                            { name: _vm.$t("CALENDAR_WEEK"), value: "week" },
+                            { name: _vm.$t("CALENDAR_DAY"), value: "day" },
+                            {
+                              name: _vm.$t("CALENDAR_CATEGORY"),
+                              value: "category",
+                            },
+                            { name: _vm.$t("CALENDAR_4DAYS"), value: "4day" },
+                          ],
+                        },
+                      },
+                      false
+                    )
+                  ),
+                ],
+                1
+              ),
+            ]
+          ),
+          _vm._v(" "),
+          _c(
+            "v-sheet",
+            { attrs: { height: _vm.instance.height || 600 } },
+            [
+              _c("v-calendar", {
+                ref: "calendar",
+                attrs: {
+                  categories: _vm.instance.categories,
+                  "category-days": _vm.instance.categoryDays,
+                  "category-for-invalid": _vm.instance.categoryForInvalid,
+                  "category-hide-dynamic": _vm.instance.categoryHideDynamic,
+                  "category-show-all": _vm.instance.categoryShowAll,
+                  "category-text": _vm.instance.categoryText,
+                  color: _vm.instance.color,
+                  dark: _vm.instance.dark,
+                  "day-format": _vm.instance.dayFormat,
+                  end: _vm.instance.end,
+                  "event-category": _vm.instance.eventCategory,
+                  "event-color": _vm.instance.eventColor,
+                  "event-end": _vm.instance.eventEnd,
+                  "event-height": _vm.instance.eventHeight,
+                  "event-margin-bottom": _vm.instance.eventMarginBottom,
+                  "event-more": _vm.instance.eventMore,
+                  "event-more-text": _vm.$t(_vm.instance.eventMoreText),
+                  "event-name": _vm.instance.eventName,
+                  "event-overlap-mode": _vm.instance.eventOverlapMode,
+                  "event-overlap-threshold": _vm.instance.eventOverlapThreshold,
+                  "event-start": _vm.instance.eventStart,
+                  "event-text-color": _vm.instance.eventTextColor,
+                  "event-timed": _vm.instance.eventTimed,
+                  "hide-header": _vm.instance.hideHeader,
+                  "interval-count": _vm.instance.intervalCount,
+                  "interval-format": _vm.instance.intervalFormat,
+                  "interval-height": _vm.instance.intervalHeight,
+                  "interval-minutes": _vm.instance.intervalMinutes,
+                  "interval-width": _vm.instance.intervalWidth,
+                  events: _vm.instance.calendarEvents,
+                  "first-interval": _vm.instance.firstInterval,
+                  "first-style": _vm.instance.intervalStyle,
+                  "first-time": _vm.instance.firstTime,
+                  light: _vm.instance.light,
+                  id: _vm.instance.name,
+                  name: _vm.instance.name,
+                  start: _vm.instance.start,
+                  type: _vm.instance.type,
+                  value: _vm.instance.value,
+                  now: _vm.instance.now,
+                  "show-week": _vm.instance.showWeek,
+                  "show-month-on-first-day": _vm.instance.showMonthOnFirstDay,
+                  "short-intervals": _vm.instance.shortIntervals,
+                  "short-weekday": _vm.instance.shortWeekday,
+                  "short-months": _vm.instance.shortMonths,
+                  "short-week-days": _vm.instance.shortWeekDays,
+                  locale: _vm.instance.locale,
+                  "locale-first-day-of-year": _vm.instance.localeFirstDayOfYear,
+                  "max-days": _vm.instance.maxDays,
+                  "min-week": _vm.instance.minWeek,
+                  "month-format": _vm.instance.monthFormat,
+                  weekdays: _vm.instance.weekdays,
+                },
+                on: {
+                  "click:more": _vm.viewDay,
+                  "click:date": _vm.viewDay,
+                  "click:event": _vm.showEvent,
+                },
+                model: {
+                  value: _vm.instance.value,
+                  callback: function ($$v) {
+                    _vm.$set(_vm.instance, "value", $$v);
+                  },
+                  expression: "instance.value",
+                },
+              }),
+              _vm._v(" "),
+              _c(
+                "v-menu",
+                {
+                  attrs: {
+                    "close-on-content-click": false,
+                    activator: _vm.selectedElement,
+                    "offset-x": "",
+                  },
+                  model: {
+                    value: _vm.selectedOpen,
+                    callback: function ($$v) {
+                      _vm.selectedOpen = $$v;
+                    },
+                    expression: "selectedOpen",
+                  },
+                },
+                [
+                  _c(
+                    "zd-card",
+                    {
+                      attrs: {
+                        name: "card_" + _vm.instance.name,
+                        cssClass: "zd-pa-0",
+                        dark: _vm.instance.dark,
+                        light: _vm.instance.light,
+                      },
+                    },
+                    [
+                      _c(
+                        "v-toolbar",
+                        {
+                          attrs: {
+                            color: _vm.selectedEvent.color,
+                            elevation: "0",
+                            dark: "",
+                          },
+                        },
+                        [
+                          _c(
+                            "zd-text",
+                            _vm._b(
+                              { attrs: { name: "title_" + _vm.instance.name } },
+                              "zd-text",
+                              {
+                                text: _vm.selectedEvent.name,
+                                tag: "h5",
+                              },
+                              false
+                            )
+                          ),
+                        ],
+                        1
+                      ),
+                      _vm._v(" "),
+                      _c(
+                        "v-card-text",
+                        [
+                          _c(
+                            "zd-text",
+                            _vm._b(
+                              {
+                                attrs: {
+                                  name: "description_" + _vm.instance.name,
+                                },
+                              },
+                              "zd-text",
+                              {
+                                text: _vm.selectedEvent.description,
+                                tag: "p",
+                              },
+                              false
+                            )
+                          ),
+                        ],
+                        1
+                      ),
+                      _vm._v(" "),
+                      _c(
+                        "v-card-actions",
+                        [
+                          _c("zd-button", {
+                            attrs: {
+                              name: "buttonClose_" + _vm.instance.name,
+                              flat: "",
+                              color: "secondary",
+                              label: "$t(CALENDAR_CLOSE)",
+                            },
+                            on: {
+                              click: function ($event) {
+                                _vm.selectedOpen = !_vm.selectedOpen;
+                              },
+                            },
+                          }),
+                        ],
+                        1
+                      ),
+                    ],
+                    1
+                  ),
+                ],
+                1
+              ),
+            ],
+            1
+          ),
+        ],
+        1
+      ),
+    ],
+    1
+  )
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__ = function (inject) {
+    if (!inject) return
+    inject("data-v-64d4d2dc_0", { source: ".zd-calendar-content .zd-toolbar-calendar {\n  display: flex;\n  justify-items: center;\n  justify-content: space-between;\n  background-color: #fff;\n  padding: 0.75rem 0.5rem;\n}\n.zd-calendar-content .zd-toolbar-calendar.theme--dark {\n  background-color: #1e1e1e;\n}\n.zd-calendar-content .zd-toolbar-calendar div {\n  align-items: center;\n  display: flex;\n}", map: undefined, media: undefined });
+
+  };
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    createInjector,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as ZdCalendar };