From bf05deae7b344e55f880091f005054ec5113c7c2 Mon Sep 17 00:00:00 2001 From: Artyom Date: Mon, 1 Jun 2026 11:24:01 +0300 Subject: [PATCH 1/4] [upd] update article to Angular 21 --- .../angular/howtostart-angular.md | 154 ++++++++---------- 1 file changed, 64 insertions(+), 90 deletions(-) diff --git a/docs/integrations/angular/howtostart-angular.md b/docs/integrations/angular/howtostart-angular.md index 38888fc0..5e9ffa9d 100644 --- a/docs/integrations/angular/howtostart-angular.md +++ b/docs/integrations/angular/howtostart-angular.md @@ -73,33 +73,20 @@ Alternatively, since the zip-package of the library is structured as an **npm** ## Step 2. Component creation -Now we should create a component to add a Scheduler into the application. Let's create the ***scheduler*** folder in the ***src/app/*** directory, -add new files into it and call them ***scheduler.component.ts***, ***scheduler.component.css*** and ***scheduler.component.html***. +Now we should create a component to add a Scheduler into the application. Let's create the ***components*** folder in the ***src/app/*** directory with ***scheduler*** folder and add new files into it and call them ***scheduler.component.ts***, ***scheduler.component.css*** and ***scheduler.component.html***. The newly created ***scheduler.component.html*** file inside the ***scheduler*** folder will contain the template for the scheduler. Let's add the following lines of code into it: -~~~html title="scheduler/scheduler.component.html" -
-
-
-
-
-
-
-
-
-
-
-
-
+~~~html title="components/scheduler/scheduler.component.html" +
~~~ We'll declare scheduler styles in a separate file named ***scheduler.component.css***. The default styles can look like this: -~~~css title="scheduler/scheduler.component.css" +~~~css title="components/scheduler/scheduler.component.css" @import "@dhx/trial-scheduler/codebase/dhtmlxscheduler.css"; :host { display: block; @@ -156,21 +143,22 @@ In this tutorial we will use the **trial** version of Scheduler. To display Scheduler on the page, we need to set the container to render the component inside. Use the code below: -~~~js title="scheduler.component.ts" +~~~js title="components/scheduler/scheduler.component.ts" import { Scheduler, SchedulerStatic } from "@dhx/trial-scheduler"; import { Component, ElementRef, OnInit, OnDestroy, ViewChild, ViewEncapsulation } from "@angular/core"; @Component({ encapsulation: ViewEncapsulation.None, - selector: "scheduler", - styleUrls: ["./scheduler.component.css"], - templateUrl: 'scheduler.component.html' + selector: 'app-scheduler', + standalone: true, + styleUrl: './scheduler.component.css', + templateUrl: './scheduler.component.html', }) export class SchedulerComponent implements OnInit, OnDestroy { @ViewChild("scheduler_here", { static: true }) schedulerContainer!: ElementRef; - private _scheduler?: SchedulerStatic; + private scheduler?: SchedulerStatic; ngOnInit() { let scheduler = Scheduler.getSchedulerInstance(); @@ -179,11 +167,11 @@ export class SchedulerComponent implements OnInit, OnDestroy { new Date(2027, 9, 7), "week", ); - this._scheduler = scheduler; + this.scheduler = scheduler; } ngOnDestroy() { - if (this._scheduler) this._scheduler.destructor(); + this.scheduler?.destructor(); } } ~~~ @@ -193,50 +181,29 @@ contains the [**scheduler.destructor()**](api/method/destructor.md) call to clea ## Step 3. Adding Scheduler into the app -Now it's time to add the component into our app. Open ***src/app/app.component.ts*** and use the Scheduler Component instead of the default content by inserting +Now it's time to add the component into our app. Open ***src/app/app.ts*** and use the Scheduler Component instead of the default content by inserting the code below: -~~~js title="src/app/app.component.ts" +~~~js title="src/app/app.ts" import { Component } from '@angular/core'; +import { SchedulerComponent } from './components/scheduler/scheduler.component'; @Component({ selector: 'app-root', - template: ``, + standalone: true, + imports: [SchedulerComponent], + templateUrl: './app.html', + styleUrls: ['./app.css'] }) -export class AppComponent { - name = ''; -} -~~~ -Then create the ***app.module.ts*** file in the ***src/app/*** directory and insert *SchedulerComponent* as provided below: - - -~~~js title="src/app/app.module.ts" -import { NgModule } from "@angular/core"; -import { BrowserModule } from "@angular/platform-browser"; - -import { AppComponent } from "./app.component"; -import { SchedulerComponent } from "./scheduler/scheduler.component"; - -@NgModule({ - declarations: [AppComponent, SchedulerComponent], - imports: [BrowserModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} +export class App {} ~~~ -The last step is to open the ***src/main.ts*** file and replace the existing code with the following one: +Then remove the initial code from the ***app.html*** file in the ***src/app/*** directory and insert a selector as provided below: -~~~js title="src/main.ts" -import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; -import { AppModule } from "./app/app.module"; - -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.error(err)); +~~~js title="src/app/app.html" + ~~~ After that, when we start the app, we should see an empty Scheduler on a page. @@ -250,17 +217,17 @@ To add data loading to the Angular Scheduler, you need to add an event service. For creating the event model, run the following command: ~~~ -ng generate class models/event --skip-tests +ng generate class models/schedulerEvent --skip-tests ~~~ -In the newly created ***event.ts*** file inside the ***models*** folder, we will add the following lines of code: +In the newly created ***scheduler-event.ts*** file inside the ***models*** folder, we will add the following lines of code: -~~~js title="models/event.ts" -export class Event { - id!: number; - start_date!: string; - end_date!: string; - text!: string; +~~~js title="models/scheduler-event.ts" +export interface SchedulerEvent { + id: number; + start_date: string; + end_date: string; + text: string; } ~~~ @@ -278,18 +245,22 @@ In the newly created ***event.service.ts*** file inside the ***services*** folde ~~~js title="services/event.service.ts" import { Injectable } from '@angular/core'; -import { Event } from "../models/event"; +import { SchedulerEvent } from "../models/scheduler-event"; @Injectable() export class EventService { - get(): Promise{ - return Promise.resolve([ - { id: 1, start_date: "2027-05-16 09:00", end_date: "2027-05-16 13:00", - text: "Event 1" }, - { id: 2, start_date: "2027-05-18 10:00", end_date: "2027-05-18 14:00", - text: "Event 2" }, - ]); - } + get(): Promise { + return Promise.resolve([ + { + id: 1, start_date: "2027-10-06 09:00", end_date: "2027-10-06 13:00", + text: "Event 1" + }, + { + id: 2, start_date: "2027-10-08 10:00", end_date: "2027-10-08 14:00", + text: "Event 2" + }, + ]); + } } ~~~ @@ -301,7 +272,7 @@ First, import the necessary module for the service in ***scheduler.component.ts* ~~~js title="scheduler.component.ts" -import {EventService} from "../services/event.service"; +import {EventService} from "../../services/event.service"; ~~~ You should also specify **EventService** as a provider in the **@Component** decorator: @@ -310,10 +281,11 @@ You should also specify **EventService** as a provider in the **@Component** dec ~~~js title="scheduler.component.ts" @Component({ encapsulation: ViewEncapsulation.None, - selector: "scheduler", + selector: 'app-scheduler', + standalone: true, providers: [EventService], - styleUrls: ["./scheduler.component.css"], - templateUrl: 'scheduler.component.html' + styleUrl: './scheduler.component.css', + templateUrl: './scheduler.component.html', }) ~~~ @@ -321,7 +293,7 @@ Now, every time a new *SchedulerComponent* is initialized, a fresh instance of t For this purpose, add the following constructor to the **SchedulerComponent** class: -~~~ title="scheduler.component.ts" +~~~js title="scheduler.component.ts" constructor(private eventService: EventService){} ~~~ @@ -345,37 +317,39 @@ The complete code of the ***scheduler.components.ts*** file will look like this: ~~~ts title="scheduler.component.ts" import { Scheduler, SchedulerStatic } from "@dhx/trial-scheduler"; -import { Component, ElementRef, OnInit, OnDestroy, - ViewChild, ViewEncapsulation } from "@angular/core"; -import {EventService} from "../services/event.service"; +import { + Component, ElementRef, OnInit, OnDestroy, + ViewChild, ViewEncapsulation +} from "@angular/core"; +import { EventService } from "../../services/event.service"; @Component({ encapsulation: ViewEncapsulation.None, - selector: "scheduler", + selector: 'app-scheduler', + standalone: true, providers: [EventService], - styleUrls: ['scheduler.component.css'], - templateUrl: 'scheduler.component.html' + styleUrl: './scheduler.component.css', + templateUrl: './scheduler.component.html', }) export class SchedulerComponent implements OnInit, OnDestroy { @ViewChild("scheduler_here", { static: true }) schedulerContainer!: ElementRef; - private _scheduler?: SchedulerStatic; + private scheduler?: SchedulerStatic; constructor(private eventService: EventService) { } ngOnInit() { let scheduler = Scheduler.getSchedulerInstance(); - scheduler.config.date_format = "%Y-%m-%d %H:%i"; scheduler.init( this.schedulerContainer.nativeElement, new Date(2027, 9, 7), - "week", + "week", ); - this.eventService.get().then((data) => {scheduler.parse(data);}); - this._scheduler = scheduler; + this.eventService.get().then((data) => { scheduler.parse(data); }); + this.scheduler = scheduler; } ngOnDestroy() { - if (this._scheduler) this._scheduler.destructor(); + this.scheduler?.destructor(); } } ~~~ From d1c627539e6274b2b1eb131d4819fc4d63e92f42 Mon Sep 17 00:00:00 2001 From: Artyom Borisevich Date: Tue, 2 Jun 2026 14:02:35 +0300 Subject: [PATCH 2/4] [upd] update js react scheduler article to TS --- docs/integrations/react/js-scheduler-react.md | 133 ++++++++++-------- 1 file changed, 78 insertions(+), 55 deletions(-) diff --git a/docs/integrations/react/js-scheduler-react.md b/docs/integrations/react/js-scheduler-react.md index 6a4b712c..e199f4f9 100644 --- a/docs/integrations/react/js-scheduler-react.md +++ b/docs/integrations/react/js-scheduler-react.md @@ -16,15 +16,15 @@ Before you start to create a new project, install [Node.js](https://nodejs.org/e You can create a basic React project using the following command: -~~~ -npx create-vite my-react-scheduler-app --template react +~~~bash +npm create vite@latest my-react-scheduler-app -- --template react-ts ~~~ ### Installation of dependencies Next you should go to the app directory. Let's call our project **my-react-scheduler-app** and run: -~~~ +~~~bash cd my-react-scheduler-app ~~~ @@ -32,14 +32,14 @@ After that you should install dependencies and start the dev server. For this, y - if you use yarn, you need to call the following commands: -~~~ -yarn install +~~~bash +yarn yarn dev ~~~ - if you use npm, you need to call the following commands: -~~~ +~~~bash npm install npm run dev ~~~ @@ -62,13 +62,13 @@ After you've got the Evaluation version of the Scheduler, you can install it wit - for npm: -~~~ +~~~bash npm install @dhx/trial-scheduler ~~~ - for yarn: -~~~ +~~~bash yarn add @dhx/trial-scheduler ~~~ @@ -78,7 +78,7 @@ Alternatively, since the zip-package of the library is structured as an **npm** ## Step 2. Component creation Now we should create a React component, to add a Scheduler into the application. Let's create the ***src/components/Scheduler*** folder. -Here we'll create the ***Scheduler.jsx***, ***Scheduler.css*** and ***index.js*** files. +Here we'll create the ***Scheduler.tsx***, ***Scheduler.css*** and ***index.ts*** files. We need to create the ***Scheduler.css*** file and add styles for the *scheduler-container*: @@ -93,19 +93,19 @@ We need to create the ***Scheduler.css*** file and add styles for the *scheduler To make the Scheduler container occupy the entire space of the body, you need to remove the default styles from the ***App.css*** file located in the ***src*** folder and add the following one: -~~~css -#root { - margin: 0; - padding: 0; - height: 100%; - width: 100%; +~~~css title="src/App.css" +#root, body { + margin: 0; + padding: 0; + height: 100%; + width: 100%; } ~~~ -And add the ***index.js*** file with the following content: +And add the ***index.ts*** file with the following content: -~~~js title="src/components/Scheduler/index.js" +~~~js title="src/components/Scheduler/index.ts" import Scheduler from './Scheduler'; import './Scheduler.css'; export default Scheduler; @@ -113,19 +113,19 @@ export default Scheduler; ### Importing source files -Open the newly created ***Scheduler.jsx*** file and import Scheduler source files. Note that: +Open the newly created ***Scheduler.tsx*** file and import Scheduler source files. Note that: - if you've installed the Scheduler package from a local folder, your import paths will look like this: -~~~js title="Scheduler.jsx" +~~~js title="Scheduler.tsx" import { Scheduler } from 'dhtmlx-scheduler'; import 'dhtmlx-scheduler/codebase/dhtmlxscheduler.css'; ~~~ - if you've chosen to install the trial version, the import paths should be as in: -~~~js title="Scheduler.jsx" +~~~js title="Scheduler.tsx" import { Scheduler } from '@dhx/trial-scheduler'; import '@dhx/trial-scheduler/codebase/dhtmlxscheduler.css'; ~~~ @@ -134,18 +134,20 @@ In this tutorial we will use the **trial** version of Scheduler. ### Setting the container and adding Scheduler -To display Scheduler on the page, we need to set the container to render the component inside. Create the ***Scheduler.jsx*** file with the following code: +To display Scheduler on the page, we need to set the container to render the component inside. Create the ***Scheduler.tsx*** file with the following code: -~~~js title="src/components/Scheduler/Scheduler.jsx" +~~~js title="src/components/Scheduler/Scheduler.tsx" 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(); +export default function SchedulerComponent() { + const containerRef = useRef(null); useEffect(() => { + if (!containerRef.current) { + return; + } let scheduler = Scheduler.getSchedulerInstance(); - scheduler.skin = "terrace"; scheduler.config.header = [ "day", "week", @@ -156,25 +158,25 @@ export default function SchedulerView( ) { "next", ]; - scheduler.init(container.current, new Date(2024, 5, 10)); + scheduler.init(containerRef.current, new Date(2027, 5, 10)); return () => { scheduler.destructor(); - container.current.innerHTML = ""; + if (containerRef.current) { + containerRef.current.innerHTML = ""; + } }; }, []); - return ( -
- ); + return
; } ~~~ ## Step 3. Adding Scheduler into the app -Now it's time to add the component into our app. Open ***src/App.jsx*** and use the *Scheduler* component instead of the default content by inserting the code below: +Now it's time to add the component into our app. Open ***src/App.tsx*** and use the *Scheduler* component instead of the default content by inserting the code below: -~~~js title="src/App.jsx" -import Scheduler from "./components/Scheduler"; +~~~js title="src/App.tsx" +import Scheduler from "./components/index"; import "./App.css"; function App() { @@ -193,44 +195,62 @@ After that, when we start the app, we should see an empty Scheduler on a page: ## Step 4. Providing Data -To add data into the Scheduler, we need to provide a data set. Let's create the ***data.js*** file in the ***src/*** directory and add some data into it: +Before adding data to the Scheduler, let's create types for scheduler events and props that Scheduler will receive: +~~~ts title="src/types.ts" +export interface SchedulerEvent { + id: string | number; + text?: string; + start_date: string | Date; + end_date: string | Date; + [key: string]: unknown; +} + +export interface SchedulerComponentProps { + events: SchedulerEvent[]; +} +~~~ + +To add data into the Scheduler, we need to provide a data set. Let's create the ***data.ts*** file in the ***src/*** directory and add some data into it: -~~~js title="src/data.js" -export function getData() { - const data = [ +~~~js title="src/data.ts" +import type { SchedulerEvent } from "./types"; + +export function getData(): SchedulerEvent[] { + const initialEvents: SchedulerEvent[] = [ { - start_date: "2024-06-10 6:00", - end_date: "2024-06-10 8:00", + start_date: "2027-06-10 6:00", + end_date: "2027-06-10 12:00", text: "Event 1", id: 1, }, { - start_date: "2024-06-13 10:00", - end_date: "2024-06-13 18:00", + start_date: "2027-06-13 10:00", + end_date: "2027-06-13 18:00", text: "Event 2", id: 2, }, ]; - return data; + return initialEvents; } ~~~ -And we should [pass props (our data)](https://react.dev/learn/passing-props-to-a-component) to a Scheduler component in ***App.jsx***: +And we should [pass props (our data)](https://react.dev/learn/passing-props-to-a-component) to a Scheduler component in ***App.tsx***: -~~~js title="App.jsx" -import { getData } from "./data.js"; -import Scheduler from "./components/Scheduler"; +~~~js title="App.tsx" +import { getData } from "./data.ts"; +import Scheduler from "./components/index"; import "./App.css"; function App() { return (
- +
); } + export default App; ~~~ @@ -241,12 +261,15 @@ And use props in the **scheduler.parse()** method in the Scheduler component: import { useEffect, useRef } from "react"; import { Scheduler } from "@dhx/trial-scheduler"; import "@dhx/trial-scheduler/codebase/dhtmlxscheduler.css"; +import type { SchedulerComponentProps } from "../types"; -export default function SchedulerView({events}) { - let container = useRef(); +export default function SchedulerComponent({events} : SchedulerComponentProps) { + const containerRef = useRef(null); useEffect(() => { + if (!containerRef.current) { + return; + } let scheduler = Scheduler.getSchedulerInstance(); - scheduler.skin = "terrace"; scheduler.config.header = [ "day", "week", @@ -257,17 +280,17 @@ export default function SchedulerView({events}) { "next", ]; - scheduler.init(container.current, new Date(2024, 5, 10)); + scheduler.init(containerRef.current, new Date(2027, 5, 10)); scheduler.parse(events); return () => { scheduler.destructor(); - container.current.innerHTML = ""; + if (containerRef.current) { + containerRef.current.innerHTML = ""; + } }; }, []); - return ( -
- ); + return
; } ~~~ From 060135704c7e966b94f2b558537735a6b5d22ba2 Mon Sep 17 00:00:00 2001 From: Artyom Date: Wed, 3 Jun 2026 13:39:48 +0300 Subject: [PATCH 3/4] [upd] upd vue js scheduler article --- docs/integrations/vue/howtostart-vue.md | 149 +++++++++++++++--------- 1 file changed, 95 insertions(+), 54 deletions(-) diff --git a/docs/integrations/vue/howtostart-vue.md b/docs/integrations/vue/howtostart-vue.md index 05853bb4..3b682756 100644 --- a/docs/integrations/vue/howtostart-vue.md +++ b/docs/integrations/vue/howtostart-vue.md @@ -117,34 +117,58 @@ To display Scheduler on the page, we need to set the container to render the com ~~~html title="Scheduler.vue" - + + ~~~ To make the Scheduler container occupy the entire space of the body, you need to remove the default -styles from the ***main.css*** file located in the ***src/assets*** folder and add the following one: - +styles add the following one: -~~~css title="src/assets/main.css" -#app { +~~~css +body, #app { margin: 0; padding: 0; height: 100%; @@ -157,19 +181,23 @@ styles from the ***main.css*** file located in the ***src/assets*** folder and a Now it's time to add the component into our app. Open ***src/App.vue*** and use the Scheduler component instead of the default content by inserting the code below: - ~~~html title="src/App.vue" - + + ~~~ After that, when we start the app, we should see an empty Scheduler on a page: @@ -181,7 +209,7 @@ After that, when we start the app, we should see an empty Scheduler on a page: To add data into the Scheduler, we need to provide a data set. Let's create the ***data.js*** file in the ***src/*** directory and add some data into it: -~~~js title="src/data.js" +~~~js title="src/data.ts" export function getData() { const data = [ { @@ -205,22 +233,13 @@ We should [pass props (our data)](https://vuejs.org/guide/components/props.html) ~~~html title="App.vue" - ~~~ @@ -228,28 +247,50 @@ And then use props in the **scheduler.parse()** method in the Scheduler componen ~~~html title="Scheduler.vue" - ~~~ From e00e57007bebbe3dd1a9c20adc8933991bd97d30 Mon Sep 17 00:00:00 2001 From: Artyom Borisevich Date: Thu, 4 Jun 2026 10:16:44 +0300 Subject: [PATCH 4/4] [upd] update svelte js scheduler article --- docs/integrations/svelte/howtostart-svelte.md | 70 ++++++++++--------- 1 file changed, 38 insertions(+), 32 deletions(-) diff --git a/docs/integrations/svelte/howtostart-svelte.md b/docs/integrations/svelte/howtostart-svelte.md index b9a1b711..ff20cabf 100644 --- a/docs/integrations/svelte/howtostart-svelte.md +++ b/docs/integrations/svelte/howtostart-svelte.md @@ -109,22 +109,22 @@ To display Scheduler on the page, we need to set the container to render the com ~~~html title="Scheduler.svelte" -
+
~~~ To make the Scheduler container occupy the entire space of the body, you need to remove the default @@ -199,26 +199,32 @@ And use props in the **scheduler.parse()** method in the Scheduler component: ~~~html title="Scheduler.svelte" -
+
~~~ Now, if you reopen the app page, you should see a Scheduler with events: