Theme does not apply in jqxScheduler (Vue)

[lmarc001Participant]

Hi, so I tried to apply the material theme for the jqxScheduler but it does not want to work. Anyone know what I am doing wrong?

<template>

<div class=”container-fluid”>

<div class=”row”>
<div class=”col pt-5″>
<h1 class=”mt-5 mb-4 col-5″>{{exhibitor.name}}</h1>
<h3> {{this.conferenceData.db_name}} – {{this.conferenceData.description}} </h3>
</div>
<div class=”col pt-5″>

</div>
</div>
<hr />
<div class=”row”>
<div class=”col-6 d-flex justify-content-center”>
<JqxScheduler class=”offset-1″ ref=”myScheduler” :showLegend=”true” v-if=”dataAdapter && source” :key=”source.localdata”
:width=”width” :height=”600″ :source=”dataAdapter” :date=”date” :view=”‘weekView'” :resources=”resources”
:appointmentDataFields=”appointmentDataFields” :theme=”‘material'” :views=”views” :dayNameFormat=”‘abbr'”
:editDialogCreate=”editDialogCreate” :editDialogOpen=”editDialogOpen” :editDialog=”true”

@appointmentDelete=”mySchedulerOnAppointmentDelete($event)”
@appointmentAdd=”mySchedulerOnAppointmentAdd($event)”
@appointmentDoubleClick=”mySchedulerOnAppointmentDoubleClick($event)”
@appointmentClick=”mySchedulerOnAppointmentClick($event)”
@appointmentChange=”mySchedulerOnAppointmentChange($event)”
@cellClick=”mySchedulerOnCellClick($event)”
@cellDoubleClick=”mySchedulerOnCellDoubleClick($event)”

/>
</div>
<!———————–>
<div class=”col-6″>
<div>
<button type=”button” class=”btn btn-primary” @click=”openAuditorsModal()”>Manage Consultants</button>
<ConsultantsModal
v-if=”openModal == true”
v-on:modal=”closeAuditorsModal”
:exhibitorData=”exhibitor”
:consultantsData=”consultants”
>
</ConsultantsModal>
</div>
<div class =”offset-2 col-8 p-3 mt-5 bg-light shadow-sm text-left” > <h5> Appointment Requests </h5> </div>
<div class=”overflow-auto offset-2 col-8 shadow-sm” style=”height: 60%;”>
<table class=”table”>
<thead>
<tr>

<th scope=”col”>Subject</th>
<th scope=”col”>Requester Email</th>
<th scope=”col”>Consultant</th>
<th scope=”col”>Date</th>
<th scope=”col”>Info</th>
</tr>
</thead>
<tbody>

<tr v-for=”(appointmentRequest) in appointmentRequests” :key=”appointmentRequest.subject”>
<template v-if=”appointmentRequest.consultant.disabled!=true”>
<td >{{appointmentRequest.subject}}</td>
<td>{{appointmentRequest.requester_user_email}} </td>
<td>{{appointmentRequest.consultant.firstname}} {{appointmentRequest.consultant.lastname}}</td>
<td> {{getFormattedRequestDate(appointmentRequest.start_at)}}</td>
<td><button type=”button” class=”btn btn-success” @click=”openRequestModal(appointmentRequest)”> <font-awesome-icon :icon=”[‘fad’, ‘info’]” /></button></td>
</template>
</tr>

<tr class=”disabledConsultants” v-for=”appointmentRequest in appointmentRequests” :key=”appointmentRequest.id”>
<template v-if=”appointmentRequest.consultant.disabled==true”>
<td >{{appointmentRequest.subject}}</td>
<td>{{appointmentRequest.requester_user_id}}</td>
<td>{{appointmentRequest.consultant.firstname}} {{appointmentRequest.consultant.lastname}} <br> <p class=”smallText”> This Consultant is disabled. </p></td>
<td> {{getFormattedRequestDate(appointmentRequest.start_at)}}</td>
<td><button type=”button” class=”btn btn-success” @click=”openRequestModal(appointmentRequest)” disabled> <font-awesome-icon :icon=”[‘fad’, ‘info’]” /></button></td>
</template>
</tr>

</tbody>
</table>
<RequestModal
v-if=”openModalRequest == true”
v-on:modal2=”closeRequestModal”
:requestData=”this.openedAppointmentRequest”
:consultantsData=”this.consultantsIdArray”
:conferenceData=”this.conference”
>
</RequestModal>
</div>

</div>
<div class=”col-6 d-flex justify-content-center”>
<JsonCSV
class= “btn btn-secondary mt-4”
:data = “json_data”
:name = this.csvName>
Download for Google Calendar
</JsonCSV>
<div class=”col-1″> </div>
<button
v-on:click=”downloadICS()”
class= “btn btn-secondary mt-4”>
Download for iCalendar, Outlook
</button>
</div>
</div>

</div>
</template>

<style>
@import “/@/public/styles/jqx.base.css”;
@import “/@/public/styles/jqx.material.css”;
</style>
<script>

import {mapMutations, mapGetters, mapActions } from ‘vuex’
import JqxScheduler from ‘jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue’
import ConsultantsModal from “@/components/ConsultantsModal.vue”;
import RequestModal from “@/components/RequestModal.vue”;
import JsonCSV from ‘vue-json-csv’;

import Vue from “vue”;

const API_URL = process.env.VUE_APP_API_URL;
const CONFERENCE_ID = process.env.VUE_APP_CONFERENCE_ID;
const VUE_APP_PSOVERVIEW_KEY = process.env.VUE_APP_PSOVERVIEW_KEY;

export default {
components: {
JqxScheduler,
ConsultantsModal,
RequestModal,
JsonCSV

},
data: function () {

return {
csvName: null,
icsName: null,
json_data: [],
conferenceData: null,
consultantsIdArray: null,
currentDay: null,
currentMonth: null,
currentYear: null,
appointmentsInfo: {},
authUserData: null,
openModal: null,
openModalRequest: null,
userExhibitor: null,
conference: null,
width: 1000,
theme: “material”,

openedAppointmentRequest: null,
// eslint-disable-next-line
date: new jqx.date(‘todayDate’),
//date: new jqx.date(parseInt(this.currentYear), parseInt(this.currentMonth), parseInt(this.currentDay)),
appointmentDataFields:
{
from: ‘start’,
to: ‘end’,
id: ‘id’,
hidden: ‘hidden’,
description: ‘description’,
location: ‘location’,
subject: ‘subject’,
//calendar: ‘calendar’,
resourceId: ‘calendar’,
//background: ‘background’,
draggable: ‘draggable’,
//borderColor: ‘borderColor’
},
resources:
{
colorScheme: ‘scheme05’,
dataField: ‘calendar’,
orientation: ‘horizontal’,
// eslint-disable-next-line
source: new jqx.dataAdapter(this.source)
},
views:
[
{ type: ‘dayView’, showWeekends: false },
{ type: ‘weekView’, workTime: { fromDayOfWeek: 1, toDayOfWeek: 5, fromHour: 7, toHour: 19 }, showWeekends: false },
{ type: ‘monthView’ }
],
// eslint-disable-next-line
dataAdapter: null,//new jqx.dataAdapter(this.source),

exportSettings: {
characterSet: null,
fileName: “Conference Schedule”
},

}
},
beforeCreate: function () {
this.source =
{
dataType: ‘array’,
dataFields: [
{ name: ‘id’, type: ‘string’ },
{ name: ‘description’, type: ‘string’ },
{ name: ‘location’, type: ‘string’ },
{ name: ‘subject’, type: ‘string’ },
{ name: ‘calendar’, type: ‘array’ },
{ name: ‘start’, type: ‘date’ },
{ name: ‘end’, type: ‘date’ },
{ name: ‘hidden’, type: ‘boolean’ }
],
id: ‘id’,
localdata:[]
};
// eslint-disable-next-line
this.dataAdapter = new jqx.dataAdapter(this.source);

},
watch: {
source: function () {
// eslint-disable-next-line
//this.dataAdapter = new jqx.dataAdapter(val);

},
consultants: function (val, o) {
if (val !== o) {
this.checkAppointments(val);
}

},
},

computed:{
…mapGetters(‘exhibitor’, [‘exhibitor’]),
…mapGetters(‘consultant’, [‘consultants’, ‘consultantsByName’]),
…mapGetters(‘appointment’, [‘appointments’, ‘appointmentRequests’]),
},

methods: {

openRequestModal(data){
this.openModalRequest = true;
this.openedAppointmentRequest = data;
},
async closeRequestModal(acceptedAppointment){
this.openModalRequest = false;
if(acceptedAppointment){

let startDate = acceptedAppointment.start_at.toString();
let endDate = acceptedAppointment.end_at.toString();

let appointmentStartYear = parseInt(startDate.substring(0, 4));
let appointmentEndYear = parseInt(endDate.substring(0, 4));

let appointmentStartMonth = parseInt(startDate.substring(6, 7))-1; //months start from 0 in this plugin, so we have to rest 1
let appointmentEndMonth = parseInt(endDate.substring(6, 7))-1;

let appointmentStartDay = parseInt(startDate.substring(8, 10));
let appointmentEndDay = parseInt(endDate.substring(8, 10));

let appointmentStartHour = parseInt(startDate.substring(11, 13));
let appointmentEndHour = parseInt(endDate.substring(11, 13));

let appointmentStartMinute = parseInt(startDate.substring(14, 17));
let appointmentEndMinute = parseInt(endDate.substring(14, 17));

let ownerConsultant = (await Vue.axios.get(API_URL + “consultants/”+ acceptedAppointment.consultant_id)).data;

let ownerNames= ownerConsultant.firstname+” “+ownerConsultant.lastname//I save the consultants name and lastname
let GenerateAppointment = {
id: acceptedAppointment.id,
description: acceptedAppointment.description,
location: acceptedAppointment.location,
subject: acceptedAppointment.subject,
calendar: ownerNames,
start: new Date(appointmentStartYear, appointmentStartMonth, appointmentStartDay, appointmentStartHour, appointmentStartMinute, 0), //year – month-1 – day – hour – min – sec
end: new Date(appointmentEndYear, appointmentEndMonth, appointmentEndDay, appointmentEndHour, appointmentEndMinute, 0),
draggable:false,
}
this.source.localdata.push(GenerateAppointment)
this.$refs.myScheduler.addAppointment(GenerateAppointment);

}
},
getFormattedRequestDate(date){
date = date.slice(0, 16)
const regEx = new RegExp(‘-‘, “g”);
date = date.replace(regEx, ‘/’)
return date;
},

checkAppointments: function(consultants){
setTimeout(()=>{
consultants.forEach(consultant=>{
if(consultant.disabled != true){
let appointments = this.source.localdata.filter(app=>app.calendar== consultant.firstname + ‘ ‘ + consultant.lastname)
if(appointments.length == 0){
//create hidden appointment
let GenerateAppointment = {
id: 999999,
description: ‘DUMMY’,
location: ‘DUMMY’,
subject: ‘DUMMY’,
calendar: consultant.firstname + ‘ ‘ + consultant.lastname,
start: new Date(), //year – month-1 – day – hour – min – sec
end: new Date(),
draggable:false,
hidden:true,
}

this.source.localdata.push(GenerateAppointment)
this.source.localdata = this.source.localdata.filter(function( app ) {
return app.calendar !== “IMPOSSIBLENAME34272638476456783875437687865763587543”; // I do this so the source.localdata gets refreshed, because vue doesnt let me assign it to itself
});

}
} else {
this.source.localdata = this.source.localdata.filter(function( app ) {
return app.calendar !== consultant.firstname + ‘ ‘ + consultant.lastname;
});
}
})
},500);

},

excelExportClick: function () {
this.$refs.myScheduler.exportData(‘xls’);
},
csvExportClick: function () {
this.$refs.myScheduler.exportData(‘csv’);
},
pdfExportClick: function () {
this.$refs.myScheduler.exportData(‘pdf’);
},

async downloadICS(){

this.$ics.download(this.icsName)

},
async createAppointments(){
for(let i = 0; i < this.appointments.length; i++){
let startDate = this.appointments[i].start_at.toString();
let endDate = this.appointments[i].end_at.toString();

let appointmentStartYear = parseInt(startDate.substring(0, 4));
let appointmentEndYear = parseInt(endDate.substring(0, 4));

let appointmentStartMonth = parseInt(startDate.substring(6, 7))-1; //months start from 0 in this plugin, so we have to rest 1
let appointmentEndMonth = parseInt(endDate.substring(6, 7))-1;

let appointmentStartDay = parseInt(startDate.substring(8, 10));
let appointmentEndDay = parseInt(endDate.substring(8, 10));

let appointmentStartHour = parseInt(startDate.substring(11, 13));
let appointmentEndHour = parseInt(endDate.substring(11, 13));

let appointmentStartMinute = parseInt(startDate.substring(14, 17));
let appointmentEndMinute = parseInt(endDate.substring(14, 17));

let ownerConsultant = (await Vue.axios.get(API_URL + “consultants/”+ this.appointments[i].consultant_id)).data;

let ownerNames= ownerConsultant.firstname+” “+ownerConsultant.lastname//I save the consultants name and lastname
let GenerateAppointment = {
id: this.appointments[i].id,
description: this.appointments[i].description,
location: this.appointments[i].location,
subject: this.appointments[i].subject,
calendar: ownerNames,
start: new Date(appointmentStartYear, appointmentStartMonth, appointmentStartDay, appointmentStartHour, appointmentStartMinute, 0), //year – month-1 – day – hour – min – sec
end: new Date(appointmentEndYear, appointmentEndMonth, appointmentEndDay, appointmentEndHour, appointmentEndMinute, 0),
draggable:false,
}

this.source.localdata.push(GenerateAppointment)
}

for(let i = 0; i < this.appointments.length; i++){
console.log(“iteracion”)
let ownerConsultantJSON = (await Vue.axios.get(API_URL + “consultants/”+ this.appointments[i].consultant_id)).data;

let googleFormatStartDate = this.appointments[i].start_at.substring(5,7)+”/”+this.appointments[i].start_at.substring(8,10)+”/”+this.appointments[i].start_at.substring(0,4);
let googleFormatEndDate = this.appointments[i].end_at.substring(5,7)+”/”+this.appointments[i].end_at.substring(8,10)+”/”+this.appointments[i].end_at.substring(0,4);

let googleFormatStartHour = this.appointments[i].start_at.substring(11,16);
let googleFormatEndHour = this.appointments[i].end_at.substring(11,16);

let newJsonAppointment = {
‘Subject’: this.appointments[i].subject,
‘Description’: “Conference: “+ this.conferenceData.db_name+ ” “+this.appointments[i].description+” Requester: “+this.appointments[i].requester_user_email+” Consultant: “+ownerConsultantJSON.firstname+” “+ownerConsultantJSON.lastname,
‘Start Date’: googleFormatStartDate,//this.appointments[i].start_at,
‘End Date’: googleFormatEndDate,//this.appointments[i].end_at,
‘Start Time’: googleFormatStartHour, //this.appointments[i].start_at,
‘End Time’: googleFormatEndHour,//this.appointments[i].end_at,
‘Location’: this.conferenceData.db_name,//this.appointments[i].start_at
}
this.json_data.push(newJsonAppointment);
console.log(this.json_data)

let subject = this.appointments[i].subject;
let description = this.appointments[i].description+” Requester: “+this.appointments[i].requester_user_email+” Consultant: “+ownerConsultantJSON.firstname+” “+ownerConsultantJSON.lastname;
let start = this.appointments[i].start_at;
let end = this.appointments[i].end_at;
let organizer = this.conferenceData.db_name;
console.log(subject,description,start,stop,organizer)

//let now = new Date()
//begin = new Date(now.getFullYear(), now.getMonth() + 1, now.getDay(), now.getHours(), now.getMinutes(), 0, 0)
//end = new Date(now.getFullYear(), now.getMonth() + 1, now.getDay(), now.getHours() + 1, now.getMinutes(), 0, 0)

this.$ics.addEvent(null,subject,description,this.conferenceData.db_name,start,end,”Link”,organizer,null)
}
},

mySchedulerOnAppointmentAdd: async function (event) {
console.log(“adding appointment”)
const appointmentAdd = event.args.appointment;
console.log(appointmentAdd)
event.args.appointment.location = “ee” //MIRAR ESTO
this.source.localdata.push(appointmentAdd)
let createAppointment = {}

createAppointment.description = appointmentAdd.description;
createAppointment.location = appointmentAdd.location;
createAppointment.subject = appointmentAdd.subject;

const regEx = new RegExp(‘,’, “g”);
let startFormatDate = appointmentAdd.from.toString(“yyyy, MM, dd HH:mm:ss”)//
startFormatDate = startFormatDate.replace(regEx, ‘-‘)
startFormatDate = startFormatDate.replace(/\s/g, ”);
startFormatDate = [startFormatDate.slice(0, 10), ‘ ‘, startFormatDate.slice(10)].join(”);
startFormatDate = startFormatDate+”+00″
createAppointment.start_at = startFormatDate;

let endFormatDate = appointmentAdd.to.toString(“yyyy, MM, dd HH:mm:ss”)//
endFormatDate = endFormatDate.replace(regEx, ‘-‘)
endFormatDate = endFormatDate.replace(/\s/g, ”);
endFormatDate = [endFormatDate.slice(0, 10), ‘ ‘, endFormatDate.slice(10)].join(”);
endFormatDate = endFormatDate+”+00″
createAppointment.end_at = endFormatDate;

let completeName = appointmentAdd.resourceId.split(” “);
let appointmentsInfo = {‘FirstName’: completeName[0], ‘LastName’: completeName[1]};
await this.getConsultantsByName(appointmentsInfo)
createAppointment.consultant_id = this.consultantsByName[0].id;
createAppointment.requester_user_id = this.consultantsByName[0].id
createAppointment.requested = true;
createAppointment.accepted = true;
createAppointment.rejected = false;

if(createAppointment.location == null){
createAppointment.location == this.conferenceData.db_name;
}

if(createAppointment.subject == null || createAppointment.description == null){
alert(“Please add a Subject and a Description”)
}

console.log(createAppointment)

await Vue.axios.post(API_URL+”appointments/”, createAppointment);

},
mySchedulerOnAppointmentDelete: async function (event) {
const appointment = event.args.appointment;

await Vue.axios.delete(API_URL+”appointments/”+appointment.id);
console.log(“deleting appointment”);
},
mySchedulerOnCellDoubleClick: function (event) {
console.log(event)
this.$refs.myScheduler.editDialog=true;
},
mySchedulerOnAppointmentClick: function (event) {

this.$refs.myScheduler.editDialog=true;
const appointment = event.args.appointment;
console.log(appointment)
},
mySchedulerOnAppointmentDoubleClick: function (event) {

this.$refs.myScheduler.editDialog=true;
const appointment = event.args.appointment;
console.log(appointment)
},
mySchedulerOnAppointmentChange: async function (event) {
const appointment = event.args.appointment;
let updateAppointment = {}

updateAppointment.description = appointment.description;
updateAppointment.location = appointment.location;
updateAppointment.subject = appointment.subject;

const regEx = new RegExp(‘,’, “g”);
let startFormatDate = appointment.from.toString(“yyyy, MM, dd HH:mm:ss”)//
startFormatDate = startFormatDate.replace(regEx, ‘-‘)
startFormatDate = startFormatDate.replace(/\s/g, ”);
startFormatDate = [startFormatDate.slice(0, 10), ‘ ‘, startFormatDate.slice(10)].join(”);
startFormatDate = startFormatDate+”+00″
updateAppointment.start_at = startFormatDate;

let endFormatDate = appointment.to.toString(“yyyy, MM, dd HH:mm:ss”)//
endFormatDate = endFormatDate.replace(regEx, ‘-‘)
endFormatDate = endFormatDate.replace(/\s/g, ”);
endFormatDate = [endFormatDate.slice(0, 10), ‘ ‘, endFormatDate.slice(10)].join(”);
endFormatDate = endFormatDate+”+00″
updateAppointment.end_at = endFormatDate;

let completeName = appointment.resourceId.split(” “);
let appointmentsInfo = {‘FirstName’: completeName[0], ‘LastName’: completeName[1]};
await this.getConsultantsByName(appointmentsInfo)
updateAppointment.consultant_id = this.consultantsByName[0].id;

await Vue.axios.put(API_URL+”appointments/”+appointment.id, updateAppointment);
},
mySchedulerOnCellClick: function (event) {
const cell = event.args.cell;
console.log(cell)
},
openAuditorsModal() {
this.openModal = true;
},
async closeAuditorsModal(updatedConsultant) {
if(updatedConsultant){
if(updatedConsultant.disabled==true){
let payload = {‘ConsultantId’: updatedConsultant.id};
let appByCons = (await Vue.axios.post(API_URL+”appointments/getbyconsultantId/”, payload)).data;
for(let i = 0; i<appByCons.length; i++){
let updateAppointment = {}
updateAppointment.accepted=false;
await Vue.axios.put(API_URL+”appointments/”+appByCons[i].id, updateAppointment);
}
}

this.requestsInfo = {‘ConsultantArray’: this.consultantsIdArray, ‘Conference’: this.conference};
await this.getRequests(this.requestsInfo)

}else{
this.openModal = false;
await this.getConsultantsByExhibitor(this.exhibitor.id);
}
},

editDialogCreate: function (dialog,fields) {

console.log(dialog)
// hide repeat option
fields.repeatContainer.hide();
// hide repeat option
fields.repeat.hide();
// hide status option
fields.statusContainer.hide();
// hide timeZone option
fields.timeZoneContainer.hide();
// hide color option
fields.colorContainer.hide();
// hide allday option
fields.allDayContainer.hide();
// hide repeat label option
fields.repeatLabel.hide();

},

editDialogOpen: function (editAppointment) {
if (!editAppointment && this.printButton) {
this.printButton.disabled = true;
}
else if (editAppointment && this.printButton) {
this.printButton.disabled = false;
}
},

…mapMutations(‘exhibitor’, [‘setExhibitor’]),

…mapActions(‘exhibitor’,[‘getExhibitor’]),

…mapActions(‘consultant’,[‘getConsultantsByExhibitor’, ‘getConsultantsByName’]),

…mapActions(‘appointment’,[‘getAppointments’, ‘getRequests’]),
},

async created(){
this.conference = CONFERENCE_ID;
this.authUserData = (await this.$store.dispatch(‘auth/GET_USERDATA’)).data;
this.conferenceData = (await Vue.axios.get(“https://coredev.api.documedias.systems/api/eventyears/”+ CONFERENCE_ID, { headers: { “x-api-key”: VUE_APP_PSOVERVIEW_KEY} })).data
let exhibitorsArray= (await Vue.axios.get(“https://mantel-api.mobile.documedias.systems/v2/conferences/”+CONFERENCE_ID+”/exhibitors”)).data //get all exs of conference
this.userExhibitor = exhibitorsArray.filter(ex=>ex.email == this.authUserData.emailBusiness) //filter exs by email
console.log(this.conferenceData)
this.setExhibitor(this.userExhibitor[0]) //call this to set the exhibitor in the store

await this.getConsultantsByExhibitor(this.exhibitor.id);

let consultantsByExhibitorArray = this.consultants
this.consultantsIdArray = consultantsByExhibitorArray.map(a => a.id);

this.appointmentsInfo = {‘ConsultantArray’: this.consultantsIdArray, ‘Conference’: CONFERENCE_ID, ‘Accepted’: true };
await this.getAppointments(this.appointmentsInfo)

this.requestsInfo = {‘ConsultantArray’: this.consultantsIdArray, ‘Conference’: CONFERENCE_ID};
await this.getRequests(this.requestsInfo)

await this.createAppointments();
this.csvName= this.conferenceData.db_name+” schedule.csv”,
this.icsName= this.conferenceData.db_name+” schedule”,
// eslint-disable-next-line
this.dataAdapter = new jqx.dataAdapter(this.source);

} ,

}
</script>

Thanks,
Marc

[HristoParticipant]

Hello Marc,

Did you include the material theme in your project?
Because I try this tutorial and it seems to work fine (it has included this theme by default).
Please, take a look at this example:

<template>
  <JqxScheduler
    ref="myScheduler"
    :theme="'material'"
    :width="getWidth"
    :height="600"
    :source="dataAdapter"
    :date="date"
    :showLegend="true"
    :view="'weekView'"
    :appointmentDataFields="appointmentDataFields"
    :resources="resources"
    :views="views"
  />
</template>

<script>
/* eslint-disable */
import JqxScheduler from "jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue";

export default {
  components: {
    JqxScheduler,
  },
  data: function() {
    return {
      getWidth: 650,
      date: new jqx.date(2016, 11, 23),
      appointmentDataFields: {
        from: "start",
        to: "end",
        id: "id",
        description: "description",
        location: "location",
        subject: "subject",
        resourceId: "calendar",
      },
      resources: {
        colorScheme: "scheme05",
        dataField: "calendar",
        source: new jqx.dataAdapter(this.source),
      },
      views: ["dayView", "weekView", "monthView"],
    };
  },
  beforeCreate: function() {
    const generateAppointments = function() {
      const appointments = new Array();
      const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        location: "",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2016, 10, 23, 9, 0, 0),
        end: new Date(2016, 10, 23, 16, 0, 0),
      };
      const appointment2 = {
        id: "id2",
        description: "",
        location: "",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2016, 10, 24, 10, 0, 0),
        end: new Date(2016, 10, 24, 15, 0, 0),
      };
      const appointment3 = {
        id: "id3",
        description: "",
        location: "",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2016, 10, 27, 11, 0, 0),
        end: new Date(2016, 10, 27, 13, 0, 0),
      };
      const appointment4 = {
        id: "id4",
        description: "",
        location: "",
        subject: "New Projects Planning",
        calendar: "Room 2",
        start: new Date(2016, 10, 23, 16, 0, 0),
        end: new Date(2016, 10, 23, 18, 0, 0),
      };
      const appointment5 = {
        id: "id5",
        description: "",
        location: "",
        subject: "Interview with James",
        calendar: "Room 1",
        start: new Date(2016, 10, 25, 15, 0, 0),
        end: new Date(2016, 10, 25, 17, 0, 0),
      };
      const appointment6 = {
        id: "id6",
        description: "",
        location: "",
        subject: "Interview with Nancy",
        calendar: "Room 4",
        start: new Date(2016, 10, 26, 14, 0, 0),
        end: new Date(2016, 10, 26, 16, 0, 0),
      };
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      appointments.push(appointment4);
      appointments.push(appointment5);
      appointments.push(appointment6);
      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: "start", type: "date" },
        { name: "end", type: "date" },
      ],
      id: "id",
      localData: generateAppointments(),
    };
    this.dataAdapter = new jqx.dataAdapter(this.source);
  },
  mounted: function() {
    this.$refs.myScheduler.ensureAppointmentVisible("id1");
  }
};
</script>

<style src="./assets/styles/jqwidgets/jqx.base.css"></style>
<style src="./assets/styles/jqwidgets/jqx.material-green.css"></style>
<style src="./assets/styles/jqwidgets/jqx.material.css"></style>

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts