[REACT] 24 Hour format

[era]

My viewpreset looks like this:

viewPreset: {
		base: 'weekAndDay',
		// tickWidth: 34,                // Time column width in horizontal mode
		displayDateFormat: 'HH:mm',    // Controls how dates will be displayed in tooltips etc

	shiftIncrement: 1,             // Controls how much time to skip when calling shiftNext and shiftPrevious.
	shiftUnit: 'day',         // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
	defaultSpan: 6,            // By default, if no end date is supplied to a view it will show 12 hours

	timeResolution: {              // Dates will be snapped to this resolution
		unit: 'minute',       // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
		increment: 15
	},

	headers: [                     // This defines your header rows from top to bottom
		{                           // For each row you can define 'unit', 'increment', 'dateFormat', 'renderer', 'align', and 'thisObj'
			unit: 'day',
			dateFormat: 'ddd D. MMM'
		},
		{
			unit: 'hour',
			dateFormat: 'H:mm'
		}
	],

	columnLinesFor: 1              // Defines header level column lines will be drawn for. Defaults to the last level.
}

I'm looking for using 24 hour format, is this the correct place to add this? The dates are still AM/PM.

Also, the events are in UTC format, how would I configure Scheduler to render these in in Danish timezone?

[alex.l]

Hi era,

Besides the changes you applied, you need to know the next.
Date and time are controlled with this formatter: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat

So, it will be automatically switched on correct format after you register correct name for your updated localization using LocaleManger and switch the app on it.
As 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
});
// "da" - is unified name for Danish localization
LocaleManager.registerLocale('da', { desc : 'Danish locale', locale : locale });
// and later when you need:
LocaleManager.applyLocale('da');

Let me know if it helped with your problem.

All best,
Alex

[era]

I think you touch on one of my biggest problems. Since I'm using the wrapper, none of the examples or the documentation makes any sense.

This is the wrapper that I have found. I cant really make your code snippet fit in the setup. Maybe I have larger problems here that I'm not aware of, would be a lot of help pointing me in the right direction.

I have added the Bryntum Scheduler as a local module, package.json refers to Bryntum Scheduler like this: "bryntum-scheduler": "file:src/bryntum-scheduler/build".

The following code is located under: ./src/app/components/scheduler.js

// we import scheduler.umd for IE11 compatibility only. If you don't use IE import:
import { Scheduler, ObjectHelper, Widget, LocaleManager, LocaleHelper } from 'bryntum-scheduler/scheduler.umd'; // "bryntum-scheduler" is a local module under ./src/
import partentLocale from 'bryntum-scheduler/../lib/Scheduler/localization/En.js'; // Cant be like this

const locale = LocaleHelper.mergeLocales(parentLocale, {
    // your localization strings here
});

// "da" - is unified name for Danish localization
LocaleManager.registerLocale('da', { desc : 'Danish locale', locale : locale });
// and later when you need:
LocaleManager.applyLocale('da');

// Defines a React component that wraps Bryntum Scheduler
class BryntumScheduler extends Component {

/**
 * @deprecated in favor of schedulerInstance
 */
get schedulerEngine() {
	console.warn('schedulerEngine is deprecated. Use schedulerInstance instead.')
	return this.schedulerInstance;
}

[...]
}
	

[pmiklashevich]

Hello,

Since I'm using the wrapper, none of the examples or the documentation makes any sense.

Well, React is all about javascript and components. Our wrapper is just a helper which translates some part of our API to the react component. If you feel some of the API is missing, you're free to implement it. The wrapper is provided as a part of examples because it's implied to be extended by the users.

To be able to help you, we need a testcase to check. Providing code snippets doesn't really help. So to create a testcase lets modify one of our demos. According to the guide:

The exception to the above are Localization and Advanced examples that use Bryntum scheduler component directly without a wrapper.

So since you're looking for a solution with our wrapper, let's take another demo as a starting point. For example, Scheduler/examples/react/javascript/custom-event-editor.

Let's get it up and running:

cd Scheduler/examples/react/javascript/custom-event-editor 
npm install
npm run start

Снимок экрана 2020-09-14 в 19.19.18.png (996.75 KiB) Viewed 1301 times

Now let's modify the demo. Since localization works globally and you can have multiple Scheduler components in your application, you need to use a hook when the application is created. For this please use the "useEffect" hook in the meaning of "componentDidMount" in Scheduler/examples/react/javascript/custom-event-editor/src/App.js file:

First need to import corresponding classes from the bryntum-scheduler package. 'bryntum-scheduler/scheduler.umd' is used because it's used in the wrapper (Scheduler/examples/react/_shared/src/lib/BryntumScheduler.js).

import React, { useState, useRef, useEffect } from 'react';
import { LocaleManager, LocaleHelper } from 'bryntum-scheduler/scheduler.umd';
import parentLocale from 'bryntum-scheduler/locales/scheduler.locale.En';

Then need to implement the hook. Need to define your locale and apply it globally:

function App() {
    // Works as componentDidMount
    useEffect(() => {
        const locale = LocaleHelper.mergeLocales(parentLocale, {
            // your localization strings here
            DateHelper : {
                locale : 'da',
            }
        });
        // "da" - is unified name for Danish localization
        LocaleManager.registerLocale('da', { desc : 'Danish locale', locale : locale });
        // and later when you need:
        LocaleManager.applyLocale('da');
    }, []);

Important thing here is to override "locale" key for "DateHelper" definition:

            DateHelper : {
                locale : 'da', // it's 'en-US' in En locale
            }

Now let's see the result ("npm run start" is running):

Снимок экрана 2020-09-14 в 20.31.37.png (219.94 KiB) Viewed 1301 times

Hope this will help you to move on!

Best regards,
Pavel

[era]

This was exactly what I was looking for, Thanks!