Our powerful JS Calendar component


Post by braincept »

I'm using Calendar API instance(https://bryntum.com/docs/calendar/guide/Calendar/integration/angular/guide#bryntum-calendar-api-instance).

import { BryntumCalendarComponent } from '@bryntum/calendar-angular';
import { Calendar } from '@bryntum/calendar/calendar.lite.umd.js';

export class AppComponent implements AfterViewInit {
    private calendar: Calendar;
    @ViewChild(BryntumCalendarComponent, { static : false }) calendarComponent: BryntumCalendarComponent;
    ngAfterViewInit(): void {
        // store Bryntum Calendar isntance
        this.calendar = this.calendarComponent.instance; // getting undefined
    }
}

Can you help me to get access to the instance object in version 5.0.4.

P.S.
I tried to downgrade to version 5.0.1 which is working as expected.


Post by alex.l »

Hi,
All looks good in your code. Did you test your code in our Angular examples in 5.0.4 source code? It works well, here is the code from our example.

export class AppComponent implements AfterViewInit {
    @ViewChild(BryntumCalendarComponent) calendarComponent: BryntumCalendarComponent;

private calendar: Calendar;

ngAfterViewInit(): void {
    this.calendar = this.calendarComponent.instance;

Could you post a test case to reproduce the problem?

All the best,
Alex


Post by braincept »

Hi Alex, thanks for responding.

Well, there is no specific scenario that I can share. I want to implement 'Resource view' mode in my angular application so I upgraded from 4.0.1 to 4.0.5. After upgrading, the application is broken as getting undefined for instance.

I'm already using month, week, day, and agenda modes along with this in addition I want to add 'Weekly resource view'.

Here is my code base

HTML:

<bryntum-calendar
      #calendar
      [tbar]="tbar"
      [sidebar]="sidebar"
      [resources]="finalResources"
      [eventEditFeature]="features.eventEdit"
      [eventTooltipFeature]="features.eventTooltip"
      [date]="selectedDate"
      [modes]="modes"
      [mode]="selectedMode"
      [scrollable]="true"
      (onCatchAll)="onCalendarEvents($event)"
</bryntum-calendar>

Component:

private calendarInstance: Calendar;
@ViewChild(BryntumCalendarComponent) calendarComponent: BryntumCalendarComponent;
// @ViewChild('calendar') calendarComponent: BryntumCalendarComponent;
// @ViewChild(BryntumCalendarComponent, {static: false}) calendarComponent: BryntumCalendarComponent;
// I tried with above all cases 

ngAfterViewInit(): void {
  this.calendarInstance = this.calendarComponent.instance;
  this.eventStore = this.calendarInstance.eventStore;

  this.calendarInstance.on({
    beforeEventEdit: this.beforeEventEdit,
    thisObj: this
  });

  this.calendarInstance.on('beforeEventDelete', this.beforeEventDelete.bind(this));

  this.calendarInstance.on('dragMoveEnd', this.moveEventDrop.bind(this));
  this.calendarInstance.on('dragResizeEnd', this.eventResizeEnd.bind(this));

  this.eventStore.on('change', ({action, record, records}) => {
    switch (action) {
      case 'update':
        break;
      case 'add':
        break;
      case 'remove':
        break;
    }
  });
}

Here you can see with the help of the instance object, I'm accessing eventStore and binding events but for now, due to undefined it is not possible anymore.

Strange for me is same code is working without any error if I downgrade to 4.0.1 but breaking in 4.0.5 :|

Let me know if more information is required from my end.

Thanks, hoping for some resolution.


Post by alex.l »

In your previous posts you said you used 5.x versions, but here you said 4.x.
Did you see Angular examples in the source code you downloaded? Try your code in one of our examples. The problem might be out of scope of the code snippets you posted.

If it's possible to get a runnable test case, it will help a lot to figure out with that problem.

All the best,
Alex


Post by braincept »

Ah sorry, it's a typo error, I'm using 5.0.1 which is working as expected without any error, now after upgrading to 5.0.4, it is breaking.

Did you see Angular examples in the source code you downloaded? Try your code in one of our examples. The problem might be out of scope of the code snippets you posted.

No, I don't think so because as I mentioned same code base without any change working in 5.0.1

If it's possible to get a runnable test case, it will help a lot to figure out with that problem.

It's a bit hard for me to share a runnable test case because it has a lot of things but as I shared I want to add 'Resource view' in my existing implementation which is the main reason to upgrade to 5.0.4

package.json

"@bryntum/calendar": "5.0.4",
"@bryntum/calendar-angular": "5.0.4",
"@bryntum/demo-resources": "^1.0.1",

I also attached a ZIP file that has component code and HTML file I added the best possible thing except for the business logic. Hope this would help you.

Attachments
code.zip
event-calendar-wrapper.component.html
event-calendar-wrapper.component.ts
(3.01 KiB) Downloaded 42 times

Post by alex.l »

Sorry, I still cannot reproduce that problem.
Since your code is not runnable, I tried in our examples, compared all with your code snippets and versions. Please see attached runnable example. It uses version 5.0.4 and does have this.calendarComponent.instance defined in ngAfterViewInit.

Attachments
filtering.zip
(173.88 KiB) Downloaded 41 times

All the best,
Alex


Post by braincept »

Apologies for replying late we've fixed it by updating and optimizing the code. Now it is working as expected so you can close the thread.


Post by tasnim »

Glad to hear that you've got it fixed.

Good Luck,
Tasnim


Post Reply