Our pure JavaScript Scheduler component


Post by Srindt »

Hi, we were using a trial version of scheduler for some time which was great and started setting up the pro version.

But I face issue in setting it up and running the project which was running without any issues in the trial version.

My project folder structure is as follows:

schedulerpro-1.0.2
MyVuePrjFolder

This is how i have set my package.json:

  "dependencies": {
    "axios": "^0.20.0",
    "bryntum-res": "file:../schedulerpro-1.0.2/examples-scheduler/_shared",
    "bryntum-scheduler": "file:../schedulerpro-1.0.2/build",
    "bryntum-vue-shared": "file:../schedulerpro-1.0.2/examples-scheduler/vue/javascript/_shared",
}

And in my App.vue, I was using the stockholm.css (in my trial version,it was working)

    import 'bryntum-scheduler/scheduler.stockholm.css';

But It gave me error as the schedulerpro was not having this file, so I copied from my trial folder and this error went.

But again, the following error came:


This dependency was not found:

  • bryntum-schedulerpro in ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!../schedulerpro-1.0.2/examples-scheduler/vue/javascript/shared/src/Scheduler.vue?vue&type=script&lang=js&, ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!../schedulerpro-1.0.2/examples-scheduler/vue/javascript/shared/src/FullscreenButton.vue?vue&type=script&lang=js&



To install it, you can run: npm install --save bryntum-schedulerpro

So I did a npm install --save bryntum-schedulerpro and the error went away and my package.json look like:

  "dependencies": {
    "axios": "^0.20.0",
    "bryntum-resources": "file:../schedulerpro-1.0.2/examples-scheduler/_shared",
    "bryntum-scheduler": "file:../schedulerpro-1.0.2/build",
    "bryntum-schedulerpro": "^1.0.1",
    "bryntum-vue-shared": "file:../schedulerpro-1.0.2/examples-scheduler/vue/javascript/_shared",
}

But when I now launch my application in localhost, it is blank with the following error:


Uncaught Error: Bundle included twice, check cache-busters and file types (.js)
at Function.setVersion (webpack-internal:///./node_modules/bryntum-schedulerpro/schedulerpro.module.js:318)
at Module.eval (webpack-internal:///./node_modules/bryntum-schedulerpro/schedulerpro.module.js:318)
at eval (webpack-internal:///./node_modules/bryntum-schedulerpro/schedulerpro.module.js:480)
at Module../node_modules/bryntum-schedulerpro/schedulerpro.module.js (app.js:1354)
at webpack_require (app.js:724)
at fn (app.js:101)
at eval (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!../schedulerpro-1.0.2/examples-scheduler/vue/javascript/shared/src/FullscreenButton.vue?vue&type=script&lang=js&:2)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!../schedulerpro-1.0.2/examples-scheduler/vue/javascript/
shared/src/FullscreenButton.vue?vue&type=script&lang=js& (app.js:1366)
at webpack_require (app.js:724)
at fn (app.js:101)

I believe some thing went for a toss after I installed the scheduler-pro through npm, but Im not sure.Kindly guide me to resolve this issue.


Post by arcady »

Hello

  "dependencies": {
    "axios": "^0.20.0",
    "bryntum-res": "file:../schedulerpro-1.0.2/examples-scheduler/_shared",
    "bryntum-scheduler": "file:../schedulerpro-1.0.2/build",
    "bryntum-vue-shared": "file:../schedulerpro-1.0.2/examples-scheduler/vue/javascript/_shared",
}

I think in the above snippet "bryntum-scheduler" should be replaced with "bryntum-schedulerpro":

  "dependencies": {
    "axios": "^0.20.0",
    "bryntum-res": "file:../schedulerpro-1.0.2/examples-scheduler/_shared",
    "bryntum-schedulerpro": "file:../schedulerpro-1.0.2/build",
    "bryntum-vue-shared": "file:../schedulerpro-1.0.2/examples-scheduler/vue/javascript/_shared",
}

Could you try and let us know if that worked?


Post by Srindt »

Thanks for the reply arcady.

One of my team numbers had enquired about this issue in forum and this exception got removed.

However, certain features that were working before (in trial version) is not working properly now.Kindly see the below points.

1.Right Click -> add Event appears again.

I have disabled it using the below code, but it still persists !

scheduleContextMenuFeature: {
        items: {
            addEvent: false
        },
    }
    

2.End date not visible when trying to add an Event from the top-right plus button(Widget Helper).This doesn't happen when I add Event using right Click(anyways as per 1. , I don't need that option)

add_from_top_no_default_enddate.PNG
add_from_top_no_default_enddate.PNG (23 KiB) Viewed 2424 times

3.Custom Filter Options in the Menu are not present.

I have given 2 custom options with custom names using LocaleManager.Both are not getting shown.

LocaleManager.extendLocale('En', {
    EventEdit: {
        Name: 'Customer',
        Resource: 'Location'
    }
});
    features: {
        timeRanges: true,
        regionResize: true,
        eventFilter: false,
        resourceColumns: {
            columnWidth: 500
        },
        contextMenu: {
            headerItems: [
                {
                    text: 'Filter By',
                    localeClass: this,
                    icon: 'b-fw-icon b-icon-filter',
                    menu: {
                        type: 'popup',
                        items: [
                            {
                                type: 'textfield',
                                clearable: true,
                                keyStrokeChangeDelay: 300,
                                label: 'By Customer',
                                width: 200,
                            },
                            {
                                type: 'textfield',
                                clearable: true,
                                keyStrokeChangeDelay: 300,
                                label: 'By Contact',
                                width: 50,
                            },
                        ],
                    }
                }
            ]
        },
filter_options_not_visible.PNG
filter_options_not_visible.PNG (13.17 KiB) Viewed 2424 times

4.Date Filters (particularly endDate) not working properly.

Say I have set a startDate,endDate. Im able to change the startDate to the next date using the right/left arrow.It changes.But I can't change the endDate in the same way smoothly.

I can change the endDate but when I click the left arrow, it goes back 2 dates rather 1 date back.And right arrow of endDate doesn't work at all.

date_filters_not_working_properly.PNG
date_filters_not_working_properly.PNG (27.99 KiB) Viewed 2424 times

Note: I just removed redundant codes in the above snippets, kindly refrain from checking braces.
This is just to give u people an idea , that the working code in trial version is not working in pro version.

So all these above issues where working properly in the trial version but causing problems after having used the scheduler-1.0.2 version.

Kindly let me know, how shall these things be resolved.


Post by mats »

2.End date not visible when trying to add an Event from the top-right plus button(Widget Helper).This doesn't happen when I add Event using right Click(anyways as per 1. , I don't need that option)

What's the code you use to add event?


Post by Srindt »

Hi matt,

2.I have used the below code for adding new event.Kindly have a look.

            WidgetHelper.append([{
                type     : 'button',
                icon     : 'b-icon b-icon-add',
                color    : 'b-blue b-raised',
                tooltip  : 'Add new event',
                onAction : ()=>{
                    const event = new schedule.eventStore.modelClass({
                        resourceId   : schedule.resourceStore.first.id,
                        startDate    : schedule.startDate,
                        duration     : 5,
                        durationUnit : 'h',
                        name         : 'New task',
                        deliveries    : '7 Pkgs',
                        image : 'dave.jpg',
                    });

                    schedule.editEvent(event);
                }
            }
        ], { insertFirst : document.getElementById('tools-add-event') || document.body });

Post by arcady »

Since 4.0.0 is a major release there were a lot of refactoring that resulted some breaking changes. Few features code was reviewed and some of them were renamed to look more consistent.

1.Right Click -> add Event appears again.

The scheduleContextMenu feature was renamed to scheduleMenu in 4.0.0 ..so the code should look:

scheduleMenuFeature: {
        items: {
            addEvent: false
        },
    }

3.Custom Filter Options in the Menu are not present.

In 4.0.0 ContextMenu feature was replaced by CellMenu and HeaderMenu. So now context menu is configured for cells and headers independently. So the code should look smth like:

        headerMenu: {
            items: [
                {
                    text: 'Filter By',
                    localeClass: this,
                    icon: 'b-fw-icon b-icon-filter',
...

Post by arcady »

Regarding missing end date value in the event editor ..we'd also found that bug and it's already fixed just not released yet.


Post by arcady »

Say I have set a startDate,endDate. Im able to change the startDate to the next date using the right/left arrow.It changes.But I can't change the endDate in the same way smoothly.

I can change the endDate but when I click the left arrow, it goes back 2 dates rather 1 date back.And right arrow of endDate doesn't work at all.

Regarding this I couldn't reproduce this unfortunately on our scheduler pro VUE demo.
Could you please provide us with some runnable test case so we could reproduce the issue?


Post by Srindt »

Thanks for your replies arcady.

Unfortunately the scheduleMenuFeature, headerMenu are not working with me.

I use scheduler-1.0.2 as mentioned below.

version.PNG
version.PNG (9.87 KiB) Viewed 2414 times

Post by saki »

I worked for me with the following:

  1. add the following to components/config.js:

      scheduleMenuFeature: {
        items: {
          extraItem: {
            text: 'Extra',
            icon: 'b-fa b-fa-flag',
            onItem({ date, resourceRecord, items }) {
              console.log(date, resourceRecord, items);
              // Custom date based action
            }
          }
        }
      },
      headerMenuFeature: {
        items: {
          extraItem: {
            text: 'My header item',
            icon: 'b-fa b-fa-car',
            weight: 200,
            onItem: (ev) => console.log(ev)
          }
        }
      },
  2. add the following to App.vue, scheduler tag:

            :scheduleMenuFeature="schedulerConfig.scheduleMenuFeature"
            :headerMenuFeature="schedulerConfig.headerMenuFeature"
  3. change examples/frameworks/npm/vue/schedulerpro/src/SchedulerPro.vue props type:

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

    (this is a bug that will be fixed)

Screen Shot 2020-09-21 at 13.17.50.png
Screen Shot 2020-09-21 at 13.17.50.png (197.08 KiB) Viewed 2399 times
Screen Shot 2020-09-21 at 13.17.31.png
Screen Shot 2020-09-21 at 13.17.31.png (134.83 KiB) Viewed 2399 times

Post Reply