dhtmlxScheduler с React
Это руководство предполагает, что вы знакомы с основами React и его концепциями. Если вы только начинаете работать с React, рекомендуем ознакомиться с официальной документацией.
DHTMLX Scheduler отлично работает с React. Пример интеграции можно найти на GitHub: DHTMLX Scheduler with React Demo.
Создание проекта
Перед началом убедитесь, что у вас установлен Node.js.
Для создания простого проекта на React выполните команду:
npx create-vite my-react-scheduler-app --template react
Установка зависимостей
Перейдите в директорию вашего приложения. В данном примере используется my-react-scheduler-app:
cd my-react-scheduler-app
Далее установите зависимости и запустите сервер разработки с помощью вашего пакетного менеджера:
- Для yarn выполните:
yarn install
yarn dev
- Для npm выполните:
npm install
npm run dev
Ваш React-проект будет доступен по адресу http://localhost:5173.
Создание Scheduler
Чтобы добавить DHTMLX Scheduler, сначала остановите приложение, нажав Ctrl+C в командной строке. После этого установите пакет Scheduler.
Шаг 1. Установка пакета
PRO-версии библиотеки доступны через npm/yarn из нашего приватного репозитория. Пожалуйста, следуйте этой инструкции для получения доступа.
Когда у вас будет Evaluation-версия Scheduler, установите её одной из команд:
- Через npm:
npm install @dhx/trial-scheduler
- Через yarn:
yarn add @dhx/trial-scheduler
Также, так как zip-пакет библиотеки структурирован как npm-модуль, вы можете установить его из локальной папки.
Шаг 2. Создание компонента
Создайте React-компонент для добавления Scheduler в приложение. Создайте папку src/components/Scheduler и в ней файлы: Scheduler.jsx, Scheduler.css и index.js.
Начните с создания Scheduler.css со стилями для scheduler-container:
src/components/Scheduler/Scheduler.css
.scheduler-container {
height: 100vh;
width: 100vw;
}
Чтобы контейнер Scheduler занимал всю область body, удалите стандартные стили из App.css в папке src и добавьте:
#root {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
Добавьте файл index.js со следующим содержимым:
src/components/Scheduler/index.js
import Scheduler from './Scheduler';
import './Scheduler.css';
export default Scheduler;
Импорт исходных файлов
Откройте Scheduler.jsx и импортируйте исходные файлы Scheduler. В зависимости от способа установки пакета, импорты будут такими:
- Если установлен из локальной папки:
Scheduler.jsx
import { Scheduler } from 'dhtmlx-scheduler';
import 'dhtmlx-scheduler/codebase/dhtmlxscheduler.css';
- При использовании trial-версии:
Scheduler.jsx
import { Scheduler } from '@dhx/trial-scheduler';
import '@dhx/trial-scheduler/codebase/dhtmlxscheduler.css';
В данном руководстве используется trial-версия.
Настройка контейнера и добавление Scheduler
Чтобы отобразить Scheduler на странице, создайте контейнер. Создайте Scheduler.jsx со следующим кодом:
src/components/Scheduler/Scheduler.jsx
import { useEffect, useRef } from "react";
import { Scheduler } from "@dhx/trial-scheduler";
import "@dhx/trial-scheduler/codebase/dhtmlxscheduler.css";
export default function SchedulerView( ) {
let container = useRef();
useEffect(() => {
let scheduler = Scheduler.getSchedulerInstance();
scheduler.skin = "terrace";
scheduler.config.header = [
"day",
"week",
"month",
"date",
"prev",
"today",
"next",
];
scheduler.init(container.current, new Date(2024, 5, 10));
return () => {
scheduler.destructor();
container.current.innerHTML = "";
};
}, []);
return (
<div ref={container} style=width: "100%", height: "100%"></div>
);
}
Шаг 3. Добавление Scheduler в приложение
Теперь добавьте компонент Scheduler в приложение. Откройте src/App.jsx и замените содержимое на:
src/App.jsx
import Scheduler from "./components/Scheduler";
import "./App.css";
function App() {
return (
<div className="scheduler-container">
<Scheduler/>
</div>
);
}
export default App;
После запуска приложения на странице появится пустой Scheduler:
Шаг 4. Передача данных
Чтобы отобразить события в Scheduler, передайте набор данных. Создайте файл data.js в директории src/ и добавьте события:
src/data.js
export function getData() {
const data = [
{
start_date: "2024-06-10 6:00",
end_date: "2024-06-10 8:00",
text: "Event 1",
id: 1,
},
{
start_date: "2024-06-13 10:00",
end_date: "2024-06-13 18:00",
text: "Event 2",
id: 2,
},
];
return data;
}
Передайте эти данные как props для компонента Scheduler в App.jsx:
App.jsx
import { getData } from "./data.js";
import Scheduler from "./components/Scheduler";
import "./App.css";
function App() {
return (
<div className="scheduler-container">
<Scheduler events={getData()}/>
</div>
);
}
export default App;
Используйте props в методе scheduler.parse() внутри компонента Scheduler:
Scheduler.jsx
import { useEffect, useRef } from "react";
import { Scheduler } from "@dhx/trial-scheduler";
import "@dhx/trial-scheduler/codebase/dhtmlxscheduler.css";
export default function SchedulerView({events}) {
let container = useRef();
useEffect(() => {
let scheduler = Scheduler.getSchedulerInstance();
scheduler.skin = "terrace";
scheduler.config.header = [
"day",
"week",
"month",
"date",
"prev",
"today",
"next",
];
scheduler.init(container.current, new Date(2024, 5, 10));
scheduler.parse(events);
return () => {
scheduler.destructor();
container.current.innerHTML = "";
};
}, []);
return (
<div ref={container} style=width: "100%", height: "100%"></div>
);
}
После перезагрузки страницы приложения вы увидите Scheduler с загруженными событиями:
Шаг 5. Сохранение данных
Чтобы обрабатывать изменения, внесённые в Scheduler, используйте обработчик dataProcessor. Это позволит связаться с сервером. Обработчик может быть функцией или объектом router. dhtmlxScheduler поддерживает ответы Promise от обработчика, корректно обрабатывая завершение действия.
Создайте DataProcessor с помощью createDataProcessor() и отслеживайте изменения следующим образом:
scheduler.createDataProcessor(function(entity, action, data, id) {
scheduler.message(`${entity} ${action}`);
});
Если ваш backend изменяет id события после создания новой записи (что встречается часто), убедитесь, что Promise возвращает объект с {id: databaseId} или {tid: databaseId}. Это позволит Scheduler обновить запись с новым id из базы данных. Подробнее см. в разделе server side integration.
На этом настройка React Scheduler завершена. Ознакомьтесь с полной демонстрацией на GitHub: DHTMLX react-scheduler-demo.
XSS, CSRF и SQL-инъекции
Обратите внимание, что сам Scheduler не защищает от угроз, таких как SQL-инъекции, XSS или CSRF-атаки. Ответственность за защиту приложения от этих рисков лежит на разработчиках backend.
Обратитесь к статье Application Security, чтобы узнать о распространённых уязвимостях и способах повышения безопасности вашего приложения.
Наверх