@progress/kendo-vue-scheduler 3.0.8 → 3.0.9-dev.202203010857

package/dist/es/views/month/MonthView.d.ts

@@ -0,0 +1,100 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { SchedulerViewProps } from '../../models';
+/**
+ * Represents the props of the Kendo UI for Vue [MonthView]({% slug api_scheduler_monthview %}) Component.
+ */
+export interface MonthViewProps extends SchedulerViewProps {
+    /**
+     * Sets the maximum number of `items` to be rendered in a single `slot`, before adding the `show-more` button.
+     */
+    itemsPerSlot?: number;
+    /**
+     * The long-date format for displaying the
+     * selected date in the Scheduler toolbar.
+     * Defaults to `{0:Y}`
+     * ([more information](https://www.github.com/telerik/kendo-intl/blob/develop/docs/date-formatting/index.md))
+     */
+    selectedDateFormat?: string;
+    /**
+     * The short-date format for displaying the
+     * selected date in the Scheduler toolbar.
+     * Defaults to `{0:Y}`
+     * ([more information](https://www.github.com/telerik/kendo-intl/blob/develop/docs/date-formatting/index.md))
+     */
+    selectedShortDateFormat?: string;
+    /**
+     * Overrides the general `editable` prop of the Scheduler for the specified view only.
+     */
+    editable?: boolean;
+    /**
+     * Sets a custom `className` to the wrapping element of the `DayView`.
+     */
+    className?: string;
+    /**
+     * Sets a custom `id` to the wrapping element of the `DayView`.
+     */
+    id?: string;
+    /**
+     * Overrides the `item` prop of the Scheduler for the specified view only.
+     */
+    item?: any;
+    /**
+     * Overrides the `viewItem` prop of the Scheduler for the specified view only.
+     */
+    viewItem?: any;
+    /**
+     * Overrides the `editableItem` prop of the Scheduler for the specified view only.
+     */
+    editItem?: any;
+    /**
+     * Overrides the `slot` prop of the Scheduler for the specified view only.
+     */
+    slot?: any;
+    /**
+     * Overrides the `viewSlot` prop of the Scheduler for the specified view only.
+     */
+    viewSlot?: any;
+    /**
+     * Overrides the `editSlot` prop of the Scheduler for the specified view only.
+     */
+    editSlot?: any;
+    /**
+     * Represents component based on the DateHeaderCellProps.
+     */
+    dateHeaderCell?: any;
+    form?: any;
+}
+/**
+ * @hidden
+ */
+export interface MonthViewState {
+}
+/**
+ * @hidden
+ */
+export interface MonthViewComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface MonthViewMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface MonthViewData {
+}
+/**
+ * @hidden
+ */
+export interface MonthViewAll extends Vue2type, MonthViewMethods, MonthViewData, MonthViewComputed, MonthViewState {
+}
+declare let MonthViewVue2: ComponentOptions<MonthViewAll, DefaultData<MonthViewData>, DefaultMethods<MonthViewAll>, MonthViewComputed, RecordPropsDefinition<MonthViewProps>>;
+declare const MonthView: DefineComponent<MonthViewProps, any, MonthViewData, MonthViewComputed, MonthViewMethods, {}, {}, {}, string, MonthViewProps, MonthViewProps, {}>;
+export { MonthView, MonthViewVue2 };

package/dist/es/views/month/MonthView.js

