Changing date format and disabling column sorting

[Dolan]

Hey,

I was wondering how I could change the 'start' and 'finish' date format in the 'Edit task' menu, at the moment its in US format (MM/DD/YYYY) but I wish to change it to an Australian format (DD/MM/YYYY)

Also I'm curious as to if I can disable column sorting, shown in the picture below

Screen Shot 2020-09-25 at 9.48.20 am.png (31.51 KiB) Viewed 1117 times

Thanks,
Dylan.

[alex.l]

Hi Dolan,

All dates are formatted using Intl.DateTimeFormat.
Please read our docs: https://bryntum.com/docs/gantt/#guides/customization/localization.md

So, to change Date format, you need to switch your localization to Australian, using country code according to standards Intl.DateTimeFormat (aus) https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry

Check: https://bryntum.com/docs/gantt/#Core/localization/LocaleManager

Please, review my post here, it will work for you too: viewtopic.php?f=51&t=15201&p=76512#p76512

Code example:

import LocaleManager from '../../Core/localization/LocaleManager.js';
import parentLocale from '../../Scheduler/localization/En.js';
import LocaleHelper from '../../Core/localization/LocaleHelper.js';

const locale = LocaleHelper.mergeLocales(parentLocale, {
    // your localization strings here
});
// "aus" - is unified name for Danish localization
LocaleManager.registerLocale('aus', { desc : 'Danish locale', locale : locale });
// and later when you need:
LocaleManager.applyLocale('aus');

Feel free to ask if you still have questions.

All best,
Alex

[Dolan]

Thanks for the reply!

I couldn't get it to work as I'm using require js and webpack 4. I'm getting errors saying optional chaining is not supported and therefore can't import anything besides the built gantt (gantt.module.js)

Instead I would like to replace the default edit task modal with a custom 'Swal' modal. Is there an event for editing tasks when right clicking and selecting 'edit' and also when double clicking the task?

Thanks,
Dylan

[pmiklashevich]

Hello Dylan!

I would like to add to the advice above that you need to override DateHelper class localization provided in Core/lib/Core/localization/En.js:

        DateHelper : {
            locale       : 'en-US', // replace to Australian format

Then all dates in your application will follow the format you want. Otherwise you will localize just format in a specific widget.

I couldn't get it to work as I'm using require js and webpack 4. I'm getting errors saying optional chaining is not supported and therefore can't import anything besides the built gantt (gantt.module.js)

You can apply all the technics if you're using built version too. Alex just provided an example of localization. Basically short code snippets we provide are supposed to work if you put them into our examples, so you can check the solution. And usually they cannot be copied to the real application without adjustments.

Instead I would like to replace the default edit task modal with a custom 'Swal' modal. Is there an event for editing tasks when right clicking and selecting 'edit' and also when double clicking the task?

Sure, replacing our TaskEditor is supported too. We recommend to keep TaskEdit feature enabled, subscribe to https://www.bryntum.com/docs/gantt/#Gantt/feature/TaskEdit#event-beforeTaskEdit, show your solution and prevent default editor by returning "false" from the listener.

Best regards,
Pavel