diff --git a/samples/scheduling/date-range-picker/custom-ranges/.eslintrc.js b/samples/scheduling/date-range-picker/custom-ranges/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/scheduling/date-range-picker/custom-ranges/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/custom-ranges/README.md b/samples/scheduling/date-range-picker/custom-ranges/README.md new file mode 100644 index 0000000000..caa84285b7 --- /dev/null +++ b/samples/scheduling/date-range-picker/custom-ranges/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Date Range Picker Custom Ranges feature using [Date Range-Picker](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/scheduling/date-range-picker/custom-ranges +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/scheduling/date-range-picker/custom-ranges/package.json b/samples/scheduling/date-range-picker/custom-ranges/package.json new file mode 100644 index 0000000000..5ca4e87224 --- /dev/null +++ b/samples/scheduling/date-range-picker/custom-ranges/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-date-range-picker-custom-ranges", + "description": "This project provides example of Date Picker Overview using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start", + "build": "react-scripts --max_old_space_size=10240 build ", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "dependencies": { + "igniteui-react": "19.1.0", + "igniteui-react-core": "19.0.1-beta.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "^5.0.1", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^18.11.7", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "react-app-rewired": "^2.2.1", + "typescript": "^4.8.4", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/custom-ranges/public/index.html b/samples/scheduling/date-range-picker/custom-ranges/public/index.html new file mode 100644 index 0000000000..d00429d653 --- /dev/null +++ b/samples/scheduling/date-range-picker/custom-ranges/public/index.html @@ -0,0 +1,10 @@ + + + + Date Range Picker Custom Ranges + + + +
+ + \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/custom-ranges/sandbox.config.json b/samples/scheduling/date-range-picker/custom-ranges/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/scheduling/date-range-picker/custom-ranges/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/custom-ranges/src/index.css b/samples/scheduling/date-range-picker/custom-ranges/src/index.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/samples/scheduling/date-range-picker/custom-ranges/src/index.tsx b/samples/scheduling/date-range-picker/custom-ranges/src/index.tsx new file mode 100644 index 0000000000..0e27b10dce --- /dev/null +++ b/samples/scheduling/date-range-picker/custom-ranges/src/index.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrDateRangePicker } from 'igniteui-react'; +import { CustomDateRange } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default function DrpCustom() { + const today = new Date(); + const nextSeven = new Date( + today.getFullYear(), + today.getMonth(), + today.getDate() + 7 + ); + const nextWeek: CustomDateRange[] = [ + { + label: "Next 7 days", + dateRange: { + start: today, + end: nextSeven, + }, + }, + ]; + + return ( +
+ + +
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/scheduling/date-range-picker/custom-ranges/src/react-app-env.d.ts b/samples/scheduling/date-range-picker/custom-ranges/src/react-app-env.d.ts new file mode 100644 index 0000000000..6431bc5fc6 --- /dev/null +++ b/samples/scheduling/date-range-picker/custom-ranges/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/samples/scheduling/date-range-picker/custom-ranges/tsconfig.json b/samples/scheduling/date-range-picker/custom-ranges/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/scheduling/date-range-picker/custom-ranges/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/scheduling/date-range-picker/form/.eslintrc.js b/samples/scheduling/date-range-picker/form/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/scheduling/date-range-picker/form/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/form/README.md b/samples/scheduling/date-range-picker/form/README.md new file mode 100644 index 0000000000..bcb1ffa372 --- /dev/null +++ b/samples/scheduling/date-range-picker/form/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Date Range Picker Form feature using [Date Range-Picker](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/scheduling/date-range-picker/form +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/scheduling/date-range-picker/form/package.json b/samples/scheduling/date-range-picker/form/package.json new file mode 100644 index 0000000000..21692327ae --- /dev/null +++ b/samples/scheduling/date-range-picker/form/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-date-range-picker-form", + "description": "This project provides example of Date Picker Overview using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start", + "build": "react-scripts --max_old_space_size=10240 build ", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "dependencies": { + "igniteui-react": "19.1.0", + "igniteui-react-core": "19.0.1-beta.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "^5.0.1", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^18.11.7", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "react-app-rewired": "^2.2.1", + "typescript": "^4.8.4", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/form/public/index.html b/samples/scheduling/date-range-picker/form/public/index.html new file mode 100644 index 0000000000..0f5bcccbbe --- /dev/null +++ b/samples/scheduling/date-range-picker/form/public/index.html @@ -0,0 +1,10 @@ + + + + Date Range Picker Form + + + +
+ + \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/form/sandbox.config.json b/samples/scheduling/date-range-picker/form/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/scheduling/date-range-picker/form/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/form/src/index.css b/samples/scheduling/date-range-picker/form/src/index.css new file mode 100644 index 0000000000..ac750bd5be --- /dev/null +++ b/samples/scheduling/date-range-picker/form/src/index.css @@ -0,0 +1,7 @@ +igc-button { + margin-top: 15px; +} + +igc-button:nth-of-type(2) { + margin-left: 3px; +} \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/form/src/index.tsx b/samples/scheduling/date-range-picker/form/src/index.tsx new file mode 100644 index 0000000000..0ec9c274d1 --- /dev/null +++ b/samples/scheduling/date-range-picker/form/src/index.tsx @@ -0,0 +1,55 @@ +import React, { useRef, useState } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrDateRangePicker, IgrButton, IgrDialog } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default function DrpForm() { + const dialog = useRef(null); + const [range, setRange] = useState({ start: null, end: null }); + + const showDialog = (event: React.FormEvent) => { + if (dialog.current) { + event.preventDefault(); + dialog.current.show(); + } + }; + + const handleDateRangeChange = (event: CustomEvent) => { + const newRange = { + start: event.detail?.start || null, + end: event.detail?.end || null, + }; + setRange(newRange); + }; + + return ( +
+
+
+ + + Submit + + + Reset + +
+
+ + 
+          Start: {range?.start?.toString() ?? ""} 

+          End: {range?.end?.toString() ?? ""}
+
+ +
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/scheduling/date-range-picker/form/src/react-app-env.d.ts b/samples/scheduling/date-range-picker/form/src/react-app-env.d.ts new file mode 100644 index 0000000000..6431bc5fc6 --- /dev/null +++ b/samples/scheduling/date-range-picker/form/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/samples/scheduling/date-range-picker/form/tsconfig.json b/samples/scheduling/date-range-picker/form/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/scheduling/date-range-picker/form/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/scheduling/date-range-picker/overview/.eslintrc.js b/samples/scheduling/date-range-picker/overview/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/scheduling/date-range-picker/overview/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/overview/README.md b/samples/scheduling/date-range-picker/overview/README.md new file mode 100644 index 0000000000..776b419a26 --- /dev/null +++ b/samples/scheduling/date-range-picker/overview/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Date Range Picker Overview feature using [Date Range-Picker](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/scheduling/date-range-picker/overview +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/scheduling/date-range-picker/overview/package.json b/samples/scheduling/date-range-picker/overview/package.json new file mode 100644 index 0000000000..dc9c729803 --- /dev/null +++ b/samples/scheduling/date-range-picker/overview/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-date-range-picker-overview", + "description": "This project provides example of Date Picker Overview using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start", + "build": "react-scripts --max_old_space_size=10240 build ", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "dependencies": { + "igniteui-react": "19.1.0", + "igniteui-react-core": "19.0.1-beta.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "^5.0.1", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^18.11.7", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "react-app-rewired": "^2.2.1", + "typescript": "^4.8.4", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/overview/public/index.html b/samples/scheduling/date-range-picker/overview/public/index.html new file mode 100644 index 0000000000..5addfe3a0b --- /dev/null +++ b/samples/scheduling/date-range-picker/overview/public/index.html @@ -0,0 +1,10 @@ + + + + Date Range Picker Overview + + + +
+ + \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/overview/sandbox.config.json b/samples/scheduling/date-range-picker/overview/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/scheduling/date-range-picker/overview/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/overview/src/index.css b/samples/scheduling/date-range-picker/overview/src/index.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/samples/scheduling/date-range-picker/overview/src/index.tsx b/samples/scheduling/date-range-picker/overview/src/index.tsx new file mode 100644 index 0000000000..77628c998c --- /dev/null +++ b/samples/scheduling/date-range-picker/overview/src/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { IgrDateRangePicker } from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +export default function DrpOverview() { + const today: Date = new Date(); + let endDate: Date = new Date(); + endDate.setDate(today.getDate() + 3); + + return ( +
+ +
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/scheduling/date-range-picker/overview/src/react-app-env.d.ts b/samples/scheduling/date-range-picker/overview/src/react-app-env.d.ts new file mode 100644 index 0000000000..6431bc5fc6 --- /dev/null +++ b/samples/scheduling/date-range-picker/overview/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/samples/scheduling/date-range-picker/overview/tsconfig.json b/samples/scheduling/date-range-picker/overview/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/scheduling/date-range-picker/overview/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/scheduling/date-range-picker/slots/.eslintrc.js b/samples/scheduling/date-range-picker/slots/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/scheduling/date-range-picker/slots/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/slots/README.md b/samples/scheduling/date-range-picker/slots/README.md new file mode 100644 index 0000000000..307007f226 --- /dev/null +++ b/samples/scheduling/date-range-picker/slots/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Date Range Picker Slots feature using [Date Range-Picker](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/scheduling/date-range-picker/slots +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/scheduling/date-range-picker/slots/package.json b/samples/scheduling/date-range-picker/slots/package.json new file mode 100644 index 0000000000..b026fd786a --- /dev/null +++ b/samples/scheduling/date-range-picker/slots/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-date-range-picker-slots", + "description": "This project provides example of Date Picker Overview using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start", + "build": "react-scripts --max_old_space_size=10240 build ", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "dependencies": { + "igniteui-react": "19.1.0", + "igniteui-react-core": "19.0.1-beta.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "^5.0.1", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^18.11.7", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "react-app-rewired": "^2.2.1", + "typescript": "^4.8.4", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/slots/public/index.html b/samples/scheduling/date-range-picker/slots/public/index.html new file mode 100644 index 0000000000..582ffd3b3a --- /dev/null +++ b/samples/scheduling/date-range-picker/slots/public/index.html @@ -0,0 +1,10 @@ + + + + Date Range Picker Slots + + + +
+ + \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/slots/sandbox.config.json b/samples/scheduling/date-range-picker/slots/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/scheduling/date-range-picker/slots/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/slots/src/index.css b/samples/scheduling/date-range-picker/slots/src/index.css new file mode 100644 index 0000000000..f9e2ce27e2 --- /dev/null +++ b/samples/scheduling/date-range-picker/slots/src/index.css @@ -0,0 +1,13 @@ +h3 { + margin: 2rem 0 0.5rem 0; +} + +h3:nth-of-type(1) { + margin-top: unset; +} + +.container { + overflow-y: scroll; + padding-bottom: 1.2rem; +} + \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/slots/src/index.tsx b/samples/scheduling/date-range-picker/slots/src/index.tsx new file mode 100644 index 0000000000..855d1e48d5 --- /dev/null +++ b/samples/scheduling/date-range-picker/slots/src/index.tsx @@ -0,0 +1,74 @@ +import React, { useEffect, useRef } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { + IgrDateRangePicker, + IgrIcon, + IgrButton, + registerIconFromText, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +const Apps = ''; +const Bin = ''; +const Down = ''; +const Upload = ''; + +export default function DrpSlots() { + const dateRangeRef = useRef(); + + const today: Date = new Date(); + let tomorrow: Date = new Date(); + tomorrow.setDate(today.getDate() + 1); + + useEffect(() => { + registerIconFromText("appsIcon", Apps); + registerIconFromText("binIcon", Bin); + registerIconFromText("downArrowIcon", Down); + registerIconFromText("uploadIcon", Upload); + }, []); + + const toggleWeekNumbers = () => { + dateRangeRef.current.showWeekNumbers = !dateRangeRef.current.showWeekNumbers; + }; + + return ( +
+

Actions

+ + + Toggle Week Numbers + + +

Custom separator

+ + till + +

Helper text

+ + Helper text goes here. + +

Prefix & Suffix

+ + + + +

Clear & Calendar icons

+ + + + +

Custom calendar header + title

+ + Custom calendar title goes here. + + Custom content instead of date goes here. + + +
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/scheduling/date-range-picker/slots/src/react-app-env.d.ts b/samples/scheduling/date-range-picker/slots/src/react-app-env.d.ts new file mode 100644 index 0000000000..6431bc5fc6 --- /dev/null +++ b/samples/scheduling/date-range-picker/slots/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/samples/scheduling/date-range-picker/slots/tsconfig.json b/samples/scheduling/date-range-picker/slots/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/scheduling/date-range-picker/slots/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/scheduling/date-range-picker/styling/.eslintrc.js b/samples/scheduling/date-range-picker/styling/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/scheduling/date-range-picker/styling/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/styling/README.md b/samples/scheduling/date-range-picker/styling/README.md new file mode 100644 index 0000000000..ca7d94a63b --- /dev/null +++ b/samples/scheduling/date-range-picker/styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Date Range Picker Styling feature using [Date Range-Picker](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/scheduling/date-range-picker/styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/scheduling/date-range-picker/styling/package.json b/samples/scheduling/date-range-picker/styling/package.json new file mode 100644 index 0000000000..acfbb8d234 --- /dev/null +++ b/samples/scheduling/date-range-picker/styling/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-date-range-picker-styling", + "description": "This project provides example of Date Picker Overview using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start", + "build": "react-scripts --max_old_space_size=10240 build ", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "dependencies": { + "igniteui-react": "19.1.0", + "igniteui-react-core": "19.0.1-beta.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "^5.0.1", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^18.11.7", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "react-app-rewired": "^2.2.1", + "typescript": "^4.8.4", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/styling/public/index.html b/samples/scheduling/date-range-picker/styling/public/index.html new file mode 100644 index 0000000000..b78b2dc594 --- /dev/null +++ b/samples/scheduling/date-range-picker/styling/public/index.html @@ -0,0 +1,10 @@ + + + + Date Range Picker Styling + + + +
+ + \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/styling/sandbox.config.json b/samples/scheduling/date-range-picker/styling/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/scheduling/date-range-picker/styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/scheduling/date-range-picker/styling/src/index.css b/samples/scheduling/date-range-picker/styling/src/index.css new file mode 100644 index 0000000000..7e28d26e55 --- /dev/null +++ b/samples/scheduling/date-range-picker/styling/src/index.css @@ -0,0 +1,21 @@ +igc-date-range-picker::part(label) { + color: var(--ig-gray-600); +} + +igc-date-range-picker::part(calendar-icon-start), +igc-date-range-picker::part(calendar-icon-end) { + background-color: var(--ig-primary-500); + color: var(--ig-primary-500-contrast); +} + +igc-date-range-picker::part(calendar-icon-open-start), +igc-date-range-picker::part(calendar-icon-open-end) { + background-color: var(--ig-primary-800); + color: var(--ig-primary-800-contrast); +} + +igc-date-range-picker::part(clear-icon-start), +igc-date-range-picker::part(clear-icon-end) { + background-color: var(--ig-error-500); + color: var(--ig-error-500-contrast); +} diff --git a/samples/scheduling/date-range-picker/styling/src/index.tsx b/samples/scheduling/date-range-picker/styling/src/index.tsx new file mode 100644 index 0000000000..77cf6a157d --- /dev/null +++ b/samples/scheduling/date-range-picker/styling/src/index.tsx @@ -0,0 +1,36 @@ +import React, { useEffect } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import { + IgrDateRangePicker, + IgrIcon, + registerIconFromText, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +const UpPlane = ''; +const DownPlane = ''; + +export default function DrpOverview() { + useEffect (() => { + registerIconFromText("UpPlaneIcon", UpPlane); + registerIconFromText("DownPlaneIcon", DownPlane); + }, []) + + return ( +
+ + + + + +
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/scheduling/date-range-picker/styling/src/react-app-env.d.ts b/samples/scheduling/date-range-picker/styling/src/react-app-env.d.ts new file mode 100644 index 0000000000..6431bc5fc6 --- /dev/null +++ b/samples/scheduling/date-range-picker/styling/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/samples/scheduling/date-range-picker/styling/tsconfig.json b/samples/scheduling/date-range-picker/styling/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/scheduling/date-range-picker/styling/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +}