Our pure JavaScript Scheduler component


Post by xander »

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.


Post by mats »

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


Post by xander »

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

Post by xander »

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.


Post by alex.l »

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!

All the best,
Alex


Post by xander »

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!

Attachments
bryntum-support.zip
(103.21 KiB) Downloaded 37 times

Post by xander »

Hello again,

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

Thanks.


Post by joakim.l »

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;

Regards
Joakim


Post by xander »

That's excellent news, thanks a lot.

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


Post Reply