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. Image for the cookie policy date

getDayNames TypeError: "can't convert undefined to object"


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:

see img1.jpg of the attached .7zip file

This is the section of your code that throws the exception (it’s the one that included in the vendor.js’s line 197798):

see img2.jpg of the attached .7zip file

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.

Attachment: typeError_imgs_89d0dbbb.7z

6 Replies

AV Alberto Vázquez May 28, 2018 10:59 AM UTC

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

VS Velmurugan S Syncfusion Team May 28, 2018 12:48 PM UTC

Hi Alberto, 

Thanks for Contacting Syncfusion support. 

We have analyzed the reported scenario based on the given screenshot and suspect that you are applying the value for the locale property and not referring the required cldr-data files. Please refer to the following steps to refer the cldr-data files to overcome this issues. 
·         Step 1: Install the CLDR-Data package by using the following command (installs all the CLDR JSON data). To know more about CLDR-Data refer to the CLDR-Data link. 
npm install cldr - data—save 
Step 2: Once the package installed, you can find the culture specific JSON data under the location ode_modules\cldr-data. 
·         Now import the installed CLDR JSON data into the app.ts file. To import JSON data we need to install the JSON plugin loader. Here we have used the SystemJS JSON plugin loader. 
npm install systemjs - plugin - json--save - dev 
·         Also, add the following code example in the typings.d.ts file. 
declare module "*.json" { 
const value: any; 
export default value; 
·         Step 3: Once installed, configure the system.config.js configuration settings as like below to map the systemjs-plugin-json loader. 
·         Now use the loadCldr method to load the culture specific CLDR JSON data from the installed location to app.tsfile as like the below code example. 
* System configuration for Angular samples 
* Adjust as necessary for your application needs. 
(function (global) { 
      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' 
·          Step 4: Now use the loadCldr method to load the culture specific CLDR JSON data from the installed location to app.ts file as like the below code example. 
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);  
·         Step 5: Before changing to a culture other than English, ensure that locale text for the concerned culture is loaded through load method of L10n class. 
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)" 
We have prepared the sample by following the above steps, which can be downloaded from the following location. 
Kindly try with the above steps with sample and let us know if you need any further assistance on this. 

AV Alberto Vázquez May 30, 2018 11:15 AM UTC

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!

VS Velmurugan S Syncfusion Team May 31, 2018 12:14 PM UTC

Hi Alberto, 
You are most welcome and we are glad that our previously provided solution helped to resolve your problem. 

Also, we regret for the confusion that you faced due to the npm command format with which we shared. It was due to the unnoticed editor format changes from our end while posting it to you. Please check with the below proper command, and also we believe that it will work properly for you. 

                npm install cldr-data --save 

Kindly let us know, if you need any further assistance on this. 


NI NIKHIL June 14, 2021 07:47 AM UTC

@Velmurugan hi.. is this compatible with angular 10+? can you update it if not

HB Hareesh Balasubramanian Syncfusion Team June 15, 2021 01:14 PM UTC

Hi Nikhil, 

Thanks for the update. 

We have prepared a sample based on your shared query “need to apply globalization for Angular CLI-10 schedule sample” which can be downloaded from the following link. 

Kindly try the above sample and get back to us if you need any further assistance. 


Live Chat Icon For mobile
Up arrow icon