Bryntum Support Forums

Posted: **Fri Dec 02, 2022 10:51 am**

Hello,

I'm trying to implement Scheduler Pro (v5.2.4) into our application. Because we use a REST API, I'm connecting the Scheduler to our backend using AjaxStores, as in this example:

https://bryntum.com/products/schedulerpro/examples-scheduler/php/

The main difference between mine and aformentioned code is that my Event and Resource stores look as follows, to accomodate a Bearer token and "same-origin" fetch option.

{
    headers: requestHeaders,
    params: requestParams,
    fetchOptions: requestOptions,

createUrl: requestUrl,
readUrl: requestUrl,
updateUrl: requestUrl,
deleteUrl: requestUrl,

autoLoad: true,
autoCommit: true,
sendAsFormData: false,
useRestfulMethods: true,
}

This approach works fine for the Calendar and Grid. In the case of the Scheduler Pro (I haven't been able to test with the regular one, as the repo won't allow me to download it), records are retrieved correctly, but event changes are not committed back to the API. The create/update and delete requests just never fire, where for the other products they do.

Manual commits don't appear to do anything either, whether I call them sync or async.

I assume this is a case of the Scheduler doing things slightly differently with its AssignmentStore or project settings, but, despite adding those, I haven't quite found the right combination to make things work. I was hoping that you could easily identify what I'm missing and help me on my way?

Thanks in advance.

Posted: **Fri Dec 02, 2022 8:30 pm**

Could you please post your complete test code so we can run / inspect it?

Posted: **Mon Dec 05, 2022 1:48 pm**

<script lang="ts" setup>
import { EventStore, ResourceStore, SchedulerPro, Toast } from "@bryntum/schedulerpro";
import { onMounted } from "vue";

..

const requestHeaders = {
  Authorization: "Bearer token",
  "Content-Type": "application/json",
};

const requestParams = {
  bla: "bla",
};

const requestOptions = {
  credentials: "same-origin",
};

..

onMounted(() => {
  const scheduler = new SchedulerPro({
    appendTo: "scheduler-element",
    startDate: new Date(2018, 4, 21, 6),
    endDate: new Date(2018, 4, 21, 18),
    viewPreset: "hourAndDay",
    rowHeight: 50,
    barMargin: 5,
    eventColor: "blue",
    passStartEndParameters: true,

features: {
  eventEdit: {
    items: {
      resourceField: {
        displayField: "name",
      },
    },
  },
},

columns: [
  {
    text: "Name",
    field: "name",
    width: 165,
    type: "resourceInfo",
  },
],

resourceStore: new ResourceStore({
  headers: requestHeaders,
  params: requestParams,
  fetchOptions: requestOptions,

  createUrl: resourceRequestUrl,
  readUrl: resourceRequestUrl,
  updateUrl: resourceRequestUrl,
  deleteUrl: resourceRequestUrl,

  autoLoad: true,
  autoCommit: true,
  sendAsFormData: false,
  useRestfulMethods: true,
}),

eventStore: new EventStore({
  headers: requestHeaders,
  params: requestParams,
  fetchOptions: requestOptions,

  createUrl: eventRequestUrl,
  readUrl: eventRequestUrl,
  updateUrl: eventRequestUrl,
  deleteUrl: eventRequestUrl,

  autoLoad: true,
  autoCommit: true,
  sendAsFormData: false,
  useRestfulMethods: true,
}),

tbar: [
  {
    type: "button",
    ref: "reloadButton",
    icon: "b-fa b-fa-sync",
    text: "Reload scheduler",
    async onAction() {
      await Promise.all([
        scheduler.resourceStore.load(),
        scheduler.eventStore.load(),
      ]);
      Toast.show("Data reloaded");
    },
  },
  {
    type: "button",
    ref: "resetButton",
    color: "b-red",
    icon: "b-fa b-fa-recycle",
    text: "Reset database",
    async onAction() {
      await Promise.all([
        scheduler.resourceStore.load({ reset: true }),
        scheduler.eventStore.load({ reset: true }),
      ]);
      Toast.show("Database was reset");
    },
  },
],
  });
});
</script>

<template>
  <scheduler-component></scheduler-component>
</template>

Posted: **Wed Dec 07, 2022 10:54 am**

Good morning.

Have you been able to confirm whether I'm doing something wrong or if this is a SchedulerPro problem? Do you need anything else from me? Thanks a lot.

Posted: **Thu Dec 08, 2022 6:06 am**

Hi xander,

Could you please post a runnable example here that we can build, run and debug? As you mentioned, it's working fine here https://bryntum.com/products/schedulerpro/examples-scheduler/php/ , visually I see no important difference via your code and the code in our demo, so we need to run your code and check it deeply.

Just remove node_modules folder, zip your application and attach here.

Thank you!

Posted: **Thu Dec 08, 2022 4:58 pm**

Hi Alex,

Please see attached. Do note it sort of requires an API endpoint to at least return a successful response to the read first.

The main difference I see is that the example page appears to use the regular Scheduler, whereas I'm using the Pro variety. I've made the assumption that that version might require additional code, I just don't know which bits I've overlooked (and attached approach works fine for the Calendar/Grid).

I hope it will help you find a direction to point me in though. Thanks!

Posted: **Mon Dec 12, 2022 5:48 pm**

Hello again,

Has above code shed any light on the issue yet or are you still unable to reproduce?

Thanks.

Posted: **Wed Dec 14, 2022 5:04 pm**

Hi!

We have reproduced this bug, and we will see to it that it is fixed:
Issue link

As a workaround, you could reset autoCommit on each store after the SchedulerPro is created.

const scheduler = new SchedulerPro({
...config
});

scheduler.eventStore.autoCommit = true;
scheduler.taskStore.autoCommit = true;

Posted: **Thu Dec 15, 2022 10:11 am**

That's excellent news, thanks a lot.

I will use the workaround for now then and wait for the fix proper.

Bryntum Support Forums

[VUE 3] Auto commit issue

[VUE 3] Auto commit issue

Re: [VUE 3] Auto commit issue

Re: [VUE 3] Auto commit issue

Re: [VUE 3] Auto commit issue

Re: [VUE 3] Auto commit issue

Re: [VUE 3] Auto commit issue

Re: [VUE 3] Auto commit issue

Re: [VUE 3] Auto commit issue

Re: [VUE 3] Auto commit issue