Our pure JavaScript Scheduler component


Post by AlexWiller »

Hey,

I am currently working on Scheduler Pro with the drag-from-grid as a basis.
For "activating" the percentBar Feature I tried the following:

  • added :percentBarFeature = "schedulerConfig.features.percentBar" and :showPercentageFeature = "schedulerConfig.showPercentage" to the App.vue

  • added percentBar : true and showPercentage: true to the feature-Block in components/schedulerConfig.js

  • added for testing purposes "percentDone" : 50 to my events in public/data/data.json

Did I missed something? Because it still looks the same as before...


Post by pmiklashevich »

Hello,

showPercentage is a config on the PercentBar feature, so the vue config might look like this:

:percentBarFeature = "schedulerConfig.percentBarFeatureConfig"

where the percentBarFeatureConfig is a custom property on the schedulerConfig object which describes an object, for example:

{ showPercentage : false }

But there is a missing feature configuration in the wrapper (BryntumSchedulerPro.vue). Please add this line to the Vue wrapper and rebuild it:

percentBarFeature : { type : [Boolean, Object], default : undefined }

Then it should work.

We're working on the auto-generated wrappers, so the problem with missing features/configs will be solved soon. Stay tuned!

Best,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by AlexWiller »

So,
I went to App.vue and added

:percentBarFeature = "schedulerConfig.percentBarFeatureConfig"

then in lib/bryntum-vue-shared/src/Scheduler.vue added

percentBarFeature                : { type : [Boolean, Object], default : undefined },

in src/components/schedulerConfig.js I even tried both

percentBarConfig   : true,
percentBar : true,
        

But it is still not working...
Do I import everything the right way in my App.vue?

import Scheduler from 'bryntum-vue-shared/src/Scheduler.vue';
import schedulerConfig from './components/schedulerConfig.js';

Post by pmiklashevich »

in src/components/schedulerConfig.js I even tried both

Please use the following:

