From e00e57007bebbe3dd1a9c20adc8933991bd97d30 Mon Sep 17 00:00:00 2001
From: Artyom Borisevich <aborisevich@xbsofware.by>
Date: Thu, 4 Jun 2026 10:16:44 +0300
Subject: [PATCH] [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"
 <script>
-    import { onMount } from "svelte";
-    import { Scheduler } from "@dhx/trial-scheduler";
-    import "@dhx/trial-scheduler/codebase/dhtmlxscheduler.css";
-
-    let scheduler;
-    let container;
-    onMount(() => {
-        scheduler = Scheduler.getSchedulerInstance();
-        scheduler.skin = "terrace";
-        scheduler.init(container, new Date(2027, 9, 6), "week");
-
-        return () => scheduler.destructor();
-    });
+  import { onMount } from "svelte";
+  import { Scheduler } from "@dhx/trial-scheduler";
+  import "@dhx/trial-scheduler/codebase/dhtmlxscheduler.css";
+
+  let scheduler;
+  let container;
+
+  onMount(() => {
+    scheduler = Scheduler.getSchedulerInstance();
+
+    scheduler.init(container, new Date(2027, 5, 10), "week");
+    return () => scheduler.destructor();
+  });
 </script>
 
-<div bind:this="{container}" style="width: 100%; height: 100vh;"></div>
+<div bind:this={container} style="width: 100%; height: 100vh;"></div>
 ~~~
 
 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"
 <script>
-    import { onMount } from "svelte";
-    
-    import { Scheduler } from "@dhx/trial-scheduler";
-    import "@dhx/trial-scheduler/codebase/dhtmlxscheduler.css"
-    export let data; /*!*/
-
-    let scheduler;
-    let container;
-    onMount(() => {
-        scheduler = Scheduler.getSchedulerInstance();
-        scheduler.skin = "terrace"
-        scheduler.init(container, new Date(2027, 5, 10), "week");
-
-        return () => scheduler.destructor();
-    });
-
-    $: scheduler?.parse(data); /*!*/
+  import { onMount } from "svelte";
+  import { Scheduler } from "@dhx/trial-scheduler";
+  import "@dhx/trial-scheduler/codebase/dhtmlxscheduler.css";
+
+  let { data } = $props();
+
+  let scheduler;
+  let schedulerReady = $state(false);
+  let container;
+
+  onMount(() => {
+    scheduler = Scheduler.getSchedulerInstance();
+
+    scheduler.init(container, new Date(2027, 5, 10), "week");
+    schedulerReady = true;
+    return () => scheduler.destructor();
+  });
+
+  $effect(() => {
+    if (schedulerReady && scheduler && data) {
+      scheduler.parse(data);
+    }
+  });
 </script>
 
-<div bind:this="{container}" style="width: 100%; height: 100vh;"></div>
+<div bind:this={container} style="width: 100%; height: 100vh;"></div>
 ~~~
 
 Now, if you reopen the app page, you should see a Scheduler with events: