Our pure JavaScript Scheduler component


Post by ayksen »

Hi

When i change scheduler component's schedulerInstance.feature.pan to true (and eventDragCreateFeature to false) it doesn't activate that feature. What should i do?

ps: i also tried panFeature property of component

Is there anything else to switch pan and eventdragcreate features in real time?


Post by pmiklashevich »

Hello,

Each feature has https://www.bryntum.com/docs/scheduler/#Scheduler/feature/Pan#config-disabled config. If a feature is disabled by default (like the Pan feature), it will not be included. If you're planning to enable it later you need to pass its config but set the disabled config to true. For example:

const scheduler = new Scheduler({
    features : {
        pan : {
            disabled : true
        },
        eventDragCreate : true
    },

There is a small bug in Pan feature, so it doesn't check if the feature is disabled or not, it checks only if the eventDragFeature is enabled.
https://github.com/bryntum/support/issues/1986
So meanwhile, please configure Pan feature enabled by default and eventDragCreate disabled by default.

const scheduler = new Scheduler({
    features : {
        pan : true,
        eventDragCreate : {
            disabled : true
        }
    },

Then you can change the value at runtime:

// Activate EventDragCreate feature
scheduler.features.pan.disabled = true;
scheduler.features.eventDragCreate.disabled = false;

// Activate Pan feature
scheduler.features.eventDragCreate.disabled = true;
scheduler.features.pan.disabled = false;

In case of the Vue integration it works pretty similar. Let's take a look at Scheduler/examples/vue/javascript/advanced demo.
First get it up and running by

npm install
npm run serve

Then modify Scheduler/examples/vue/javascript/advanced/src/components/scheduler/schedulerConfig.js

    features : {
        pan : true,
        eventDragCreate : {
            disabled : true
        },

Go to https://localhost:8080/#/
The Pan feature works.
To switch at runtime you also need to set the "disabled" config correspondingly.
You can try it out in console. Note that bryntum.query('scheduler') returns the schedulerInstance. We use it for debugging purposes. So it will work in your code too, just refer to the schedulerInstance.

// Activate EventDragCreate feature
bryntum.query('scheduler').features.pan.disabled = true;
bryntum.query('scheduler').features.eventDragCreate.disabled = false;

Now, let me clarify when to use scheduler { features : { pan : {...}}} vs scheduler : { panFeature : {}}.
In the Vue wrapper we created some configs/properties which a mapped to the vanilla configs. The same is true for features. So the recommended way is to pass individual features as panFeature, but for that you need to configure component as:

<scheduler
  :panFeature="schedulerConfig.panFeature"
/>

If there is a missing config or property there is an option to use ":config" config in the component. This is what we do in the Advanced demo. If you check out Scheduler/examples/vue/javascript/advanced/src/views/Home.vue or Scheduler/examples/vue/javascript/advanced/src/views/Tasks.vue you will see:

<template>
    <div class="home">
        <scheduler
            ref="scheduler"
            :config="schedulerConfig"
        />
    </div>
</template>

That means that if you have "panFeature" config in your "schedulerConfig", it will be ignored, because vanilla Scheduler doesn't have "panFeature" config.

You can find more info here: https://www.bryntum.com/docs/scheduler/#guides/integration/vue.md#supported-options

Note, there is a confusion in our example, in Scheduler/examples/vue/javascript/advanced/src/components/scheduler/tasksConfig.js
It has both features : {} config and individual feature, for example eventDragFeature : {}. But the individual config is not applied to the scheduler. It's ignored. We will clean up the demo and move all feature configs to the "features". But please keep in mind that we promote using individual configs if possible. In the future we're planning to autogenerate wrappers, so all the features and configs/properties will be present. Therefore the global ":config". will be obsolete.

Best regards,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by ayksen »

Thank you very much. It helped me for pan. But when i extend your logic with eventDragSelect , it gives me:
"Error: Cannot combine this feature with Pan or EventDragCreate features" error

my config is like that:

  pan:false,
      eventDragCreate : {
          disabled : true
      }  ,
      eventDragSelect : true,

actually i can abandon pan behavior if there is a bug and switch between eventDragSelect- eventDragCreate would be more useful for me. what am i doing wrong?

thanks in advance.

Last edited by ayksen on Fri Nov 27, 2020 7:02 pm, edited 1 time in total.

Post by ayksen »

for config i tried :

 pan: false,
      eventDragCreate : {
        disable:false,
      },
      eventDragSelect : false,

and at my switch func:

 var eventdragCreate = bryntum.query('scheduler').features.eventDragCreate;
        var eventDragSelect = bryntum.query('scheduler').features.eventDragSelect
     eventdragCreate.disabled = !eventdragCreate.disabled ;
      eventDragSelect.disabled = !eventDragSelect.disabled ;

it switches fine but eventDragselect behavior does not work correctly. Should i do something else?


Post by mats »

The ticket mentioned above will need to be fixed before you can combine those 3 features. Should make it to the next patch release.


Post by pmiklashevich »

ayksen wrote: Fri Nov 27, 2020 4:24 pm

for config i tried :

 pan: false,
      eventDragCreate : {
        disable:false,
      },
      eventDragSelect : false,

and at my switch func:

 var eventdragCreate = bryntum.query('scheduler').features.eventDragCreate;
        var eventDragSelect = bryntum.query('scheduler').features.eventDragSelect
     eventdragCreate.disabled = !eventdragCreate.disabled ;
      eventDragSelect.disabled = !eventDragSelect.disabled ;

it switches fine but eventDragselect behavior does not work correctly. Should i do something else?

Hello,

I spot a mistake in your configuration. If you want to use a feature which is NOT enabled by default and you want it to be disabled at the beginning, you cannot use boolean "false" as the value. You need to pass an object and set the "disabled" to "true". Otherwise it will not exist and cannot be enabled in the future. And vice versa. If a feature is enabled by default, you can simplify the config and set it to "false". The feature will be available to be enabled later. If a feature is enabled or disabled by default you can always check in our documentation. For example EventDragCreate says "This feature is enabled by default", but EventDragSelect says "This feature is disabled by default.".

Therefore the fixed version of the config above is:

const scheduler = new Scheduler({
    features : {
    // eventDragCreate is enabled, pan and eventDragSelect are disabled
        pan : {
            disabled : true
        },
        eventDragCreate : true,
        eventDragSelect : {
            disabled : true
        }
    },

And here is how you can switch:

// Activate pan feature
scheduler.features.eventDragCreate.disabled = true;
scheduler.features.eventDragSelect.disabled = true;
scheduler.features.pan.disabled = false;

// Activate eventDragSelect feature
scheduler.features.eventDragCreate.disabled = true;
scheduler.features.eventDragSelect.disabled = false;
scheduler.features.pan.disabled = true;

// Activate eventDragCreate feature
scheduler.features.eventDragCreate.disabled = false;
scheduler.features.eventDragSelect.disabled = true;
scheduler.features.pan.disabled = true;

Though you need to wait until the fix for the ticket above is released, otherwise you'll might get an error about using those features simultaneously.

Best,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply