diff --git a/samples/scheduling/calendar/rtl/README.md b/samples/scheduling/calendar/rtl/README.md new file mode 100644 index 0000000000..1ef0e5ac4c --- /dev/null +++ b/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. diff --git a/samples/scheduling/calendar/rtl/index.html b/samples/scheduling/calendar/rtl/index.html new file mode 100644 index 0000000000..a917108e4f --- /dev/null +++ b/samples/scheduling/calendar/rtl/index.html @@ -0,0 +1,13 @@ + + + + + Calendar RTL + + + + +
+ + + diff --git a/samples/scheduling/calendar/rtl/package.json b/samples/scheduling/calendar/rtl/package.json new file mode 100644 index 0000000000..29a5033881 --- /dev/null +++ b/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" + } +} diff --git a/samples/scheduling/calendar/rtl/src/index.css b/samples/scheduling/calendar/rtl/src/index.css new file mode 100644 index 0000000000..247e20ae3f --- /dev/null +++ b/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; +} diff --git a/samples/scheduling/calendar/rtl/src/index.tsx b/samples/scheduling/calendar/rtl/src/index.tsx new file mode 100644 index 0000000000..d66488951a --- /dev/null +++ b/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 ( +
+ Change Directionality +
+ +
+
+ ); +} + +// rendering above component in the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')!); +root.render(); diff --git a/samples/scheduling/calendar/rtl/tsconfig.json b/samples/scheduling/calendar/rtl/tsconfig.json new file mode 100644 index 0000000000..e27a22be9b --- /dev/null +++ b/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" + ] +} diff --git a/samples/scheduling/calendar/rtl/vite.config.js b/samples/scheduling/calendar/rtl/vite.config.js new file mode 100644 index 0000000000..4fc593892f --- /dev/null +++ b/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 + }, +});