Not Being Able to Locale Calendar Control

[Alexandre]

Hello,

I am not being able to locale my calendar control to pt. This is how I am trying to do it:

With this L10n configuration:

What am I doing wrong?

Thanks,

Alexandre

[UdhayaKumar Duraisamy]

To properly apply the desired cultures in the Calendar component, you need to load the respective culture files. In your code snippet, you have added localized text for fields like “today” and “month.” The Calendar component allows customization of the “Today” button using L10n.Load. However, to apply localization for the “Month” and other fields, you need to load the necessary culture files. Please refer to the documentation and sample provided below for more information.

@{

    ViewBag.Title = "Home Page";

    var minDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 05);

    var maxDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 27);

}

 

<div style="margin: 150px auto; width: 300px">

    @Html.EJS().Calendar("calendar").Min(minDate).Max(maxDate).IsMultiSelection(true).Change("onChangeCalendar").Render()

</div>

 

<script>

    document.addEventListener('DOMContentLoaded', function () {

        var calendarObject = document.getElementById('calendar').ej2_instances[0];

        var L10n = ej.base.L10n;

        L10n.load({

            "pt": {

                "calendar": {

                    "today": "Hoje"

                }

            }

        });

        loadCultureFiles();

        calendarObject.locale = 'pt';

    });

 

    function loadCultureFiles() {

        var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json'];

        var loader = ej.base.loadCldr;

        var loadCulture = function (prop) {

            var val, ajax;

            ajax = new ej.base.Ajax('../pt-Culture-Data' + '/' + files[prop], 'GET', false);

            ajax.onSuccess = function (value) {

                val = value;

            };

            ajax.onFailure = function (error) {

                console.error('Error loading file:', files[prop], error);

            };

            ajax.send();

            loader(JSON.parse(val));

        };

        for (var prop = 0; prop < files.length; prop++) {

            loadCulture(prop);

        }

    }

 

    function onChangeCalendar(args) {

        console.log(args);

    }

</script>

Documentation: Globalization in ASP.NET MVC Calendar Control | Syncfusion

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Globalization_in_ASP.NET_MVC_Calendar_Control67638676

[Alexandre]

Hello,

The sample worked just fine, exactly what I needed. But when I try to put the solution on my project, it says it can not find those files:

var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json'];

I found then in the project directory but I was not able to figure out where in the project they are being referenced.

Regards,

Alexandre

[UdhayaKumar Duraisamy]

As mentioned in earlier response; To correctly apply the desired culture settings in the Calendar component, it is essential to load the corresponding culture files. In the sample provided earlier, the ca-gregorian.json, numbers.json, and timeZoneNames.json files are located in the pt-Culture-Data folder. Ensure that the file paths are correctly specified in the loadCultureFiles method's AJAX request to avoid errors.

Below is the implementation of the loadCultureFiles method:

function loadCultureFiles() {

        var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json'];

        var loader = ej.base.loadCldr;

        var loadCulture = function (prop) {

            var val, ajax;

            ajax = new ej.base.Ajax('../pt-Culture-Data' + '/' + files[prop], 'GET', false);

            ajax.onSuccess = function (value) {

                val = value;

            };

            ajax.onFailure = function (error) {

                console.error('Error loading file:', files[prop], error);

            };

            ajax.send();

            loader(JSON.parse(val));

        };

        for (var prop = 0; prop < files.length; prop++) {

            loadCulture(prop);

        }

    }

Make sure the paths to the culture files are accurate and accessible in your project directory.