longDateFormat is undefined

[Karsten Krieger]

Hi, I can't use the schedule. The error is "longDateFormat is undefined" Where is my mistake? ;-)

Thanks!


<template>
    <div class="schedule-vue-sample">
        <div class="col-md-9 control-section">
            <div class="content-wrapper">
                <ejs-schedule id="Schedule" ref="ScheduleObj" height="650px" :currentView='scheduleView' :selectedDate='selectedDate' :eventSettings='eventSettings' :eventRendered="oneventRendered">
                    <e-views>
                        <e-view option="Day"></e-view>
                        <e-view option="Week"></e-view>
                        <e-view option="WorkWeek"></e-view>
                        <e-view option="Month"></e-view>
                    </e-views>
                </ejs-schedule>
            </div>
        </div>
        <div class="col-lg-3 property-section">
            <table id="property" title="Properties" style="width: 100%">
                <tbody>
                    <tr style="height: 50px">
                        <td style="width: 100%;">
                            <div>
                                <ejs-dropdownlist id='scheduleview' :dataSource='datas' :value='scheduleView' :change='changevalue'
                                                  floatLabelType="Always" placeholder="Current View"></ejs-dropdownlist>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>
<script>
    import { zooEventsData } from './datasource';
    import { extend } from '@syncfusion/ej2-base';
    import { ScheduleComponent, ViewDirective, ViewsDirective, Day, Week, WorkWeek, Month, Resize, DragAndDrop } from "@syncfusion/ej2-vue-schedule";
    import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
    import { L10n, setCulture } from '@syncfusion/ej2-base';


    setCulture('de-DE');


    L10n.load({
        'de-DE': {
            'longDateFormat': 'dd.mmmm.yyyy',
            'grid': {
                'EmptyRecord': 'Keine Aufzeichnungen angezeigt',
                'GroupDropArea': 'Ziehen Sie einen Spaltenkopf hier, um die Gruppe ihre Spalte',
                'UnGroup': 'Klicken Sie hier, um die Gruppierung aufheben',
                'EmptyDataSourceError': 'DataSource darf bei der Erstauslastung nicht leer sein, da Spalten aus der dataSource im AutoGenerate Spaltenraster',
                'Item': 'Artikel',
                'Items': 'Artikel'
            },
            'pager': {
                'currentPageInfo': '{0} von {1} Seiten',
                'totalItemsInfo': '({0} Beiträge)',
                'firstPageTooltip': 'Zur ersten Seite',
                'lastPageTooltip': 'Zur letzten Seite',
                'nextPageTooltip': 'Zur nächsten Seite',
                'previousPageTooltip': 'Zurück zur letzten Seit',
                'nextPagerTooltip': 'Zum nächsten Pager',
                'previousPagerTooltip': 'Zum vorherigen Pager'
            }
        }
    });


    export default {
        components: {
            'ejs-schedule': ScheduleComponent,
            'e-view': ViewDirective,
            'e-views': ViewsDirective,
            'ejs-dropdownlist': DropDownListComponent
        },
        data: function () {
            return {
                longDateFormat: 'dd.mmmm.yyyy',
                eventSettings: { dataSource: extend([], zooEventsData, null, true) },
                selectedDate: new Date(2021, 1, 15),
                datas: ['Day', 'Week', 'WorkWeek', 'Month'],
                scheduleView: 'Week'
            }
        },
        provide: {
            schedule: [Day, Week, WorkWeek, Month, Resize, DragAndDrop]
        },
        methods: {
            changevalue: function (args) {
                this.$refs.ScheduleObj.ej2Instances.currentView = args.value;
            },
            oneventRendered: function (args) {
                let categoryColor = args.data.CategoryColor;
                if (!args.element || !categoryColor) {
                    return;
                }
                args.element.style.backgroundColor = categoryColor;
            }
        }
    }


</script>

[Venkateshwaran Saravanakumar]

Hi Karsten,

Based on your query and shared codes, we suspect that you are attempting to change the scheduler culture to German. However, it appears that you may have overlooked the CLDR file, which contains the longDateFormat and other culture data. We suggest importing the required culture files instead of using longDateFormat directly in your codes.

We have prepared a Vue Schedule sample with the "de" locale. To set the German culture in the Schedule, follow 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_c3a7142e.zip

[Karsten Krieger]

Thank you! Works perfect!

[Ram Raju Elaiyaperumal]

Dear Karsten,

We're glad to hear that the solution worked for you! If you have any more questions in the future, don't hesitate to ask.

Best regards,

Ram