feat(calendar): add rtl sample

samples/scheduling/calendar/rtl/README.md

@@ -0,0 +1,15 @@
+This folder contains a React application with the Calendar RTL example.
+
+- [Run in the samples browser](https://www.infragistics.com/react-demos/scheduling/calendar/rtl)
+- [Source](./src/index.tsx)
+
+## Run locally
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+cd igniteui-react-examples/samples/scheduling/calendar/rtl
+npm install
+npm start
+```
+
+Then open http://localhost:4200/ in your browser.

samples/scheduling/calendar/rtl/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Calendar RTL</title>
+    <link rel="shortcut icon" href="https://dl.infragistics.com/x/img/browsers/react.png" />
+    <link rel="stylesheet" href="https://dl.infragistics.com/x/css/samples/shared.v8.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

samples/scheduling/calendar/rtl/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "react-calendar-rtl",
+  "description": "This project provides example of Calendar RTL using Infragistics React components",
+  "author": "Infragistics",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "vite --port 4200",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "igniteui-react": "19.9.0",
+    "igniteui-webcomponents": "~7.4.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "typescript": "^5.9.3",
+    "vite": "^8.3.1"
+  }
+}

samples/scheduling/calendar/rtl/src/index.css

@@ -0,0 +1,12 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+.sample {
+    --ig-size: var(--ig-size-large);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    padding: 1.5rem 1rem;
+}

samples/scheduling/calendar/rtl/src/index.tsx

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import { IgrButton, IgrCalendar } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './index.css';
+
+export default function CalendarRtl() {
+    const [direction, setDirection] = useState<'ltr' | 'rtl'>('rtl');
+
+    const toggleDirection = () => {
+        setDirection(direction === 'rtl' ? 'ltr' : 'rtl');
+    };
+
+    return (
+        <div className="sample">
+            <IgrButton variant="contained" onClick={toggleDirection}>Change Directionality</IgrButton>
+            <div className="calendar-container" dir={direction}>
+                <IgrCalendar />
+            </div>
+        </div>
+    );
+}
+
+// rendering above component in the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(<CalendarRtl />);

samples/scheduling/calendar/rtl/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "lib": [
+      "es2020",
+      "dom",
+      "dom.iterable"
+    ],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "types": [
+      "vite/client"
+    ],
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": [
+    "src"
+  ]
+}

samples/scheduling/calendar/rtl/vite.config.js

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: 'build'
+  },
+  server: {
+    open: false
+  },
+});