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>

Sets or gets the Scheduler toolbar's height.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :toolbarHeight="60"
  />
</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 views. Each view in the Array can be string or object. strings are: 'dayView', 'weekView', 'monthView', 'timelineDayView', 'timelineWeekView', 'timelineMonthView', 'agendaView'. If it is an object it can have the following members:

• appointmentColumnWidth - number which defines the Appointment column width in the Agenda view.
• appointmentHeight - Sets the minimum height of an appointment in All Day Row, Month View or Timeline Views. Default is automatically calculated.
• appointmentsRenderMode - Sets the appointments rendering mode. Possible value: "exactTime". In the "exactTime" mode, appointments may render partially in the cells.
• allDayRowHeight - number which defines the all day row's height. Default is automatically calculated.
• dayViewNavigation - boolean which is taken into account in Month View. It defines whether clicking on month cell header navigates to Day View. Default is false.
• days - number which defines the number of days in the Agenda view. Default is 7.
• dateColumnWidth - number which defines the Date column width in the Agenda view.
• monthRowAutoHeight - boolean which defines whether row height in month view is automatic. Default is false.
• rowHeight - number which defines the rows height in the view. Default is null.
• showWeekends - boolean which defines whether weekens will be displayed. Default is true.
• showWorkTime - boolean which defines whether the work time is displayed in Day View, Week View, Timeline Day View and Timeline Week View. Default is true.
• showWeeknumbers - boolean which defines whether the week numbers are dispalyed in Month View. Default is false.
• showTimeRangeStatus - boolean which defines whether the time range status of appointments which have duration >= 1 day and are not all day appointments is displayed in Month View and Day/Week views all day area.
• type - string which sets the view's type. Values: 'dayView', 'weekView', 'monthView', 'timelineDayView', 'timelineWeekView', 'timelineMonthView'.
• timeRuler - object which can have the following members:
  • width - number which sets the width of the time ruler. Default is 60.
  • hidden - Sets whether the time ruler is displayed.
  • timeZones - Sets an Array of time zones. Example: [{ id: "UTC", text: "UTC" }, { id: "Pacific Standard Time", text: "PST" }].
  • text - Sets the text of the time ruler column.
  • scale - Sets the time ruler's scale. Values: 'hour', 'halfHour', 'quarterHour', 'tenMinutes', 'fiveMinutes'
  • scaleStartHour - Sets the scale's start hour.
  • scaleEndHour - Sets the scale's end hour.
  • formatstring - Sets the Hours and Minutes format string. Example: "hh:mm".
  • position - Sets the time ruler's position. Possible values: 'left' or 'right'.
• text - Sets the view's display text in the Scheduler's Toolbar. Default is automatically set and defined in Scheduler's localization.
• timeSlotWidth - number which defines the width of a time slot in Timeline views. The minimum value is 30.
• timeColumnWidth - number which defines the Time column width in the Agenda view.
• weekViewNavigation - boolean which is taken into account in Month View. It defines whether clicking on week number cell header navigates to Week View. Default is false.
• workTime - object which defines the Scheduler's work time. Example: { fromDayOfWeek: 1, toDayOfWeek: 5, fromHour: 7, toHour: 19 }

<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's view. Possible vales: 'dayView', 'weekView', 'monthView', 'timelineDayView', 'timelineWeekView' and 'timelineMonthView' or the view's Index in the views object.

<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's width.

<template>
  <JqxScheduler ref="myScheduler"
    :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
    :appointmentDataFields="appointmentDataFields" :views="views" :width="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>

This event is triggered when an appointment is changed. event.args contains the event's arguments. This event has one argument: appointment - object which has the appointmentDataFields. See appointmentDataFields property.

Code examples

Bind to the appointmentChange event of jqxScheduler.

<template>
  <JqxScheduler ref="myScheduler" @appointmentChange="onAppointmentChange($event)"
    :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');
    },
    methods: {
      onAppointmentChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when an appointment is clicked. event.args contains the event's arguments. This event has one argument: appointment - object which has the appointmentDataFields. See appointmentDataFields property.

Code examples

Bind to the appointmentClick event of jqxScheduler.

<template>
  <JqxScheduler ref="myScheduler" @appointmentClick="onAppointmentClick($event)"
    :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');
    },
    methods: {
      onAppointmentClick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when an appointment is double clicked. event.args contains the event's arguments. This event has one argument: appointment - object which has the appointmentDataFields. See appointmentDataFields property.

Code examples

Bind to the appointmentDoubleClick event of jqxScheduler.

<template>
  <JqxScheduler ref="myScheduler" @appointmentDoubleClick="onAppointmentDoubleClick($event)"
    :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');
    },
    methods: {
      onAppointmentDoubleClick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when an appointment is deleted. event.args contains the event's arguments. This event has one argument: appointment - object which has the appointmentDataFields. See appointmentDataFields property.

Code examples

Bind to the appointmentDelete event of jqxScheduler.

<template>
  <JqxScheduler ref="myScheduler" @appointmentDelete="onAppointmentDelete($event)"
    :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');
    },
    methods: {
      onAppointmentDelete: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when an appointment is added. event.args contains the event's arguments. This event has one argument: appointment - object which has the appointmentDataFields. See appointmentDataFields property.

Code examples

Bind to the appointmentAdd event of jqxScheduler.

<template>
  <JqxScheduler ref="myScheduler" @appointmentAdd="onAppointmentAdd($event)"
    :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');
    },
    methods: {
      onAppointmentAdd: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the binding is completed.

Code examples

Bind to the bindingComplete event of jqxScheduler.

<template>
  <JqxScheduler ref="myScheduler" @bindingComplete="onBindingComplete($event)"
         :date="date" :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.source = this.source;
      this.$refs.myScheduler.ensureAppointmentVisible('id1');
    },
    methods: {
      onBindingComplete: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a cell is clicked. event.args contains the event's arguments. This event has two arguments: cell - TD HTML Element. date - jqxDate object.

Code examples

Bind to the cellClick event of jqxScheduler.

<template>
  <JqxScheduler ref="myScheduler" @cellClick="onCellClick($event)"
    :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');
    },
    methods: {
      onCellClick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a cell is double clicked. event.args contains the event's arguments. This event has two arguments: cell - TD HTML Element. date - jqxDate object.

Code examples

Bind to the cellDoubleClick event of jqxScheduler.

<template>
  <JqxScheduler ref="myScheduler" @cellDoubleClick="onCellDoubleClick($event)"
    :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');
    },
    methods: {
      onCellDoubleClick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the context menu is opened. Event Arguments:

• menu - jQuery object which represents the jqxMenu.
• appointment - object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.

Code examples

Bind to the contextMenuOpen event of jqxScheduler.

<template>
  <JqxScheduler ref="myScheduler" @contextMenuOpen="onContextMenuOpen($event)"
    :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');
    },
    methods: {
      onContextMenuOpen: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the context menu is closed. Event Arguments:

• menu - jQuery object which represents the jqxMenu.
• appointment - object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.

Code examples

Bind to the contextMenuClose event of jqxScheduler.

<template>
  <JqxScheduler ref="myScheduler" @contextMenuClose="onContextMenuClose($event)"
    :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');
    },
    methods: {
      onContextMenuClose: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the context menu item is clicked. Event Arguments:

• menu - jQuery object which represents the jqxMenu.
• appointment - object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
• item - the clicked menu item.

Code examples

Bind to the contextMenuItemClick event of jqxScheduler.

<template>
  <JqxScheduler ref="myScheduler" @contextMenuItemClick="onContextMenuItemClick($event)"
    :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');
    },
    methods: {
      onContextMenuItemClick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the context menu item is created. Event Arguments:

• menu - jQuery object which represents the jqxMenu.
• appointment - object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.

Code examples

Bind to the contextMenuCreate event of jqxScheduler.

<template>
  <JqxScheduler ref="myScheduler" @contextMenuCreate="onContextMenuCreate($event)"
    :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');
    },
    methods: {
      onContextMenuCreate: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the date is changed. This event has three arguments: date, from and to - jqxDate objects.

Code examples

Bind to the dateChange event of jqxScheduler.

<template>
  <JqxScheduler ref="myScheduler" @dateChange="onDateChange($event)"
    :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');
    },
    methods: {
      onDateChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the recurrence dialog is opened. Event Arguments:

• dialog - jQuery object which represents the jqxWindow.
• appointment - object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.

Code examples

Bind to the editRecurrenceDialogOpen event of jqxScheduler.

<template>
  <JqxScheduler ref="myScheduler" @editRecurrenceDialogOpen="onEditRecurrenceDialogOpen($event)"
         :width="getWidth" :height="600" :source="dataAdapter" :date="date" :view="'weekView'" :showLegend="true"
         :appointmentDataFields="appointmentDataFields" :views="views" />
</template>
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return {
        getWidth: getWidth('scheduler'),
        date: new jqx.date(2016, 11, 23),
        appointmentDataFields:
          {
            from: 'from',
            to: 'to',
            id: 'id',
            description: 'description',
            location: 'place',
            style: 'style',
            subject: 'subject',
            resourceId: 'calendar',
            recurrencePattern: 'recurrenceRule',
            recurrenceException: 'recurrenceException'
          },
        views:
          [
            'dayView',
            'weekView',
            'monthView'
          ]
      }
    },
    beforeCreate: function () {
      const generateAppointments = function () {
        const appointments = new Array();
        const appointment1 = {
          id: 'id4',
          description: '',
          style: '#AA4643',
          location: '',
          subject: 'New Projects Planning',
          calendar: 'Room 2',
          from: new Date(2016, 10, 22, 8, 0, 0),
          to: new Date(2016, 10, 22, 13, 0, 0)
        }
        const appointment2 = {
          id: 'id5',
          description: '',
          style: '#89A54E',
          location: '',
          subject: 'Interview with James',
          calendar: 'Room 1',
          from: new Date(2016, 10, 25, 13, 0, 0),
          to: new Date(2016, 10, 25, 15, 0, 0)
        }
        const appointment3 = {
          id: 'id6',
          description: '',
          style: '#71588F',
          location: '',
          subject: 'Interview with Nancy',
          calendar: 'Room 2',
          from: new Date(2016, 10, 26, 14, 0, 0),
          to: new Date(2016, 10, 26, 16, 0, 0)
        }
        const appointment4 = {
          id: 'id7',
          description: '',
          style: '#307DD7',
          location: '',
          subject: 'Daily Meeting',
          calendar: 'Room 1',
          recurrenceRule: 'FREQ=DAILY;',
          recurrenceException: '2016-11-24 09:00:00,2016-11-26 12:00:00',
          from: new Date(2016, 10, 23, 10, 0, 0),
          to: new Date(2016, 10, 23, 11, 0, 0)
        }
        appointments.push(appointment1);
        appointments.push(appointment2);
        appointments.push(appointment3);
        appointments.push(appointment4);
        return appointments;
      }
      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: 'recurrenceRule', type: 'string' },
            { name: 'recurrenceException', type: 'string' },
            { name: 'style', type: 'string' },
            { name: 'from', type: 'date' },
            { name: 'to', type: 'date' }
          ],
          id: 'id',
          localData: generateAppointments()
        };
      this.dataAdapter = new jqx.dataAdapter(this.source);
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id7');
    },
    methods: {
      onEditRecurrenceDialogOpen: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the recurrence dialog is closed. Event Arguments:

• dialog - jQuery object which represents the jqxWindow.
• appointment - object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.

Code examples

Bind to the editRecurrenceDialogClose event of jqxScheduler.

<template>
  <JqxScheduler ref="myScheduler" @editRecurrenceDialogClose="onEditRecurrenceDialogClose($event)"
         :width="getWidth" :height="600" :source="dataAdapter" :date="date" :view="'weekView'" :showLegend="true"
         :appointmentDataFields="appointmentDataFields" :views="views" />
</template>
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue'
  export default {
    components: {
      JqxScheduler
    },
    data: function () {
      return {
        getWidth: getWidth('scheduler'),
        date: new jqx.date(2016, 11, 23),
        appointmentDataFields:
          {
            from: 'from',
            to: 'to',
            id: 'id',
            description: 'description',
            location: 'place',
            style: 'style',
            subject: 'subject',
            resourceId: 'calendar',
            recurrencePattern: 'recurrenceRule',
            recurrenceException: 'recurrenceException'
          },
        views:
          [
            'dayView',
            'weekView',
            'monthView'
          ]
      }
    },
    beforeCreate: function () {
      const generateAppointments = function () {
        const appointments = new Array();
        const appointment1 = {
          id: 'id4',
          description: '',
          style: '#AA4643',
          location: '',
          subject: 'New Projects Planning',
          calendar: 'Room 2',
          from: new Date(2016, 10, 22, 8, 0, 0),
          to: new Date(2016, 10, 22, 13, 0, 0)
        }
        const appointment2 = {
          id: 'id5',
          description: '',
          style: '#89A54E',
          location: '',
          subject: 'Interview with James',
          calendar: 'Room 1',
          from: new Date(2016, 10, 25, 13, 0, 0),
          to: new Date(2016, 10, 25, 15, 0, 0)
        }
        const appointment3 = {
          id: 'id6',
          description: '',
          style: '#71588F',
          location: '',
          subject: 'Interview with Nancy',
          calendar: 'Room 2',
          from: new Date(2016, 10, 26, 14, 0, 0),
          to: new Date(2016, 10, 26, 16, 0, 0)
        }
        const appointment4 = {
          id: 'id7',
          description: '',
          style: '#307DD7',
          location: '',
          subject: 'Daily Meeting',
          calendar: 'Room 1',
          recurrenceRule: 'FREQ=DAILY;',
          recurrenceException: '2016-11-24 09:00:00,2016-11-26 12:00:00',
          from: new Date(2016, 10, 23, 10, 0, 0),
          to: new Date(2016, 10, 23, 11, 0, 0)
        }
        appointments.push(appointment1);
        appointments.push(appointment2);
        appointments.push(appointment3);
        appointments.push(appointment4);
        return appointments;
      }
      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: 'recurrenceRule', type: 'string' },
            { name: 'recurrenceException', type: 'string' },
            { name: 'style', type: 'string' },
            { name: 'from', type: 'date' },
            { name: 'to', type: 'date' }
          ],
          id: 'id',
          localData: generateAppointments()
        };
      this.dataAdapter = new jqx.dataAdapter(this.source);
    },
    mounted: function () {
      this.$refs.myScheduler.ensureAppointmentVisible('id7');
    },
    methods: {
      onEditRecurrenceDialogClose: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the edit dialog is created. Event Arguments:

• dialog - jQuery object which represents the jqxWindow.
• appointment - object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
• fields - object with the following members:
  • subject - Subject input field.
  • subjectLabel - Subject label.
  • subjectContainer - Input and label HTML div container element.
  • location - Location input field.
  • locationLabel - Location label.
  • locationContainer - Input and label HTML div container element.
  • from - From datetime input field.
  • fromLabel - From label.
  • fromContainer - Input and label HTML div container element.
  • to - To Datetimeinput field.
  • toLabel - To label.
  • toContainer - Input and label HTML div container element.
  • allDay - AllDay checkbox field.
  • allDayLabel - AllDay label.
  • allDayContainer - Checkbox and label HTML div container element.
  • timeZone - Timezone DropDownList field.
  • timeZoneLabel - TimeZone label.
  • timeZoneContainer - DropDownList and label HTML div container element.
  • description - Description input field.
  • descriptionLabel - Description label.
  • descriptionContainer - Input and label HTML div container element.
  • color - Color DropDownList field.
  • colorLabel - Subject label.
  • colorContainer - DropDownList and label container element.
  • status - Status DropDownList field.
  • statusLabel - Status label.
  • statustContainer - DropDownList and label container element.
  • resource - Resource DropDownList field.
  • resourceLabel - Resource label.
  • resourceContainer - DropDownList and label container element.
  • buttonsField - buttons HTML div container HTML Element.
  • saveButton - Save button.
  • deleteButton - Delete button.
  • cancelButton - Cancel button.
  • daily.repeatDayInterval - numberInput for daily repeat pattern.
  • daily.repeatDayLabel - Label HTML Element.
  • daily.panel - Daily repeat pattern HTML div container element.
  • weekly.repeatWeekInterval - numberInput for weekly repeat pattern.
  • weekly.repeatWeekIntervalLabel - Label element.
  • weekly.repeatDaysLabel - Label element.
  • weekly.repeatDays - Array of Checkboxes.
  • weekly.panel - Weekly repeat pattern HTML div container element.
  • monthly.repeatMonth - numberInput for monthly repeat pattern.
  • monthly.repeatMonthLabel - Label element.
  • monthly.repeatMonthDay - numberInput for the month day in the pattern.
  • monthly.repeatMonthDayBool - RadioButton element.
  • monthly.repeatMonthDayLabel - Label element.
  • monthly.repeatDayOfWeekBool - RadioButton element.
  • monthly.repeatDayOfWeek - DropDownList element.
  • monthly.repeatDayOfWeekLabel - Label element.
  • monthly.repeatDayOfWeekType - DropDownList element.
  • monthly.panel - Monthly repeat pattern HTML div container element.
  • yearly.repeatYear - numberInput for yearly repeat pattern.
  • yearly.repeatYearLabel - Label element.
  • yearly.repeatYearBool - RadioButton element.
  • yearly.repeatYearBoolLabel - Label element.
  • yearly.repeatYearMonth - DropDownList element.
  • yearly.repeatYearDay - numberInput element.
  • yearly.repeatDayOfWeekBool - RadioButton element.
  • yearly.repeatDayOfWeekType - DropDownList element.
  • yearly.repeatDayOfWeekLabel - Label element.
  • yearly.repeatDayOfWeekMonth - DropDownList element.
  • yearly.panel - Yearly repeat pattern HTML div container element.
  • resetExceptions - Checkbox element.
  • resetExceptionsLabel - Label element.
  • resetExceptionsContainer - Checkbox and Label container element.
  • repeat - DropDownList element.
  • repeatLabel - Label element.
  • repeatContainer - DropDownList and Label container element.
  • repeatPanel - HTML div container element for repeat patterns.
  • repeatEndPanelContainer - HTML div container element for the repeat pattern's end.
  • repeatEndPanel.repeatEndNever - RadioButton element.
  • repeatEndPanel.repeatEndNeverLabel - Label element.
  • repeatEndPanel.repeatEndAfter - RadioButton element.
  • repeatEndPanel.repeatEndAfterValue - numberInput element.
  • repeatEndPanel.repeatEndAfterLabel - Label element.
  • repeatEndPanel.repeatEndOn - RadioButton element.
  • repeatEndPanel.repeatEndOnValue - DateTimeInput element.
  • repeatEndPanel.repeatEndOnLabel - Label element.

Code examples

Bind to the editDialogCreate event of jqxScheduler.

<template>
  <JqxScheduler ref="myScheduler" @editDialogCreate="onEditDialogCreate($event)"
    :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');
    },
    methods: {
      onEditDialogCreate: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the edit dialog is opened. Event Arguments:

• dialog - jQuery object which represents the jqxWindow.
• appointment - object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
• fields - object with the following members:
  • subject - Subject input field.
  • subjectLabel - Subject label.
  • subjectContainer - Input and label HTML div container element.
  • location - Location input field.
  • locationLabel - Location label.
  • locationContainer - Input and label HTML div container element.
  • from - From datetime input field.
  • fromLabel - From label.
  • fromContainer - Input and label HTML div container element.
  • to - To Datetimeinput field.
  • toLabel - To label.
  • toContainer - Input and label HTML div container element.
  • allDay - AllDay checkbox field.
  • allDayLabel - AllDay label.
  • allDayContainer - Checkbox and label HTML div container element.
  • timeZone - Timezone DropDownList field.
  • timeZoneLabel - TimeZone label.
  • timeZoneContainer - DropDownList and label HTML div container element.
  • description - Description input field.
  • descriptionLabel - Description label.
  • descriptionContainer - Input and label HTML div container element.
  • color - Color DropDownList field.
  • colorLabel - Subject label.
  • colorContainer - DropDownList and label container element.
  • status - Status DropDownList field.
  • statusLabel - Status label.
  • statustContainer - DropDownList and label container element.
  • resource - Resource DropDownList field.
  • resourceLabel - Resource label.
  • resourceContainer - DropDownList and label container element.
  • buttonsField - buttons HTML div container HTML Element.
  • saveButton - Save button.
  • deleteButton - Delete button.
  • cancelButton - Cancel button.
  • daily.repeatDayInterval - numberInput for daily repeat pattern.
  • daily.repeatDayLabel - Label HTML Element.
  • daily.panel - Daily repeat pattern HTML div container element.
  • weekly.repeatWeekInterval - numberInput for weekly repeat pattern.
  • weekly.repeatWeekIntervalLabel - Label element.
  • weekly.repeatDaysLabel - Label element.
  • weekly.repeatDays - Array of Checkboxes.
  • weekly.panel - Weekly repeat pattern HTML div container element.
  • monthly.repeatMonth - numberInput for monthly repeat pattern.
  • monthly.repeatMonthLabel - Label element.
  • monthly.repeatMonthDay - numberInput for the month day in the pattern.
  • monthly.repeatMonthDayBool - RadioButton element.
  • monthly.repeatMonthDayLabel - Label element.
  • monthly.repeatDayOfWeekBool - RadioButton element.
  • monthly.repeatDayOfWeek - DropDownList element.
  • monthly.repeatDayOfWeekLabel - Label element.
  • monthly.repeatDayOfWeekType - DropDownList element.
  • monthly.panel - Monthly repeat pattern HTML div container element.
  • yearly.repeatYear - numberInput for yearly repeat pattern.
  • yearly.repeatYearLabel - Label element.
  • yearly.repeatYearBool - RadioButton element.
  • yearly.repeatYearBoolLabel - Label element.
  • yearly.repeatYearMonth - DropDownList element.
  • yearly.repeatYearDay - numberInput element.
  • yearly.repeatDayOfWeekBool - RadioButton element.
  • yearly.repeatDayOfWeekType - DropDownList element.
  • yearly.repeatDayOfWeekLabel - Label element.
  • yearly.repeatDayOfWeekMonth - DropDownList element.
  • yearly.panel - Yearly repeat pattern HTML div container element.
  • resetExceptions - Checkbox element.
  • resetExceptionsLabel - Label element.
  • resetExceptionsContainer - Checkbox and Label container element.
  • repeat - DropDownList element.
  • repeatLabel - Label element.
  • repeatContainer - DropDownList and Label container element.
  • repeatPanel - HTML div container element for repeat patterns.
  • repeatEndPanelContainer - HTML div container element for the repeat pattern's end.
  • repeatEndPanel.repeatEndNever - RadioButton element.
  • repeatEndPanel.repeatEndNeverLabel - Label element.
  • repeatEndPanel.repeatEndAfter - RadioButton element.
  • repeatEndPanel.repeatEndAfterValue - numberInput element.
  • repeatEndPanel.repeatEndAfterLabel - Label element.
  • repeatEndPanel.repeatEndOn - RadioButton element.
  • repeatEndPanel.repeatEndOnValue - DateTimeInput element.
  • repeatEndPanel.repeatEndOnLabel - Label element.

Code examples

Bind to the editDialogOpen event of jqxScheduler.

<template>
  <JqxScheduler ref="myScheduler" @editDialogOpen="onEditDialogOpen($event)"
    :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');
    },
    methods: {
      onEditDialogOpen: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the edit dialog is closed. Event Arguments:

• dialog - jQuery object which represents the jqxWindow.
• appointment - object which has the appointmentDataFields. See appointmentDataFields property. The value is null when the menu is opened from cells selection.
• fields - object with the following members:
  • subject - Subject input field.
  • subjectLabel - Subject label.
  • subjectContainer - Input and label HTML div container element.
  • location - Location input field.
  • locationLabel - Location label.
  • locationContainer - Input and label HTML div container element.
  • from - From datetime input field.
  • fromLabel - From label.
  • fromContainer - Input and label HTML div container element.
  • to - To Datetimeinput field.
  • toLabel - To label.
  • toContainer - Input and label HTML div container element.
  • allDay - AllDay checkbox field.
  • allDayLabel - AllDay label.
  • allDayContainer - Checkbox and label HTML div container element.
  • timeZone - Timezone DropDownList field.
  • timeZoneLabel - TimeZone label.
  • timeZoneContainer - DropDownList and label HTML div container element.
  • description - Description input field.
  • descriptionLabel - Description label.
  • descriptionContainer - Input and label HTML div container element.
  • color - Color DropDownList field.
  • colorLabel - Subject label.
  • colorContainer - DropDownList and label container element.
  • status - Status DropDownList field.
  • statusLabel - Status label.
  • statustContainer - DropDownList and label container element.
  • resource - Resource DropDownList field.
  • resourceLabel - Resource label.
  • resourceContainer - DropDownList and label container element.
  • buttonsField - buttons HTML div container HTML Element.
  • saveButton - Save button.
  • deleteButton - Delete button.
  • cancelButton - Cancel button.
  • daily.repeatDayInterval - numberInput for daily repeat pattern.
  • daily.repeatDayLabel - Label HTML Element.
  • daily.panel - Daily repeat pattern HTML div container element.
  • weekly.repeatWeekInterval - numberInput for weekly repeat pattern.
  • weekly.repeatWeekIntervalLabel - Label element.
  • weekly.repeatDaysLabel - Label element.
  • weekly.repeatDays - Array of Checkboxes.
  • weekly.panel - Weekly repeat pattern HTML div container element.
  • monthly.repeatMonth - numberInput for monthly repeat pattern.
  • monthly.repeatMonthLabel - Label element.
  • monthly.repeatMonthDay - numberInput for the month day in the pattern.
  • monthly.repeatMonthDayBool - RadioButton element.
  • monthly.repeatMonthDayLabel - Label element.
  • monthly.repeatDayOfWeekBool - RadioButton element.
  • monthly.repeatDayOfWeek - DropDownList element.
  • monthly.repeatDayOfWeekLabel - Label element.
  • monthly.repeatDayOfWeekType - DropDownList element.
  • monthly.panel - Monthly repeat pattern HTML div container element.
  • yearly.repeatYear - numberInput for yearly repeat pattern.
  • yearly.repeatYearLabel - Label element.
  • yearly.repeatYearBool - RadioButton element.
  • yearly.repeatYearBoolLabel - Label element.
  • yearly.repeatYearMonth - DropDownList element.
  • yearly.repeatYearDay - numberInput element.
  • yearly.repeatDayOfWeekBool - RadioButton element.
  • yearly.repeatDayOfWeekType - DropDownList element.
  • yearly.repeatDayOfWeekLabel - Label element.
  • yearly.repeatDayOfWeekMonth - DropDownList element.
  • yearly.panel - Yearly repeat pattern HTML div container element.
  • resetExceptions - Checkbox element.
  • resetExceptionsLabel - Label element.
  • resetExceptionsContainer - Checkbox and Label container element.
  • repeat - DropDownList element.
  • repeatLabel - Label element.
  • repeatContainer - DropDownList and Label container element.
  • repeatPanel - HTML div container element for repeat patterns.
  • repeatEndPanelContainer - HTML div container element for the repeat pattern's end.
  • repeatEndPanel.repeatEndNever - RadioButton element.
  • repeatEndPanel.repeatEndNeverLabel - Label element.
  • repeatEndPanel.repeatEndAfter - RadioButton element.
  • repeatEndPanel.repeatEndAfterValue - numberInput element.
  • repeatEndPanel.repeatEndAfterLabel - Label element.
  • repeatEndPanel.repeatEndOn - RadioButton element.
  • repeatEndPanel.repeatEndOnValue - DateTimeInput element.
  • repeatEndPanel.repeatEndOnLabel - Label element.

Code examples

Bind to the editDialogClose event of jqxScheduler.

<template>
  <JqxScheduler ref="myScheduler" @editDialogClose="onEditDialogClose($event)"
    :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');
    },
    methods: {
      onEditDialogClose: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the view type is changed. This event has five arguments: date, from and to - jqxDate objects, oldViewType and newViewType - strings.

Code examples

Bind to the viewChange event of jqxScheduler.

<template>
  <JqxScheduler ref="myScheduler" @viewChange="onViewChange($event)"
    :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');
    },
    methods: {
      onViewChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Adds a new appointment.

<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');
      let appointment1 = {
        id: "id1",
        description: "",
        subject: "New appointment",
        calendar: "Room 1",
        start: new Date(2018, 10, 23, 9, 0, 0),
        end: new Date(2018, 10, 23, 16, 0, 0)
      }
      this.$refs.myScheduler.addAppointment(appointment1);
    }
  }
</script>

Begins an update process and stops the Scheduler's rendering and appointments rendering.

<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');
      this.$refs.myScheduler.beginAppointmentsUpdate();
      this.$refs.myScheduler.setAppointmentProperty('id1', 'borderColor', 'red');
      this.$refs.myScheduler.endAppointmentsUpdate();
    }
  }
</script>

Clears the appointments selection.

<template>
  <div>
    <JqxScheduler ref="myScheduler"
           :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
           :appointmentDataFields="appointmentDataFields" :views="views" />
    <JqxButton @click="select()">Select</JqxButton>
    <JqxButton @click="unselect()">Unselect</JqxButton>
  </div>
</template>

<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxScheduler,
      JqxButton
    },
    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: {
      select: function () {
        this.$refs.myScheduler.selectAppointment('id1');
      },
      unselect: function () {
        this.$refs.myScheduler.clearAppointmentsSelection();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
    margin-right: 20px;
  }
</style>

Clears cells selection.

<template>
  <div>
    <JqxScheduler ref="myScheduler"
           :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
           :appointmentDataFields="appointmentDataFields" :views="views" />
    <JqxButton style="margin-top:20px;" :width="150" @click="clearSelection()">Clear Cells Selection</JqxButton>
  </div>
</template>
<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxScheduler,
      JqxButton
    },
    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: {
      clearSelection: function () {
        this.$refs.myScheduler.clearSelection();
      }
    }
  }
</script>

Closes the context menu.

<template>
  <div>
    <JqxScheduler ref="myScheduler"
           :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
           :appointmentDataFields="appointmentDataFields" :views="views" />
    <JqxButton @click="open()">Open Menu</JqxButton>
    <JqxButton @click="close()">Close Menu</JqxButton>
  </div>
</template>

<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxScheduler,
      JqxButton
    },
    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: {
      open: function () {
        this.$refs.myScheduler.openMenu(200, 200);
      },
      close: function () {
        this.$refs.myScheduler.closeMenu();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
    margin-right: 20px;
  }
</style>

Closes the edit dialog.

<template>
  <div>
    <JqxScheduler ref="myScheduler"
           :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
           :appointmentDataFields="appointmentDataFields" :views="views" />
    <JqxButton @click="open()">Open Menu</JqxButton>
    <JqxButton @click="close()">Close Menu</JqxButton>
  </div>
</template>

<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxScheduler,
      JqxButton
    },
    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: {
      open: function () {
        this.$refs.myScheduler.openDialog(10, 20);
      },
      close: function () {
        this.$refs.myScheduler.closeDialog();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
    margin-right: 20px;
  }
</style>

Deletes an appointment.

<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');
      this.$refs.myScheduler.deleteAppointment('id1');
    }
  }
</script>

Destroys the Scheduler and removes it from the DOM.

<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');
      this.$refs.myScheduler.destroy();
    }
  }
</script>

Ends the update process and resumes the Scheduler's rendering. The method works together with the beginAppointmentsUpdate.

<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');
      this.$refs.myScheduler.beginAppointmentsUpdate();
      this.$refs.myScheduler.setAppointmentProperty('id1', 'borderColor', 'red');
      this.$refs.myScheduler.endAppointmentsUpdate();
    }
  }
</script>

Scrolls to an appointment if it is out of the visible area.

<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>

Scrolls to a Date.

<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.ensureVisible(new jqx.date(2018, 12, 24));
    }
  }
</script>

Exports jqxScheduler's data to ICS, Excel, HTML, XML, JSON, CSV or TSV. See also the exportSettings property

<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');
      this.$refs.myScheduler.exportData('xls');
    }
  }
</script>

Focuses the Scheduler.

<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');
      this.$refs.myScheduler.focus();
    }
  }
</script>

Gets the value of an Appointment property.

<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');
      const value = this.$refs.myScheduler.getAppointmentProperty('id1','subject');
    }
  }
</script>

Gets the cells selection. Returns an object with the following members:

• from - jqxDate which represents the selection's start.
• to - jqxDate which represents the selection's end.
• resourceId - selection's resource Id if resources are enabled.

