如何为Syncfusion React Scheduler配置本地SQL数据源与全量法语化？

一、实现Scheduler全量界面法语化 #

当前仅日程文本法语化，是因为缺少Scheduler核心界面元素的翻译资源，或加载方式存在问题，可按以下步骤修复：

• 补充完整的法语翻译资源
  检查你的locale.json文件，确保包含Scheduler所有模块的法语翻译，覆盖工具栏、视图切换、弹窗等所有文本，示例结构如下：

  {
    "fr-CH": {
      "schedule": {
        "today": "Aujourd'hui",
        "day": "Jour",
        "week": "Semaine",
        "workWeek": "Semaine de travail",
        "month": "Mois",
        "add": "Ajouter",
        "edit": "Éditer",
        "delete": "Supprimer",
        "save": "Enregistrer",
        "cancel": "Annuler",
        "noEvents": "Aucun événement",
        "deleteEvent": "Supprimer l'événement",
        "deleteMultipleEvent": "Supprimer plusieurs événements",
        "confirmDelete": "Êtes-vous sûr de vouloir supprimer cet événement ?",
        "confirmDeleteMultiple": "Êtes-vous sûr de vouloir supprimer ces événements ?",
        "title": "Titre",
        "startTime": "Heure de début",
        "endTime": "Heure de fin",
        "description": "Description"
      }
    }
  }
  

• 优化资源加载逻辑
  替换同步Ajax加载方式为更可靠的ES模块导入，避免加载失败：

  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 { 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';
  // 直接导入法语资源文件
  import localeFr from './locale.json';
  
  loadCldr(numberingSystems, gregorian, numbers, detimeZoneNames);
  // 加载翻译资源
  L10n.load(localeFr);
  
  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 />);
  

• 验证CLDR数据完整性
  确保加载的CLDR文件包含fr-CH区域的日历、时区、数字格式定义，若现有文件不全，需补充对应区域的CLDR数据。

二、接入本地SQL数据源 #

前端无法直接连接本地SQL数据库，需通过后端API中转，以下是完整实现步骤：

1. 后端API搭建（Node.js + Express + MySQL示例） #

• 安装依赖：npm install express mysql2 cors
• 编写后端接口（server.js）：

  const express = require('express');
  const mysql = require('mysql2');
  const cors = require('cors');
  const app = express();
  
  app.use(cors());
  app.use(express.json());
  
  // 连接本地SQL数据库
  const db = mysql.createConnection({
      host: 'localhost',
      user: 'your_username',
      password: 'your_password',
      database: 'your_database'
  });
  
  // 获取所有日程
  app.get('/api/events', (req, res) => {
      db.query('SELECT * FROM events', (err, result) => {
          if (err) throw err;
          res.json(result);
      });
  });
  
  // 新增日程
  app.post('/api/events', (req, res) => {
      const { Subject, StartTime, EndTime, Description } = req.body;
      db.query(
          'INSERT INTO events (Subject, StartTime, EndTime, Description) VALUES (?, ?, ?, ?)',
          [Subject, StartTime, EndTime, Description],
          (err, result) => {
              if (err) throw err;
              res.json({ id: result.insertId, ...req.body });
          }
      );
  });
  
  // 修改日程
  app.put('/api/events/:id', (req, res) => {
      const { id } = req.params;
      const { Subject, StartTime, EndTime, Description } = req.body;
      db.query(
          'UPDATE events SET Subject=?, StartTime=?, EndTime=?, Description=? WHERE Id=?',
          [Subject, StartTime, EndTime, Description, id],
          (err) => {
              if (err) throw err;
              res.json({ id, ...req.body });
          }
      );
  });
  
  // 删除日程
  app.delete('/api/events/:id', (req, res) => {
      const { id } = req.params;
      db.query('DELETE FROM events WHERE Id=?', [id], (err) => {
          if (err) throw err;
          res.json({ id });
      });
  });
  
  app.listen(3001, () => console.log('Server running on port 3001'));
  

2. 数据库表设计 #

创建events表，字段匹配Scheduler要求：

CREATE TABLE events (
    Id INT AUTO_INCREMENT PRIMARY KEY,
    Subject VARCHAR(255) NOT NULL,
    StartTime DATETIME NOT NULL,
    EndTime DATETIME NOT NULL,
    Description TEXT
);

3. 前端适配Syncfusion Scheduler #

使用Syncfusion的DataManager对接后端API，自动处理CRUD操作：

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 { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
import { 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';
import localeFr from './locale.json';

loadCldr(numberingSystems, gregorian, numbers, detimeZoneNames);
L10n.load(localeFr);

const App = () => {
    // 配置远程数据源
    const dataManager = new DataManager({
        url: 'http://localhost:3001/api/events',
        adaptor: new UrlAdaptor(),
        crudUrl: 'http://localhost:3001/api/events'
    });

    const eventSettings = { 
        dataSource: dataManager,
        // 指定字段映射（若数据库字段名与Scheduler默认不一致）
        fields: {
            id: 'Id',
            subject: 'Subject',
            startTime: 'StartTime',
            endTime: 'EndTime',
            description: 'Description'
        }
    }

    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 />);

内容的提问来源于stack exchange，提问作者Aro