Schedule eventsettings and locale

[alexis garcia]

Hi, im trying to change the language of the UI, im working in schedule with timeline views and when i put the "locale='de-DE'" in the ejs-schedule it breaks. 

import { addClass, extend, closest, L10n, setCulture } from '@syncfusion/ej2-base';

  <ejs-schedule id='Schedule' ref="ScheduleObj" height="90vh" :cssClass='cssClass'

                    :rowAutoHeight='rowAutoHeight' :selectedDate='selectedDate' :eventSettings='eventSettings'

                        :group='group' :currentView='currentView' :actionBegin="onActionBegin" :popupOpen="popupOpen"

                        @dataBound="onDataBound" :timeScale="timeScale" :dragStart="onDragStart" :dragStop="onDragStop" :timezone="'Europe/London'"

                        @resizeStart="resizeStart" :showHeaderBar='showHeaderBar' :resizeStop="onResizeStop"

                        @actionComplete="onActionComplete" @eventRendered='onEventRendered' @resize="onResize"

                        @cellClick="onCellClick" @select="onSelect" @renderCell="onRenderCell"

                        :editorTemplate="'editorTemplate'" :headerRow="headerRow" locale="de-DE">

                       ..............

I get the following in the console:

vue.esm.js:628 [Vue warn]: Error in callback for watcher "eventSettings": "TypeError: Cannot convert undefined or null to object"

found in

---> <ScheduleComponent>

       <Schedule> at src/views/planning/schedule.vue

         <IndexSchedule> at src/views/planning/index.vue

           <App> at src/App.vue

             <Root>

 TypeError: Cannot convert undefined or null to object

    at Function.keys (<anonymous>)

    at Schedule.getDayNames (schedule.js:458:1)

    at ViewBase.getTimelineDate (view-base.js:51:1)

    at VerticalView.getTdContent (vertical-view.js:391:1)

    at VerticalView.createTd (vertical-view.js:599:1)

    at VerticalView.renderDatesHeader (vertical-view.js:564:1)

    at TimelineViews.renderHeader (timeline-view.js:181:1)

    at VerticalView.renderLayout (vertical-view.js:455:1)

    at Render.initializeLayout (renderer.js:109:1)

    at Render.render (renderer.js:14:1)

[Venkateshwaran Saravanakumar]

Hi Alexis,

We suspect that you have missed the required files for localization. We have prepared a Vue Schedule sample with “de” locale. You can set the German culture to the Schedule by following the steps below and let us know if you need any further assistance.

We require the below files to localize the Schedule.

• ca-gregorian.json
• numbers.json
• timeZoneNames.json
• numberingSystems.json

1. You can get the above files by Installing the CLDR-Data package by using the below command.

>> npm install cldr-data –save

Once the installation is completed you can find the files required to localize the Schedule for each culture from the directory as shown below.

You can get ca-gregorian.json, numbers.json, and timeZoneNames.json files from the directory as shown below.

You can get the numberingSystems.json file from the directory as shown below. This file is common for all cultures.

2. Import the required CLDR data files(ca-gregorian.json, numberingSystems.json, numbers.json, and timeZoneNames.json) and load them using the loadCldr method. You can find the culture files in our shared sample as shown in the below snip. These files are copied from the CLDR-Data package installed in step 1.

[app.component.ts]

<script>

import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, TimelineViews, DragAndDrop, Resize, ViewsDirective, ViewDirective } from "@syncfusion/ej2-vue-schedule";

import { L10n, loadCldr } from '@syncfusion/ej2-base';

 

L10n.load(require("../src/Common//locale-text.json"));

loadCldr(

  require('../src/Common/cldr-data/main/de/ca-gregorian.json'),

  require('../src/Common/cldr-data/main/de/numbers.json'),

  require('../src/Common/cldr-data/main/de/timeZoneNames.json'),

  require('../src/Common/cldr-data/supplemental/numberingSystems.json')

);

 

3. Load the locale words as shown below using the load method of L10n. You can find the localized word for the different cultures from the below repository.

ej2-local: https://github.com/syncfusion/ej2-locale

4. Set the locale property to the Schedule.

[App.Vue]

 <ejs-schedule  locale='de' ref='scheduleObj' cssClass='schedule-cell-dimension' width='100%' :selectedDate='selectedDate'

        :currentView='currentView' :eventSettings='eventSettings' :rowAutoHeight='rowAutoHeight' >

        <e-views>     
          <e-view option='Day' ></e-view>
          <e-view option='Week'></e-view>
          <e-view option='Month'></e-view>
        </e-views>      

 </ejs-schedule>

Regards,
Venkatesh

Attachment: VueSchedulerLocalization_c015719b.zip

[alexis garcia]

Oh great its working now! I was missing those files! I have one more question, how can i change the text of the buttons of the editor window? i tried this and its not working. Is there a list of the ''components'' that i can change the text? like Schedule, Grid, buttons etc etc, is there a list available? thanks for

{

    "pt":{

        "schedule":{

            "today": "Hoje",

            "day": "dia",

            "save": "Guardar"

        },

        "buttons": {

            "save": "Guardar"

        },

        "editor": {

            "save": "Guardar"

        }

    }

}

[Venkateshwaran Saravanakumar]

Alexis,

UG: https://ej2.syncfusion.com/vue/documentation/schedule/editor-template#how-to-change-the-editor-window-header-title-and-text-of-footer-buttons

You can change the text of editor window buttons as you wish by providing the relevant locale words in the place where you list all locale words. For example, in the last shared sample, we created a separate file for locale words (locale-text.json) and called them in the L10.load method. In this case, you will need to make changes in this file, or you can directly use them in the L10.load method, as demonstrated in the code snippet below. Refer to the shared UG for more details.

[App.vue]

L10n.load({

    'pt': {

        'schedule': {

            'saveButton': 'Guardar',

            'cancelButton': 'Cancelar',

            'deleteButton': 'Excluir',

        },

    }

});

[alexis garcia]

Ok i have seen the file locale-text.json but i was asking if there is a list or something in the docs where i can find all the elements, for example the multi-select when i select the items it says "3 selected" and i wanted to change that is it possible? in the datetime picker element the months are still in english but in the calendar of the schedule they are in PT, is there a way to make it PT too? is there a list or a doc i can see all the available element? We are trying to use all the ej2 components we can (date picker, grid, buttons etc) and i need to be able to change the language of all elements.

Thanks for help! 

[Venkateshwaran Saravanakumar]

Alexis,

Repo: https://github.com/syncfusion/ej2-locale/tree/master

 

You can find all components related to localized text in the shared repository. In this repo, while navigating to the 'src' file, you can see all culture files. Inside the culture files, you can find the list of words for all components that can be localized. You can use the localized words for the required components by loading them in the L10n method.