Hi there
We would like to set the dateformat for weekday and time in the sidebar of the vertical scheduler. We have not been able to find this option in the Angular7 version.
Support Forum
The format should come from viewPreset. See ViewPreset and look for dateFormat please.
Hi Saki, We are using schedulerLocale to set the configuration of presetManager. We are using two files 1) scheduler.locale.En.js and 2) scheduler.locale.De.js
Locale DE is working perfectly but Locale EN is not working.
Below is the En locale file
another file is DE locale.
After debugging, I found one more thing -> HeaderConfig is not working in En Locale. If I use 'topDateFormat' then I am able to see the changes but headerConfig changes I am unable to see.
Please help.
Locale DE is working perfectly but Locale EN is not working.
Below is the En locale file
/*
Bryntum Scheduler (TRIAL VERSION) 2.2.5
Copyright(c) 2019 Bryntum AB
https://bryntum.com/contact
https://bryntum.com/license
*/
! function (e, n) {
"object" == typeof exports && "object" == typeof module ? module.exports = n() : "function" == typeof define && define.amd ? define("En", [], n) : "object" == typeof exports ? exports.En = n() : (e.bryntum = e.bryntum || {}, e.bryntum.locales = e.bryntum.locales || {}, e.bryntum.locales.En = n())
}(window, function () {
return function (e) {
var n = {};
function t(o) {
if (n[o]) return n[o].exports;
var r = n[o] = {
i: o,
l: !1,
exports: {}
};
return e[o].call(r.exports, r, r.exports, t), r.l = !0, r.exports
}
return t.m = e, t.c = n, t.d = function (e, n, o) {
t.o(e, n) || Object.defineProperty(e, n, {
enumerable: !0,
get: o
})
}, t.r = function (e) {
"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
value: "Module"
}), Object.defineProperty(e, "__esModule", {
value: !0
})
}, t.t = function (e, n) {
if (1 & n && (e = t(e)), 8 & n) return e;
if (4 & n && "object" == typeof e && e && e.__esModule) return e;
var o = Object.create(null);
if (t.r(o), Object.defineProperty(o, "default", {
enumerable: !0,
value: e
}), 2 & n && "string" != typeof e)
for (var r in e) t.d(o, r, function (n) {
return e[n]
}.bind(null, r));
return o
}, t.n = function (e) {
var n = e && e.__esModule ? function () {
return e.default
} : function () {
return e
};
return t.d(n, "a", n), n
}, t.o = function (e, n) {
return Object.prototype.hasOwnProperty.call(e, n)
}, t.p = "", t(t.s = 6)
}({
6: function (e, n, t) {
"use strict";
t.r(n);
var o = {
localeName: "En",
localeDesc: "English",
TemplateColumn: {
noTemplate: "TemplateColumn needs a template",
noFunction: "TemplateColumn.template must be a function"
},
ColumnStore: {
columnTypeNotFound: function (e) {
return "Column type '".concat(e.type, "' not registered")
}
},
InstancePlugin: {
fnMissing: function (e) {
return "Trying to chain fn ".concat(e.plugIntoName, "#").concat(e.fnName, ", but plugin fn ").concat(e.pluginName, "#").concat(e.fnName, " does not exist")
},
overrideFnMissing: function (e) {
return "Trying to override fn ".concat(e.plugIntoName, "#").concat(e.fnName, ", but plugin fn ").concat(e.pluginName, "#").concat(e.fnName, " does not exist")
}
},
ColumnPicker: {
columnsMenu: "Columns",
hideColumn: "Hide column",
hideColumnShort: "Hide"
},
Filter: {
applyFilter: "Apply filter",
filter: "Filter",
editFilter: "Edit filter",
on: "On",
before: "Before",
after: "After",
equals: "Equals",
lessThan: "Less than",
moreThan: "More than",
removeFilter: "Remove filter"
},
FilterBar: {
enableFilterBar: "Show filter bar",
disableFilterBar: "Hide filter bar"
},
Group: {
groupAscending: "Group ascending",
groupDescending: "Group descending",
groupAscendingShort: "Ascending",
groupDescendingShort: "Descending",
stopGrouping: "Stop grouping",
stopGroupingShort: "Stop"
},
Search: {
searchForValue: "Search for value"
},
Sort: {
sortAscending: "Sort ascending",
sortDescending: "Sort descending",
multiSort: "Multi sort",
removeSorter: "Remove sorter",
addSortAscending: "Add ascending sorter",
addSortDescending: "Add descending sorter",
toggleSortAscending: "Change to ascending",
toggleSortDescending: "Change to descending",
sortAscendingShort: "Ascending",
sortDescendingShort: "Descending",
removeSorterShort: "Remove",
addSortAscendingShort: "+ Ascending",
addSortDescendingShort: "+ Descending"
},
Tree: {
noTreeColumn: "To use the tree feature one column must be configured with tree: true"
},
Grid: {
featureNotFound: function (e) {
return "Feature '".concat(e, "' not available, make sure you have imported it")
},
invalidFeatureNameFormat: function (e) {
return "Invalid feature name '".concat(e, "', must start with a lowercase letter")
},
removeRow: "Delete row",
removeRows: "Delete rows",
loadMask: "Loading...",
loadFailedMessage: "Data loading failed.",
moveColumnLeft: "Move to left section",
moveColumnRight: "Move to right section",
noRows: "No rows to display"
},
Field: {
invalidValue: "Invalid field value",
minimumValueViolation: "Minimum value violation",
maximumValueViolation: "Maximum value violation",
fieldRequired: "This field is required",
validateFilter: "Value must be selected from the list"
},
DateField: {
invalidDate: "Invalid date input"
},
TimeField: {
invalidTime: "Invalid time input"
},
DateHelper: {
locale: "en-US",
shortWeek: "W",
shortQuarter: "q",
week: "Week",
weekStartDay: 0,
unitNames: [{
single: "millisecond",
plural: "ms",
abbrev: "ms"
}, {
single: "second",
plural: "seconds",
abbrev: "s"
}, {
single: "minute",
plural: "minutes",
abbrev: "min"
}, {
single: "hour",
plural: "hours",
abbrev: "h"
}, {
single: "day",
plural: "days",
abbrev: "d"
}, {
single: "week",
plural: "weeks",
abbrev: "w"
}, {
single: "month",
plural: "months",
abbrev: "mon"
}, {
single: "quarter",
plural: "quarters",
abbrev: "q"
}, {
single: "year",
plural: "years",
abbrev: "yr"
}],
unitAbbreviations: [
["mil"],
["s", "sec"],
["m", "min"],
["h", "hr"],
["d"],
["w", "wk"],
["mo", "mon", "mnt"],
["q", "quar", "qrt"],
["y", "yr"]
],
parsers: {
L: "MM/DD/YYYY",
LT: "HH:mm A"
},
ordinalSuffix: function (e) {
return e + ({
1: "st",
2: "nd",
3: "rd"
}[e[e.length - 1]] || "th")
}
},
BooleanCombo: {
Yes: "Yes",
No: "No"
}
},
r = {
ExcelExporter: {
"No resource assigned": "No resource assigned"
},
ResourceInfoColumn: {
eventCountText: function (e) {
return e + " event" + (1 !== e ? "s" : "")
}
},
Dependencies: {
from: "From",
to: "To",
valid: "Valid",
invalid: "Invalid",
Checking: "Checking…"
},
DependencyEdit: {
From: "From",
To: "To",
Type: "Type",
Lag: "Lag",
"Edit dependency": "Edit dependency",
Save: "Save",
Delete: "Delete",
Cancel: "Cancel",
StartToStart: "Start to Start",
StartToEnd: "Start to End",
EndToStart: "End to Start",
EndToEnd: "End to End"
},
EventEdit: {
Name: "Name",
Resource: "Resource",
Start: "Start",
End: "End",
Save: "Save",
Delete: "Delete",
Cancel: "Cancel",
"Edit Event": "Edit event"
},
Scheduler: {
"Add event": "Add event",
"Delete event": "Delete event",
"Unassign event": "Unassign event"
},
HeaderContextMenu: {
pickZoomLevel: "Zoom",
activeDateRange: "Date range",
startText: "Start date",
endText: "End date",
todayText: "Today"
},
EventFilter: {
filterEvents: "Filter tasks",
byName: "By name"
},
TimeRanges: {
showCurrentTimeLine: "Show current timeline"
},
PresetManager: {
minuteAndHour: {
topDateFormat: "ddd MM/DD, hA"
},
hourAndDay: {
// topDateFormat: 'ddd DD.MM',
headerConfig: { // This defines your header, you must include a 'middle' object, and top/bottom are optional.
middle: { // For each row you can define 'unit', 'increment', 'dateFormat', 'renderer', 'align', and 'thisObj'
unit: 'hour',
dateFormat: 'HH:mm'
},
top: {
unit: 'day',
dateFormat: 'ddd DD.MM'
},
},
},
weekAndDay: {
displayDateFormat: "hh:mm A"
}
}
};
for (var a in o) r[a] = o[a];
n.default = r
}
}).default
});
! function (e, n) {
"object" == typeof exports && "object" == typeof module ? module.exports = n() : "function" == typeof define && define.amd ? define("De", [], n) : "object" == typeof exports ? exports.De = n() : (e.bryntum = e.bryntum || {}, e.bryntum.locales = e.bryntum.locales || {}, e.bryntum.locales.De = n())
}(window, function () {
return function (e) {
var n = {};
function t(o) {
if (n[o]) return n[o].exports;
var r = n[o] = {
i: o,
l: !1,
exports: {}
};
return e[o].call(r.exports, r, r.exports, t), r.l = !0, r.exports
}
return t.m = e, t.c = n, t.d = function (e, n, o) {
t.o(e, n) || Object.defineProperty(e, n, {
enumerable: !0,
get: o
})
}, t.r = function (e) {
"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
value: "Module"
}), Object.defineProperty(e, "__esModule", {
value: !0
})
}, t.t = function (e, n) {
if (1 & n && (e = t(e)), 8 & n) return e;
if (4 & n && "object" == typeof e && e && e.__esModule) return e;
var o = Object.create(null);
if (t.r(o), Object.defineProperty(o, "default", {
enumerable: !0,
value: e
}), 2 & n && "string" != typeof e)
for (var r in e) t.d(o, r, function (n) {
return e[n]
}.bind(null, r));
return o
}, t.n = function (e) {
var n = e && e.__esModule ? function () {
return e.default
} : function () {
return e
};
return t.d(n, "a", n), n
}, t.o = function (e, n) {
return Object.prototype.hasOwnProperty.call(e, n)
}, t.p = "", t(t.s = 6)
}({
6: function (e, n, t) {
"use strict";
t.r(n);
var o = {
localeName: "De",
localeDesc: "German",
TemplateColumn: {
noTemplate: 'TemplateColumn braucht eine template',
noFunction: 'TemplateColumn.template muss eine funktion sein'
},
ColumnStore: {
columnTypeNotFound: function (e) {
return 'Spalte typ ' + data.type + 'nicht registriert';
}
},
InstancePlugin: {
fnMissing: function (e) {
return "Trying to chain fn ".concat(e.plugIntoName, "#").concat(e.fnName, ", but plugin fn ").concat(e.pluginName, "#").concat(e.fnName, " does not exist")
},
overrideFnMissing: function (e) {
return "Trying to override fn ".concat(e.plugIntoName, "#").concat(e.fnName, ", but plugin fn ").concat(e.pluginName, "#").concat(e.fnName, " does not exist")
}
},
ColumnPicker: {
columnsMenu: 'Spalten',
hideColumn: 'Versteck spalte',
hideColumnShort: 'Versteck'
},
Filter: {
applyFilter: 'Filter anwenden',
filter: 'Filter',
editFilter: 'Filter redigieren',
on: 'Auf',
before: 'Vor',
after: 'Nach',
equals: 'Gleichen',
lessThan: 'Weniger als',
moreThan: 'Mehr als',
removeFilter: 'Filter entfernen'
},
FilterBar: {
enableFilterBar: 'Filterleiste anzeigen',
disableFilterBar: 'Filterleiste ausblenden'
},
Group: {
groupAscending: 'Aufsteigend gruppieren',
groupDescending: 'Absteigend gruppieren',
groupAscendingShort: 'Aufsteigend',
groupDescendingShort: 'Absteigend',
stopGrouping: 'Stoppen gruppierung',
stopGroupingShort: 'Stoppen'
},
Search: {
searchForValue: 'Suche nach Wert'
},
Sort: {
'sortAscending': 'Aufsteigend sortierung',
'sortDescending': 'Absteigend sortierung',
'multiSort': 'Multi sortieren',
'removeSorter': 'Sortierung entfernen',
'addSortAscending': 'Aufsteigend sortieren hinzufügen',
'addSortDescending': 'Absteigend sortieren hinzufügen',
'toggleSortAscending': 'Ändern Sie auf aufsteigend',
'toggleSortDescending': 'Zu absteigend wechseln',
'sortAscendingShort': 'Aufsteigend',
'sortDescendingShort': 'Absteigend',
'removeSorterShort': 'Entfernen',
'addSortAscendingShort': '+ Aufsteigend',
'addSortDescendingShort': '+ Absteigend'
},
Tree: {
noTreeColumn: "To use the tree feature one column must be configured with tree: true"
},
Grid: {
featureNotFound: function (data) {
return 'Feature "' + data + '" not available, make sure you have imported it';
},
invalidFeatureNameFormat: function (data) {
return 'Invalid feature name "' + data + '", must start with a lowercase letter';
},
removeRow: 'Zeile löschen',
removeRows: 'Zeilen löschen',
loadMask: 'Laden...',
loadFailedMessage: 'Wird geladen, bitte versuche es erneut',
moveColumnLeft: 'Bewegen Sie sich zum linken Bereich',
moveColumnRight: 'Bewegen Sie sich nach rechts',
noRows: 'Keine Zeilen zum Anzeigen'
},
Field: {
invalidValue: 'Ungültiger Feldwert',
minimumValueViolation: 'Mindestwertverletzung',
maximumValueViolation: 'Maximalwertverletzung',
fieldRequired: 'Dieses Feld wird benötigt',
validateFilter: 'Der Wert muss aus der Liste ausgewählt werden'
},
DateField: {
invalidDate: 'Ungültige Datumseingabe'
},
TimeField: {
invalidTime: 'Ungültige Zeitangabe'
},
DateHelper: {
locale: "de",
shortWeek: "W",
shortQuarter: "q",
week: "Woche",
weekStartDay: 1,
unitNames: [
{ single: 'Millisekunde', plural: 'Millisekunden', abbrev: 'ms' },
{ single: 'Sekunde', plural: 'Sekunden', abbrev: 's' },
{ single: 'Minute', plural: 'Minuten', abbrev: 'min' },
{ single: 'Stunde', plural: 'Stunden', abbrev: 'std' },
{ single: 'Tag', plural: 'Tage', abbrev: 't' },
{ single: 'Woche', plural: 'Wochen', abbrev: 'W' },
{ single: 'Monat', plural: 'Monathe', abbrev: 'mon' },
{ single: 'Quartal', plural: 'Quartal', abbrev: 'Q' },
{ single: 'Jahr', plural: 'Jahre', abbrev: 'jahr' }
],
unitAbbreviations: [
['mil'],
['s', 'sec'],
['m', 'min'],
['h', 'hr'],
['d'],
['w', 'wk'],
['mo', 'mon', 'mnt'],
['q', 'quar', 'qrt'],
['y', 'yr']
],
parsers: {
'L': 'DD.MM.YYYY',
'LT': 'HH:mm'
},
ordinalSuffix: function (e) {
return e + ({
1: "st",
2: "nd",
3: "rd"
}[e[e.length - 1]] || "th")
}
},
BooleanCombo: {
'Yes': 'Ja',
'No': 'Nein'
}
},
r = {
ExcelExporter: {
'No resource assigned': 'Keine Ressource zugewiesen'
},
ResourceInfoColumn: {
eventCountText: function (e) {
return e + " Veranstaltung" + (1 !== e ? "de" : "")
}
},
Dependencies: {
from: 'Von',
to: 'Zo',
valid: 'Gültig',
invalid: 'Ungültig',
Checking: 'Überprüfung ...'
},
DependencyEdit: {
From: 'Von',
To: 'Zu',
Type: 'Typ',
Lag: 'Verzögern',
'Edit dependency': 'Abhängigkeit bearbeiten',
Save: 'Speichern',
Delete: 'Löschen',
Cancel: 'Abbrechen',
StartToStart: 'Anfang-Anfang',
StartToEnd: 'Anfang-Ende',
EndToStart: 'Ende-Anfang',
EndToEnd: 'Ende-Ende'
},
EventEdit: {
Name: 'Name',
Resource: 'Ressource',
Start: 'Start',
End: 'Ende',
Save: 'Speichern',
Delete: 'Löschen',
Cancel: 'Abbrechen',
'Edit Event': 'Buchung redigieren'
},
Scheduler: {
'Add event': 'Ereignis hinzufügen',
'Delete event': 'Buchung löschen',
'Unassign event': 'Ereignis nicht zuordnen'
},
HeaderContextMenu: {
pickZoomLevel: 'Zoomen',
activeDateRange: 'Datumsbereich',
startText: 'Anfangsdatum',
endText: 'Endtermin',
todayText: 'Heute'
},
EventFilter: {
filterEvents: 'Aufgaben filtern',
byName: 'Namentlich'
},
TimeRanges: {
showCurrentTimeLine: 'Aktuelle Zeitleiste anzeigen'
},
PresetManager: {
minuteAndHour: {
topDateFormat: 'ddd DD.MM, HH:mm'
},
hourAndDay: {
topDateFormat: 'ddd DD.MM',
headerConfig: { // This defines your header, you must include a 'middle' object, and top/bottom are optional.
middle: { // For each row you can define 'unit', 'increment', 'dateFormat', 'renderer', 'align', and 'thisObj'
unit: 'hour',
dateFormat: 'HH:mm'
},
top: {
unit: 'day',
dateFormat: 'ddd DD.MM'
}
},
},
weekAndDay: {
displayDateFormat: 'HH:mm'
}
}
};
for (var a in o) r[a] = o[a];
n.default = r
}
}).default
});
After debugging, I found one more thing -> HeaderConfig is not working in En Locale. If I use 'topDateFormat' then I am able to see the changes but headerConfig changes I am unable to see.
Please help.
Hello.
Please see this guide on localizing view presets. MinuteAndHour is localized properly, as I see, but hourAndDay is not.
Please see this guide on localizing view presets. MinuteAndHour is localized properly, as I see, but hourAndDay is not.
Hi Maxim, I am unable to see HeaderConfig in this documentation -> https://bryntum.com/docs/scheduler/#guides/customization/localization.md
That is correct, locales are only supposed to be applied to date format and mentioned guide shows code snippet to localize date format for a view preset headers.
If you want your presets to differ more between locales, e.g. different time resolution or even different headers configuration, default locales won't help. You would need to register all required locales first and on apply them when locale is changed.
If you want your presets to differ more between locales, e.g. different time resolution or even different headers configuration, default locales won't help. You would need to register all required locales first and on apply them when locale is changed.
Hi Maxim, yeah I think I am registering all locales. Below is the code I am using to registering the locales. Please have a look
and below is the code of component to change the locale
import EnLocale from 'bryntum-scheduler/locales/scheduler.locale.En.js';
import DeLocale from 'bryntum-scheduler/locales/scheduler.locale.De.js';
import { LocaleManager } from 'bryntum-scheduler/scheduler.umd.js';
// register locales
LocaleManager.registerLocale('En', { locale: EnLocale });
LocaleManager.registerLocale('De', { locale: DeLocale });
applySchedulerLocale(schedulerLocale: string): void {
const localeManager: LocaleManager = this.scheduler.schedulerEngine.localeManager;
// console.log('localeManager ', localeManager);
switch (schedulerLocale) {
case 'fr':
localeManager.locale = 'Fr';
break;
case 'it':
localeManager.locale = 'It';
break;
case 'de':
localeManager.locale = 'De';
break;
default:
localeManager.locale = 'En';
break;
}
}
I see you are providing incorrect localization:
this is not how it is descibed in the localization guide.
This is a code snippet from the guide, please look and adjust your locales accordingly, removing all previous incorrect localization code.
PresetManager: {
minuteAndHour: {
topDateFormat: "ddd MM/DD, hA"
},
hourAndDay: {
// topDateFormat: 'ddd DD.MM',
headerConfig: { // This defines your header, you must include a 'middle' object, and top/bottom are optional.
middle: { // For each row you can define 'unit', 'increment', 'dateFormat', 'renderer', 'align', and 'thisObj'
unit: 'hour',
dateFormat: 'HH:mm'
},
top: {
unit: 'day',
dateFormat: 'ddd DD.MM'
},
},
},
weekAndDay: {
displayDateFormat: "hh:mm A"
}
}
This is a code snippet from the guide, please look and adjust your locales accordingly, removing all previous incorrect localization code.
PresetManager : {
// Translation for the "weekAndDay" ViewPreset
weekAndDay : {
// Date format used by tooltips etc.
displayDateFormat : 'll hh:mm A',
// Change the date format for the middle and top levels
topDateFormat: 'MMM',
middleDateFormat : 'D'
}
}