@Syncfusion React Scheduler to be in SQL (locally) and completely in French language

Question

I'm trying to modify react scheduler to use sql as datasource and french as language.

After looking at the official website docs, only the texts in the schedule changes into french. How to change them all?

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Inject, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { Ajax, L10n, loadCldr } from '@syncfusion/ej2-base';
import * as numberingSystems from '../numberingSystems.json';
import * as gregorian from '../ca-gregorian.json';
import * as numbers from '../numbers.json';
import * as detimeZoneNames from '../timeZoneNames.json';
loadCldr(numberingSystems, gregorian, numbers, detimeZoneNames);
let localeTexts;
let ajax = new Ajax('./locale.json', 'GET', false);
ajax.onSuccess = (value) => {
    localeTexts = value;
};
ajax.send();
L10n.load(JSON.parse(localeTexts));
const App = () => {
    const eventSettings = { dataSource: scheduleData }
    return <ScheduleComponent height='550px' selectedDate={new Date(2018, 1, 15)} locale='fr-CH' eventSettings={eventSettings}>
    <ViewsDirective>
      <ViewDirective option='Day'/>
      <ViewDirective option='Week'/>
      <ViewDirective option='WorkWeek'/>
      <ViewDirective option='Month'/>
    </ViewsDirective>
    <Inject services={[Day, Week, WorkWeek, Month]}/>
  </ScheduleComponent>;
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);

How to use sql within it? Thank you in advance!!

Answer 1

Query 1: Schedule with French culture

Sample: https://stackblitz.com/edit/react-x2pxyg?file=index.js,locale.json

You can set the French culture to the Schedule by following the steps below.

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.

[index.js]

import { extend, loadCldr, L10n } from '@syncfusion/ej2-base';
import { updateSampleSection } from './sample-base';
import * as dataSource from './datasource.json';

const localeData = require('./locale.json');

loadCldr(
  require('./culture-files/numberingSystems.json'),
  require('./culture-files/ca-gregorian.json'),
  require('./culture-files/numbers.json'),
  require('./culture-files/timeZoneNames.json')
);

L10n.load(localeData);

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.

[index.js]

<ScheduleComponent   locale='fr-CH' eventSettings={{ dataSource: data }} 
 </ScheduleComponent>

Query2: How to use sql within it?

You can bind the remote data with the Schedule using the UrlAdaptor as shown in the below code snippets. Try the shared samples and refer to the UG for more details.

Sample: https://stackblitz.com/edit/react-front-end-sample?file=index.js Service: https://www.syncfusion.com/downloads/support/forum/170725/ze/ScheduleCRUD1166139915 UG: https://ej2.syncfusion.com/react/documentation/schedule/data-binding/#scheduler-crud-actions

[index.js]

this.dataManger = new DataManager({
  url: 'http://localhost:54738/Home/LoadData', 
  crudUrl: 'http://localhost:54738/Home/UpdateData',
  crossDomain: true,
  adaptor: new UrlAdaptor()
});

[Controller.cs]

public JsonResult LoadData(Params param)  // Here we get the Start and End Date of current view, based on that can filter the data and return to Scheduler 
{
    var data = db.ScheduleEventDatas.Where(app => (app.StartTime >= param.StartDate && app.StartTime <= param.EndDate) || (app.RecurrenceRule != null && app.RecurrenceRule != "")).ToList();  // Here filtering the events based on the start and end date value. 
    return Json(data, JsonRequestBehavior.AllowGet);
}

public class Params
{
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
}

[HttpPost]
public JsonResult UpdateData(EditParams param)
{
    if (param.action == "insert" || (param.action == "batch" && param.added != null)) // this block of code will execute while inserting the appointments
    {
        for (var i = 0; i < param.added.Count; i++)
        {
            var value = (param.action == "insert") ? param.value : param.added[i];
            int intMax = db.ScheduleEventDatas.ToList().Count > 0 ? db.ScheduleEventDatas.ToList().Max(p => p.Id) : 1;
            DateTime startTime = Convert.ToDateTime(value.StartTime);
            DateTime endTime = Convert.ToDateTime(value.EndTime);
            ScheduleEventData appointment = new ScheduleEventData()
            {
                Id = intMax + 1,
                StartTime = startTime,
                EndTime = endTime,
                Subject = value.Subject,
                Location = value.Location,
                Description = value.Description,
                IsAllDay = value.IsAllDay,
                StartTimezone = value.StartTimezone,
                EndTimezone = value.EndTimezone,
                RecurrenceRule = value.RecurrenceRule,
                RecurrenceID = value.RecurrenceID,
                RecurrenceException = value.RecurrenceException,
                GroupID = value.GroupID.ToString()
            };
            db.ScheduleEventDatas.InsertOnSubmit(appointment);
            db.SubmitChanges();
        }
    }
    if (param.action == "update" || (param.action == "batch" && param.changed != null)) // this block of code will execute while updating the appointment
    {
        for (var i = 0; i < param.changed.Count; i++)
        {
            var value = (param.action == "update") ? param.value : param.changed[i];
            var filterData = db.ScheduleEventDatas.Where(c => c.Id == Convert.ToInt32(value.Id));
            if (filterData.Count() > 0)
            {
                DateTime startTime = Convert.ToDateTime(value.StartTime);
                DateTime endTime = Convert.ToDateTime(value.EndTime);
                ScheduleEventData appointment = db.ScheduleEventDatas.Single(A => A.Id == Convert.ToInt32(value.Id));
                appointment.StartTime = startTime;
                appointment.EndTime = endTime;
                appointment.StartTimezone = value.StartTimezone;
                appointment.EndTimezone = value.EndTimezone;
                appointment.Subject = value.Subject;
                appointment.Location = value.Location;
                appointment.Description = value.Description;
                appointment.IsAllDay = value.IsAllDay;
                appointment.RecurrenceRule = value.RecurrenceRule;
                appointment.RecurrenceID = value.RecurrenceID;
                appointment.RecurrenceException = value.RecurrenceException;
                appointment.GroupID = value.GroupID.ToString();
            }
            db.SubmitChanges();

        }
    }
    if (param.action == "remove" || (param.action == "batch" && param.deleted != null)) // this block of code will execute while removing the appointment
    {
        if (param.action == "remove")
        {
            int key = Convert.ToInt32(param.key);
            ScheduleEventData appointment = db.ScheduleEventDatas.Where(c => c.Id == key).FirstOrDefault();
            if (appointment != null) db.ScheduleEventDatas.DeleteOnSubmit(appointment);
        }
        else
        {
            foreach (var apps in param.deleted)
            {
                ScheduleEventData appointment = db.ScheduleEventDatas.Where(c => c.Id == apps.Id).FirstOrDefault();
                if (apps != null) db.ScheduleEventDatas.DeleteOnSubmit(appointment);
            }
        }
        db.SubmitChanges();
    }
    var data = db.ScheduleEventDatas.ToList();
    return Json(data, JsonRequestBehavior.AllowGet);
}

public class EditParams
{
    public string key { get; set; }
    public string action { get; set; }
    public List<ScheduleEventData> added { get; set; }
    public List<ScheduleEventData> changed { get; set; }
    public List<ScheduleEventData> deleted { get; set; }
    public ScheduleEventData value { get; set; }
}