Our powerful JS Calendar component


Post by tdset »

Hello,

I'm using a configuration similar to the official Calendar Scheduler demo: https://www.bryntum.com/examples/calendar/calendar-scheduler/

I need to be able to create an event by clicking on a "Add new" button that's external to the calendar and for that I'm using createEvent() and this works fine in all views except TIMELINE, where it fails with:

this.activeView.createEvent is not a function

It looks like Scheduler doesn't have such functionality.

You can test this quickly in the example I linked to above if you insert the following at the end of the code editor:

document.getElementById('title').addEventListener('click', (event) => {
    event.preventDefault();
    calendar.createEvent(new Date());
});

and then click on the page's title. You should see an error when you're in Timeline view, and you should see the expected behaviour when you're in other views.

Is there a workaround?

Thanks!


Post by johan.isaksson »

Hi,

As you have noticed Scheduler does not offer the same API as Calendar. You could try calling createEvent() on a built in Calendar view instead of directly on Calendar when Scheduler is active. Or you could add a new event on the data layer.

Something like this (not fully working code) for the first scenario:

onAddClick() {
  if (calendar.activeView.isScheduler) {
  	calendar.modes.day.createEvent(xx);
  }
  else {
     calendar.createEvent(xx);
  }
}

Or on the data layer:

onAddClick() {
  if (calendar.activeView.isScheduler) {
  	calendar.eventStore.add({ startDate : xx, duration : yy, resourceId : rr });
  }
  else {
     calendar.createEvent(xx);
  }
}

Hope that helps!

Best regards,
Johan Isaksson

Post by tdset »

Thanks Johan, these approaches sort of work (they do create an event) but the beforeEventEdit event doesn't seem to fire.

I'm using an external editor which would open when beforeEventEdit fires (https://www.bryntum.com/docs/calendar/#Calendar/guides/customization/replaceeventedit.md).

Is there any chance createEvent() would be added to Scheduler's API to make the Calendar + Scheduler integration (https://www.bryntum.com/examples/calendar/calendar-scheduler/) more seamless? Is there another workaround?

Thanks!


Post by alex.l »

You can easily open an event editor using https://bryntum.com/docs/scheduler/#Scheduler/feature/EventEdit#function-editEvent

Is there any chance createEvent() would be added to Scheduler's API to make the Calendar + Scheduler integration

No, there is no plans to keep Calendar and Scheduler APIs are same.

All the best,
Alex


Post by tdset »

Hi,

sorry to re-open this thread, we've developed a method which worked well until version 5.0.1.
With version 5.0.2, an error is shown.

The code we use to create an event is the following:

btn_add_new.addEventListener('click', function () {
    if (calendar.activeView.isScheduler) {
        calendar.modes.day.createEvent(calendar.date);
    } else {
        calendar.createEvent();
    }
});

The error that is generated is:

calendar.module.js:19555 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'isRectangle')
    at Scroller._callee5$ (calendar.module.js:19555:7)
    at tryCatch (runtime.js:63:16)
    at Generator.invoke [as _invoke] (runtime.js:294:1)
    at Generator.next (runtime.js:119:1)
    at asyncGeneratorStep (calendar.module.js:121790:11)
    at _next (calendar.module.js:121790:11)
    at calendar.module.js:121790:11
    at new Promise (<anonymous>)
    at Scroller.<anonymous> (calendar.module.js:121790:11)
    at Scroller.scrollIntoView (calendar.module.js:19552:3)

Do you have any hints on what can we do to avoid this error?


Post by tasnim »

Hello,

This is not reproducible. Please provide more details on how to reproduce it in our online example?
I tried to reproduce it here: https://bryntum.com/examples/calendar/basic/

by using this code in the console

calendar.createEvent();

Best of luck,
Tasnim


Post Reply