jQuery UI Widgets Forums Vue Theme does not apply in jqxScheduler (Vue)

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 1 year, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • lmarc001
    Participant

    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


    Hristo
    Participant

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.