Our powerful JS Calendar component


Post by ehc-between »

Hi,

I have set up my calendar to have 4 modes, week, month, weekResource, monthResource

the application is in two languages, english and norwegian

if i use english all modes seems to work fine :)
if i change to norwegian all modes except weekResource work as expected.

For some reason weekResource shows the wrong dates up on load, if i select todays date in the date picker it seems to fix it self but upon load the dates displayed is not correct.

how can i solve this issue ? what could be wrong ? :)

export const calendarConfig = {
  // CrudManager Configuration
  crudManager: {
    autoLoad: false,
    eventStore: {
      // Sets Custom EventModel as the default model
      eventModelClass: CustomEventModel,
    }
  },
  // Default Configuration
  date: new Date(),
  filterEventResources: true,
  filterResources: true,
  modeDefaults : {
    timeFormat : 'HH:mm',
    dayStartTime : 6,
    hourHeight : 60,
  },

  modes : {
    // Removes default modes that is not in use
    day    : null,
    year   : null,
    agenda : null,

// Week mode configuration
week : {
  type: 'week',
  title: 'Week',
  hideNonWorkingDays: false,
  showResourceAvatars : 'last',
  view : {
    type : 'weekview',
  },
},

// Month mode configuration
month : {
  type: 'month',
  title: 'Month',
  hideNonWorkingDays: false,
},

// Resource week mode configuration
weekResources : {
  date              : new Date(),
  type               : 'resource',
  title              : Widget.L('Wk Emp'),
  resourceWidth      : '30em',
  hideNonWorkingDays : false,

  view : {
    type : 'weekview',
    timeFormat : 'HH:mm',
    dayStartTime : 6,
    hourHeight : 60,
  },

  // Info to display below a resource name
  meta : (resource: { title: any; }) => resource.title
},

// Resource month mode configuration
monthResources : {
  type               : 'resource',
  title              : Widget.L('Mo Emp'),
  resourceWidth      : '30em',
  hideNonWorkingDays : false,
  view : {
    type : 'monthview'
  },
  meta : (resource: { title: any; }) => resource.title
}
  },
// ---------------------------- Localisation ----------------------------
    // Add missing translations
    // NB! First value in the key pair is by default the English translation

// English Translation - extends @bryntum default translation
const En = {
  List : {
    'Select All' : 'Select all'
  },
  Widget : {
    'Show unassigned' : 'Show unassigned',
    'Week per emp' : 'WK EMP',
    'Month per emp' : 'MO EMP',
    'Resource width': 'Resource width'
  }
}
LocaleHelper.publishLocale('En', En);

// Norwegian Translation - extends @bryntum default translation
const No = {
  List : {
    'Select All' : 'Velg alle'
  },
  Widget : {
    'Show unassigned' : 'Vis ikke tildelt',
    'Wk Emp' : 'Uke ansatt',
    'Mo Emp' : 'Mnd ansatt',
    'Resource width': 'Ansatt bredde'
  }
}
LocaleHelper.publishLocale('No', No);

// Set the default locale based on the current language from ngx-translate
this.translate.currentLang == 'en' ? this.calendar.localeManager.applyLocale('En') : this.calendar.localeManager.applyLocale('No')

// Subscribe to language change event from ngx-translate to change the calendar locale
this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
  if(event.lang == 'en') {
    this.calendar.localeManager.applyLocale('en')
  }
  else if(event.lang == 'no') {
    this.calendar.localeManager.applyLocale('No')
  }
  else {
    this.calendar.localeManager.applyLocale('en')
  }
});
Attachments
Screenshot 2023-12-07 at 18.37.31.png
Screenshot 2023-12-07 at 18.37.31.png (376.21 KiB) Viewed 547 times
Screenshot 2023-12-07 at 18.29.43.png
Screenshot 2023-12-07 at 18.29.43.png (343.35 KiB) Viewed 547 times

Post by marcio »

Hey ehc-between,

Thanks for the detailed report. I couldn't reproduce that behavior on our plain JS demo https://bryntum.com/products/calendar/examples/localization/, I tried to set up the modes as your config and when changing the language, all the views are working correctly.

Could you please attach a runnable project with your configuration and a sample of data for us to debug and check what's causing that issue on your side?

You can also check our guidelines if you need more info https://www.bryntum.com/forum/viewtopic.php?f=1&t=772

Best regards,
Márcio


Post Reply