Vue UI Components Documentation

Sets or gets the appointments opacity.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :appointmentOpacity="0.7"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the minimum height of appointments in the all day area, month view and timeline views.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'monthView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :appointmentsMinHeight="50"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the appointments data fields. A data field should match a field defined in the dataAdapter's source object. For example: If your have a data field called "start" in your source object, you should add 'from: "start"' in the appointmentDataFields definition.

• allDay - boolean field. Defines whether the appointment is all day appointment.
• background - string field. Expects Hex string. Defines the appointment's background.
• borderColor - string field. Expects Hex string. Defines the appointment's border color.
• color - string field. Expects Hex string. Defines the appointment's text color.
• description - string field. Defines the appointment's description.
• draggable - boolean field. Defines whether the user can drag the appointment.
• from - jqxDate field. Defines the appointment's start.
• hidden - boolean field. Defines whether the appointment is displayed.
• id - string/number field. Defines the Id of the appointment.
• location - string field. Defines the appointment's location.
• recurrencePattern - string field. Defines the appointment's recurrence rule. Ex: "FREQ=DAILY;". List of supported keywords:
  • FREQ - "DAILY" / "WEEKLY" / "MONTHLY" / "YEARLY". The FREQ rule part identifies the type of recurrence rule. This rule part MUST be specified in the recurrence rule.
  • COUNT - number. The Count rule part defines the number of occurrences at which to range-bound the recurrence.
  • UNTIL - string like "UNTIL=20160919T210000Z". The UNTIL rule part defines a date-time value where the recurrence ends.
  • BYDAY - string like "MO,TU". The BYDAY rule part specifies a COMMA character (US-ASCII decimal 44) separated list of days of the week; MO indicates Monday; TU indicates Tuesday; WE indicates Wednesday; TH indicates Thursday; FR indicates Friday; SA indicates Saturday; SU indicates Sunday. Each BYDAY value can also be preceded by a positive (+n) or negative (-n) integer. If present, this indicates the nth occurrence of the specific day within the MONTHLY or YEARLY RRULE. For example, within a MONTHLY rule, +1MO (or simply 1MO) represents the first Monday within the month, whereas -1MO represents the last Monday of the month.
  • BYMONTHDAY - string like 15, 30. The BYMONTHDAY rule part specifies a COMMA character (ASCII decimal 44) separated list of days of the month. Valid values are 1 to 31
  • BYMONTH - number like 1. The BYMONTH rule part specifies a month of the year. Valid values are 1 to 12.
  • INTERVAL - number like 1. The INTERVAL rule part contains a positive integer representing how often the recurrence rule repeats. The default value is "1",
  Examples: "FREQ=WEEKLY;BYDAY=MO,WE", "FREQ=MONTHLY;BYMONTHDAY=10,15;COUNT=20", "FREQ=DAILY;INTERVAL=3;COUNT=10", "FREQ=MONTHLY;BYDAY=-2FR;COUNT=7", "FREQ=YEARLY;COUNT=30;BYMONTH=3"
• recurrenceException - string field. Defines the exceptions of the recurrence rule. The bound value should be a string or comma separated list of Date strings. Example: "2016-11-24 09:00:00,2016-11-26 12:00:00"
• resizable - boolean field. Defines whether the user can resize the appointment.
• resourceId - string/number field. Defines the appointment's resource.
• readOnly - boolean field. Defines whether the appointment is editable.
• subject - string field. Defines the appointment's subject.
• style - string field. Expects Hex string. Defines the appointment's style. When defined it sets the background, border color and text color of the appointment.
• status - string field. Defines the appointment's status. See the statuses property for available statuses.
• to - jqxDate field. Defines the appointment's end.
• tooltip - string field. Defines the appointment's tooltip displayed on mouse hover.
• timeZone - string field. Defines the appointment's time zone. See timeZones for the list of timeZones.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets whether Scheduler appointments are with tooltips enabled.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :appointmentTooltips="false"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the Schedulers' columns height.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :columnsHeight="50"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets whether the Scheduler's context menu is enabled.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :contextMenu="false"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets a function called when the context menu is opened.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :contextMenuOpen="contextMenuOpen"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    },
    methods: {
      contextMenuOpen: function (menu, appointment, event) {
        alert('Context menu opened!');
      }
    }
  }
</script>

Sets or gets a function called when the context menu is closed.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :contextMenuClose="contextMenuClose"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    },
    methods: {
      contextMenuClose: function (menu, appointment, event) {
        alert('Context menu closed!');
      }
    }
  }
</script>

Sets or gets a function called when a context menu item is clicked.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :contextMenuItemClick="contextMenuItemClick"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    },
    methods: {
      contextMenuItemClick: function (menu, appointment, event) {
        alert('Context menu item click!');
      }
    }
  }
</script>

Sets or gets a function called when the context menu is created.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :contextMenuCreate="contextMenuCreate"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    },
    methods: {
      contextMenuCreate: function (menu, settings) {
        alert('Context menu created!');
      }
    }
  }
</script>

Gets an array with newly added, deleted or updated appointments. Each element in the Array is an object which has:

• type - "Update", "Delete", "Add".
• appointment - object which has the appointmentDataFields. See appointmentDataFields property.

<template> 
  <JqxScheduler ref="myScheduler" 
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources" 
    :appointmentDataFields="appointmentDataFields" :views="views" :width="600" :ready="ready"/> 
</template>
 
<script> 
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'; 
 
  export default { 
    components: { 
      JqxScheduler 
    }, 
    data: function () { 
      return { 
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      } 
    }, 
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
   }, 
    mounted: function () {
      let changedAppointments = this.$refs.myScheduler.changedAppointments;
      console.log(changedAppointments);
    }
  }
</script>

Get the changedAppointments property.

let changedAppointments = this.$refs.myScheduler.changedAppointments;

Sets or gets whether the Scheduler is disabled.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :disabled="true"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the Scheduler's Date. To learn how to use jqxDate, please look at the Scheduler's Getting Started help topic.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the Schedulers' columns day formatting. Possible values: 'shortest', 'firstTwoLetters', 'firstLetter', 'abbr', 'full'.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :dayNameFormat="'abbr'"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets whether cells hover is enabled.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :enableHover="false"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets whether Edit Dialog is enabled.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :editDialog="false"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the DateTimeInput's formatString in the Scheduler's Edit Dialog when the appointment is not allDay appointment.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :editDialogDateTimeFormatString="'dd-MM-yyyy HH:mm'"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the DateTimeInput's formatString in the Scheduler's Edit Dialog when the appointment is allDay appointment.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :editDialogDateFormatString="'dd/MM/yyyy'"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :editDialogOpen="editDialogOpen"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    },
    methods: {
      editDialogOpen: function (dialog, fields, editAppointment) {
        alert('Edit dialog opened!');
      }
    }
  }
</script>

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :editDialogCreate="editDialogCreate"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    },
    methods: {
      editDialogCreate: function (dialog, fields, editAppointment) {
        alert('Edit dialog created!');
      }
    }
  }
</script>

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :editDialogKeyDown="editDialogKeyDown"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    },
    methods: {
      editDialogKeyDown: function (dialog, fields, editAppointment, event) {
        alert('Edit dialog key down!');
      }
    }
  }
</script>

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :editDialogClose="editDialogClose"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    },
    methods: {
      editDialogClose: function (dialog, fields, editAppointment) {
        alert('Edit dialog closed!');
      }
    }
  }
</script>

Determines the Data Export settings used by jqxScheduler when exportData is called. See also the exportData method.

• serverURL - determines the URL of the save-file.php.
• characterSet - determines the char set.
• fileName - determines the file's name. Set this to null if you want to export the data to a local variable.
• dateTimeFormatString - determines the dates formatting in the exported file.
• resourcesInMultipleICSFiles - determines whether multiple ICS files will be generated when the Scheduler has resources. Each file will include appointments only from a specific resource.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :exportSettings="exportSettings"
    :ready="ready"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        exportSettings: {
          serverURL: null,
          characterSet: null,
          fileName: "jqxScheduler"
        },
        ready: () => {
          this.$refs.myScheduler.exportData('pdf')
        },
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the Scheduler's height.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :height="600"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the Scheduler's legendPosition. Possible values: "top" and "bottom".

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :legendPosition="'top'"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the Scheduler's legend height.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :legendHeight="40"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the Scheduler's localization.

{
	// separator of parts of a date (e.g. '/' in 11/05/1955)
	'/': "/",
	// separator of parts of a time (e.g. ':' in 05:44 PM)
	':': ":",
	// the first day of the week (0 = Sunday, 1 = Monday, etc)
	firstDay: 0,
	days: {
		// full day names
		names: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
		// abbreviated day names
		namesAbbr: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
		// shortest day names
		namesShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
	},
	months: {
		// full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
		names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ""],
		// abbreviated month names
		namesAbbr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ""]
	},
	// AM and PM designators in one of these forms:
	// The usual view, and the upper and lower case versions
	//      [standard,lowercase,uppercase]
	// The culture does not use AM or PM (likely all standard date formats use 24 hour time)
	//      null
	AM: ["AM", "am", "AM"],
	PM: ["PM", "pm", "PM"],
	eras: [
	// eras in reverse chronological order.
	// name: the name of the era in this culture (e.g. A.D., C.E.)
	// start: when the era starts in ticks (gregorian, gmt), null if it is the earliest supported era.
	// offset: offset in years from gregorian calendar
	{"name": "A.D.", "start": null, "offset": 0 }
	],
	twoDigitYearMax: 2029,
	patterns: {
		// short date pattern
		d: "M/d/yyyy",
		// long date pattern
		D: "dddd, MMMM dd, yyyy",
		// short time pattern
		t: "h:mm tt",
		// long time pattern
		T: "h:mm:ss tt",
		// long date, short time pattern
		f: "dddd, MMMM dd, yyyy h:mm tt",
		// long date, long time pattern
		F: "dddd, MMMM dd, yyyy h:mm:ss tt",
		// month/day pattern
		M: "MMMM dd",
		// month/year pattern
		Y: "yyyy MMMM",
		// S is a sortable format that does not vary by culture
		S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss",
		// formatting of dates in MySQL DataBases
		ISO: "yyyy-MM-dd hh:mm:ss",
		ISO2: "yyyy-MM-dd HH:mm:ss",
		d1: "dd.MM.yyyy",
		d2: "dd-MM-yyyy",
		d3: "dd-MMMM-yyyy",
		d4: "dd-MM-yy",
		d5: "H:mm",
		d6: "HH:mm",
		d7: "HH:mm tt",
		d8: "dd/MMMM/yyyy",
		d9: "MMMM-dd",
		d10: "MM-dd",
		d11: "MM-dd-yyyy"
	},
    agendaViewString: "Agenda",
    agendaAllDaystring: "all day",
    agendaDateColumn: "Date",
    agendaTimeColumn: "Time",
    agendaAppointmentColumn: "Appointment",
	backstring: "Back",
	forwardstring: "Forward",
	toolBarPreviousButtonstring: "previous",
	toolBarNextButtonstring: "next",
	emptyDatastring: "No data to display",
	loadstring: "Loading...",
	clearstring: "Clear",
	todaystring: "Today",
	dayViewstring: "Day",
	weekViewstring: "Week",
	monthViewstring: "Month",
	timelineDayViewstring: "Timeline Day",
	timelineWeekViewstring: "Timeline Week",
	timelineMonthViewstring: "Timeline Month",
	loadingErrorMessage: "The data is still loading and you cannot set a property or call a method. You can do that once the data binding is completed. jqxScheduler raises the 'bindingComplete' event when the binding is completed.",
	editRecurringAppointmentDialogTitlestring: "Edit Recurring Appointment",
	editRecurringAppointmentDialogContentstring: "Do you want to edit only this occurrence or the series?",
	editRecurringAppointmentDialogOccurrencestring: "Edit Occurrence",
	editRecurringAppointmentDialogSeriesstring: "Edit The Series",
	editDialogTitlestring: "Edit Appointment",
	editDialogCreateTitlestring: "Create New Appointment",
	contextMenuEditAppointmentstring: "Edit Appointment",
	contextMenuCreateAppointmentstring: "Create New Appointment",
	editDialogSubjectstring: "Subject",
	editDialogLocationstring: "Location",
	editDialogFromstring: "From",
	editDialogTostring: "To",
	editDialogAllDaystring: "All day",
	editDialogExceptionsstring: "Exceptions",
	editDialogResetExceptionsstring: "Reset on Save",
	editDialogDescriptionstring: "Description",
	editDialogResourceIdstring: "Owner",
	editDialogStatusstring: "Status",
	editDialogColorstring: "Color",
	editDialogColorPlaceHolderstring: "Select Color",
	editDialogTimeZonestring: "Time Zone",
	editDialogSelectTimeZonestring: "Select Time Zone",
	editDialogSavestring: "Save",
	editDialogDeletestring: "Delete",
	editDialogCancelstring: "Cancel",
	editDialogRepeatstring: "Repeat",
	editDialogRepeatEverystring: "Repeat every",
	editDialogRepeatEveryWeekstring: "week(s)",
	editDialogRepeatEveryYearstring: "year(s)",
	editDialogRepeatEveryDaystring: "day(s)",
	editDialogRepeatNeverstring: "Never",
	editDialogRepeatDailystring: "Daily",
	editDialogRepeatWeeklystring: "Weekly",
	editDialogRepeatMonthlystring: "Monthly",
	editDialogRepeatYearlystring: "Yearly",
	editDialogRepeatEveryMonthstring: "month(s)",
	editDialogRepeatEveryMonthDaystring: "Day",
	editDialogRepeatFirststring: "first",
	editDialogRepeatSecondstring: "second",
	editDialogRepeatThirdstring: "third",
	editDialogRepeatFourthstring: "fourth",
	editDialogRepeatLaststring: "last",
	editDialogRepeatEndstring: "End",
	editDialogRepeatAfterstring: "After",
	editDialogRepeatOnstring: "On",
	editDialogRepeatOfstring: "of",
	editDialogRepeatOccurrencesstring: "occurrence(s)",
	editDialogRepeatSavestring: "Save Occurrence",
	editDialogRepeatSaveSeriesstring: "Save Series",
	editDialogRepeatDeletestring: "Delete Occurrence",
	editDialogRepeatDeleteSeriesstring: "Delete Series",
	editDialogStatuses:
	{
		free: "Free",
		tentative: "Tentative",
		busy: "Busy",
		outOfOffice: "Out of Office"
	},
    loadingErrorMessage: "The data is still loading and you cannot set a property or call a method. You can do that once the data binding is completed. jqxScheduler raises the 'bindingComplete' event when the binding is completed.",	
}

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :localization="localization"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        localization: {
          days: {
            names: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"]
          }
        },
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the Scheduler's minimum navigation date. To learn how to use jqxDate, please look at the Scheduler's Getting Started help topic.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :min="min"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        min: new jqx.date(2018, 11, 12),
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the Scheduler's maximum navigation date. To learn how to use jqxDate, please look at the Scheduler's Getting Started help topic.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :max="max"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        max: new jqx.date(2018, 12, 1),
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets a function called when the Scheduler is rendered and ready for usage.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :ready="ready"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    },
    methods: {
      ready: function () {
        alert('ready');
      }
    }
  }
</script>

Sets a function called when the Scheduler is rendering its appointments. The function has one parameter which is object with the following members:

• appointment - object which has the appointmentDataFields. See appointmentDataFields property.
• width - integer. Gets the appointment's width.
• height- integer. Gets the appointment's height.
• textColor - hex string. Gets or sets the appointment's text color.
• background - hex string. Gets or sets the appointment's background color.
• borderColor - hex string. Gets or sets the appointment's border color.
• style - hex string. Gets or sets the appointment's style. This is alternative to textColr, background and borderColor, because it sets them all depending on the HEX string you set.
• cssClass - string. This can be used for adding CSS Class to the appointment.
• html - html string. This can be used for replacing the appointment's HTML Content.
• view - string. Gets the current view - 'dayView', 'weekView', 'monthView', timelineDayView', 'timelineWeekView', 'timelineMonthView'

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :renderAppointment="renderAppointment"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    },
    methods: {
      renderAppointment: function (data) {
        alert('render appointment');
      }
    }
  }
</script>

Sets a function called by the Scheduler when the Scheduler's rendering function is called.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :rendering="rendering"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    },
    methods: {
      rendering: function () {
        alert('rendering');
      }
    }
  }
</script>

Sets a function called by the Scheduler when the Scheduler is rendered.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :rendered="rendered"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    },
    methods: {
      rendered: function () {
        alert('rendered');
      }
    }
  }
</script>

Sets or gets whether the Scheduler is displayed with Right to Left layout.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :rtl="true"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the Scheduler's resource object. The object can have the following members:

• source - dataAdapter or Array.
• colorScheme - string which defines the appoinment's style depending on its resourceId. Values from 'scheme01' to 'scheme27'.
• orientation - string which defines the resources representation. Values - 'none', 'horizontal', 'vertical'.
• dataField - string which defines the resourceId. If your appointment's resource field is 'calendar', this dataField should be set to 'calendar'.
• resourceColumnWidth - Integer which defines the Scheduler columns width when 'orientation' is 'horizontal'.
• resourceRowHeight - Integer which defines the Scheduler resource group row height when 'orientation' is 'vertical'.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the Scheduler rows height.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :rowsHeight="40"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets whether the Scheduler's navigation toolbar is displayed.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :showToolbar="false"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets whether the Scheduler's legend bar is displayed.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the scrollbars size.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :scrollBarSize="20"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the Scheduler appointments data source. The property should point to dataAdapter instance.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the Scheduler appointments statuses.

<template>
  <JqxScheduler ref="myScheduler" 
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources" 
    :appointmentDataFields="appointmentDataFields" :views="views" :statuses="statuses" /> 
</template> 
 
<script> 
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: { 
      JqxScheduler 
    }, 
    data: function () {
      return { 
        statuses: { 
          free: 'green', 
          tentative: 'tentative', 
          busy: 'transparent', 
          doNotDisturb: 'orange', 
          outOfOffice: '#800080' 
        }, 
        date: new jqx.date(2018, 11, 23), 
        source: new jqx.dataAdapter(this.source), 
        resources: { 
          colorScheme: "scheme05", 
          dataField: "calendar", 
          source: new jqx.dataAdapter(this.source) 
        }, 
        appointmentDataFields: { 
          from: "start", 
          to: "end", 
          id: "id", 
          description: "description", 
          location: "place", 
          subject: "subject", 
          resourceId: "calendar", 
          status: "status" 
        }, 
        views: [ 
          'dayView', 
          'weekView', 
          'monthView' 
        ] 
      } 
    }, 
    beforeCreate: function () { 
      var appointments = new Array(); 
      var appointment1 = { 
        id: "id1", 
        description: "George brings projector for presentations.", 
        subject: "Quarterly Project Review Meeting", 
        calendar: "Room 1", 
        status: 'free', 
        start: new Date(2018, 10, 20, 9, 0, 0), 
        end: new Date(2018, 10, 20, 16, 0, 0) 
      } 
      var appointment2 = { 
        id: "id2", 
        subject: "IT Group Mtg.", 
        calendar: "Room 2", 
        status: 'tentative', 
        start: new Date(2018, 10, 21, 10, 0, 0), 
        end: new Date(2018, 10, 21, 15, 0, 0) 
      } 
      var appointment3 = { 
        id: "id3", 
        subject: "Course Social Media", 
        calendar: "Room 3", 
        status: 'doNotDisturb', 
        start: new Date(2018, 10, 22, 11, 0, 0), 
        end: new Date(2018, 10, 22, 13, 0, 0) 
     } 
     appointments.push(appointment1); 
     appointments.push(appointment2); 
     appointments.push(appointment3); 
     this.source = { 
       dataType: "array", 
       dataFields: [ 
         { name: 'id', type: 'string' }, 
         { name: 'description', type: 'string' }, 
         { name: 'location', type: 'string' }, 
         { name: 'subject', type: 'string' }, 
         { name: 'calendar', type: 'string' }, 
         { name: 'status', type: 'string' }, 
         { name: 'start', type: 'date' }, 
         { name: 'end', type: 'date' } 
       ], 
       id: 'id', 
       localData: appointments 
     }; 
   }, 
    mounted: function () { 
      this.$refs.myScheduler.ensureAppointmentVisible('id1'); 
    } 
  } 
</script>

Sets or gets the Scheduler rows height on touch device.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :touchRowsHeight="40"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :theme="'material'"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the minimum height of appointments on touch devices in the all day area, month view and timeline views.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :touchAppointmentsMinHeight="40"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the scrollbars size on touch devices.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :touchScrollBarSize="20"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the Scheduler's Time Zone. Possible values:

