From 8f2e5e9d70d01dda2477989f9e3e92ed3652f3bd Mon Sep 17 00:00:00 2001
From: Wissam <merhi@progress.com>
Date: Mon, 29 Jan 2024 12:10:53 +0200
Subject: [PATCH] docs(scheduler): start and end slot dates KB

---
 .../scheduler/start-end-dates/main.jsx        | 64 +++++++++++++++++++
 .../scheduler-get-start-end-values.md         | 43 +++++++++++++
 2 files changed, 107 insertions(+)
 create mode 100644 knowledge-base/examples/scheduler/start-end-dates/main.jsx
 create mode 100644 knowledge-base/scheduler-get-start-end-values.md

diff --git a/knowledge-base/examples/scheduler/start-end-dates/main.jsx b/knowledge-base/examples/scheduler/start-end-dates/main.jsx
new file mode 100644
index 00000000..c2a5e14b
--- /dev/null
+++ b/knowledge-base/examples/scheduler/start-end-dates/main.jsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import {
+  Scheduler,
+  AgendaView,
+  TimelineView,
+  DayView,
+  WeekView,
+  MonthView,
+} from '@progress/kendo-react-scheduler';
+import { sampleData, displayDate } from './events-utc';
+
+const App = () => {
+  const [start, setStart] = React.useState('');
+  const [end, setEnd] = React.useState('');
+  const [date, setDate] = React.useState(displayDate);
+  const [view, setView] = React.useState('day');
+
+  const handleDateChange = (event) => {
+    setDate(event.value);
+  };
+
+  const handleViewChange = (event) => {
+    setView(event.value);
+  };
+
+  React.useEffect(() => {
+    if (document) {
+      const allSlots = document.querySelectorAll(
+        '.k-scheduler-body .k-scheduler-cell.k-slot-cell'
+      );
+      const firstSlot = allSlots[0];
+      const lastSlot = allSlots[allSlots.length - 1];
+
+      setStart(
+        new Date(parseInt(firstSlot.getAttribute('data-slot-start'), 10))
+      );
+
+      setEnd(new Date(parseInt(lastSlot.getAttribute('data-slot-end'), 10)));
+    }
+  }, [date, view]);
+
+  return (
+    <div>
+      <div>start: {start.toString()}</div>
+      <div>end: {end.toString()}</div>
+      <Scheduler
+        data={sampleData}
+        date={date}
+        onDateChange={handleDateChange}
+        view={view}
+        onViewChange={handleViewChange}
+      >
+        <AgendaView />
+        <TimelineView />
+        <DayView />
+        <WeekView />
+        <MonthView />
+      </Scheduler>
+    </div>
+  );
+};
+
+ReactDOM.render(<App />, document.querySelector('my-app'));
diff --git a/knowledge-base/scheduler-get-start-end-values.md b/knowledge-base/scheduler-get-start-end-values.md
new file mode 100644
index 00000000..40d1ac2a
--- /dev/null
+++ b/knowledge-base/scheduler-get-start-end-values.md
@@ -0,0 +1,43 @@
+---
+title: Scheduler start and end date values
+description: An example on how to retrieve the date values of the first and last slot of the KendoReact Scheduler.
+type: how-to
+page_title: Get the date values of the first and last slot - KendoReact Scheduler
+slug: scheduler-start-end-date-values
+tags: scheduler, kendoreact, start, end, slot, view
+res_type: kb
+category: knowledge-base
+---
+
+## Environment
+
+<table>
+    <tbody>
+	    <tr>
+	    	<td>Product Version</td>
+	    	<td>7.0.2</td>
+	    </tr>
+	    <tr>
+	    	<td>Product</td>
+	    	<td>Progress® KendoReact</td>
+	    </tr>
+    </tbody>
+</table>
+
+
+## Description
+
+I want to get the first and last date in my current Scheduler view. These start and end values should be updated when I change the view (DayView, WeekView, etc.), or when I navigate to a different date.
+
+## Solution
+
+Get these values using the `data-slot-start` and `data-slot-end` properties of the SchedulerSlot.
+
+First, retrieve the first and last slots using the `.k-scheduler-body .k-scheduler-cell.k-slot-cell` class, where the first item in the array represents the first slot while the last one represents the last one. This allows you to get the date value of the `data-slot-start` of the first slot, and `data-slot-end` of the last slot. This should be done in the [useEffect](https://react.dev/reference/react/useEffect) hook where the date and view should be added to the dependency array because we want the start and end dates to be updated when the view or date is updated.
+
+Following is an example demonstrates this approach:
+
+{% meta id height:500 %}
+{% embed_file scheduler/start-end-dates/main.jsx preview %}
+{% embed_file shared/events-utc.js preview %}
+{% endmeta %}