Our powerful JS Calendar component


Post by abhi »

Hi,

We just upgraded our application from Angular 12 to Angular 13 which resulted in change of Node version 12.22.0 to Node 16.10.0.

Before the update when moving between modes(day, week, month, agenda, timeline), calendar event 'daterangechange' was getting triggered. But after the update except for timeline mode, 'daterangechange' is getting triggered for all other modes. Can you please help me on the workaround or fix for the 'daterangechange' to trigger for 'timeline' mode.

"@bryntum/calendar": "5.0.3",
"@bryntum/calendar-angular": "5.0.3",
"@bryntum/scheduler": "5.0.3",
"@bryntum/scheduler-angular": "5.0.3"
<bryntum-project-model
  #project
  [assignments] = "assignments"
  [events] = "events"
  [resources] = "resources"
</bryntum-project-model>
<div class="calendar-body">
  <bryntum-calendar
    [project]             = "project"
    [date]                = "calendarConfig.date"
    [modes]               = "calendarConfig.modes"
    (onCatchAll)          = "onCalendarEvents($event)"
    [sidebar]             = "calendarConfig.sidebar"
    [mode]                = "calendarConfig.mode"
    [features]            = "calendarConfig.features"
    [readOnly]            = "calendarConfig.readOnly"
    [autoCreate]          = "calendarConfig.autoCreate"
</bryntum-calendar>
</div>

Post by marcio »

Hi abhi,

Could you please share what your config looks like?? Also, if you update to the latest version do you still have that behavior?? If you could share a sample project following the guidelines available here viewtopic.php?f=1&t=772 that would be great to help you with this.

Best regards,
Márcio


Post by abhi »

Hi Marcio,

Below is the requested config:

/**
 * Application config file
 */
import {Calendar, DateHelper, DomClassList, StringHelper} from '@bryntum/calendar/calendar.lite.umd.js';

export const calendarConfig = {
  autoCreate: '',
  // Features named by the properties are included.
  // An object is used to configure the feature.
  features : {},

  // The utility panel which is at the left by default.
  // Not enough width here, so don't include it.
  sidebar : false,

  // Configure as true to make the calendar read-only, by disabling any UIs for modifying data.
  readOnly : false,

  date : new Date(),

  // Modes are the views available in the Calendar.
  // An object is used to configure the view.
  modes : {
    year : false,
    month : {
      // Custom eventRenderer to match style used by Calendar
      eventRenderer({ eventRecord, renderData }: any) {
        return [];
      }
    },
    agenda : {
      // Custom eventRenderer to match style used by Calendar
      eventRenderer({ eventRecord, renderData }: any) {
          // Custom eventRenderer to match style used by Calendar
          return [];
      }
    },
    day : {
      // Custom eventRenderer to match style used by Calendar
      eventRenderer({ eventRecord, renderData }: any) {
        return [];
      }
    },
    week : {
      // Custom eventRenderer to match style used by Calendar
      eventRenderer({ eventRecord, renderData }: any) {
        return [];
      }
    },
    timeline : {
      type : 'scheduler',

  // Used by the Calendar's mode selector button
  displayName : 'Timeline',

  // Used by resourceInfo column to base src for image field:
  // resourceImagePath : '../_shared/images/users/',

  // Change default event style for Scheduler to better match Calendars look
  eventStyle : 'calendar',

  columns : [
    {
      type     : 'template',
      text     : 'Inspectors',
      width    : 200,
      field    : 'name',
      enableCellContextMenu: false,
      template : ({record}: any) => {
        let data = record.eventStore.getEvents({resourceRecord: record, startDate: record.eventStore.lastDateRange.startDate, endDate: record.eventStore.lastDateRange.endDate });
        return `...`;
      }
    }
  ],

  features : {
    eventMenu: false,
    scheduleMenu: false,
    cellEdit: false
  },

  // workingTime : {
  //   fromHour : 0,
  //   toHour   : 23
  // },

  // Uncomment to change the date range of the time axis
  // range : 'month',

  // Uncomment to change how much the next / previous buttons shift the time axis
  // stepUnit : 'day',

  viewPreset : {
    base : 'hourAndDay',
    tickWidth: 100,

    headers : [{
      unit       : 'day',
      dateFormat : 'ddd MM/DD'
    }, {
      unit       : 'hour',
      dateFormat : 'h'
    }]
  },

  // Custom eventRenderer to match style used by Calendar
  eventRenderer({ eventRecord, renderData }: any) {
    return [];
  }
}
  },

  // Start life with the month mode in view
  mode : 'month'
};

There are too many changes to update to latest version. Just want to check whether there is any simple fix other than updating to latest version.


Post by marcio »

Hey abhi,

It looks ok (some missing }), but unfortunately if you want to keep using 'daterangechange', you'll need to update to latest version.

Perhaps you could use 'activeItemChange' event??

https://www.bryntum.com/docs/calendar/api/Calendar/view/Calendar#event-activeItemChange

Best regards,
Márcio


Post by abhi »

Hi Marcio,

I have updated to latest version(5.1.3). And it is working now.

But after update one of the feature(external div drag and drop on to calendar) is not working. Is

calendar.getDateFromDomEvent(event)

depreciated. This method returns datetime of, place where context is dropped at in calendar view.


Post by marcio »

Hey abhi,

Checking the last documentation, the getDateFromDomEvent method is still available https://www.bryntum.com/docs/calendar/api/Scheduler/view/mixin/TimelineDateMapper#function-getDateFromDomEvent

What error are you getting?? Besides that, if you could provide a sample project (you can get one of our Angular demos and then add your configuration) with that error, would be easier for us to assist you.

Best regards,
Márcio


Post by abhi »

Hi Marcio,

Seems like that issue was from my end. When i created sample project was able to rectify it. Thanks for the help.


Post Reply