[ANGULAR] How to set the date format in the gantt header

[pawel.szwak]

How can I set the date format in Angular, where should I do it? I need to set the format for different views hour and day, day and week, etc.

[mats]

Please read our documentation: https://bryntum.com/docs/scheduler/#guides/customization/localization.md

[pawel.szwak]

I added code, does not change anything

import { Gantt, Panel, TaskModel, ProjectModel, Toast, EffectResolutionResult, LocaleManager, PresetManager } from 'bryntum-gantt/gantt.umd.js'; //imports bryntum

 ngOnInit() {

        LocaleManager.extendLocale('En', {
            PresetManager : {
                dayAndWeek : {
                    topDateFormat : 'w.W'
                },
                weekAndDay : {
                    middleDateFormat : 'w.W'
                },
                weekAndMonth : {
                    middleDateFormat : 'w.W'
                },
                weekAndDayLetter : {
                    middleDateFormat : 'w.W'
                },
                weekDateAndMonth : {
                    middleDateFormat : 'w.W'
                },
                week : {
                    middleDateFormat : 'w.W'
                }
            }
        });
       

    }

        PresetManager.onLocalized(); //the method is not available

[saki]

Can you give us more context of the above code? Ideally, tell us how modify one of our examples to reproduce the issue. Then we can easily throw your code in and run and debug it.

[pawel.szwak]

I need change date format in header for gantt component

for example replace 2020 January 26 to 2020-01-06 or to format numberWeekOfYear.numberDayOfWeek (4.7)

In my project for component I'm loading

import './schedulerLocales.js';

details

import EnLocale from 'bryntum-gantt/locales/gantt.locale.En.js';

import { LocaleManager } from 'bryntum-gantt/gantt.umd.js';

LocaleManager.registerLocale('En', { locale : EnLocale });

LocaleManager.extendLocale('En', { 
    ResourcesTab:{Resources:"ResourcesTest",Resource:"ResourceTest",Units:"UnitsTest"},

    PresetManager : {
        dayAndWeek : {
            topDateFormat : 'w.W'
        },
        weekAndDay : {
            middleDateFormat : 'w.W'
        },
        weekAndMonth : {
            middleDateFormat : 'w.W'
        },
        weekAndDayLetter : {
            middleDateFormat : 'w.W'
        },
        weekDateAndMonth : {
            middleDateFormat : 'w.W'
        },
        week : {
            middleDateFormat : 'w.W'
        }
    }

} );

I have problem with change date format(I tried different formats), The change of text works correctly

Please see on my screen

[pawel.szwak]

And I have a problem with property ganttEngint - is undefined, maybe this is the reason, I can check it?


html template

<div #gantt style="height: 800px;width: auto;" id="container"></div>

config

/**
 * Gantt configuration export
 */
const imgFolderPath = 'assets/images/users/';

const ganttConfig = {
    // viewPreset : 'hourAndDay',
    startDate : null,
    columns   : [
        { type : 'wbs' },
        { type : 'name', width : 250 },
        { type : 'startdate' },
        { type : 'duration' },
        { type : 'percentdone', width : 70 },
       
        {
            text  : 'Predecessors',
            type  : 'predecessor',
            width : 112
        },
        {
            text  : 'Successors',
            type  : 'successor',
            width : 112
        },
        { type : 'schedulingmodecolumn' },
        { type : 'calendar' },
        {
            type       : 'percentdone',
            text       : '%',
            width      : 70,
            htmlEncode : false,
            align      : 'center',
            renderer   : ({ value }) => {
                if (value) {
                    return `<div class="b-pie" style="animation-delay: -${value}s;"></div>`;
                }
            }
        },
        { type : 'constrainttype' },
        { type : 'constraintdate' },
        {
            type       : 'column',
            text       : 'Status',
            htmlEncode : false,
            editor     : false,
            renderer   : ({ record }) => {
                let status = '';

                if (record.isCompleted) {
                    status = 'Completed';
                } else if (record.endDate > Date.now()) {
                    status = 'Late';
                } else if (record.isStarted) {
                    status = 'Started';
                }

                return status ? `<i class="b-fa b-fa-circle ${status}"></i>${status}` : '';

            }
        },
        {
            type  : 'date',
            text  : 'Deadline',
            field : 'deadline'
        }
        // ,
        // { type : 'addnew' }
    ],

    subGridConfigs : {
        locked : {
            flex : 1
        },
        normal : {
            flex : 2
        }
    },

    columnLines : false,

    features : {
        taskEdit : true,
        filter     : true,
        timeRanges : {
            showHeaderElements  : true,
            showCurrentTimeLine : true
        },
        labels     : {
            left : {
                field  : 'name',
                editor : {
                    type : 'textfield'
                }
            }
        }
    },

    
      
        
      

};

export default ganttConfig;

compotnent.ts

import ganttToolbar from './ganttToolbar';
import ganttConfig from './ganttConfig';
import { Gantt, Panel, TaskModel, ProjectModel, Toast, EffectResolutionResult, PresetManager } from 'bryntum-gantt/gantt.umd.js';
import { GanttComponent } from 'bryntum-angular-shared';
import { LocaleManager } from 'bryntum-gantt/gantt.umd.js';
import './schedulerLocales.js';

