I want to make a scheduler with jqwidget and a java spring boot backend where i fetch data from my database.
Now I always run in following error:

main.js:8 [Vue warn]: Error in mounted hook: "TypeError: d.clearTime is not a function"

found in

---> <JqxScheduler> at node_modules/jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue
       <SchedulerComponent> at src/App.vue
         <Root>

TypeError: d.clearTime is not a function
    at c.<computed>.getVisibleDate (jqxscheduler.js:8:24831)
    at c.<computed>.getViewStart (jqxscheduler.js:8:23913)
    at c.<computed>._initializeColumns (jqxscheduler.js:8:180045)
    at c.<computed>._render (jqxscheduler.js:8:63977)
    at i (jqxscheduler.js:8:45506)
    at resourcesDataView.update (jqxscheduler.js:8:49947)
    at a.jqx.scheduler.dataView.databind (jqxscheduler.api.js:8:95388)
    at c.<computed>.databind (jqxscheduler.js:8:50071)
    at c.<computed>.render (jqxscheduler.js:8:63157)
    at c.<computed>.createInstance (jqxscheduler.js:8:21004)

I am not sure if the problem comes from the difference between the appointmentDataFields and the other dataFields.

App.vue

<template>
  <div>
    <jqx-scheduler
        :width="getWidth()"
        :date="date"
        :appointment-data-fields="appointmentDataFields"
        :resources="resources"
        :views="views"
        :source="schedulerSource">
    </jqx-scheduler>
  </div>
</template>

<script>
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScheduler from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler';
const apiURL = "http://localhost:8080/api/calendar";

export default {
  name: 'SchedulerComponent',
  components: {
    JqxScheduler
  },
  data() {
    return {
      getWidth: () => '100%',
      date: new Date(2016, 11, 23),
      appointmentDataFields: {
        appointment_id: 'int',
        category: 'string',
        date: 'date',
        time: 'time',
        customer: 'string',
        employee: 'string',
        information: 'string',
        telnr: 'string',
        location: 'string'
      },
      resources: {
        colorScheme: 'scheme05',
        dataField: 'calendar',
        source: [] // Initialize as an empty array
      },
      views: [
        'dayView',
        'weekView',
        'monthView'
      ],
      schedulerSource: {} // Initialize as null
    };
  },
  async mounted() {
    try {
      const response = await fetch(apiURL);
      const appointments = await response.json();

      // Convert dates and times from string to Date objects
      const convertedAppointments = this.convertAppointments(appointments);

      // Map appointments to match jqxScheduler's expected structure
      this.schedulerSource = {
        dataType: 'array',
        dataFields: [
          {name: 'appointment_id', type: 'int'},
          {name: 'category', type: 'string'},
          {name: 'date', type: 'date'},
          {name: 'time', type: 'time'},
          {name: 'customer', type: 'string'},
          {name: 'employee', type: 'string'},
          {name: 'information', type: 'string'},
          {name: 'telnr', type: 'string'},
          {name: 'location', type: 'string'}
        ],
        id: 'appointment_id',
        localData: convertedAppointments
      };

      // Set the scheduler's resources source
      this.resources.source = this.schedulerSource;
    } catch (error) {
      console.error("Error loading appointments:", error);
    }
  },
  methods: {
    convertAppointments(appointments) {
      // Convert date and time strings to Date objects
      return appointments.map(appointment => {
        return {
          ...appointment,
          date: new Date(appointment.date),
          time: new Date(appointment.time)
        };
      });
    }
  }
};
</script>

<style>
/* Add any custom styles here */
</style>

Database structure:

I tried to remove the time field but it didn’t work. I hope someone has a solution for this problem (: