@zeedhi/zd-calendar-vue 1.0.0

package/dist/calendar-vue.umd.js

@@ -0,0 +1,820 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue-property-decorator'), require('@zeedhi/vuetify'), require('@zeedhi/zd-calendar-common')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'vue-property-decorator', '@zeedhi/vuetify', '@zeedhi/zd-calendar-common'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/zd-calendar-vue"] = {}, global["vue-property-decorator"], global["@zeedhi/vuetify"], global["@zeedhi/zd-calendar-common"]));
+})(this, (function (exports, vuePropertyDecorator, vuetify, zdCalendarCommon) { 'use strict';
+
+    /*! *****************************************************************************
+    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 vuetify.ZdComponentRender {
+        constructor() {
+            super(...arguments);
+            this.instanceType = zdCalendarCommon.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([
+        vuePropertyDecorator.Prop({ type: [String, Array], default: undefined }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "categories", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: [String, Number], default: 1 }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "categoryDays", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: String, default: undefined }),
+        __metadata("design:type", String)
+    ], ZdCalendar.prototype, "title", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: [String, Boolean], default: undefined }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "showHeader", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: String, default: undefined }),
+        __metadata("design:type", String)
+    ], ZdCalendar.prototype, "categoryForInvalid", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: Boolean, default: false }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "categoryHideDynamic", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: Boolean, default: false }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "categoryShowAll", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [String, Function], default: undefined }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "categoryText", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: String, default: 'primary' }),
+        __metadata("design:type", String)
+    ], ZdCalendar.prototype, "color", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: Function, default: null }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "dayFormat", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: [String, Number, Date], default: undefined }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "end", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: [String, Function], default: 'category' }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "eventCategory", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: [String, Function], default: 'primary' }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "eventColor", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: String, default: 'end' }),
+        __metadata("design:type", String)
+    ], ZdCalendar.prototype, "eventEnd", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: Number, default: 20 }),
+        __metadata("design:type", Number)
+    ], ZdCalendar.prototype, "eventHeight", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: Number, default: 1 }),
+        __metadata("design:type", Number)
+    ], ZdCalendar.prototype, "eventMarginBottom", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: Boolean, default: true }),
+        __metadata("design:type", Boolean)
+    ], ZdCalendar.prototype, "eventMore", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: String, default: 'CALENDAR_MORE' }),
+        __metadata("design:type", String)
+    ], ZdCalendar.prototype, "eventMoreText", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: [String, Function], default: 'name' }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "eventName", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: [String, Function], default: 'stack' }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "eventOverlapMode", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: [String, Number], default: 60 }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "eventOverlapThreshold", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [String, Object], default: undefined }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "eventRipple", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: String, default: 'start' }),
+        __metadata("design:type", String)
+    ], ZdCalendar.prototype, "eventStart", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [String, Function], default: 'white' }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "eventTextColor", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [String, Function], default: 'timed' }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "eventTimed", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: Array, default: () => [] }),
+        __metadata("design:type", Array)
+    ], ZdCalendar.prototype, "calendarEvents", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [String, Number], default: 0 }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "firstInterval", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: [String, Number, Object], default: 0 }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "firstTime", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: Boolean, default: false }),
+        __metadata("design:type", Boolean)
+    ], ZdCalendar.prototype, "hideHeader", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [String, Number], default: 24 }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "intervalCount", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: Function, default: null }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "intervalFormat", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: [String, Number], default: 48 }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "intervalHeight", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: [String, Number], default: 60 }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "intervalMinutes", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: Function, default: null }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "intervalStyle", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: [String, Number], default: 60 }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "intervalWidth", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: String, default: 'pt-BR' }),
+        __metadata("design:type", String)
+    ], ZdCalendar.prototype, "locale", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: [String, Number], default: 0 }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "localeFirstDayOfYear", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: Number, default: 7 }),
+        __metadata("design:type", Number)
+    ], ZdCalendar.prototype, "maxDays", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: [Number, String], default: 1 }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "minWeeks", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: Function, default: null }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "monthFormat", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: String, default: undefined }),
+        __metadata("design:type", String)
+    ], ZdCalendar.prototype, "now", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: Boolean, default: true }),
+        __metadata("design:type", Boolean)
+    ], ZdCalendar.prototype, "shortIntervals", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: Boolean, default: true }),
+        __metadata("design:type", Boolean)
+    ], ZdCalendar.prototype, "shortMonths", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: Boolean, default: true }),
+        __metadata("design:type", Boolean)
+    ], ZdCalendar.prototype, "shortWeekDays", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: Function, default: null }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "showIntervalLabel", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: Boolean, default: true }),
+        __metadata("design:type", Boolean)
+    ], ZdCalendar.prototype, "showMonthOnFirst", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: Boolean, default: false }),
+        __metadata("design:type", Boolean)
+    ], ZdCalendar.prototype, "showWeek", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: [String, Number, Date], default: () => (new Date()) }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "start", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: String, default: 'month' }),
+        __metadata("design:type", String)
+    ], ZdCalendar.prototype, "type", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: [String, Number, Date], default: undefined }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "value", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: Function, default: null }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "weekdayFormat", void 0);
+    __decorate([
+        vuePropertyDecorator.Prop({ type: [String, Array], default: () => [0, 1, 2, 3, 4, 5, 6, 7] }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "weekDay", void 0);
+    __decorate([
+        vuetify.PropWatch({ type: Object, default: undefined }),
+        __metadata("design:type", Object)
+    ], ZdCalendar.prototype, "selectTypeData", void 0);
+    ZdCalendar = __decorate([
+        vuePropertyDecorator.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
+      );
+
+    exports.ZdCalendar = __vue_component__;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));