@@ -0,0 +1,533 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var inject = allVue.inject;
+import { BaseView } from '../../components/BaseView';
+import { MS_PER_DAY, firstDayInWeek, firstDayOfMonth, getDate, addDays, lastDayOfMonth, ZonedDate } from '@progress/kendo-date-math';
+import { VerticalResourceIterator } from '../common/VerticalResourceIterator';
+import { HorizontalResourceIterator } from '../common/HorizontalResourceIterator';
+import { mapItemsToSlots, mapSlotsToItems, toUTCDateTime, orderSort } from '../../utils';
+import { monthViewTitle, messages } from '../../messages';
+import { SchedulerEditSlot } from '../../slots/SchedulerEditSlot';
+import { provideIntlService, provideLocalizationService } from '@progress/kendo-vue-intl';
+import { DAYS_IN_WEEK_COUNT } from '../../constants';
+import { toRanges } from '../../services/rangeService';
+import { toSlots } from '../../services/slotsService';
+import { toOccurrences } from '../../services/occurrenceService';
+import { toItems } from '../../services/itemsService';
+import { MonthViewHead } from './MonthViewHead';
+import { MonthViewBody } from './MonthViewBody';
+import { SchedulerEditItem } from '../../items/SchedulerEditItem';
+var DAY_FORMAT = {
+  skeleton: 'dd'
+}; // tslint:enable:max-line-length
+
+var MonthViewVue2 = {
+  name: 'KendoMonthView',
+  props: {
+    itemsPerSlot: {
+      type: Number,
+      default: 2
+    },
+    name: {
+      type: String,
+      default: 'month'
+    },
+    dateRange: {
+      type: [Function, Object],
+      default: function _default() {
+        return monthViewDateRange;
+      }
+    },
+    slotDuration: {
+      type: Number,
+      default: 24 * 60
+    },
+    slotDivisions: {
+      type: Number,
+      default: 1
+    },
+    numberOfDays: {
+      type: Number,
+      default: 31
+    },
+    title: String,
+    selectedDateFormat: {
+      type: String,
+      default: '{0:Y}'
+    },
+    selectedShortDateFormat: {
+      type: String,
+      default: '{0:Y}'
+    }
+  },
+  inject: {
+    ks: {
+      default: null
+    },
+    kendoLocalizationService: {
+      default: null
+    },
+    kendoIntlService: {
+      default: null
+    }
+  },
+  created: function created() {
+    this.intl = provideIntlService(this);
+  },
+  computed: {
+    ranges: function ranges() {
+      return toRanges(this.ks.dateRange, {
+        step: MS_PER_DAY * DAYS_IN_WEEK_COUNT,
+        timezone: this.ks.timezone
+      });
+    },
+    monthSlots: function monthSlots() {
+      return toSlots(this.ks.dateRange, {
+        step: MS_PER_DAY
+      }, {
+        groups: this.ks.groups,
+        ranges: this.ranges
+      });
+    },
+    occurrences: function occurrences() {
+      return toOccurrences(this.ks.dataItems, {
+        dateRange: this.ks.dateRange,
+        fields: this.ks.fields,
+        timezone: this.ks.timezone
+      });
+    },
+    items: function items() {
+      var items = toItems(this.occurrences, {
+        timezone: this.ks.timezone
+      }, {
+        groups: this.ks.groups,
+        ranges: this.ranges
+      });
+      mapItemsToSlots(items, this.monthSlots, false);
+      mapSlotsToItems(items, this.monthSlots, false);
+      return items;
+    }
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this2 = this;
+
+    var h = gh || createElement; // const {
+    //     group,
+    //     timezone,
+    //     resources: propResources
+    // } = useSchedulerPropsContext();
+
+    this.localization = provideLocalizationService(this);
+    var title = this.localization.toLanguageString(monthViewTitle, messages[monthViewTitle]);
+    var EditItem = this.$props.editItem || SchedulerEditItem;
+    var EditSlot = this.$props.editSlot || SchedulerEditSlot;
+    var items = this.items;
+    var monthSlots = this.monthSlots; // const [dataItems] = useSchedulerDataContext();
+    // const [, setDate] = useSchedulerDateContext();
+    // const [, setView] = useSchedulerActiveViewContext();
+    // const views = useSchedulerViewsContext();
+    // const groups = useSchedulerGroupsContext();
+    // const orientation = useSchedulerOrientationContext();
+    // const dateRange = useSchedulerDateRangeContext();
+
+    this.intl = provideIntlService(this); // const fields = useSchedulerFieldsContext();
+
+    var itemsPerSlot = this.$props.itemsPerSlot;
+    var body = this.ranges.map(function (_, rangeIndex) {
+      var _this = this;
+
+      return this.ks.orientation === 'horizontal' ? // @ts-ignore  function children
+      h(HorizontalResourceIterator, {
+        resources: this.ks.props.resources,
+        attrs: this.v3 ? undefined : {
+          resources: this.ks.props.resources,
+          group: this.ks.props.group
+        },
+        group: this.ks.props.group
+      }, this.v3 ? function () {
+        return [h(MonthViewBody, {
+          monthSlots: monthSlots,
+          attrs: _this.v3 ? undefined : {
+            monthSlots: monthSlots,
+            rangeIndex: rangeIndex,
+            itemsPerSlot: itemsPerSlot
+          },
+          rangeIndex: rangeIndex,
+          itemsPerSlot: itemsPerSlot,
+          onDataaction: _this.handleDataAction,
+          on: _this.v3 ? undefined : {
+            "dataaction": _this.handleDataAction
+          }
+        })];
+      } : [h(MonthViewBody, {
+        monthSlots: monthSlots,
+        attrs: _this.v3 ? undefined : {
+          monthSlots: monthSlots,
+          rangeIndex: rangeIndex,
+          itemsPerSlot: itemsPerSlot
+        },
+        rangeIndex: rangeIndex,
+        itemsPerSlot: itemsPerSlot,
+        onDataaction: _this.handleDataAction,
+        on: _this.v3 ? undefined : {
+          "dataaction": _this.handleDataAction
+        }
+      })]) : // @ts-ignore  function children
+      h(VerticalResourceIterator, {
+        nested: true,
+        attrs: this.v3 ? undefined : {
+          nested: true,
+          resources: this.ks.props.resources,
+          group: this.ks.props.group
+        },
+        resources: this.ks.props.resources,
+        group: this.ks.props.group
+      }, this.v3 ? function () {
+        return [h(MonthViewBody, {
+          monthSlots: monthSlots,
+          attrs: _this.v3 ? undefined : {
+            monthSlots: monthSlots,
+            ranges: _this.ranges,
+            rangeIndex: rangeIndex,
+            itemsPerSlot: itemsPerSlot
+          },
+          ranges: _this.ranges,
+          rangeIndex: rangeIndex,
+          itemsPerSlot: itemsPerSlot,
+          onDataaction: _this.handleDataAction,
+          on: _this.v3 ? undefined : {
+            "dataaction": _this.handleDataAction
+          }
+        })];
+      } : [h(MonthViewBody, {
+        monthSlots: monthSlots,
+        attrs: _this.v3 ? undefined : {
+          monthSlots: monthSlots,
+          ranges: _this.ranges,
+          rangeIndex: rangeIndex,
+          itemsPerSlot: itemsPerSlot
+        },
+        ranges: _this.ranges,
+        rangeIndex: rangeIndex,
+        itemsPerSlot: itemsPerSlot,
+        onDataaction: _this.handleDataAction,
+        on: _this.v3 ? undefined : {
+          "dataaction": _this.handleDataAction
+        }
+      })]);
+    }, this);
+    return (// @ts-ignore  function children
+      h(BaseView, {
+        props: this.$props,
+        attrs: this.v3 ? undefined : {
+          props: this.$props,
+          baseSlots: monthSlots,
+          ranges: this.ranges
+        },
+        baseSlots: monthSlots,
+        ranges: this.ranges,
+        "class": 'k-scheduler-monthview'
+      }, this.v3 ? function () {
+        return [h("div", {
+          "class": "k-scheduler-head"
+        }, [_this2.ks.orientation === 'horizontal' ? // @ts-ignore  function children
+        h(HorizontalResourceIterator, {
+          nested: true,
+          attrs: _this2.v3 ? undefined : {
+            nested: true,
+            resources: _this2.ks.props.resources,
+            group: _this2.ks.props.group
+          },
+          resources: _this2.ks.props.resources,
+          group: _this2.ks.props.group
+        }, _this2.v3 ? function () {
+          return [h(MonthViewHead, {
+            monthSlots: monthSlots,
+            attrs: _this2.v3 ? undefined : {
+              monthSlots: monthSlots,
+              dateHeaderCell: _this2.$props.dateHeaderCell
+            },
+            dateHeaderCell: _this2.$props.dateHeaderCell
+          })];
+        } : [h(MonthViewHead, {
+          monthSlots: monthSlots,
+          attrs: _this2.v3 ? undefined : {
+            monthSlots: monthSlots,
+            dateHeaderCell: _this2.$props.dateHeaderCell
+          },
+          dateHeaderCell: _this2.$props.dateHeaderCell
+        })]) : // @ts-ignore  function children
+        h(VerticalResourceIterator, {
+          resources: _this2.ks.props.resources,
+          attrs: _this2.v3 ? undefined : {
+            resources: _this2.ks.props.resources,
+            group: _this2.ks.props.group
+          },
+          group: _this2.ks.props.group
+        }, _this2.v3 ? function () {
+          return [h(MonthViewHead, {
+            monthSlots: monthSlots,
+            attrs: _this2.v3 ? undefined : {
+              monthSlots: monthSlots,
+              dateHeaderCell: _this2.$props.dateHeaderCell
+            },
+            dateHeaderCell: _this2.$props.dateHeaderCell
+          })];
+        } : [h(MonthViewHead, {
+          monthSlots: monthSlots,
+          attrs: _this2.v3 ? undefined : {
+            monthSlots: monthSlots,
+            dateHeaderCell: _this2.$props.dateHeaderCell
+          },
+          dateHeaderCell: _this2.$props.dateHeaderCell
+        })])]), h("div", {
+          "class": "k-scheduler-body"
+        }, [body, items.filter(function (item) {
+          return item.order === null || item.order < itemsPerSlot;
+        }).sort(orderSort).map(function (item) {
+          return h(EditItem, {
+            item: this.$props.item,
+            attrs: this.v3 ? undefined : {
+              item: this.$props.item,
+              viewItem: this.$props.viewItem,
+              form: this.$props.form,
+              uid: item.uid,
+              start: item.start,
+              end: item.end,
+              originalStart: item.originalStart,
+              startTimezone: item.startTimezone,
+              endTimezone: item.endTimezone,
+              isAllDay: item.isAllDay,
+              title: item.title,
+              description: item.description,
+              occurrenceId: item.occurrenceId,
+              recurrenceExceptions: item.recurrenceExceptions,
+              recurrenceRule: item.recurrenceRule,
+              recurrenceId: item.recurrenceId,
+              dataItem: item.dataItem,
+              itemRef: item.itemRef,
+              head: item.head,
+              tail: item.tail,
+              order: item.order,
+              zonedStart: item.zonedStart,
+              zonedEnd: item.zonedEnd,
+              slots: item.slots,
+              group: item.group,
+              range: item.range,
+              isException: item.isException,
+              isRecurring: item.isRecurring,
+              vertical: false,
+              editable: this.$props.editable,
+              ignoreIsAllDay: true
+            },
+            viewItem: this.$props.viewItem,
+            form: this.$props.form,
+            key: item.isRecurring ? item.uid + ":" + item.group.index + ":" + item.range.index + ":" + item.originalStart : item.uid + ":" + item.group.index + ":" + item.range.index,
+            uid: item.uid,
+            start: item.start,
+            end: item.end,
+            originalStart: item.originalStart,
+            startTimezone: item.startTimezone,
+            endTimezone: item.endTimezone,
+            isAllDay: item.isAllDay,
+            title: item.title,
+            description: item.description,
+            occurrenceId: item.occurrenceId,
+            recurrenceExceptions: item.recurrenceExceptions,
+            recurrenceRule: item.recurrenceRule,
+            recurrenceId: item.recurrenceId,
+            dataItem: item.dataItem,
+            itemRef: item.itemRef,
+            head: item.head,
+            tail: item.tail,
+            order: item.order,
+            zonedStart: item.zonedStart,
+            zonedEnd: item.zonedEnd,
+            slots: item.slots,
+            group: item.group,
+            range: item.range,
+            isException: item.isException,
+            isRecurring: item.isRecurring,
+            onDataaction: this.handleDataAction,
+            on: this.v3 ? undefined : {
+              "dataaction": this.handleDataAction
+            },
+            style: {
+              transform: 'translateY(30px)'
+            },
+            vertical: false,
+            editable: this.$props.editable,
+            ignoreIsAllDay: true
+          });
+        }, _this2)])];
+      } : [h("div", {
+        "class": "k-scheduler-head"
+      }, [_this2.ks.orientation === 'horizontal' ? h(HorizontalResourceIterator, {
+        nested: true,
+        attrs: _this2.v3 ? undefined : {
+          nested: true,
+          resources: _this2.ks.props.resources,
+          group: _this2.ks.props.group
+        },
+        resources: _this2.ks.props.resources,
+        group: _this2.ks.props.group
+      }, _this2.v3 ? function () {
+        return [h(MonthViewHead, {
+          monthSlots: monthSlots,
+          attrs: _this2.v3 ? undefined : {
+            monthSlots: monthSlots,
+            dateHeaderCell: _this2.$props.dateHeaderCell
+          },
+          dateHeaderCell: _this2.$props.dateHeaderCell
+        })];
+      } : [h(MonthViewHead, {
+        monthSlots: monthSlots,
+        attrs: _this2.v3 ? undefined : {
+          monthSlots: monthSlots,
+          dateHeaderCell: _this2.$props.dateHeaderCell
+        },
+        dateHeaderCell: _this2.$props.dateHeaderCell
+      })]) : h(VerticalResourceIterator, {
+        resources: _this2.ks.props.resources,
+        attrs: _this2.v3 ? undefined : {
+          resources: _this2.ks.props.resources,
+          group: _this2.ks.props.group
+        },
+        group: _this2.ks.props.group
+      }, _this2.v3 ? function () {
+        return [h(MonthViewHead, {
+          monthSlots: monthSlots,
+          attrs: _this2.v3 ? undefined : {
+            monthSlots: monthSlots,
+            dateHeaderCell: _this2.$props.dateHeaderCell
+          },
+          dateHeaderCell: _this2.$props.dateHeaderCell
+        })];
+      } : [h(MonthViewHead, {
+        monthSlots: monthSlots,
+        attrs: _this2.v3 ? undefined : {
+          monthSlots: monthSlots,
+          dateHeaderCell: _this2.$props.dateHeaderCell
+        },
+        dateHeaderCell: _this2.$props.dateHeaderCell
+      })])]), h("div", {
+        "class": "k-scheduler-body"
+      }, [body, items.filter(function (item) {
+        return item.order === null || item.order < itemsPerSlot;
+      }).sort(orderSort).map(function (item) {
+        return h(EditItem, {
+          item: this.$props.item,
+          attrs: this.v3 ? undefined : {
+            item: this.$props.item,
+            viewItem: this.$props.viewItem,
+            form: this.$props.form,
+            uid: item.uid,
+            start: item.start,
+            end: item.end,
+            originalStart: item.originalStart,
+            startTimezone: item.startTimezone,
+            endTimezone: item.endTimezone,
+            isAllDay: item.isAllDay,
+            title: item.title,
+            description: item.description,
+            occurrenceId: item.occurrenceId,
+            recurrenceExceptions: item.recurrenceExceptions,
+            recurrenceRule: item.recurrenceRule,
+            recurrenceId: item.recurrenceId,
+            dataItem: item.dataItem,
+            itemRef: item.itemRef,
+            head: item.head,
+            tail: item.tail,
+            order: item.order,
+            zonedStart: item.zonedStart,
+            zonedEnd: item.zonedEnd,
+            slots: item.slots,
+            group: item.group,
+            range: item.range,
+            isException: item.isException,
+            isRecurring: item.isRecurring,
+            vertical: false,
+            editable: this.$props.editable,
+            ignoreIsAllDay: true
+          },
+          viewItem: this.$props.viewItem,
+          form: this.$props.form,
+          key: item.isRecurring ? item.uid + ":" + item.group.index + ":" + item.range.index + ":" + item.originalStart : item.uid + ":" + item.group.index + ":" + item.range.index,
+          uid: item.uid,
+          start: item.start,
+          end: item.end,
+          originalStart: item.originalStart,
+          startTimezone: item.startTimezone,
+          endTimezone: item.endTimezone,
+          isAllDay: item.isAllDay,
+          title: item.title,
+          description: item.description,
+          occurrenceId: item.occurrenceId,
+          recurrenceExceptions: item.recurrenceExceptions,
+          recurrenceRule: item.recurrenceRule,
+          recurrenceId: item.recurrenceId,
+          dataItem: item.dataItem,
+          itemRef: item.itemRef,
+          head: item.head,
+          tail: item.tail,
+          order: item.order,
+          zonedStart: item.zonedStart,
+          zonedEnd: item.zonedEnd,
+          slots: item.slots,
+          group: item.group,
+          range: item.range,
+          isException: item.isException,
+          isRecurring: item.isRecurring,
+          onDataaction: this.handleDataAction,
+          on: this.v3 ? undefined : {
+            "dataaction": this.handleDataAction
+          },
+          style: {
+            transform: 'translateY(30px)'
+          },
+          vertical: false,
+          editable: this.$props.editable,
+          ignoreIsAllDay: true
+        });
+      }, _this2)])])
+    );
+  },
+  methods: {
+    handleDataAction: function handleDataAction(action) {
+      this.$emit('dataaction', action);
+    }
+  }
+};
+
+var monthViewDateRange = function monthViewDateRange(_a) {
+  var intl = _a.intl,
+      date = _a.date,
+      timezone = _a.timezone; // The DateRange start from the first day of the week containing the first day of the month.
+  // I know it sounds strange, but take a look and a wall-calendar!
+
+  var firstDay = firstDayInWeek(firstDayOfMonth(getDate(date)), intl.firstDay());
+  var lastDay = addDays(firstDayInWeek(lastDayOfMonth(getDate(date)), intl.firstDay()), DAYS_IN_WEEK_COUNT);
+  var zonedStart = ZonedDate.fromUTCDate(toUTCDateTime(firstDay), timezone);
+  var zonedEnd = ZonedDate.fromUTCDate(toUTCDateTime(lastDay), timezone);
+  var start = new Date(zonedStart.getTime());
+  var end = new Date(zonedEnd.getTime());
+  return {
+    start: start,
+    end: end,
+    zonedStart: zonedStart,
+    zonedEnd: zonedEnd
+  };
+};
+
+var MonthView = MonthViewVue2;
+export { MonthView, MonthViewVue2 };

