Search results

Globalization

Globalization is the combination of internalization and localization. You can adapt the component to various languages by parsing and formatting the date or number (Internationalization), adding culture specific customization and translation to the text (Localization).

Internationalization

Internationalization library provides support for formatting and parsing the number, date, and time by using the official Unicode CLDR JSON data and also provides the loadCldr method to load the culture specific CLDR JSON data.

By default, all the Essential JS 2 component are specific to English culture (‘en-US’). If you want to go with the different culture other than English, follow the below steps.

  • Install the CLDR-Data package by using the below command (it installs the CLDR JSON data). For more information about CLDR-Data, refer to this link.
npm install cldr-data --save

Once the package installed, you can find the culture specific JSON data under the location \scripts\cldr-data.

  • Now use the loadCultureFiles method to load the culture specific CLDR JSON data.

In ASP.NET MVC refer the culture files directly from \scripts\cldr-data location. In ASP.NET Core refer the culture files directly from \wwwroot\scripts\cldr-data location as like the below code examples for both ASP.NET Core and MVC

    function loadCultureFiles(de) {
        var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json'];
        var loader = ej.base.loadCldr;
        var loadCulture = function (prop) {
            var val, ajax;
            <!--For ASP.NET MVC -->
            ajax = new ej.base.Ajax(location.origin + '/../scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false);
            <!--For ASP.NET Core-->
            ajax = new ej.base.Ajax(location.origin + '/../wwwroot/scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false);
            ajax.onSuccess = function (value) {
                val = value;
            };
            ajax.send();
            loader(JSON.parse(val));
        };
        for (var prop = 0; prop < files.length; prop++) {
            loadCulture(prop);
        }
    }
  • Before changing to a culture other than English, ensure that locale text for the concerned culture is loaded through load method of L10n class.
      var L10n = ej.base.L10n;
       L10n.load({
            "de": {
            "schedule": {
                "day": "journée",
                "week": "La semaine",
                "workWeek": "Semaine de travail",
                "month": "Mois",
            },
        });
razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="control-section">
        <div class="content-wrapper">
            @Html.EJS().Schedule("schedule").Width("100%").Height("550px").Views(view => { view.Option(View.Day).Add(); view.Option(View.Week).Add(); view.Option(View.WorkWeek).Add(); view.Option(View.Month).Add(); }).EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource }).SelectedDate(new DateTime(2018, 2, 15)).Render()
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var scheduleObject = document.getElementById('schedule').ej2_instances[0];
            loadCultureFiles('fr-CH');
            scheduleObject.locale = 'fr-CH';
        });
        function loadCultureFiles(name) {
            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(location.origin + '/../scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false);
                ajax.onSuccess = function (value) {
                    val = value;
                };
                ajax.send();
                loader(JSON.parse(val));
            };
            for (var prop = 0; prop < files.length; prop++) {
                loadCulture(prop);
            }
        }
    </script>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public ActionResult display-hours()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            return View();
        }
    }
}

Localization

Localization library allows users to localize the default text contents of the Schedule to different cultures using the locale property.

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="control-section">
        <div class="content-wrapper">
            @Html.EJS().Schedule("schedule").Width("100%").Height("550px").Views(view => { view.Option(View.Day).Add(); view.Option(View.Week).Add(); view.Option(View.WorkWeek).Add(); view.Option(View.Month).Add(); }).EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource }).SelectedDate(new DateTime(2018, 2, 15)).Render()
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var scheduleObject = document.getElementById('schedule').ej2_instances[0];
            var L10n = ej.base.L10n;
            L10n.load({
                "fr-CH": {
                    "schedule": {
                        "day": "journée",
                        "week": "La semaine",
                        "workWeek": "Semaine de travail",
                        "month": "Mois",
                    },
                }
            });
            loadCultureFiles('fr-CH');
            scheduleObject.locale = 'fr-CH';
        });
        function loadCultureFiles(name) {
            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(location.origin + '/../scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false);
                ajax.onSuccess = function (value) {
                    val = value;
                };
                ajax.send();
                loader(JSON.parse(val));
            };
            for (var prop = 0; prop < files.length; prop++) {
                loadCulture(prop);
            }
        }
    </script>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public ActionResult display-hours()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            return View();
        }
    }
}

Date format

Scheduler can be used with all valid date formats and the default date format is “MM/dd/yyyy”. If the dateFormat property is not specified particularly, then it will be taken based on the locale that is assigned to the Scheduler. The default locale applied on the Scheduler is “en-US”, which makes it to follow the “MM/dd/yyyy” pattern.

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="control-section">
        <div class="content-wrapper">
            @Html.EJS().Schedule("schedule").Width("100%").Height("550px").DateFormat("yyyy/MM/dd").Views(view => { view.Option(View.Day).Add(); view.Option(View.Week).Add(); view.Option(View.WorkWeek).Add(); view.Option(View.Month).Add(); }).EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource }).SelectedDate(new DateTime(2018, 2, 15)).Render()
        </div>
    </div>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public ActionResult display-hours()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            return View();
        }
    }
}

Time mode

The time mode of the Scheduler can be either 12 or 24 hours format which is based on the locale set to the Scheduler. Since the default locale value of the Scheduler is en-US, the time mode will be set to 12 hours format automatically.

RTL

The Schedule layout and behavior can be changed as per the common RTL conventions by setting enableRtl to true as shown below. Its default value is false.

razor
data.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

@section ControlsSection{
    <div class="control-section">
        <div class="content-wrapper">
            @Html.EJS().Schedule("schedule").Width("100%").Height("550px").Views(view => { view.Option(View.Day).Add(); view.Option(View.Week).Add(); view.Option(View.WorkWeek).Add(); }).EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource }).EnableRtl(true).SelectedDate(new DateTime(2018, 2, 15)).Render()
        </div>
    </div>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public ActionResult display-hours()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            return View();
        }
    }
}