<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');
      const value = this.$refs.myScheduler.getSelection();
    }
  }
</script>

Gets the appointments loaded in jqxScheduler. The return value is an Array of objects. Each object has the appointmentDataFields. See appointmentDataFields property.

<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');
      const value = this.$refs.myScheduler.getAppointments();
    }
  }
</script>

Gets the appointments loaded in jqxScheduler. The return value is an Array of objects. Each object has the fields defined in the dataAdapter's source object.

<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');
      const value = this.$refs.myScheduler.getDataAppointments();
    }
  }
</script>

Hides appointments by given resourceId.

<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');
      this.$refs.myScheduler.hideAppointmentsByResource('Room 1');
    }
  }
</script>

Opens the context menu.

<template>
  <div>
    <JqxScheduler ref="myScheduler"
           :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
           :appointmentDataFields="appointmentDataFields" :views="views" />
    <JqxButton @click="open()">Open Menu</JqxButton>
    <JqxButton @click="close()">Close Menu</JqxButton>
  </div>
</template>

<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxScheduler,
      JqxButton
    },
    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: {
      open: function () {
        this.$refs.myScheduler.openMenu(200, 200);
      },
      close: function () {
        this.$refs.myScheduler.closeMenu();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
    margin-right: 20px;
  }
</style>

Opens the edit dialog.

<template>
  <div>
    <JqxScheduler ref="myScheduler"
           :date="date" :source="source" :view="'weekView'" :showLegend="true" :resources="resources"
           :appointmentDataFields="appointmentDataFields" :views="views" />
    <JqxButton @click="open()">Open Menu</JqxButton>
    <JqxButton @click="close()">Close Menu</JqxButton>
  </div>
</template>

<script>
  import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxScheduler,
      JqxButton
    },
    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: {
      open: function () {
        this.$refs.myScheduler.openDialog(10, 20);
      },
      close: function () {
        this.$refs.myScheduler.closeDialog();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 20px;
    margin-right: 20px;
  }
</style>

Selects an appointment.

<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');
      this.$refs.myScheduler.selectAppointment('id1');
    }
  }
</script>

Sets the value of an appointment's property.

<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');
      this.$refs.myScheduler.beginAppointmentsUpdate();
      this.$refs.myScheduler.setAppointmentProperty('id1', 'borderColor', 'red');
      this.$refs.myScheduler.endAppointmentsUpdate();
    }
  }
</script>

Selects a cell.

<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');
      this.$refs.myScheduler.selectCell(new jqx.date(2018, 11, 23),false,null);
    }
  }
</script>

Shows appointments by given resourceId.

<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');
      this.$refs.myScheduler.hideAppointmentsByResource('Room 1');
      this.$refs.myScheduler.showAppointmentsByResource('Room 1');
    }
  }
</script>

Returns the scrollbable width.

<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');
      const value = this.$refs.myScheduler.scrollWidth();
    }
  }
</script>

Returns the scrollbable height.

<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');
      const value = this.$refs.myScheduler.scrollHeight();
    }
  }
</script>

Scrolls horizontally to a given position.

<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');
      this.$refs.myScheduler.scrollLeft(0);
    }
  }
</script>

Scrolls vertically to a given position.

<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');
      this.$refs.myScheduler.scrollTop(10);
    }
  }
</script>