Ask for help related to our Calendar 2.x version


Post by mjcee »

Is there any way to change the time axis on the day and week modes from 24 hour to 12 hour AM/PM values


Post by arcady »

Here is a couple of demos showing the time axis manipulations:
https://www.bryntum.com/examples/scheduler-for-extjs/customheader
https://www.bryntum.com/examples/scheduler-for-extjs/timeaxis/

You need to configure corresponding view presets: Sch.preset.ViewPreset.
Default presets are defined in Sch.preset.Manager class. So you can check the class source code to see how it's done and make your own presets overriding standard ones.


Post by mjcee »

Thanks for your prompt reply.

I m not sure about the relationship between the calendar and the scheduler. I see where the VIewPreset is a config for the scheduler but I don't see a ViewPreset config for the calendar. How do i configure the ViewPreset for my calendar?


Post by mats »

Please see https://www.bryntum.com/docs/calendar-for-extjs/#!/api/Cal.panel.Calendar

Calendar uses 'modes' (day, week, month, etc).

Mode switching
The panel subclasses Ext.tab.Panel where each tab of the panel corresponds to a single mode. The modes can be switched dynamically in the runtime:

panel.setMode("week");
or provided with mode config (default mode is "month"):


Ext.create('Cal.panel.Calendar', {
    ...

mode : "week"
})

Tired of debugging javascript errors in web applications? Try our powerful error logging service RootCause


Post by mjcee »

I am trying to register a new view preset as suggested by arcady and the compiler is having a problem finding the Sch code. My code looks like:

        Sch.preset.Manager.registerPreset('dayX', {
            timeRowHeight: 40,
            displayDateFormat: 'g:iA',
            shiftIncrement: 1,
            shiftUnit: 'DAY',
            defaultSpan: 1,
            timeResolution: {
                unit: 'MINUTE',
                increment: 30
            },
            columnLinesFor: 'bottom',
            headerConfig: {
                bottom: {
                    unit: 'HOUR',
                    align: 'center',
                    renderer: function (value) {
                        return Ext.String.format(
                            '<div class="sch-calendarcolumn-ct"><span class="sch-calendarcolumn-hours">{0}</span>' +
                            '<span class="sch-calendarcolumn-minutes">{1}</span></div>',
                            Ext.Date.format(value, 'H'),
                            Ext.Date.format(value, 'i')
                        );
                    }
                },
                middle: {
                    unit: 'DAY',
                    align: 'center',
                    dateFormat: 'D d/m',
                    splitUnit: 'DAY'
                }
            }

    });

I am running this inside Visual Studio and the compile error is 'Sch is not defined'.

I copied bryntum-calendar to ext/packages and added bryntum-calendar to the requires section of app.json. It finds Cal.panel.Calendar correctly and displays the calendar. What am I missing?


Post by arcady »

I don't know if Visual Studio is able to understand Ext JS defined classes as proper language symbols.
You can try entering something like this somewhere in your code:

Cal.panel.Calendar;

And I suspect that Visual Studio also won't like it.
I know for sure that Sch.preset.Manager class is shipped with Calendar for Ext JS.

If Visual Studio uses eslint for validation then try adding this line to the beginning of the file where the warning is displayed:

/* global Sch */

Post by mjcee »

Back to the original problem. I don't see anything in the preset manager that looks line the time on the week and the day time axis. This time has smaller 00 values for the minute. is this as special format just for this axis. If so could you tell me where in the code it is defined so I can override it.


Post by arcady »

Could you clarify how exactly you want the headers to look? A screenshot or something?


Post by mjcee »

The current day and week time axis values consist of the hours, 01 thru 23 with small 00 values for the minutes. Our users are used to seeing the hours in 'standard' AM/PM format: 01:00 AM thru 11:00 AM and 12:00 PM thru 11:00PM. I don't see anything in the preset manager that would help me make this change. The format of the time with the small minute values looks like it is controlled by something else in the code. If I could find that, I would be able to override it and display the time in the format requested by our users.


Post by arcady »

Yes there are format masks responsible for displaying time the way you want. Please check Ext JS docs for that: https://docs.sencha.com/extjs/6.2.0/modern/Ext.Date.html

Also please keep in mind that preset date formats are applied by localization.
For example this is how I change hourAndDay view preset format h:i A (displays hours 01-12 and adds AM/PM):

Ext.define('MyApp.locale.En', {
    extend    : 'Sch.locale.Locale',
    singleton : true,

    requires : 'Sch.locale.En',

    l10n : {
        'Sch.preset.Manager' : {
            hourAndDay : {
                displayDateFormat : 'G:i',
                middleDateFormat  : 'h:i A',
                topDateFormat     : 'D d/m'
            },
        }
    },

    apply : function (classNames) {
        Sch.locale.En.apply(classNames);
        this.callParent(arguments);
    }
});

Post Reply