'Dateline Standard Time' - (offsetMinutes: -720, offsetHours: -12, text: '(UTC-12:00) International Date Line West')
'UTC-11' - (offsetMinutes: -660, offsetHours: -11, text: '(UTC-11:00) Coordinated Universal Time-11')
'Hawaiteratoran Standard Time' - (offsetMinutes: -600, offsetHours: -10, text: '(UTC-10:00) Hawaiterator')
'Alaskan Standard Time' - (offsetMinutes: -540, offsetHours: -9, text: '(UTC-09:00) Alaska' ,
'Pacific Standard Time (Mexico)' - (offsetMinutes: -480, offsetHours: -8, text: '(UTC-08:00) Baja California' ,
'Pacific Standard Time' - (offsetMinutes: -480, offsetHours: -8, text: '(UTC-08:00) Pacific Time (US & Canada)' ,
'US Mountain Standard Time' - (offsetMinutes: -420, offsetHours: -7, text: '(UTC-07:00) Arizona')
'Mountain Standard Time (Mexico)' - (offsetMinutes: -420, offsetHours: -7, text: '(UTC-07:00) Chihuahua, La Paz, Mazatlan' ,
'Mountain Standard Time' - (offsetMinutes: -420, offsetHours: -7, text: '(UTC-07:00) Mountain Time (US & Canada)' ,
'Central Standard Time' - (offsetMinutes: -360, offsetHours: -6, text: '(UTC-06:00) Central Time (US & Canada)' ,
'Central America Standard Time' - (offsetMinutes: -360, offsetHours: -6, text: '(UTC-06:00) Central America')
'Canada Central Standard Time' - (offsetMinutes: -360, offsetHours: -6, text: '(UTC-06:00) Saskatchewan')
'Central Standard Time (Mexico)' - (offsetMinutes: -360, offsetHours: -6, text: '(UTC-06:00) Guadalajara, Mexico City, Monterrey' ,
'SA Pacific Standard Time' - (offsetMinutes: -300, offsetHours: -5, text: '(UTC-05:00) Bogota, Lima, Quito, Rio Branco')
'Eastern Standard Time' - (offsetMinutes: -300, offsetHours: -5, text: '(UTC-05:00) Eastern Time (US & Canada)' ,
'US Eastern Standard Time' - (offsetMinutes: -300, offsetHours: -5, text: '(UTC-05:00) Indiana (East)' ,
'Venezuela Standard Time' - (offsetMinutes: -270, offsetHours: -4.5, text: '(UTC-04:30) Caracas')
'Atlantic Standard Time' - (offsetMinutes: -240, offsetHours: -4, text: '(UTC-04:00) Atlantic Time (Canada)' ,
'Paraguay Standard Time' - (offsetMinutes: -240, offsetHours: -4, text: '(UTC-04:00) Asuncion' ,
'Central Brazilian Standard Time' - (offsetMinutes: -240, offsetHours: -4, text: '(UTC-04:00) Cuiaba' ,
'Pacific SA Standard Time' - (offsetMinutes: -240, offsetHours: -4, text: '(UTC-04:00) Santiago' ,
'SA Western Standard Time' - (offsetMinutes: -240, offsetHours: -4, text: '(UTC-04:00) Georgetown, La Paz, Manaus')
'Newfoundland Standard Time' - (offsetMinutes: -210, offsetHours: -3.5, text: '(UTC-03:30) Newfoundland' ,
'SA Eastern Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Cayenne, Fortaleza')
'Argentina Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Buenos Aires' ,
'E. South America Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Brasilia' ,
'Bahia Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Salvador' ,
'Montevideo Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Montevideo' ,
'Greenland Standard Time' - (offsetMinutes: -180, offsetHours: -3, text: '(UTC-03:00) Greenland' ,
'UTC-02' - (offsetMinutes: -120, offsetHours: -2, text: '(UTC-02:00) Coordinated Universal Time-02')
'Mid-Atlantic Standard Time' - (offsetMinutes: -120, offsetHours: -2, text: '(UTC-02:00) Mid-Atlantic - Old' ,
'Azores Standard Time' - (offsetMinutes: -60, offsetHours: -1, text: '(UTC-01:00) Azores' ,
'Cape Verde Standard Time' - (offsetMinutes: -60, offsetHours: -1, text: '(UTC-01:00) Cape Verde Is.')
'Morocco Standard Time' - (offsetMinutes: 0, offsetHours: 0, text: '(UTC) Casablanca' ,
'UTC' - (offsetMinutes: 0, offsetHours: 0, text: '(UTC) Coordinated Universal Time')
'GMT Standard Time' - (offsetMinutes: 0, offsetHours: 0, text: '(UTC) Dublin, Edinburgh, Lisbon, London' ,
'Greenwich Standard Time' - (offsetMinutes: 0, offsetHours: 0, text: '(UTC) Monrovia, Reykjavik')
'Central European Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) Sarajevo, Skopje, Warsaw, Zagreb' ,
'Namibia Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) Windhoek' ,
'W. Central Africa Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) West Central Africa')
'W. Europe Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) Amsterdam, Berlin, Rome' ,
'Central Europe Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) Belgrade, Budapest, Prague' ,
'Romance Standard Time' - (offsetMinutes: 60, offsetHours: 1, text: '(UTC+01:00) Brussels, Copenhagen, Madrid, Paris' ,
'FLE Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Helsinki, Kyiv, Riga, Sofia' ,
'South Africa Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Harare, Pretoria')
'Turkey Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Istanbul' ,
'GTB Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Athens, Bucharest' ,
'Libya Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Tripoli' ,
'E. Europe Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) E. Europe' ,
'Jordan Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Amman' ,
'Middle East Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Beirut' ,
'Egypt Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Cairo' ,
'Syria Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Damascus' ,
'Israel Standard Time' - (offsetMinutes: 120, offsetHours: 2, text: '(UTC+02:00) Jerusalem' ,
'Arab Standard Time' - (offsetMinutes: 180, offsetHours: 3, text: '(UTC+03:00) Kuwait, Riyadh')
'E. Africa Standard Time' - (offsetMinutes: 180, offsetHours: 3, text: '(UTC+03:00) Nairobi')
'Arabic Standard Time' - (offsetMinutes: 180, offsetHours: 3, text: '(UTC+03:00) Baghdad' ,
'Kaliningrad Standard Time' - (offsetMinutes: 180, offsetHours: 3, text: '(UTC+03:00) Kaliningrad, Minsk' ,
'Iran Standard Time' - (offsetMinutes: 210, offsetHours: 3.5, text: '(UTC+03:30) Tehran' ,
'Mauritius Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Port Louis' ,
'Georgian Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Tbilisi')
'Caucasus Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Yerevan' ,
'Arabian Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Abu Dhabi, Muscat')
'Azerbaijan Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Baku' ,
'Russian Standard Time' - (offsetMinutes: 240, offsetHours: 4, text: '(UTC+04:00) Moscow, St. Petersburg, Volgograd' ,
'Afghanistan Standard Time' - (offsetMinutes: 270, offsetHours: 4.5, text: '(UTC+04:30) Kabul')
'Pakistan Standard Time' - (offsetMinutes: 300, offsetHours: 5, text: '(UTC+05:00) Islamabad, Karachi' ,
'West Asia Standard Time' - (offsetMinutes: 300, offsetHours: 5, text: '(UTC+05:00) Ashgabat, Tashkent')
'India Standard Time' - (offsetMinutes: 330, offsetHours: 5.5, text: '(UTC+05:30) Chennai, Kolkata, Mumbai, New Delhi')
'Sri Lanka Standard Time' - (offsetMinutes: 330, offsetHours: 5.5, text: '(UTC+05:30) Sri Jayawardenepura')
'Nepal Standard Time' - (offsetMinutes: 345, offsetHours: 5.75, text: '(UTC+05:45) Kathmandu')
'Central Asia Standard Time' - (offsetMinutes: 360, offsetHours: 6, text: '(UTC+06:00) Astana')
'Bangladesh Standard Time' - (offsetMinutes: 360, offsetHours: 6, text: '(UTC+06:00) Dhaka' ,
'Ekaterinburg Standard Time' - (offsetMinutes: 360, offsetHours: 6, text: '(UTC+06:00) Ekaterinburg' ,
'Myanmar Standard Time' - (offsetMinutes: 390, offsetHours: 6.5, text: '(UTC+06:30) Yangon (Rangoon)')
'SE Asia Standard Time' - (offsetMinutes: 420, offsetHours: 7, text: '(UTC+07:00) Bangkok, Hanoi, Jakarta')
'N. Central Asia Standard Time' - (offsetMinutes: 420, offsetHours: 7, text: '(UTC+07:00) Novosibirsk' ,
'Ulaanbaatar Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Ulaanbaatar')
'China Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Beijing, Chongqing, Hong Kong')
'Singapore Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Kuala Lumpur, Singapore')
'North Asia Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Krasnoyarsk' ,
'Taipei Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Taipei')
'W. Australia Standard Time' - (offsetMinutes: 480, offsetHours: 8, text: '(UTC+08:00) Perth' ,
'Korea Standard Time' - (offsetMinutes: 540, offsetHours: 9, text: '(UTC+09:00) Seoul')
'North Asia East Standard Time' - (offsetMinutes: 540, offsetHours: 9, text: '(UTC+09:00) Irkutsk' ,
'Tokyo Standard Time' - (offsetMinutes: 540, offsetHours: 9, text: '(UTC+09:00) Osaka, Sapporo, Tokyo')
'AUS Central Standard Time' - (offsetMinutes: 570, offsetHours: 9.5, text: '(UTC+09:30) Darwin')
'Cen. Australia Standard Time' - (offsetMinutes: 570, offsetHours: 9.5, text: '(UTC+09:30) Adelaide' ,
'West Pacific Standard Time' - (offsetMinutes: 600, offsetHours: 10, text: '(UTC+10:00) Guam, Port Moresby')
'Tasmania Standard Time' - (offsetMinutes: 600, offsetHours: 10, text: '(UTC+10:00) Hobart' ,
'E. Australia Standard Time' - (offsetMinutes: 600, offsetHours: 10, text: '(UTC+10:00) Brisbane')
'AUS Eastern Standard Time' - (offsetMinutes: 600, offsetHours: 10, text: '(UTC+10:00) Canberra, Melbourne, Sydney' ,
'Yakutsk Standard Time' - (offsetMinutes: 600, offsetHours: 10, text: '(UTC+10:00) Yakutsk' ,
'Vladivostok Standard Time' - (offsetMinutes: 660, offsetHours: 11, text: '(UTC+11:00) Vladivostok' ,
'Central Pacific Standard Time' - (offsetMinutes: 660, offsetHours: 11, text: '(UTC+11:00) Solomon Is., New Caledonia')
'Magadan Standard Time' - (offsetMinutes: 720, offsetHours: 12, text: '(UTC+12:00) Magadan' ,
'Kamchatka Standard Time' - (offsetMinutes: 720, offsetHours: 12, text: '(UTC+12:00) Petropavlovsk-Kamchatsky - Old' ,
'Fiji Standard Time' - (offsetMinutes: 720, offsetHours: 12, text: '(UTC+12:00) Fiji' ,
'New Zealand Standard Time' - (offsetMinutes: 720, offsetHours: 12, text: '(UTC+12:00) Auckland, Wellington' ,
'UTC+12' - (offsetMinutes: 720, offsetHours: 12, text: '(UTC+12:00) Coordinated Universal Time+12')
'Tonga Standard Time' - (offsetMinutes: 780, offsetHours: 13, text: '(UTC+13:00) Nuku\'alofa')
'Samoa Standard Time' - (offsetMinutes: 780, offsetHours: 13, text: '(UTC+13:00) Samoa')
						   

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :timeZone="'UTC'"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the Schedulers' columns day formatting. Possible values: 'shortest', 'firstTwoLetters', 'firstLetter', 'abbr', 'full'.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :touchDayNameFormat="'abbr'"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the toolbar's date format.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :toolBarRangeFormat="'dd MM yyyy'"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>

Sets or gets the toolbar's date format when the Scheduler's width is not enough for displaying the full format.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :toolBarRangeFormatAbbr="'dd MM yy'"
  />
</template>
 
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
 
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return  {
        date: new jqx.date(2018, 11, 23),
        source: new jqx.dataAdapter(this.source),
        resources: {
          colorScheme: "scheme05",
          dataField: "calendar",
          source: new jqx.dataAdapter(this.source)
        },
        appointmentDataFields: {
          from: "start",
          to: "end",
          id: "id",
          description: "description",
          location: "place",
          subject: "subject",
          resourceId: "calendar"
        },
        views: [
          'dayView',
          'weekView',
          'monthView'
        ]
      }
    },
    beforeCreate: function () {
      var appointments = new Array();
      var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2018, 10, 20, 9, 0, 0),
        end: new Date(2018, 10, 20, 16, 0, 0)
      }
      var appointment2 = {
        id: "id2",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2018, 10, 21, 10, 0, 0),
        end: new Date(2018, 10, 21, 15, 0, 0)
      }
      var appointment3 = {
        id: "id3",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2018, 10, 22, 11, 0, 0),
        end: new Date(2018, 10, 22, 13, 0, 0)
      }
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      this.source = {
        dataType: "array",
        dataFields: [
          { name: 'id', type: 'string' },
          { name: 'description', type: 'string' },
          { name: 'location', type: 'string' },
          { name: 'subject', type: 'string' },
          { name: 'calendar', type: 'string' },
          { name: 'start', type: 'date' },
          { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
      };
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    }
  }
</script>