package/dist/es/views/month/MonthViewBody.d.ts

@@ -0,0 +1,42 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/** @hidden */
+export interface MonthViewBodyProps {
+    rangeIndex: number;
+    itemsPerSlot: number;
+    monthSlots: any[];
+    ranges: any[];
+}
+/**
+ * @hidden
+ */
+export interface MonthViewBodyState {
+}
+/**
+ * @hidden
+ */
+export interface MonthViewBodyComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface MonthViewBodyMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface MonthViewBodyData {
+}
+/**
+ * @hidden
+ */
+export interface MonthViewBodyAll extends Vue2type, MonthViewBodyMethods, MonthViewBodyData, MonthViewBodyComputed, MonthViewBodyState {
+}
+declare let MonthViewBodyVue2: ComponentOptions<MonthViewBodyAll, DefaultData<MonthViewBodyData>, DefaultMethods<MonthViewBodyAll>, MonthViewBodyComputed, RecordPropsDefinition<MonthViewBodyProps>>;
+declare const MonthViewBody: DefineComponent<MonthViewBodyProps, any, MonthViewBodyData, MonthViewBodyComputed, MonthViewBodyMethods, {}, {}, {}, string, MonthViewBodyProps, MonthViewBodyProps, {}>;
+export { MonthViewBody, MonthViewBodyVue2 };