Our pure JavaScript Scheduler component


Post by dopesitetracker »

Hi Bryntum, we are currently using @bryntum/schedulerpro: "4.3.1 and @bryntum/schedulerpro-react: "4.3.1". We used to be able to setup localization at the top of the react app by:

      
LocaleManager.registerLocale('En', { desc: 'English', locale: { DateHelper: { locale: "en-GB" } } }); LocaleManager.applyLocale('En');

To get the dates on the Timeline (Timeaxis header) to render in the format expected in UK dd/mm, but this seems to not work anymore. We understand 'En' is loaded as default but we used to pass the locale to the DateHelper to make it catch the 'en-GB' locale but it's not working for us anymore. we have tried:

      LocaleManager.extendLocale('En', {
        locale: {
          DateHelper: {
            locale: "en-GB"
          }
        }
      });
      LocaleManager.applyLocale('En');

But this is also a fail. We can see that when changing it to Spanish the days of the week are translated fine, but the date format remains as mm/dd. Is there something else that we can try here?


Post by alex.l »

TimeAxis header uses ViewPreset, that has date formatting specified in its headers configs. Please check https://bryntum.com/docs/scheduler/api/Scheduler/preset/ViewPreset

const myViewPreset2 = new ViewPreset({
    id   : 'myPreset',                  // Unique id value provided to recognize your view preset. Not required, but having it you can simply set new view preset by id: scheduler.viewPreset = 'myPreset'
    name : 'My view preset',            // A human-readable name provided to be used in GUI, e.i. preset picker, etc.
    base : 'hourAndDay',                // Extends 'hourAndDay' view preset provided by PresetManager. You can pick out any of PresetManager's view presets: PresetManager.records

timeResolution : {                  // Override time resolution
    unit      : 'minute',
    increment : 15                  // Make it increment every 15 mins
},

headers : [                         // Override headers
    {
        unit       : 'day',
        dateFormat : 'DD.MM.YYYY'   // Use different date format for top header 01.10.2020
    },
    {
        unit       : 'hour',
        dateFormat : 'LT'
    }
]
});

All the best,
Alex


Post by dopesitetracker »

Hi Alex, thanks for the reply. We are currently extending (and overriding) one of your existing ViewPresets on our react app, for example (Hardcoded date formats):

<BryntumSchedulerPro
   ...
    viewPreset={
          {
            base: "weekAndDay",
            headers: [
              {
                increment: 1,
                unit: "week",
                dateFormat: 'dd DD/MM',
                originalDateFormat: 'dd DD/MM'
              },
              {
                unit: "day",
                increment: 1,
                dateFormat: 'hh:mm',
                originalDateFormat: 'hh:mm'
              }
            ]
          }
        }
        ...
</BryntumSchedulerPro>

The view renders fine on the UI but the date formatting doesn't stick. It does strangely works if I add another ViewPresetHeaderRow say for example: { unit: "year", ... }, but it's not what we want. Is it maybe the formatting that's not correct? Also, we are asking moment to give us the format based on the locale

moment.localeData().longDateFormat();

We were wondering if you guys had a helper/utils out there for this


Post by alex.l »

I am not sure what exactly are you complained about, but maybe you are talking about "12:00", "12:00", "12:00" - that's because you used "week and day" , unit "day", so ticks created per day and not per hour.
About date formatting here https://bryntum.com/docs/scheduler/api/Scheduler/preset/ViewPreset#defining-custom-header-rows
Here is example of using formats https://bryntum.com/docs/scheduler/api/Core/helper/DateHelper#formatting-dates

All the best,
Alex


Post by dopesitetracker »

Hi Alex, I'll try to explain better this time, I think there's an easy way to get what we need. In older (bryntum) version were able to get the Timeline to show dates formatted as per locale passed to LocaleManager. For example (hardcoding) if we wanted to get the UK formatt DD/MM

      LocaleManager.registerLocale('En', {
        locale: {
          DateHelper: {
            locale: `en-GB`
          }
        }
      });
      LocaleManager.applyLocale('En');
Capturebryntum1.PNG
Capturebryntum1.PNG (128.32 KiB) Viewed 650 times

But now the format is always MM/DD no matter what we pass to the LocaleManager. We've tried extending the already loaded 'En' locale, LocaleManager.extendLocale(). but no dice. We are doing this at the top of the react app (root component) we understand that LocaleManager is globally accessible (as singleton) and that you guys are using Intl.DateTimeFormat() to apply the locale when needed. but maybe we've missed something on the upgrade that needs to change here. We don't need a custom viewPreset, we are fine with the ones loaded in by PresetManager. I don't think we ought to go changing/extending the ViewPresets when all we need is those dates to show based on locale. Btw, the timeline view (pic) corresponds to a zoom level = 12 if that helps, thanks again for your help.


Post by alex.l »

If you hardcoded date format in ViewPreset using dateFormat config in headers array, it will catch that config.
I see in your code

dateFormat: 'dd DD/MM',

Same will happen for default header which uses custom date formatting (as example "dd DD/MM"). You just need to specify dateFormat in format you expect to see.
If you want to make it sensitive to current locale, try to use renderer instead and add a condition to check locale or use moment as you mentioned.
Example is here: https://bryntum.com/docs/scheduler/api/Scheduler/preset/ViewPreset#defining-custom-header-rows

 headers : [
     {
         unit       : 'month',
         dateFormat : 'MM.YYYY' // hardcoded
     },
     {
         unit       : 'week',
         // renderer with dynamic moment date format
         renderer   : (startDate) => DateHelper.format(startDate, moment.localeData().longDateFormat())
     }
 ]

All the best,
Alex


Post by dopesitetracker »

Thanks Alex, that helped a lot. We also found out that we could do this as well using the LocaleManager =>

      LocaleManager.extendLocale(language, {
        PresetManager: {
          hourAndDay: {
            topDateFormat: `ddd DD/MM`,
            middleDateFormat: 'hh A'
          }
        }
      });

leaving it here for posterity


Post Reply