//schedulerConfig
{
    percentBarFeatureConfig : true,
    
// or in case you need to configure the feature percentBarFeatureConfig : { showPercentage : false // true by default } }

percentBarFeatureConfig is a custom name. It should match in App.vue and schedulerConfig. It can be:

// App.vue
:percentBarFeature = "schedulerConfig.foo"
// schedulerConfig
{
    foo : true
}

then in lib/bryntum-vue-shared/src/Scheduler.vue added

Please make sure you have built it before start the app.

Let us know if it works for you now.

Pavlo Miklashevych
Sr. Frontend Developer


Post by AlexWiller »

Thanks so far but it is still not working yet

App.vue

<scheduler
                ref                = "scheduler"
                :rowHeight         = "schedulerConfig.rowHeight"
                :barMargin         = "schedulerConfig.barMargin"
                :eventColor        = "schedulerConfig.eventColor"
                :startDate         = "schedulerConfig.startDate"
                :endDate           = "schedulerConfig.endDate"
                :eventStore        = "schedulerConfig.eventStore"
                :columns           = "schedulerConfig.columns"
                :viewPreset        = "schedulerConfig.viewPreset"
                :crudManager       = "schedulerConfig.crudManager"
                :timeRangesFeature = "schedulerConfig.features.timeRanges"
                :stripeFeature     = "schedulerConfig.features.stripe"
                :eventMenuFeature  = "schedulerConfig.features.eventMenu"
                :resourceImagePath = "schedulerConfig.resourceImagePath"
                :allowOverlap      = "schedulerConfig.allowOverlap"
                :nonWorkingTimeFeature = "schedulerConfig.features.nonWorkingTime"
                :highlightWeekends = "schedulerConfig.highlightWeekends"
                
:percentBarFeature = "schedulerConfig.percentBarFeatureConfig" ></scheduler>

scheduler.vue under export default, props

percentBarFeature  : { type : [Boolean, Object], default : undefined },

schedulerConfig.js under export default and just be sure under features as well

percentBarFeatureConfig : true,

and then running:

npn run build
npm run serve

now I can just see the Header and the Scheduler is completely white, any idea?

I also tried it with

 :percentBarFeature = "schedulerConfig.features.percentBarFeatureConfig"

but that is also not working...


Post by pmiklashevich »

Ok, I see what the problem is.

I am currently working on Scheduler Pro with the drag-from-grid as a basis.

You said you're working with SchedulerPro, but you refer to the demo in "examples-scheduler" folder. The thing is that the examples is that folder are copied from simple Scheduler. And to make them work the it imports Scheduler class from SchedulerPro bundle. You can see it in examples-scheduler/vue/javascript/_shared/src/Scheduler.vue

import { Scheduler } from 'bryntum-schedulerpro';

and examples-scheduler/vue/javascript/drag-from-grid/src/App.vue

import Scheduler from 'bryntum-vue-shared/src/Scheduler.vue';

The feature you refer to is designed for SchedulerPro. It is not supposed to work in simple Scheduler. https://www.bryntum.com/docs/scheduler-pro/#SchedulerPro/feature/PercentBar

Therefore I would recommend to take a SchedulerPro demo as a base and move the sources of drag-from-grid demo to it. So let's get examples/frameworks/vue/javascript/resource-histogram demo up and running with the PercentBar feature enabled.

  1. Download scheduler pro trial bundle (or unzip the one you have to have the same non-modified version) .
  2. Modify examples/frameworks/npm/vue/schedulerpro/src/SchedulerPro.vue line 243. Add:
    percentBarFeature: { type: [Boolean, Object], default: undefined },
  3. Open examples/frameworks/vue/javascript/resource-histogram in terminal and run:
    npm i
    npm run serve
    
  4. Modify application examples/frameworks/vue/javascript/resource-histogram/src/App.vue:
          <scheduler
            ref="scheduler"
            :percentBarFeature = "true"
    
    Save, reload the page https://localhost:8080/
    Hover a task. See it works. You can also check in console if the feature is available:
    bryntum.query('schedulerpro').features.percentBar
    Снимок экрана 2021-02-15 в 20.41.25.png
    Снимок экрана 2021-02-15 в 20.41.25.png (286.62 KiB) Viewed 851 times

Alternative configuration for step 4 would be to set an object:

      <scheduler
        ref="scheduler"
        :percentBarFeature = "{ showPercentage : false }"

Then save and reload the page. See the percent label is not shown now.

Or you can bind the config, for example:
examples/frameworks/vue/javascript/resource-histogram/src/App.vue

      <scheduler
        ref="scheduler"
        :percentBarFeature = "schedulerConfig.percentBarFeatureConfig"

examples/frameworks/vue/javascript/resource-histogram/src/components/config.js

// scheduler
export const schedulerConfig = {
  percentBarFeatureConfig : true,

Please let me know if resource-histogram demo works for you. Then just left to move the drag-from-grid logic to the demo.

Best regards,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by AlexWiller »

Thank you for the detailed answer!
Actually the percent-done example is much more close to what I want than resource histogram. Percent done is also based on Scheduler Pro right?
But I did not understood how to start that example or why these different examples are in so many different folders.

What is the right way to get percent done running?
going into bryntum-trial/examples/percent-done

npm i
npm run serve

is not possible because there is no package.json

But theoretically I could make that work and include everything else from drag-from-grid I need, right?


Post by saki »

  1. Re different folders: Scheduler Pro is a superset of Scheduler so everything the Scheduler can do, also Scheduler Pro can do. Therefore we copied (and slightly modified) the Scheduler examples to examples-scheduler folder. The Pro-only examples are in examples folder. Then, in examples folder, we have "vanilla" (no-framework) examples directly in the folder and framework examples (Angular, React, Vue and others) in frameworks folder, further divided by framework and finally javascript and typescript folders depending how the example is implemented. I hope this helps.
  2. percent-done is vanilla example and it is based on Scheduler Pro. It is only necessary to navigate to it, for example: https://localhost/schedulerpro-4.0.8/examples/percent-done/ and you can see it in action.
  3. The percentDoneFeature is missing in the wrapper (that will be corrected in the next release) but you can easily add it to: examples/frameworks/npm/vue/schedulerpro/src/SchedulerPro.vue among other features. The line should read:
    percentDoneFeature: { type: [Boolean, Object], default: undefined },
  4. If you want it in a Vue example, just take (copy) one and use the configuration from the vanilla demo. Mind please that you must define features for Vue wrapper as percentDoneFeature:true.

Post by AlexWiller »

@saki
I created a new vue instance.

I copied the files from the vanilla example under trial/examples/percent-done to my main directory. (where also my libs are)
I added

percentDoneFeature: { type: [Boolean, Object], default: undefined },

to libs/bryntum-vue-shared/src/Scheduler.vue

Then I went to the App.vue and added with <script>..</script> the Code from https://www.bryntum.com/examples/scheduler-pro/percent-done/ (app.module.js?44770)

Now I should adjust

import { SchedulerPro } from '../../build/schedulerpro.module.js?447702';
import shared from '../_shared/shared.module.js?447702';
/* eslint-disable no-unused-vars */

right?

So when I change it to

import { SchedulerPro } from 'bryntum-vue-shared/src/Scheduler.vue';

its obviously not working because when I look into libs/bryntum-vue-shared/src/Scheduler.vue it says

import { Scheduler } from 'bryntum-schedulerpro'; //I guess SchedulerPro is missing?

What would be the right way to include the vanilla example right?
Because in my other example (described at the beginning) I have

import Scheduler from 'bryntum-vue-shared/src/Scheduler.vue';
import schedulerConfig from './components/schedulerConfig.js';

and thats works fine.

You don't have a running vue-framework based example of percent-done?

Thanks so far.


Post by saki »

I have made a quick example; see the attached zip. Unzip it besides the existing resource-historgram demo please.

Also, the correct name of the feature is percentBarFeature so I'm also attaching the correct Scheduler.vue wrapper (zipped). Unzip it please replacing the existing wrapper in examples/frameworks/npm/vue/schedulerpro/src/SchedulerPro.vue. The only change is the corrected name of the feature.

Attachments
SchedulerPro.vue.zip
(3.49 KiB) Downloaded 67 times
percent-done.zip
(16.67 KiB) Downloaded 70 times

Post Reply