@ViewChild('gantt') gantt : GanttComponent;

    constructor(element: ElementRef) {


    }

    ngOnInit() {
        

    }

    public LoadGantt(def:boolean = true){

        let gc: any = ganttConfig;
        gc.startDate = '2020-01-25';

        let childrens: Array<TaskModel> = new Array<TaskModel>();

        document.getElementById("container").innerHTML = "";
        

        childrens.push(new TaskModel({ id : 1, name : 'Proof-read docs', startDate : '2020-01-25', endDate : '2020-01-31' }));
        childrens.push(new TaskModel({ id : 2, name : 'Release docs', startDate : '2020-02-02', endDate : '2020-02-05' }));

        let a: Array<TaskModel> = new Array<TaskModel>();
        a.push(new TaskModel({ id : 3, name : 'Parent', startDate : '2020-01-25', endDate : '2020-02-05', children: childrens, expanded: true }));

        let pr = new ProjectModel({
          
        
            eventsData : a,
        
            dependenciesData : [
                { fromEvent : 1, toEvent : 2 }
            ]

            
        });
        pr.startDate = '2020-01-25';
        gc.startDate = '2020-01-23';

        if(def){
             pr = new ProjectModel({
                transport : {
                    load : {
                        url : 'assets/datasets/launch-saas.json'
                    }
                }
            });
            pr.startDate = '2019-01-06';
            gc.startDate = '2019-01-04';
        }

        const
            project = pr,
            gantt   = new Gantt({
                ...gc,
                project,
            }),
            tbar    = ganttToolbar(gantt),
            config  = {
                appendTo : document.getElementById("container"),
                items    : [gantt],
                tbar
            }
        ;

        // panel renders to this component's element
        const panel = this.panel = new Panel(config);

        // @ts-ignore
        project.on('load', ({ source }) => {
            // @ts-ignore
            const startDateField = panel.tbar.widgetMap.startDateField;

            // suspending and resuming events to not change the store #9391
            startDateField.suspendEvents();
            startDateField.value = source.startDate;
            startDateField.resumeEvents();

        });

        // @ts-ignore
        project.load({}).then(() => {
            const stm = gantt.project.stm;

            // let's track scheduling conflicts happened
            // @ts-ignore
            project.on('schedulingconflict', context => {
                // show notification to user
                Toast.show('Scheduling conflict has happened ..recent changes were reverted');
                // as the conflict resolution approach let's simply cancel the changes
                context.continueWithResolutionResult(EffectResolutionResult.Cancel);
            });

            stm.enable();
            stm.autoRecord = true;


        });
    

        setTimeout(x=> {
            console.log(gantt);
            this.applyGanttLocale('se');
        },600);


    }
    
    applyGanttLocale = ( schedulerLocale : string ) : void => {
        // const localeManager = this.gantt.ganttEngine.localeManager;
        console.log("localeManager", this.gantt.ganttEngine);

        // switch (schedulerLocale) {
        //     case 'se':
        //         localeManager.locale = 'En'; // locale is not avaliable
        //         break;

        //     case 'ru':
        //         localeManager.locale = 'Ru';
        //         break;

        //     default:
        //         localeManager.locale = 'En';
        //         break;
        // }

        // LocaleManager.locale = 'En';

    };

[saki]

I can still only guess because I cannot run your code. So it can be either that applyGanttLocale is run too early or it is run in the wrong context (this points somewhere else). For the latter you could try:

        const applyLocale = this.applyGanttLocale.bind(this);
        setTimeout(x=> {
            console.log(gantt);
            applyLocale('se');
        },600);

Anyway, even if it worked, we strongly discourage using timeouts to resolve timing problems. There is always a correct place and time to execute a function so that it has all dependencies available.

[pawel.szwak]

I tried, it doesn't work, the date format in the header does not change.

In what form should I prepare the code?

I do not understand why after executing the following code the translation is replaced, while the date format remains unchanged.

import './schedulerLocales.js';

details below, the code is implemented in the component where I use gantt

import EnLocale from 'bryntum-gantt/locales/gantt.locale.En.js';

import { LocaleManager } from 'bryntum-gantt/gantt.umd.js';

LocaleManager.registerLocale('En', { locale : EnLocale });


LocaleManager.extendLocale('En', { 

    ResourcesTab:{Resources:"ResourcesTest", Resource: "ResourceTest", Units: "UnitsTest"},

    PresetManager : {
        secondAndMinute : {
            topDateFormat : 'llll',
            middleDateFormat : 'ss'
        },
        minuteAndHour : {
            topDateFormat : 'ddd MM/dd, h',
            middleDateFormat : 'mm'
        },
        hourAndDay : {
            topDateFormat : 'ddd dd/MM',
            middleDateFormat : 'LT'
        },
        day : {
            middleDateFormat : 'ddd dd/MM'
        },
        dayAndWeek : {
            middleDateFormat : 'dd dd'
        },
        weekAndDay : {
            middleDateFormat : 'yyyy-MM-dd'
        },
        weekAndDayLetter : {
            middleDateFormat : 'ddd dd MM yyyy'
        },
        week : {
            middleDateFormat : 'D d'
        },
        weekAndMonth : {
            topDateFormat : 'MM yyyy',
            middleDateFormat : 'dd MM'
        },
        weekDateAndMonth : {
            topDateFormat : 'yyyy MM',
            middleDateFormat : 'dd'
        },
        monthAndYear : {
            topDateFormat : 'yyyy',
            middleDateFormat : 'yyyy-MM'
        }
    }

} );

LocaleManager.applyLocale('En');

LocaleManager.locale = 'En';

[Maxim Gorkovsky]

In what form should I prepare the code?

We need as simple as possible testcase which we could run locally. No backend, or any other external dependency. Take a look at the angular demo which we supply, if you could modify it to reproduce problem with locales that would be just enough.

[pawel.szwak]

details in attachment