We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hello,
I’ve been having trouble integrating your schedule component into my app. Whenever I try to use it in my app, it generates a bug that makes the whole app crash.
I don’t know where this bug is coming from. If I unit test just the section of my app that uses your schedule component, everything works fine. If I integrate that section with the rest, the bug reappears.
I’ve set try-catch blocks all throughout my code and none of them have managed to catch the error. This is the exception that shows on my console:
This is the section of your code that throws the exception (it’s the one that included in the vendor.js’s line 197798):
That error then affects your other component (the navigation sidebar that’s on the left of the screen) making it crash as well rendering the whole app unusable.
Is this bug coming from your component’s code?
I’m also using your Dialog, Button, Sidebar, Grid and Uploader components. I really doubt it but, could it be a compatibility issue between all those components?
I’d really appreciate any help you can give me.
Hello again,
I’ve managed to localize the issue: as soon as I do a “setCulture();” anywhere in the code, and the culture is then set to anything other than “en-US”. This bug appears.
Could you please confirm if it’s indeed a compatibility issue between the ‘setCulture()’ method from '@syncfusion/ej2-base' and the schedule component?
Thank you
|
npm install cldr - data—save |
|
npm install systemjs - plugin - json--save - dev |
|
declare module "*.json" {
const value: any;
export default value;
} |
|
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/',
"syncfusion:": "node_modules/@syncfusion/", // syncfusion alias
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// syncfusion bundles
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
"@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
"@syncfusion/ej2-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js",
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
"@syncfusion/ej2-ng-base": "syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js",
"@syncfusion/ej2-ng-schedule": "syncfusion:ej2-ng-schedule/dist/ej2-ng-schedule.umd.min.js",
"cldr-data": 'npm:cldr-data',
"plugin-json": "npm:systemjs-plugin-json/json.js",
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
meta: {
'*.json': { loader: 'plugin-json' }
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
},
"cldr-data": { main: 'index.js', defaultExtension: 'js' },
rxjs: {
defaultExtension: 'js'
}
}
});
})(this); |
|
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import * as cagregorian from 'cldr-data/main/nl/ca-gregorian.json';
import * as currencies from 'cldr-data/main/nl/currencies.json';
import * as numbers from 'cldr-data/main/nl/numbers.json';
import * as timeZoneNames from 'cldr-data/main/nl/timeZoneNames.json';
import * as numberingSystems from 'cldr-data/supplemental/numberingSystems.json';
import { L10n, loadCldr, setCulture } from '@syncfusion/ej2-base';
import { EventSettingsModel, ActionEventArgs, Schedule, EJ2Instance } from '@syncfusion/ej2-ng-schedule';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService } from '@syncfusion/ej2-ng-schedule';
loadCldr(cagregorian, currencies, numbers, timeZoneNames, numberingSystems); |
|
L10n.load({ // tslint:disable:object-literal-sort-keys
'nl': {
"schedule": {
"day": "Dag",
"week": "Week",
"workWeek": "Werkweek",
"month": "Maand",
"agenda": "Agenda",
"monthAgenda": "Maandagenda",
"today": "Vandaag",
"noEvents": "Geen evenementen",
"allDay": "De hele dag",
"start": "Begin",
"end": "Einde",
"more": "meer",
"close": "Dichtbij",
"cancel": "Annuleer",
"noTitle": "(Geen titel)",
"delete": "Verwijder",
"deleteEvent": "Evenement verwijderen",
"selectedItems": "Items geselecteerd",
"deleteSeries": "Serie verwijderen",
"edit": "Bewerk",
"editSeries": "Bewerk serie",
"editEvent": "Gebeurtenis bewerken",
"createEvent": "creëren",
"subject": "Onderwerpen",
"addTitle": "Voeg titel toe",
"moreDetails": "Meer details",
"save": "Opslaan",
"editContent": "Wilt u alleen deze gebeurtenis of hele reeks bewerken?",
"deleteRecurrenceContent": "Wilt u alleen deze gebeurtenis of hele reeks verwijderen?",
"deleteContent": "Weet je zeker dat je deze afspraak wilt verwijderen?",
"newEvent": "Nieuw evenement",
"title": "Titel",
"location": "Plaats",
"description": "Beschrijving",
"timezone": "Tijdzone",
"startTimezone": "Start tijdzone",
"endTimezone": "Eindtijdzone",
"repeat": "Herhaling",
"saveButton": "Opslaan",
"cancelButton": "Annuleer",
"deleteButton": "Verwijder",
"recurrence": "Herhaling",
"editRecurrence": "Herhaling bewerken",
"repeats": "herhalingen",
"alert": "alarm",
"startEndError": "De geselecteerde einddatum vindt plaats vóór de startdatum.",
"invalidDateError": "De ingevoerde datumwaarde is ongeldig.",
"ok": "OK"
},
"RecurrenceEditor": {
"none": "Geen",
"daily": "Dagelijks",
"weekly": "Wekelijks",
"monthly": "Maandelijks",
"month": "Maand",
"yearly": "jaar-",
"never": "Nooit",
"until": "Tot",
"count": "tellen",
"first": "Eerste",
"second": "Tweede",
"third": "Derde",
"fourth": "Vierde",
"last": "Laatste",
"repeat": "Herhaling",
"repeatEvery": "Herhaal elke",
"on": "Herhaal aan",
"end": "Einde",
"onDay": "Dag",
"days": "Dag (en)",
"weeks": "Weken)",
"months": "Maanden)",
"years": "Jaar (s)",
"every": "elk",
"summaryTimes": "tijd (s)",
"summaryOn": "op",
"summaryUntil": "tot",
"summaryRepeat": "herhalingen",
"summaryDay": "dag (en)",
"summaryWeek": "weken)",
"summaryMonth": "maanden)",
"summaryYear": "jaar (jaren)"
}
}
});
setCulture('nl'); |
Hello Velmurugan,
Thanks to your help I’ve succeeded at solving my problem.
The only thing that was a little confusing was that, when you wrote the command for npm:
npm install cldr-data -save
Your browser/auto-corrector must have parsed it into:
npm install cldr - data—save
Which doesn’t work. But thanks to the example you gave me, I was able to follow your explanation anyway.
Thank you once again!
