From 760ef6aec9881261e01c1b539b3e10baf4117e71 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Wed, 7 Jan 2026 12:04:10 +0200 Subject: [PATCH 01/11] fix ts react scheduler demos --- .../Pagination/Overview/React/EmployeeCard.tsx | 2 +- .../Overview/React/EmployeesGallery.tsx | 2 +- .../Demos/Scheduler/CellTemplates/React/App.tsx | 3 ++- .../Scheduler/CellTemplates/React/TimeCell.tsx | 2 +- .../Demos/Scheduler/CellTemplates/React/utils.ts | 6 +++--- .../Demos/Scheduler/ContextMenu/React/App.tsx | 4 ++-- apps/demos/Demos/Scheduler/Editing/React/App.tsx | 6 +++--- .../GoogleCalendarIntegration/React/App.tsx | 3 ++- .../demos/Demos/Scheduler/Templates/React/App.tsx | 15 ++++++++------- .../Templates/React/MovieInfoContainer.tsx | 6 +++--- apps/demos/Demos/Scheduler/Toolbar/React/App.tsx | 2 +- apps/demos/Demos/Scheduler/Toolbar/React/data.ts | 2 +- apps/demos/tsconfig.react-check.json | 4 ---- 13 files changed, 28 insertions(+), 29 deletions(-) diff --git a/apps/demos/Demos/Pagination/Overview/React/EmployeeCard.tsx b/apps/demos/Demos/Pagination/Overview/React/EmployeeCard.tsx index f089a0dc9ffe..a6fc350c3732 100644 --- a/apps/demos/Demos/Pagination/Overview/React/EmployeeCard.tsx +++ b/apps/demos/Demos/Pagination/Overview/React/EmployeeCard.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Employee } from './data'; +import { type Employee } from './data'; interface EmployeeCardProps { employee: Employee; diff --git a/apps/demos/Demos/Pagination/Overview/React/EmployeesGallery.tsx b/apps/demos/Demos/Pagination/Overview/React/EmployeesGallery.tsx index c8667c9b344f..a229dad01487 100644 --- a/apps/demos/Demos/Pagination/Overview/React/EmployeesGallery.tsx +++ b/apps/demos/Demos/Pagination/Overview/React/EmployeesGallery.tsx @@ -1,6 +1,6 @@ import React from 'react'; import EmployeeCard from './EmployeeCard.tsx'; -import { Employee } from './data'; +import { type Employee } from './data'; interface EmployeeGalleryProps { employees: Employee[]; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx b/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx index 5cd77776e4a8..d17abf579b5b 100644 --- a/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx +++ b/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx @@ -3,6 +3,7 @@ import React, { useCallback, useMemo, useState } from 'react'; import Scheduler from 'devextreme-react/scheduler'; import type { SchedulerTypes } from 'devextreme-react/scheduler'; import type { FormRef } from 'devextreme-react/form'; +import type { dxElementWrapper } from 'devextreme/core/renderer'; import notify from 'devextreme/ui/notify'; import { data, holidays } from './data.ts'; import Utils from './utils.ts'; @@ -75,7 +76,7 @@ const onAppointmentUpdating = (e: SchedulerTypes.AppointmentUpdatingEvent) => { } }; -const setComponentAria = (element) => { +const setComponentAria = (element: dxElementWrapper) => { const prevAria = element?.attr('aria-label') || ''; const description = ariaDescription(); const nextAria = `${prevAria}${description ? ` ${description}` : ''}`; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/React/TimeCell.tsx b/apps/demos/Demos/Scheduler/CellTemplates/React/TimeCell.tsx index d36467501b57..1ecdaaaa4820 100644 --- a/apps/demos/Demos/Scheduler/CellTemplates/React/TimeCell.tsx +++ b/apps/demos/Demos/Scheduler/CellTemplates/React/TimeCell.tsx @@ -12,7 +12,7 @@ const TimeCell = (props: TimeCellProps) => { const hasCoffeeCupIcon = Utils.hasCoffeeCupIcon(date); return ( -
+
{text} {hasCoffeeCupIcon &&
}
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/React/utils.ts b/apps/demos/Demos/Scheduler/CellTemplates/React/utils.ts index 97dde1744aaa..a585e5ae05d8 100644 --- a/apps/demos/Demos/Scheduler/CellTemplates/React/utils.ts +++ b/apps/demos/Demos/Scheduler/CellTemplates/React/utils.ts @@ -29,9 +29,9 @@ export default class Utils { } static isValidAppointment(component: SchedulerTypes.AppointmentAddingEvent['component'], appointmentData: SchedulerTypes.AppointmentAddingEvent['appointmentData']) { - const startDate = new Date(appointmentData.startDate); - const endDate = new Date(appointmentData.endDate); - const cellDuration = component.option('cellDuration'); + const startDate = appointmentData.startDate ? new Date(appointmentData.startDate) : new Date(); + const endDate = appointmentData.endDate ? new Date(appointmentData.endDate) : new Date(); + const cellDuration = Number(component.option('cellDuration')); return Utils.isValidAppointmentInterval(startDate, endDate, cellDuration); } diff --git a/apps/demos/Demos/Scheduler/ContextMenu/React/App.tsx b/apps/demos/Demos/Scheduler/ContextMenu/React/App.tsx index e9c954b0d0d0..daca502ff623 100644 --- a/apps/demos/Demos/Scheduler/ContextMenu/React/App.tsx +++ b/apps/demos/Demos/Scheduler/ContextMenu/React/App.tsx @@ -15,7 +15,7 @@ const appointmentClassName = '.dx-scheduler-appointment'; const cellClassName = '.dx-scheduler-date-table-cell'; const onContextMenuItemClick = (e: ContextMenuTypes.ItemClickEvent) => { - e.itemData.onItemClick?.(e); + e.itemData?.onItemClick?.(e); }; const App = () => { @@ -35,7 +35,7 @@ const App = () => { ...item, onItemClick: (e: ContextMenuTypes.ItemClickEvent) => scheduler?.updateAppointment(appointmentData, { ...appointmentData, - ...{ roomId: [e.itemData.id] }, + ...{ roomId: [e.itemData?.id] }, }), })); diff --git a/apps/demos/Demos/Scheduler/Editing/React/App.tsx b/apps/demos/Demos/Scheduler/Editing/React/App.tsx index 68a06c6374a4..5ca267609c8a 100644 --- a/apps/demos/Demos/Scheduler/Editing/React/App.tsx +++ b/apps/demos/Demos/Scheduler/Editing/React/App.tsx @@ -13,15 +13,15 @@ const showToast = (event: string, value: string, type: string) => { }; const showAddedToast = (e: SchedulerTypes.AppointmentAddedEvent) => { - showToast('Added', e.appointmentData.text, 'success'); + showToast('Added', e.appointmentData.text ?? '', 'success'); }; const showUpdatedToast = (e: SchedulerTypes.AppointmentUpdatedEvent) => { - showToast('Updated', e.appointmentData.text, 'info'); + showToast('Updated', e.appointmentData.text ?? '', 'info'); }; const showDeletedToast = (e: SchedulerTypes.AppointmentDeletedEvent) => { - showToast('Deleted', e.appointmentData.text, 'warning'); + showToast('Deleted', e.appointmentData.text ?? '', 'warning'); }; const App = () => { diff --git a/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/React/App.tsx b/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/React/App.tsx index 909d34cd94eb..e738eba052f0 100644 --- a/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/React/App.tsx +++ b/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/React/App.tsx @@ -2,10 +2,11 @@ import 'whatwg-fetch'; import React from 'react'; import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler'; +import type { LoadOptions } from 'devextreme/data'; import { CustomStore } from 'devextreme-react/common/data'; -const getData = async (_, requestOptions) => { +const getData = async (_: LoadOptions, requestOptions: RequestInit & { showDeleted: boolean }) => { const GOOGLE_CALENDAR_URL = 'https://www.googleapis.com/calendar/v3/calendars/'; const CALENDAR_ID = 'f7jnetm22dsjc3npc2lu3buvu4@group.calendar.google.com'; const PUBLIC_KEY = 'AIzaSyBnNAISIUKe6xdhq1_rjor2rxoI3UlMY7k'; diff --git a/apps/demos/Demos/Scheduler/Templates/React/App.tsx b/apps/demos/Demos/Scheduler/Templates/React/App.tsx index 46db5575cb8e..5099ffe32d73 100644 --- a/apps/demos/Demos/Scheduler/Templates/React/App.tsx +++ b/apps/demos/Demos/Scheduler/Templates/React/App.tsx @@ -17,6 +17,7 @@ import MovieInfoContainer from './MovieInfoContainer.tsx'; import { data, moviesData, theatreData, type MovieResource, } from './data.ts'; +import type { ToolbarItem } from 'devextreme/ui/popup'; type dxForm = NonNullable; @@ -42,7 +43,7 @@ const App = () => { const onPopupOptionChanged = useCallback((e: PopupTypes.OptionChangedEvent) => { if (e.fullName === 'toolbarItems' && e.value) { - e.value.forEach((item, index: number) => { + e.value.forEach((item: ToolbarItem & { shortcut?: string }, index: number) => { if (item.shortcut === 'done' || item.shortcut === 'cancel') { e.component.option(`toolbarItems[${index}].toolbar`, 'bottom'); } @@ -57,22 +58,22 @@ const App = () => { const updateEndDate = useCallback((movie: MovieResource): void => { const form = formInstanceRef.current; - const formData = form.option('formData'); + const formData = form?.option('formData'); const { startDate } = formData; if (startDate) { const newEndDate = new Date(startDate.getTime() + 60 * 1000 * movie.duration); - form.updateData('endDate', newEndDate); + form?.updateData('endDate', newEndDate); } }, []); const onFormInitialized = useCallback((e: FormTypes.InitializedEvent) => { const form = e.component; - formInstanceRef.current = form; + form && (formInstanceRef.current = form); - form.on('fieldDataChanged', (fieldEvent: FormTypes.FieldDataChangedEvent) => { + form?.on('fieldDataChanged', (fieldEvent: FormTypes.FieldDataChangedEvent) => { if (fieldEvent.dataField === 'startDate') { - const currentFormData = form.option('formData'); + const currentFormData = form?.option('formData'); const movie = getMovieById(currentFormData.movieId); if (movie) { @@ -87,7 +88,7 @@ const App = () => { const movie = getMovieById(e.value); if (movie) { - form.updateData('director', movie.director); + form?.updateData('director', movie.director); updateEndDate(movie); } }, [updateEndDate]); diff --git a/apps/demos/Demos/Scheduler/Templates/React/MovieInfoContainer.tsx b/apps/demos/Demos/Scheduler/Templates/React/MovieInfoContainer.tsx index 5dc48501e0b3..ca233412e697 100644 --- a/apps/demos/Demos/Scheduler/Templates/React/MovieInfoContainer.tsx +++ b/apps/demos/Demos/Scheduler/Templates/React/MovieInfoContainer.tsx @@ -18,7 +18,7 @@ const MovieInfoContainer: React.FC = ({ formInstanceRef useEffect(() => { const form = formInstanceRef.current; - const formData = form.option('formData'); + const formData = form?.option('formData'); const currentMovie = getMovieById(formData.movieId); setMovie(currentMovie); @@ -30,10 +30,10 @@ const MovieInfoContainer: React.FC = ({ formInstanceRef } }; - form.on('fieldDataChanged', handleFieldDataChanged); + form?.on('fieldDataChanged', handleFieldDataChanged); return () => { - form.off('fieldDataChanged', handleFieldDataChanged); + form?.off('fieldDataChanged', handleFieldDataChanged); }; }, [formInstanceRef]); diff --git a/apps/demos/Demos/Scheduler/Toolbar/React/App.tsx b/apps/demos/Demos/Scheduler/Toolbar/React/App.tsx index 92475caf5178..09c56670a294 100644 --- a/apps/demos/Demos/Scheduler/Toolbar/React/App.tsx +++ b/apps/demos/Demos/Scheduler/Toolbar/React/App.tsx @@ -52,7 +52,7 @@ const App = () => { } const currentDate = scheduler.option('currentDate'); - const cellDuration = scheduler.option('cellDuration'); + const cellDuration = Number(scheduler.option('cellDuration')); const cellDurationMs = cellDuration * MS_IN_HOUR; const currentTime = new Date(currentDate as Date).getTime(); const roundTime = Math.round(currentTime / cellDurationMs) * cellDurationMs; diff --git a/apps/demos/Demos/Scheduler/Toolbar/React/data.ts b/apps/demos/Demos/Scheduler/Toolbar/React/data.ts index 8ea330b2e5a3..a3f2fcee152e 100644 --- a/apps/demos/Demos/Scheduler/Toolbar/React/data.ts +++ b/apps/demos/Demos/Scheduler/Toolbar/React/data.ts @@ -99,7 +99,7 @@ const data: Appointment[] = [ endDate: new Date(addDays(currentStartOfTheWeek, 4).setUTCHours(21)), }, ]; -export const schedulerDataSource = new DataSource(data); +export const schedulerDataSource = new DataSource(data) as unknown as DataSource; export const assignees: Assignee[] = [ { diff --git a/apps/demos/tsconfig.react-check.json b/apps/demos/tsconfig.react-check.json index d6ef268b8a50..09c127b43d19 100644 --- a/apps/demos/tsconfig.react-check.json +++ b/apps/demos/tsconfig.react-check.json @@ -49,16 +49,12 @@ "Demos/Map/**/React/**/*.tsx", "Demos/NumberBox/**/React/**/*.ts", "Demos/NumberBox/**/React/**/*.tsx", - "Demos/Pagination/**/React/**/*.ts", - "Demos/Pagination/**/React/**/*.tsx", "Demos/Popup/**/React/**/*.ts", "Demos/Popup/**/React/**/*.tsx", "Demos/RadioGroup/**/React/**/*.ts", "Demos/RadioGroup/**/React/**/*.tsx", "Demos/RangeSlider/**/React/**/*.ts", "Demos/RangeSlider/**/React/**/*.tsx", - "Demos/Scheduler/**/React/**/*.ts", - "Demos/Scheduler/**/React/**/*.tsx", "Demos/SelectBox/**/React/**/*.ts", "Demos/SelectBox/**/React/**/*.tsx", "Demos/Slider/**/React/**/*.ts", From 29a51e48366d45a86c4b1110ea376389845e5a4e Mon Sep 17 00:00:00 2001 From: dmlvr Date: Wed, 7 Jan 2026 12:46:41 +0200 Subject: [PATCH 02/11] generate reactjs demos --- .../Scheduler/CellTemplates/ReactJs/TimeCell.js | 2 +- .../Demos/Scheduler/CellTemplates/ReactJs/utils.js | 6 +++--- .../demos/Demos/Scheduler/ContextMenu/ReactJs/App.js | 4 ++-- apps/demos/Demos/Scheduler/Editing/ReactJs/App.js | 6 +++--- apps/demos/Demos/Scheduler/Templates/ReactJs/App.js | 12 ++++++------ .../Templates/ReactJs/MovieInfoContainer.js | 6 +++--- apps/demos/Demos/Scheduler/Toolbar/ReactJs/App.js | 2 +- 7 files changed, 19 insertions(+), 19 deletions(-) diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/TimeCell.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/TimeCell.js index d527447d9eb4..497799ec5498 100644 --- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/TimeCell.js +++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/TimeCell.js @@ -6,7 +6,7 @@ const TimeCell = (props) => { const isDinner = Utils.isDinner(date); const hasCoffeeCupIcon = Utils.hasCoffeeCupIcon(date); return ( -
+
{text} {hasCoffeeCupIcon &&
}
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/utils.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/utils.js index c54f886a63a7..74d5884f577a 100644 --- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/utils.js +++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/utils.js @@ -27,9 +27,9 @@ export default class Utils { } static isValidAppointment(component, appointmentData) { - const startDate = new Date(appointmentData.startDate); - const endDate = new Date(appointmentData.endDate); - const cellDuration = component.option('cellDuration'); + const startDate = appointmentData.startDate ? new Date(appointmentData.startDate) : new Date(); + const endDate = appointmentData.endDate ? new Date(appointmentData.endDate) : new Date(); + const cellDuration = Number(component.option('cellDuration')); return Utils.isValidAppointmentInterval(startDate, endDate, cellDuration); } diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js index 2a7dd7ceb3a7..2052f22053ec 100644 --- a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js +++ b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js @@ -8,7 +8,7 @@ const views = ['day', 'month']; const appointmentClassName = '.dx-scheduler-appointment'; const cellClassName = '.dx-scheduler-date-table-cell'; const onContextMenuItemClick = (e) => { - e.itemData.onItemClick?.(e); + e.itemData?.onItemClick?.(e); }; const App = () => { const schedulerRef = useRef(null); @@ -26,7 +26,7 @@ const App = () => { onItemClick: (e) => scheduler?.updateAppointment(appointmentData, { ...appointmentData, - ...{ roomId: [e.itemData.id] }, + ...{ roomId: [e.itemData?.id] }, }), })); setTarget(appointmentClassName); diff --git a/apps/demos/Demos/Scheduler/Editing/ReactJs/App.js b/apps/demos/Demos/Scheduler/Editing/ReactJs/App.js index ad8b3e9bdc5d..9920f6750be7 100644 --- a/apps/demos/Demos/Scheduler/Editing/ReactJs/App.js +++ b/apps/demos/Demos/Scheduler/Editing/ReactJs/App.js @@ -10,13 +10,13 @@ const showToast = (event, value, type) => { notify(`${event} "${value}" task`, type, 800); }; const showAddedToast = (e) => { - showToast('Added', e.appointmentData.text, 'success'); + showToast('Added', e.appointmentData.text ?? '', 'success'); }; const showUpdatedToast = (e) => { - showToast('Updated', e.appointmentData.text, 'info'); + showToast('Updated', e.appointmentData.text ?? '', 'info'); }; const showDeletedToast = (e) => { - showToast('Deleted', e.appointmentData.text, 'warning'); + showToast('Deleted', e.appointmentData.text ?? '', 'warning'); }; const App = () => { const [allowAdding, setAllowAdding] = useState(true); diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/App.js b/apps/demos/Demos/Scheduler/Templates/ReactJs/App.js index 9e0ecad18d15..bc24053b74da 100644 --- a/apps/demos/Demos/Scheduler/Templates/ReactJs/App.js +++ b/apps/demos/Demos/Scheduler/Templates/ReactJs/App.js @@ -43,20 +43,20 @@ const App = () => { ); const updateEndDate = useCallback((movie) => { const form = formInstanceRef.current; - const formData = form.option('formData'); + const formData = form?.option('formData'); const { startDate } = formData; if (startDate) { const newEndDate = new Date(startDate.getTime() + 60 * 1000 * movie.duration); - form.updateData('endDate', newEndDate); + form?.updateData('endDate', newEndDate); } }, []); const onFormInitialized = useCallback( (e) => { const form = e.component; - formInstanceRef.current = form; - form.on('fieldDataChanged', (fieldEvent) => { + form && (formInstanceRef.current = form); + form?.on('fieldDataChanged', (fieldEvent) => { if (fieldEvent.dataField === 'startDate') { - const currentFormData = form.option('formData'); + const currentFormData = form?.option('formData'); const movie = getMovieById(currentFormData.movieId); if (movie) { updateEndDate(movie); @@ -71,7 +71,7 @@ const App = () => { const form = formInstanceRef.current; const movie = getMovieById(e.value); if (movie) { - form.updateData('director', movie.director); + form?.updateData('director', movie.director); updateEndDate(movie); } }, diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/MovieInfoContainer.js b/apps/demos/Demos/Scheduler/Templates/ReactJs/MovieInfoContainer.js index 80c56a84348c..fff4c39573fc 100644 --- a/apps/demos/Demos/Scheduler/Templates/ReactJs/MovieInfoContainer.js +++ b/apps/demos/Demos/Scheduler/Templates/ReactJs/MovieInfoContainer.js @@ -8,7 +8,7 @@ const MovieInfoContainer = ({ formInstanceRef }) => { const [movie, setMovie] = useState(null); useEffect(() => { const form = formInstanceRef.current; - const formData = form.option('formData'); + const formData = form?.option('formData'); const currentMovie = getMovieById(formData.movieId); setMovie(currentMovie); const handleFieldDataChanged = (e) => { @@ -17,9 +17,9 @@ const MovieInfoContainer = ({ formInstanceRef }) => { setMovie(updatedMovie); } }; - form.on('fieldDataChanged', handleFieldDataChanged); + form?.on('fieldDataChanged', handleFieldDataChanged); return () => { - form.off('fieldDataChanged', handleFieldDataChanged); + form?.off('fieldDataChanged', handleFieldDataChanged); }; }, [formInstanceRef]); return ( diff --git a/apps/demos/Demos/Scheduler/Toolbar/ReactJs/App.js b/apps/demos/Demos/Scheduler/Toolbar/ReactJs/App.js index 5d5455945db1..c84383ecdc75 100644 --- a/apps/demos/Demos/Scheduler/Toolbar/ReactJs/App.js +++ b/apps/demos/Demos/Scheduler/Toolbar/ReactJs/App.js @@ -46,7 +46,7 @@ const App = () => { return; } const currentDate = scheduler.option('currentDate'); - const cellDuration = scheduler.option('cellDuration'); + const cellDuration = Number(scheduler.option('cellDuration')); const cellDurationMs = cellDuration * MS_IN_HOUR; const currentTime = new Date(currentDate).getTime(); const roundTime = Math.round(currentTime / cellDurationMs) * cellDurationMs; From 5320b66961243b989ee5dd7768a8fa1c3d0d0f46 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Wed, 7 Jan 2026 13:59:41 +0200 Subject: [PATCH 03/11] fix scheduler --- .../Scheduler/Adaptability/ReactJs/App.js | 42 - .../Scheduler/Adaptability/ReactJs/data.js | 71 - .../Scheduler/Adaptability/ReactJs/index.html | 44 - .../Scheduler/Adaptability/ReactJs/index.js | 5 - .../Scheduler/Adaptability/ReactJs/styles.css | 22 - .../Demos/Scheduler/Agenda/ReactJs/App.js | 38 - .../Demos/Scheduler/Agenda/ReactJs/data.js | 494 ------- .../Demos/Scheduler/Agenda/ReactJs/index.html | 39 - .../Demos/Scheduler/Agenda/ReactJs/index.js | 5 - .../Scheduler/AllDayPanelMode/React/App.tsx | 6 +- .../Scheduler/AllDayPanelMode/ReactJs/App.js | 53 - .../Scheduler/AllDayPanelMode/ReactJs/data.js | 13 - .../AllDayPanelMode/ReactJs/index.html | 44 - .../AllDayPanelMode/ReactJs/index.js | 5 - .../AllDayPanelMode/ReactJs/styles.css | 23 - .../AppointmentCountPerCell/React/App.tsx | 3 +- .../AppointmentCountPerCell/ReactJs/App.js | 40 - .../AppointmentCountPerCell/ReactJs/data.js | 185 --- .../ReactJs/index.html | 39 - .../AppointmentCountPerCell/ReactJs/index.js | 5 - .../Demos/Scheduler/BasicViews/React/App.tsx | 3 +- .../Demos/Scheduler/BasicViews/ReactJs/App.js | 18 - .../Scheduler/BasicViews/ReactJs/data.js | 84 -- .../Scheduler/BasicViews/ReactJs/index.html | 39 - .../Scheduler/BasicViews/ReactJs/index.js | 5 - .../Scheduler/CellTemplates/React/App.tsx | 10 +- .../Scheduler/CellTemplates/ReactJs/App.js | 116 -- .../CellTemplates/ReactJs/DataCell.js | 15 - .../CellTemplates/ReactJs/DataCellMonth.js | 15 - .../CellTemplates/ReactJs/DateCell.js | 13 - .../CellTemplates/ReactJs/TimeCell.js | 15 - .../Scheduler/CellTemplates/ReactJs/data.js | 74 - .../CellTemplates/ReactJs/index.html | 44 - .../Scheduler/CellTemplates/ReactJs/index.js | 5 - .../CellTemplates/ReactJs/styles.css | 79 - .../Scheduler/CellTemplates/ReactJs/utils.js | 56 - .../Scheduler/ContextMenu/React/types.ts | 2 +- .../Scheduler/ContextMenu/ReactJs/App.js | 140 -- .../ReactJs/AppointmentTemplate.js | 14 - .../Scheduler/ContextMenu/ReactJs/data.js | 86 -- .../Scheduler/ContextMenu/ReactJs/index.html | 39 - .../Scheduler/ContextMenu/ReactJs/index.js | 5 - .../Scheduler/ContextMenu/ReactJs/styles.css | 21 - .../CurrentTimeIndicator/React/App.tsx | 9 +- .../CurrentTimeIndicator/ReactJs/App.js | 101 -- .../ReactJs/AppointmentTemplate.js | 19 - .../CurrentTimeIndicator/ReactJs/data.js | 62 - .../CurrentTimeIndicator/ReactJs/index.html | 44 - .../CurrentTimeIndicator/ReactJs/index.js | 5 - .../CurrentTimeIndicator/ReactJs/styles.css | 58 - .../CustomViewDuration/React/App.tsx | 3 +- .../CustomViewDuration/ReactJs/App.js | 36 - .../CustomViewDuration/ReactJs/data.js | 287 ---- .../CustomViewDuration/ReactJs/index.html | 39 - .../CustomViewDuration/ReactJs/index.js | 5 - .../Scheduler/DragAndDrop/ReactJs/App.js | 91 -- .../Scheduler/DragAndDrop/ReactJs/data.js | 66 - .../Scheduler/DragAndDrop/ReactJs/index.html | 44 - .../Scheduler/DragAndDrop/ReactJs/index.js | 5 - .../Scheduler/DragAndDrop/ReactJs/styles.css | 28 - .../Demos/Scheduler/Editing/ReactJs/App.js | 100 -- .../Demos/Scheduler/Editing/ReactJs/data.js | 84 -- .../Scheduler/Editing/ReactJs/index.html | 44 - .../Demos/Scheduler/Editing/ReactJs/index.js | 5 - .../Scheduler/Editing/ReactJs/styles.css | 21 - .../GoogleCalendarIntegration/React/App.tsx | 5 +- .../GoogleCalendarIntegration/ReactJs/App.js | 41 - .../ReactJs/index.html | 44 - .../ReactJs/index.js | 5 - .../ReactJs/styles.css | 13 - .../Demos/Scheduler/GroupByDate/React/App.tsx | 3 +- .../Scheduler/GroupByDate/ReactJs/App.js | 55 - .../Scheduler/GroupByDate/ReactJs/data.js | 183 --- .../Scheduler/GroupByDate/ReactJs/index.html | 44 - .../Scheduler/GroupByDate/ReactJs/index.js | 5 - .../Scheduler/GroupByDate/ReactJs/styles.css | 24 - .../GroupingByResources/ReactJs/App.js | 41 - .../GroupingByResources/ReactJs/data.js | 182 --- .../GroupingByResources/ReactJs/index.html | 44 - .../GroupingByResources/ReactJs/index.js | 5 - .../GroupingByResources/ReactJs/styles.css | 3 - .../ReactJs/App.js | 84 -- .../ReactJs/data.js | 154 -- .../ReactJs/index.html | 44 - .../ReactJs/index.js | 5 - .../ReactJs/styles.css | 15 - .../Demos/Scheduler/Overview/React/App.tsx | 3 +- .../Demos/Scheduler/Overview/ReactJs/App.js | 35 - .../Scheduler/Overview/ReactJs/DataCell.js | 31 - .../Overview/ReactJs/ResourceCell.js | 39 - .../Demos/Scheduler/Overview/ReactJs/data.js | 98 -- .../Scheduler/Overview/ReactJs/description.md | 4 - .../Scheduler/Overview/ReactJs/index.html | 44 - .../Demos/Scheduler/Overview/ReactJs/index.js | 5 - .../Scheduler/Overview/ReactJs/styles.css | 171 --- .../RecurringAppointments/React/App.tsx | 3 +- .../RecurringAppointments/ReactJs/App.js | 25 - .../RecurringAppointments/ReactJs/data.js | 86 -- .../RecurringAppointments/ReactJs/index.html | 39 - .../RecurringAppointments/ReactJs/index.js | 5 - .../Demos/Scheduler/Resources/React/App.tsx | 3 +- .../Demos/Scheduler/Resources/ReactJs/App.js | 93 -- .../Demos/Scheduler/Resources/ReactJs/data.js | 184 --- .../Scheduler/Resources/ReactJs/index.html | 44 - .../Scheduler/Resources/ReactJs/index.js | 5 - .../Scheduler/Resources/ReactJs/styles.css | 15 - .../Scheduler/SignalRService/React/App.tsx | 3 +- .../Scheduler/SignalRService/ReactJs/App.js | 84 -- .../SignalRService/ReactJs/index.html | 45 - .../Scheduler/SignalRService/ReactJs/index.js | 5 - .../SignalRService/ReactJs/styles.css | 15 - .../Demos/Scheduler/SimpleArray/React/App.tsx | 3 +- .../Demos/Scheduler/SimpleArray/React/data.ts | 2 +- .../Scheduler/SimpleArray/ReactJs/App.js | 18 - .../Scheduler/SimpleArray/ReactJs/data.js | 84 -- .../Scheduler/SimpleArray/ReactJs/index.html | 39 - .../Scheduler/SimpleArray/ReactJs/index.js | 5 - .../Demos/Scheduler/Templates/React/App.tsx | 7 +- .../Demos/Scheduler/Templates/ReactJs/App.js | 181 --- .../Templates/ReactJs/Appointment.js | 35 - .../Templates/ReactJs/AppointmentTooltip.js | 27 - .../Templates/ReactJs/MovieInfoContainer.js | 54 - .../Demos/Scheduler/Templates/ReactJs/data.js | 1279 ----------------- .../Templates/ReactJs/description.md | 14 - .../Scheduler/Templates/ReactJs/index.html | 44 - .../Scheduler/Templates/ReactJs/index.js | 5 - .../Scheduler/Templates/ReactJs/styles.css | 88 -- .../Scheduler/TimeZonesSupport/React/App.tsx | 6 +- .../Scheduler/TimeZonesSupport/ReactJs/App.js | 64 - .../TimeZonesSupport/ReactJs/data.js | 59 - .../TimeZonesSupport/ReactJs/index.html | 44 - .../TimeZonesSupport/ReactJs/index.js | 5 - .../TimeZonesSupport/ReactJs/styles.css | 13 - .../Demos/Scheduler/Timelines/ReactJs/App.js | 39 - .../Demos/Scheduler/Timelines/ReactJs/data.js | 435 ------ .../Scheduler/Timelines/ReactJs/index.html | 39 - .../Scheduler/Timelines/ReactJs/index.js | 5 - .../Demos/Scheduler/Toolbar/React/App.tsx | 10 +- .../Demos/Scheduler/Toolbar/React/data.ts | 4 +- .../Demos/Scheduler/Toolbar/ReactJs/App.js | 126 -- .../Demos/Scheduler/Toolbar/ReactJs/data.js | 126 -- .../Scheduler/Toolbar/ReactJs/description.md | 20 - .../Scheduler/Toolbar/ReactJs/index.html | 39 - .../Demos/Scheduler/Toolbar/ReactJs/index.js | 5 - .../Scheduler/VirtualScrolling/React/data.ts | 2 +- .../Scheduler/VirtualScrolling/ReactJs/App.js | 46 - .../VirtualScrolling/ReactJs/data.js | 256 ---- .../VirtualScrolling/ReactJs/index.html | 44 - .../VirtualScrolling/ReactJs/index.js | 5 - .../VirtualScrolling/ReactJs/styles.css | 7 - .../Scheduler/WebAPIService/React/App.tsx | 3 +- .../Scheduler/WebAPIService/ReactJs/App.js | 36 - .../WebAPIService/ReactJs/index.html | 39 - .../Scheduler/WebAPIService/ReactJs/index.js | 5 - .../Demos/Scheduler/WorkShifts/React/App.tsx | 3 +- .../Demos/Scheduler/WorkShifts/ReactJs/App.js | 41 - .../Scheduler/WorkShifts/ReactJs/data.js | 94 -- .../Scheduler/WorkShifts/ReactJs/index.html | 43 - .../Scheduler/WorkShifts/ReactJs/index.js | 5 - .../Scheduler/WorkShifts/ReactJs/styles.css | 23 - 160 files changed, 60 insertions(+), 8829 deletions(-) delete mode 100644 apps/demos/Demos/Scheduler/Adaptability/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/Adaptability/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/Adaptability/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/Adaptability/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/Adaptability/ReactJs/styles.css delete mode 100644 apps/demos/Demos/Scheduler/Agenda/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/Agenda/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/Agenda/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/Agenda/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/styles.css delete mode 100644 apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/BasicViews/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/BasicViews/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/BasicViews/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/BasicViews/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DataCell.js delete mode 100644 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DataCellMonth.js delete mode 100644 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DateCell.js delete mode 100644 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/TimeCell.js delete mode 100644 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/styles.css delete mode 100644 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/utils.js delete mode 100644 apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/ContextMenu/ReactJs/AppointmentTemplate.js delete mode 100644 apps/demos/Demos/Scheduler/ContextMenu/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/ContextMenu/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/ContextMenu/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css delete mode 100644 apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/AppointmentTemplate.js delete mode 100644 apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css delete mode 100644 apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/styles.css delete mode 100644 apps/demos/Demos/Scheduler/Editing/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/Editing/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/Editing/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/Editing/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/Editing/ReactJs/styles.css delete mode 100644 apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/styles.css delete mode 100644 apps/demos/Demos/Scheduler/GroupByDate/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/GroupByDate/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/GroupByDate/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/GroupByDate/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/GroupByDate/ReactJs/styles.css delete mode 100644 apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/styles.css delete mode 100644 apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/styles.css delete mode 100644 apps/demos/Demos/Scheduler/Overview/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/Overview/ReactJs/DataCell.js delete mode 100644 apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js delete mode 100644 apps/demos/Demos/Scheduler/Overview/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/Overview/ReactJs/description.md delete mode 100644 apps/demos/Demos/Scheduler/Overview/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/Overview/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css delete mode 100644 apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/Resources/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/Resources/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/Resources/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/Resources/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/Resources/ReactJs/styles.css delete mode 100644 apps/demos/Demos/Scheduler/SignalRService/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/SignalRService/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/SignalRService/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/SignalRService/ReactJs/styles.css delete mode 100644 apps/demos/Demos/Scheduler/SimpleArray/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/SimpleArray/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/SimpleArray/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/SimpleArray/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/Templates/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/Templates/ReactJs/Appointment.js delete mode 100644 apps/demos/Demos/Scheduler/Templates/ReactJs/AppointmentTooltip.js delete mode 100644 apps/demos/Demos/Scheduler/Templates/ReactJs/MovieInfoContainer.js delete mode 100644 apps/demos/Demos/Scheduler/Templates/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/Templates/ReactJs/description.md delete mode 100644 apps/demos/Demos/Scheduler/Templates/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/Templates/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/Templates/ReactJs/styles.css delete mode 100644 apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/styles.css delete mode 100644 apps/demos/Demos/Scheduler/Timelines/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/Timelines/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/Timelines/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/Timelines/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/Toolbar/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/Toolbar/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/Toolbar/ReactJs/description.md delete mode 100644 apps/demos/Demos/Scheduler/Toolbar/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/Toolbar/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/styles.css delete mode 100644 apps/demos/Demos/Scheduler/WebAPIService/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/WebAPIService/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/WebAPIService/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/WorkShifts/ReactJs/App.js delete mode 100644 apps/demos/Demos/Scheduler/WorkShifts/ReactJs/data.js delete mode 100644 apps/demos/Demos/Scheduler/WorkShifts/ReactJs/index.html delete mode 100644 apps/demos/Demos/Scheduler/WorkShifts/ReactJs/index.js delete mode 100644 apps/demos/Demos/Scheduler/WorkShifts/ReactJs/styles.css diff --git a/apps/demos/Demos/Scheduler/Adaptability/ReactJs/App.js b/apps/demos/Demos/Scheduler/Adaptability/ReactJs/App.js deleted file mode 100644 index 278d5cb0dfbf..000000000000 --- a/apps/demos/Demos/Scheduler/Adaptability/ReactJs/App.js +++ /dev/null @@ -1,42 +0,0 @@ -import React, { useCallback, useRef } from 'react'; -import Scheduler, { Resource } from 'devextreme-react/scheduler'; -import SpeedDialAction from 'devextreme-react/speed-dial-action'; -import { data, priorities } from './data.js'; - -const views = ['week', 'month']; -const cellDuration = 30; -const currentDate = new Date(2021, 2, 25); -const App = () => { - const schedulerRef = useRef(null); - const showAppointmentPopup = useCallback(() => { - schedulerRef.current?.instance().showAppointmentPopup(); - }, []); - return ( - <> - - - - - - ); -}; -export default App; diff --git a/apps/demos/Demos/Scheduler/Adaptability/ReactJs/data.js b/apps/demos/Demos/Scheduler/Adaptability/ReactJs/data.js deleted file mode 100644 index df6c50e558ab..000000000000 --- a/apps/demos/Demos/Scheduler/Adaptability/ReactJs/data.js +++ /dev/null @@ -1,71 +0,0 @@ -export const data = [ - { - text: 'Website Re-Design Plan', - startDate: new Date('2021-03-01T16:30:00.000Z'), - endDate: new Date('2021-03-01T18:30:00.000Z'), - recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,FR;WKST=TU;INTERVAL=2;COUNT=32', - }, - { - text: 'Book Flights to San Fran for Sales Trip', - startDate: new Date('2021-03-01T16:30:00.000Z'), - endDate: new Date('2021-03-01T18:30:00.000Z'), - recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,FR;INTERVAL=4;COUNT=32', - allDay: true, - priorityId: [1], - }, - { - text: 'Install New Router in Dev Room', - startDate: new Date('2021-03-01T16:30:00.000Z'), - endDate: new Date('2021-03-01T18:30:00.000Z'), - recurrenceRule: 'FREQ=WEEKLY;BYDAY=FR;INTERVAL=2;COUNT=32', - }, - { - text: 'Approve Personal Computer Upgrade Plan', - startDate: new Date('2021-02-10T17:00:00.000Z'), - endDate: new Date('2021-02-10T18:00:00.000Z'), - recurrenceRule: 'FREQ=WEEKLY;BYDAY=WE;INTERVAL=2;COUNT=32', - priorityId: [2], - }, - { - text: 'Final Budget Review', - startDate: new Date('2021-04-01T19:00:00.000Z'), - endDate: new Date('2021-04-01T20:35:00.000Z'), - }, - { - text: 'New Brochures', - startDate: new Date('2021-04-01T21:30:00.000Z'), - endDate: new Date('2021-04-01T22:45:00.000Z'), - }, - { - text: 'Install New Database', - startDate: new Date('2021-04-01T16:45:00.000Z'), - endDate: new Date('2021-04-01T18:15:00.000Z'), - }, - { - text: 'Approve New Online Marketing Strategy', - startDate: new Date('2021-04-01T19:00:00.000Z'), - endDate: new Date('2021-04-01T21:00:00.000Z'), - }, - { - text: 'Upgrade Personal Computers', - startDate: new Date('2021-04-01T22:15:00.000Z'), - endDate: new Date('2021-04-01T23:30:00.000Z'), - }, - { - text: 'Upgrade Personal Computers', - startDate: new Date('2021-04-02T22:15:00.000Z'), - endDate: new Date('2021-04-02T23:30:00.000Z'), - }, -]; -export const priorities = [ - { - text: 'High priority', - id: 1, - color: '#cc5c53', - }, - { - text: 'Low priority', - id: 2, - color: '#ff9747', - }, -]; diff --git a/apps/demos/Demos/Scheduler/Adaptability/ReactJs/index.html b/apps/demos/Demos/Scheduler/Adaptability/ReactJs/index.html deleted file mode 100644 index db31b0fd60c6..000000000000 --- a/apps/demos/Demos/Scheduler/Adaptability/ReactJs/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/Adaptability/ReactJs/index.js b/apps/demos/Demos/Scheduler/Adaptability/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/Adaptability/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/Adaptability/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Adaptability/ReactJs/styles.css deleted file mode 100644 index cdc82e6e995c..000000000000 --- a/apps/demos/Demos/Scheduler/Adaptability/ReactJs/styles.css +++ /dev/null @@ -1,22 +0,0 @@ -@media only screen and (max-width: 370px) { - .dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-popup-bottom.dx-toolbar .dx-toolbar-items-container { - height: auto; - } - - .dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-toolbar-items-container .dx-toolbar-center { - display: flex; - flex-direction: column; - } - - .dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-button { - padding: 0; - } - - .dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-button .dx-button { - width: 200px; - } - - .dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-button:nth-child(1) { - margin-bottom: 12px; - } -} diff --git a/apps/demos/Demos/Scheduler/Agenda/ReactJs/App.js b/apps/demos/Demos/Scheduler/Agenda/ReactJs/App.js deleted file mode 100644 index 3730b772b46a..000000000000 --- a/apps/demos/Demos/Scheduler/Agenda/ReactJs/App.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import Scheduler, { Resource } from 'devextreme-react/scheduler'; -import ArrayStore from 'devextreme/data/array_store'; -import { assignees, data, priorities } from './data.js'; - -const currentDate = new Date(2021, 4, 11); -const views = ['agenda']; -const store = new ArrayStore({ - key: 'id', - data, -}); -const App = () => ( - - - - -); -export default App; diff --git a/apps/demos/Demos/Scheduler/Agenda/ReactJs/data.js b/apps/demos/Demos/Scheduler/Agenda/ReactJs/data.js deleted file mode 100644 index 7a79617e9fe2..000000000000 --- a/apps/demos/Demos/Scheduler/Agenda/ReactJs/data.js +++ /dev/null @@ -1,494 +0,0 @@ -export const assignees = [ - { - text: 'Samantha Bright', - id: 1, - color: '#727bd2', - }, - { - text: 'John Heart', - id: 2, - color: '#32c9ed', - }, - { - text: 'Todd Hoffman', - id: 3, - color: '#2a7ee4', - }, - { - text: 'Sandra Johnson', - id: 4, - color: '#7b49d3', - }, -]; -export const priorities = [ - { - text: 'High', - id: 1, - color: '#cc5c53', - }, - { - text: 'Low', - id: 2, - color: '#ff9747', - }, -]; -export const data = [ - { - id: 1, - text: 'Google AdWords Strategy', - startDate: new Date('2021-05-03T16:00:00.000Z'), - endDate: new Date('2021-05-03T17:30:00.000Z'), - assigneeId: [3], - priorityId: 1, - }, - { - id: 2, - text: 'New Brochures', - startDate: new Date('2021-05-03T18:30:00.000Z'), - endDate: new Date('2021-05-03T21:15:00.000Z'), - assigneeId: [1], - priorityId: 1, - }, - { - id: 3, - text: 'Brochure Design Review', - startDate: new Date('2021-05-03T20:15:00.000Z'), - endDate: new Date('2021-05-03T23:15:00.000Z'), - assigneeId: [2], - priorityId: 2, - }, - { - id: 4, - text: 'Website Re-Design Plan', - startDate: new Date('2021-05-03T23:45:00.000Z'), - endDate: new Date('2021-05-04T18:15:00.000Z'), - assigneeId: [3], - priorityId: 1, - }, - { - id: 5, - text: 'Rollout of New Website and Marketing Brochures', - startDate: new Date('2021-05-04T15:15:00.000Z'), - endDate: new Date('2021-05-04T17:45:00.000Z'), - assigneeId: [4], - priorityId: 2, - }, - { - id: 6, - text: 'Update Sales Strategy Documents', - startDate: new Date('2021-05-04T19:00:00.000Z'), - endDate: new Date('2021-05-04T20:45:00.000Z'), - assigneeId: [1], - priorityId: 2, - }, - { - id: 7, - text: 'Non-Compete Agreements', - startDate: new Date('2021-05-05T15:15:00.000Z'), - endDate: new Date('2021-05-05T16:00:00.000Z'), - assigneeId: [1], - priorityId: 1, - }, - { - id: 8, - text: 'Approve Hiring of John Jeffers', - startDate: new Date('2021-05-05T17:00:00.000Z'), - endDate: new Date('2021-05-05T18:15:00.000Z'), - assigneeId: [2], - priorityId: 2, - }, - { - id: 9, - text: 'Update NDA Agreement', - startDate: new Date('2021-05-05T18:45:00.000Z'), - endDate: new Date('2021-05-05T20:45:00.000Z'), - assigneeId: [3], - priorityId: 1, - }, - { - id: 10, - text: 'Update Employee Files with New NDA', - startDate: new Date('2021-05-05T21:00:00.000Z'), - endDate: new Date('2021-05-05T23:45:00.000Z'), - assigneeId: [4], - priorityId: 1, - }, - { - id: 11, - text: 'Submit Questions Regarding New NDA', - startDate: new Date('2021-05-07T01:00:00.000Z'), - endDate: new Date('2021-05-06T16:30:00.000Z'), - assigneeId: [1], - priorityId: 1, - }, - { - id: 12, - text: 'Submit Signed NDA', - startDate: new Date('2021-05-06T19:45:00.000Z'), - endDate: new Date('2021-05-06T21:00:00.000Z'), - assigneeId: [1], - priorityId: 2, - }, - { - id: 13, - text: 'Review Revenue Projections', - startDate: new Date('2021-05-07T00:15:00.000Z'), - endDate: new Date('2021-05-06T15:00:00.000Z'), - assigneeId: [3], - priorityId: 1, - }, - { - id: 14, - text: 'Comment on Revenue Projections', - startDate: new Date('2021-05-07T16:15:00.000Z'), - endDate: new Date('2021-05-07T18:15:00.000Z'), - assigneeId: [3], - priorityId: 2, - }, - { - id: 15, - text: 'Provide New Health Insurance Docs', - startDate: new Date('2021-05-07T19:45:00.000Z'), - endDate: new Date('2021-05-07T21:15:00.000Z'), - assigneeId: [3], - priorityId: 2, - }, - { - id: 16, - text: 'Review Changes to Health Insurance Coverage', - startDate: new Date('2021-05-07T21:15:00.000Z'), - endDate: new Date('2021-05-07T22:30:00.000Z'), - assigneeId: [3], - priorityId: 2, - }, - { - id: 17, - text: 'Review Training Course for any Omissions', - startDate: new Date('2021-05-10T21:00:00.000Z'), - endDate: new Date('2021-05-11T19:00:00.000Z'), - assigneeId: [1], - priorityId: 1, - }, - { - id: 18, - text: 'Recall Rebate Form', - startDate: new Date('2021-05-10T19:45:00.000Z'), - endDate: new Date('2021-05-10T20:15:00.000Z'), - assigneeId: [3], - priorityId: 1, - }, - { - id: 19, - text: 'Create Report on Customer Feedback', - startDate: new Date('2021-05-11T22:15:00.000Z'), - endDate: new Date('2021-05-12T00:30:00.000Z'), - assigneeId: [2], - priorityId: 2, - }, - { - id: 20, - text: 'Review Customer Feedback Report', - startDate: new Date('2021-05-11T23:15:00.000Z'), - endDate: new Date('2021-05-12T01:30:00.000Z'), - assigneeId: [2], - priorityId: 1, - }, - { - id: 21, - text: 'Customer Feedback Report Analysis', - startDate: new Date('2021-05-12T16:30:00.000Z'), - endDate: new Date('2021-05-12T17:30:00.000Z'), - recurrenceRule: 'FREQ=WEEKLY', - assigneeId: [4], - priorityId: 2, - }, - { - id: 22, - text: 'Prepare Shipping Cost Analysis Report', - startDate: new Date('2021-05-12T19:30:00.000Z'), - endDate: new Date('2021-05-12T20:30:00.000Z'), - assigneeId: [1], - priorityId: 1, - }, - { - id: 23, - text: 'Provide Feedback on Shippers', - startDate: new Date('2021-05-12T21:15:00.000Z'), - endDate: new Date('2021-05-12T23:00:00.000Z'), - assigneeId: [4], - priorityId: 2, - }, - { - id: 24, - text: 'Select Preferred Shipper', - startDate: new Date('2021-05-13T00:30:00.000Z'), - endDate: new Date('2021-05-13T03:00:00.000Z'), - assigneeId: [1], - priorityId: 2, - }, - { - id: 25, - text: 'Complete Shipper Selection Form', - startDate: new Date('2021-05-13T15:30:00.000Z'), - endDate: new Date('2021-05-13T17:00:00.000Z'), - assigneeId: [1], - priorityId: 2, - }, - { - id: 26, - text: 'Upgrade Server Hardware', - startDate: new Date('2021-05-13T19:00:00.000Z'), - endDate: new Date('2021-05-13T21:15:00.000Z'), - recurrenceRule: 'FREQ=WEEKLY', - assigneeId: [2], - priorityId: 1, - }, - { - id: 27, - text: 'Upgrade Personal Computers', - startDate: new Date('2021-05-13T21:45:00.000Z'), - endDate: new Date('2021-05-13T23:30:00.000Z'), - assigneeId: [1], - priorityId: 1, - }, - { - id: 28, - text: 'Upgrade Apps to Windows RT or stay with WinForms', - startDate: new Date('2021-05-14T17:30:00.000Z'), - endDate: new Date('2021-05-14T20:00:00.000Z'), - assigneeId: [3], - priorityId: 2, - }, - { - id: 29, - text: 'Estimate Time Required to Touch-Enable Apps', - startDate: new Date('2021-05-14T21:45:00.000Z'), - endDate: new Date('2021-05-14T23:30:00.000Z'), - assigneeId: [3], - priorityId: 1, - }, - { - id: 30, - text: 'Report on Tranistion to Touch-Based Apps', - startDate: new Date('2021-05-15T01:30:00.000Z'), - endDate: new Date('2021-05-15T02:00:00.000Z'), - assigneeId: [4], - priorityId: 1, - }, - { - id: 31, - text: 'Submit New Website Design', - startDate: new Date('2021-05-17T15:00:00.000Z'), - endDate: new Date('2021-05-17T17:00:00.000Z'), - assigneeId: [2], - priorityId: 2, - }, - { - id: 32, - text: 'Create Icons for Website', - startDate: new Date('2021-05-17T18:30:00.000Z'), - endDate: new Date('2021-05-17T20:15:00.000Z'), - assigneeId: [4], - priorityId: 2, - }, - { - id: 33, - text: 'Create New Product Pages', - startDate: new Date('2021-05-18T16:45:00.000Z'), - endDate: new Date('2021-05-18T18:45:00.000Z'), - assigneeId: [2], - priorityId: 1, - }, - { - id: 34, - text: 'Approve Website Launch', - startDate: new Date('2021-05-18T19:00:00.000Z'), - endDate: new Date('2021-05-18T22:15:00.000Z'), - assigneeId: [3], - priorityId: 2, - }, - { - id: 35, - text: 'Update Customer Shipping Profiles', - startDate: new Date('2021-05-19T16:30:00.000Z'), - endDate: new Date('2021-05-19T18:00:00.000Z'), - assigneeId: [1], - priorityId: 2, - }, - { - id: 36, - text: 'Create New Shipping Return Labels', - startDate: new Date('2021-05-19T19:45:00.000Z'), - endDate: new Date('2021-05-19T21:00:00.000Z'), - assigneeId: [3], - priorityId: 1, - }, - { - id: 37, - text: 'Get Design for Shipping Return Labels', - startDate: new Date('2021-05-19T22:00:00.000Z'), - endDate: new Date('2021-05-19T23:30:00.000Z'), - assigneeId: [2], - priorityId: 2, - }, - { - id: 38, - text: 'PSD needed for Shipping Return Labels', - startDate: new Date('2021-05-20T15:30:00.000Z'), - endDate: new Date('2021-05-20T16:15:00.000Z'), - assigneeId: [3], - priorityId: 1, - }, - { - id: 39, - text: 'Contact ISP and Discuss Payment Options', - startDate: new Date('2021-05-20T18:30:00.000Z'), - endDate: new Date('2021-05-20T23:00:00.000Z'), - assigneeId: [4], - priorityId: 1, - }, - { - id: 40, - text: 'Prepare Year-End Support Summary Report', - startDate: new Date('2021-05-21T00:00:00.000Z'), - endDate: new Date('2021-05-21T03:00:00.000Z'), - assigneeId: [1], - priorityId: 1, - }, - { - id: 41, - text: 'Review New Training Material', - startDate: new Date('2021-05-21T15:00:00.000Z'), - endDate: new Date('2021-05-21T16:15:00.000Z'), - assigneeId: [2], - priorityId: 2, - }, - { - id: 42, - text: 'Distribute Training Material to Support Staff', - startDate: new Date('2021-05-21T19:45:00.000Z'), - endDate: new Date('2021-05-21T21:00:00.000Z'), - assigneeId: [3], - priorityId: 1, - }, - { - id: 43, - text: 'Training Material Distribution Schedule', - startDate: new Date('2021-05-21T21:15:00.000Z'), - endDate: new Date('2021-05-21T23:15:00.000Z'), - assigneeId: [3], - priorityId: 2, - }, - { - id: 44, - text: 'Approval on Converting to New HDMI Specification', - startDate: new Date('2021-05-24T16:30:00.000Z'), - endDate: new Date('2021-05-24T17:15:00.000Z'), - assigneeId: [4], - priorityId: 2, - }, - { - id: 45, - text: 'Create New Spike for Automation Server', - startDate: new Date('2021-05-24T17:00:00.000Z'), - endDate: new Date('2021-05-24T19:30:00.000Z'), - assigneeId: [1], - priorityId: 1, - }, - { - id: 46, - text: 'Code Review - New Automation Server', - startDate: new Date('2021-05-24T20:00:00.000Z'), - endDate: new Date('2021-05-24T22:00:00.000Z'), - assigneeId: [3], - priorityId: 1, - }, - { - id: 47, - text: 'Confirm Availability for Sales Meeting', - startDate: new Date('2021-05-25T17:15:00.000Z'), - endDate: new Date('2021-05-25T22:15:00.000Z'), - assigneeId: [2], - priorityId: 2, - }, - { - id: 48, - text: 'Reschedule Sales Team Meeting', - startDate: new Date('2021-05-25T23:15:00.000Z'), - endDate: new Date('2021-05-26T01:00:00.000Z'), - assigneeId: [1], - priorityId: 1, - }, - { - id: 49, - text: 'Send 2 Remotes for Giveaways', - startDate: new Date('2021-05-26T16:30:00.000Z'), - endDate: new Date('2021-05-26T18:45:00.000Z'), - assigneeId: [3], - priorityId: 2, - }, - { - id: 50, - text: 'Discuss Product Giveaways with Management', - startDate: new Date('2021-05-26T19:15:00.000Z'), - endDate: new Date('2021-05-26T23:45:00.000Z'), - assigneeId: [4], - priorityId: 1, - }, - { - id: 51, - text: 'Replace Desktops on the 3rd Floor', - startDate: new Date('2021-05-27T16:30:00.000Z'), - endDate: new Date('2021-05-27T17:45:00.000Z'), - assigneeId: [2], - priorityId: 1, - }, - { - id: 52, - text: 'Update Database with New Leads', - startDate: new Date('2021-05-27T19:00:00.000Z'), - endDate: new Date('2021-05-27T21:15:00.000Z'), - assigneeId: [2], - priorityId: 2, - }, - { - id: 53, - text: 'Mail New Leads for Follow Up', - startDate: new Date('2021-05-27T21:45:00.000Z'), - endDate: new Date('2021-05-27T22:30:00.000Z'), - assigneeId: [1], - priorityId: 2, - }, - { - id: 54, - text: 'Send Territory Sales Breakdown', - startDate: new Date('2021-05-28T01:00:00.000Z'), - endDate: new Date('2021-05-28T03:00:00.000Z'), - assigneeId: [2], - priorityId: 2, - }, - { - id: 55, - text: 'Territory Sales Breakdown Report', - startDate: new Date('2021-05-28T15:45:00.000Z'), - endDate: new Date('2021-05-28T16:45:00.000Z'), - assigneeId: [3], - priorityId: 2, - }, - { - id: 56, - text: 'Report on the State of Engineering Dept', - startDate: new Date('2021-05-28T21:45:00.000Z'), - endDate: new Date('2021-05-28T22:30:00.000Z'), - assigneeId: [4], - priorityId: 1, - }, - { - id: 57, - text: 'Staff Productivity Report', - startDate: new Date('2021-05-28T23:15:00.000Z'), - endDate: new Date('2021-05-29T02:30:00.000Z'), - assigneeId: [1], - priorityId: 1, - }, -]; diff --git a/apps/demos/Demos/Scheduler/Agenda/ReactJs/index.html b/apps/demos/Demos/Scheduler/Agenda/ReactJs/index.html deleted file mode 100644 index d6d83f735a76..000000000000 --- a/apps/demos/Demos/Scheduler/Agenda/ReactJs/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/Agenda/ReactJs/index.js b/apps/demos/Demos/Scheduler/Agenda/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/Agenda/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/React/App.tsx b/apps/demos/Demos/Scheduler/AllDayPanelMode/React/App.tsx index 6b4c4dc26166..fae486290000 100644 --- a/apps/demos/Demos/Scheduler/AllDayPanelMode/React/App.tsx +++ b/apps/demos/Demos/Scheduler/AllDayPanelMode/React/App.tsx @@ -1,6 +1,8 @@ import React, { useCallback, useState } from 'react'; -import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler'; -import RadioGroup, { type RadioGroupTypes } from 'devextreme-react/radio-group'; +import Scheduler from 'devextreme-react/scheduler'; +import RadioGroup from 'devextreme-react/radio-group'; +import { type SchedulerTypes } from 'devextreme-react/scheduler'; +import { type RadioGroupTypes } from 'devextreme-react/radio-group'; import { data } from './data.ts'; const currentDate = new Date(2021, 2, 28); diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/App.js b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/App.js deleted file mode 100644 index d34680fc970c..000000000000 --- a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/App.js +++ /dev/null @@ -1,53 +0,0 @@ -import React, { useCallback, useState } from 'react'; -import Scheduler from 'devextreme-react/scheduler'; -import RadioGroup from 'devextreme-react/radio-group'; -import { data } from './data.js'; - -const currentDate = new Date(2021, 2, 28); -const views = [ - { - type: 'day', - name: '4 Days', - intervalCount: 4, - }, - 'week', -]; -const allDayPanelItems = ['all', 'allDay', 'hidden']; -const App = () => { - const [allDayPanelMode, setAllDayPanelMode] = useState('allDay'); - const onChangeAllDayPanelMode = useCallback( - (e) => { - setAllDayPanelMode(e.value); - }, - [setAllDayPanelMode], - ); - return ( - <> - - -
-
-
All day panel mode
-
- -
-
-
- - ); -}; -export default App; diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/data.js b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/data.js deleted file mode 100644 index 31d6a49a07aa..000000000000 --- a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/data.js +++ /dev/null @@ -1,13 +0,0 @@ -export const data = [ - { - text: 'Book Flights to San Fran for Sales Trip', - startDate: new Date('2021-03-28T17:00:00.000Z'), - endDate: new Date('2021-03-28T18:00:00.000Z'), - allDay: true, - }, - { - text: 'Customer Workshop', - startDate: new Date('2021-03-29T17:30:00.000Z'), - endDate: new Date('2021-04-03T19:00:00.000Z'), - }, -]; diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/index.html b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/index.html deleted file mode 100644 index db31b0fd60c6..000000000000 --- a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/index.js b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/styles.css b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/styles.css deleted file mode 100644 index 636ad495a9d8..000000000000 --- a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/styles.css +++ /dev/null @@ -1,23 +0,0 @@ -.options { - background-color: rgba(191, 191, 191, 0.15); - margin-top: 20px; - display: flex; - align-items: flex-start; - height: 100%; -} - -.option { - padding: 25px 15px; - display: flex; - align-items: center; -} - -.label, -.value { - display: inline-block; - vertical-align: middle; -} - -.label { - width: 180px; -} diff --git a/apps/demos/Demos/Scheduler/AppointmentCountPerCell/React/App.tsx b/apps/demos/Demos/Scheduler/AppointmentCountPerCell/React/App.tsx index a125356e7a17..2552ad8ae779 100644 --- a/apps/demos/Demos/Scheduler/AppointmentCountPerCell/React/App.tsx +++ b/apps/demos/Demos/Scheduler/AppointmentCountPerCell/React/App.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import Scheduler, { Resource, type SchedulerTypes } from 'devextreme-react/scheduler'; +import Scheduler, { Resource } from 'devextreme-react/scheduler'; +import { type SchedulerTypes } from 'devextreme-react/scheduler'; import { data, resourcesData } from './data.ts'; diff --git a/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/App.js b/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/App.js deleted file mode 100644 index 3f72947ea720..000000000000 --- a/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/App.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import Scheduler, { Resource } from 'devextreme-react/scheduler'; -import { data, resourcesData } from './data.js'; - -const currentDate = new Date(2021, 2, 25); -const views = [ - { - type: 'month', - name: 'Auto Mode', - maxAppointmentsPerCell: 'auto', - }, - { - type: 'month', - name: 'Unlimited Mode', - maxAppointmentsPerCell: 'unlimited', - }, - { - type: 'month', - name: 'Numeric Mode', - maxAppointmentsPerCell: 2, - }, -]; -const App = () => ( - - - -); -export default App; diff --git a/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/data.js b/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/data.js deleted file mode 100644 index 8ec75f185c75..000000000000 --- a/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/data.js +++ /dev/null @@ -1,185 +0,0 @@ -export const data = [ - { - text: 'Google AdWords Strategy', - roomId: 1, - startDate: new Date('2021-03-05T16:00:00.000Z'), - endDate: new Date('2021-03-05T17:30:00.000Z'), - }, - { - text: 'New Brochures', - roomId: 5, - startDate: new Date('2021-03-05T18:30:00.000Z'), - endDate: new Date('2021-03-05T21:15:00.000Z'), - }, - { - text: 'Brochure Design Review', - roomId: 5, - startDate: new Date('2021-03-05T20:15:00.000Z'), - endDate: new Date('2021-03-05T23:15:00.000Z'), - }, - { - text: 'Website Re-Design Plan', - roomId: 5, - startDate: new Date('2021-03-05T23:45:00.000Z'), - endDate: new Date('2021-03-05T18:15:00.000Z'), - }, - { - text: 'Rollout of New Website and Marketing Brochures', - roomId: 2, - startDate: new Date('2021-03-09T15:15:00.000Z'), - endDate: new Date('2021-03-09T17:45:00.000Z'), - }, - { - text: 'Update Sales Strategy Documents', - roomId: 3, - startDate: new Date('2021-03-09T19:00:00.000Z'), - endDate: new Date('2021-03-09T20:45:00.000Z'), - }, - { - text: 'Non-Compete Agreements', - roomId: 3, - startDate: new Date('2021-03-09T15:15:00.000Z'), - endDate: new Date('2021-03-09T16:00:00.000Z'), - }, - { - text: 'Update NDA Agreement', - roomId: 1, - startDate: new Date('2021-03-10T18:45:00.000Z'), - endDate: new Date('2021-03-10T20:45:00.000Z'), - }, - { - text: 'Update Employee Files with New NDA', - roomId: 4, - startDate: new Date('2021-03-18T21:00:00.000Z'), - endDate: new Date('2021-03-18T23:45:00.000Z'), - }, - { - text: 'Submit Questions Regarding New NDA', - roomId: 4, - startDate: new Date('2021-03-18T15:00:00.000Z'), - endDate: new Date('2021-03-18T16:30:00.000Z'), - }, - { - text: 'Submit Signed NDA', - roomId: 4, - startDate: new Date('2021-03-18T19:45:00.000Z'), - endDate: new Date('2021-03-18T21:00:00.000Z'), - }, - { - text: 'Review Revenue Projections', - roomId: 4, - startDate: new Date('2021-03-26T00:15:00.000Z'), - endDate: new Date('2021-03-26T01:00:00.000Z'), - }, - { - text: 'Comment on Revenue Projections', - roomId: 1, - startDate: new Date('2021-03-22T16:15:00.000Z'), - endDate: new Date('2021-03-22T18:15:00.000Z'), - }, - { - text: 'Provide New Health Insurance Docs', - roomId: 4, - startDate: new Date('2021-03-22T19:45:00.000Z'), - endDate: new Date('2021-03-22T21:15:00.000Z'), - }, - { - text: 'Review Changes to Health Insurance Coverage', - roomId: 4, - startDate: new Date('2021-03-25T21:15:00.000Z'), - endDate: new Date('2021-03-25T22:30:00.000Z'), - }, - { - text: 'Review Training Course for any Omissions', - roomId: 4, - startDate: new Date('2021-03-22T21:00:00.000Z'), - endDate: new Date('2021-03-22T19:00:00.000Z'), - }, - { - text: 'Recall Rebate Form', - roomId: 2, - startDate: new Date('2021-03-23T19:45:00.000Z'), - endDate: new Date('2021-03-23T20:15:00.000Z'), - }, - { - text: 'Create Report on Customer Feedback', - roomId: 3, - startDate: new Date('2021-03-23T22:15:00.000Z'), - endDate: new Date('2021-03-24T00:30:00.000Z'), - }, - { - text: 'Review Customer Feedback Report', - roomId: 3, - startDate: new Date('2021-03-17T23:15:00.000Z'), - endDate: new Date('2021-03-18T01:30:00.000Z'), - }, - { - text: 'Customer Feedback Report Analysis', - roomId: 3, - startDate: new Date('2021-03-17T16:30:00.000Z'), - endDate: new Date('2021-03-17T17:30:00.000Z'), - }, - { - text: 'Prepare Shipping Cost Analysis Report', - roomId: 3, - startDate: new Date('2021-03-23T19:30:00.000Z'), - endDate: new Date('2021-03-23T20:30:00.000Z'), - }, - { - text: 'Provide Feedback on Shippers', - roomId: 3, - startDate: new Date('2021-03-23T21:15:00.000Z'), - endDate: new Date('2021-03-23T23:00:00.000Z'), - }, - { - text: 'Select Preferred Shipper', - roomId: 1, - startDate: new Date('2021-03-27T00:30:00.000Z'), - endDate: new Date('2021-03-27T03:00:00.000Z'), - }, - { - text: 'Complete Shipper Selection Form', - roomId: 5, - startDate: new Date('2021-03-25T15:30:00.000Z'), - endDate: new Date('2021-03-25T17:00:00.000Z'), - }, - { - text: 'Upgrade Server Hardware', - roomId: 5, - startDate: new Date('2021-03-26T19:00:00.000Z'), - endDate: new Date('2021-03-26T21:15:00.000Z'), - }, - { - text: 'Upgrade Personal Computers', - roomId: 5, - startDate: new Date('2021-03-26T21:45:00.000Z'), - endDate: new Date('2021-03-26T23:30:00.000Z'), - }, -]; -export const resourcesData = [ - { - text: 'Room 401', - id: 1, - color: '#bbd806', - }, - { - text: 'Room 402', - id: 2, - color: '#f34c8a', - }, - { - text: 'Room 403', - id: 3, - color: '#ae7fcc', - }, - { - text: 'Room 407', - id: 4, - color: '#ff8817', - }, - { - text: 'Room 409', - id: 5, - color: '#03bb92', - }, -]; diff --git a/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/index.html b/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/index.html deleted file mode 100644 index d6d83f735a76..000000000000 --- a/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/index.js b/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/BasicViews/React/App.tsx b/apps/demos/Demos/Scheduler/BasicViews/React/App.tsx index 062700c348c9..bcb0cecddf91 100644 --- a/apps/demos/Demos/Scheduler/BasicViews/React/App.tsx +++ b/apps/demos/Demos/Scheduler/BasicViews/React/App.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler'; +import Scheduler from 'devextreme-react/scheduler'; +import { type SchedulerTypes } from 'devextreme-react/scheduler'; import { data } from './data.ts'; diff --git a/apps/demos/Demos/Scheduler/BasicViews/ReactJs/App.js b/apps/demos/Demos/Scheduler/BasicViews/ReactJs/App.js deleted file mode 100644 index 8f5c5208900c..000000000000 --- a/apps/demos/Demos/Scheduler/BasicViews/ReactJs/App.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import Scheduler from 'devextreme-react/scheduler'; -import { data } from './data.js'; - -const currentDate = new Date(2021, 3, 29); -const views = ['day', 'week', 'workWeek', 'month']; -const App = () => ( - -); -export default App; diff --git a/apps/demos/Demos/Scheduler/BasicViews/ReactJs/data.js b/apps/demos/Demos/Scheduler/BasicViews/ReactJs/data.js deleted file mode 100644 index 1a0c9464f9f2..000000000000 --- a/apps/demos/Demos/Scheduler/BasicViews/ReactJs/data.js +++ /dev/null @@ -1,84 +0,0 @@ -export const data = [ - { - text: 'Website Re-Design Plan', - startDate: new Date('2021-04-26T16:30:00.000Z'), - endDate: new Date('2021-04-26T18:30:00.000Z'), - }, - { - text: 'Book Flights to San Fran for Sales Trip', - startDate: new Date('2021-04-26T19:00:00.000Z'), - endDate: new Date('2021-04-26T20:00:00.000Z'), - allDay: true, - }, - { - text: 'Install New Router in Dev Room', - startDate: new Date('2021-04-26T21:30:00.000Z'), - endDate: new Date('2021-04-26T22:30:00.000Z'), - }, - { - text: 'Approve Personal Computer Upgrade Plan', - startDate: new Date('2021-04-27T17:00:00.000Z'), - endDate: new Date('2021-04-27T18:00:00.000Z'), - }, - { - text: 'Final Budget Review', - startDate: new Date('2021-04-27T19:00:00.000Z'), - endDate: new Date('2021-04-27T20:35:00.000Z'), - }, - { - text: 'New Brochures', - startDate: new Date('2021-04-27T21:30:00.000Z'), - endDate: new Date('2021-04-27T22:45:00.000Z'), - }, - { - text: 'Install New Database', - startDate: new Date('2021-04-28T16:45:00.000Z'), - endDate: new Date('2021-04-28T18:15:00.000Z'), - }, - { - text: 'Approve New Online Marketing Strategy', - startDate: new Date('2021-04-28T19:00:00.000Z'), - endDate: new Date('2021-04-28T21:00:00.000Z'), - }, - { - text: 'Upgrade Personal Computers', - startDate: new Date('2021-04-28T22:15:00.000Z'), - endDate: new Date('2021-04-28T23:30:00.000Z'), - }, - { - text: 'Customer Workshop', - startDate: new Date('2021-04-29T18:00:00.000Z'), - endDate: new Date('2021-04-29T19:00:00.000Z'), - allDay: true, - }, - { - text: 'Prepare 2021 Marketing Plan', - startDate: new Date('2021-04-29T18:00:00.000Z'), - endDate: new Date('2021-04-29T20:30:00.000Z'), - }, - { - text: 'Brochure Design Review', - startDate: new Date('2021-04-29T21:00:00.000Z'), - endDate: new Date('2021-04-29T22:30:00.000Z'), - }, - { - text: 'Create Icons for Website', - startDate: new Date('2021-04-30T17:00:00.000Z'), - endDate: new Date('2021-04-30T18:30:00.000Z'), - }, - { - text: 'Upgrade Server Hardware', - startDate: new Date('2021-04-30T21:30:00.000Z'), - endDate: new Date('2021-04-30T23:00:00.000Z'), - }, - { - text: 'Submit New Website Design', - startDate: new Date('2021-04-30T23:30:00.000Z'), - endDate: new Date('2021-05-01T01:00:00.000Z'), - }, - { - text: 'Launch New Website', - startDate: new Date('2021-04-30T19:20:00.000Z'), - endDate: new Date('2021-04-30T21:00:00.000Z'), - }, -]; diff --git a/apps/demos/Demos/Scheduler/BasicViews/ReactJs/index.html b/apps/demos/Demos/Scheduler/BasicViews/ReactJs/index.html deleted file mode 100644 index d6d83f735a76..000000000000 --- a/apps/demos/Demos/Scheduler/BasicViews/ReactJs/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/BasicViews/ReactJs/index.js b/apps/demos/Demos/Scheduler/BasicViews/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/BasicViews/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx b/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx index d17abf579b5b..767233261f9f 100644 --- a/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx +++ b/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx @@ -3,7 +3,6 @@ import React, { useCallback, useMemo, useState } from 'react'; import Scheduler from 'devextreme-react/scheduler'; import type { SchedulerTypes } from 'devextreme-react/scheduler'; import type { FormRef } from 'devextreme-react/form'; -import type { dxElementWrapper } from 'devextreme/core/renderer'; import notify from 'devextreme/ui/notify'; import { data, holidays } from './data.ts'; import Utils from './utils.ts'; @@ -12,6 +11,10 @@ import DataCellMonth from './DataCellMonth.tsx'; import DateCell from './DateCell.tsx'; import TimeCell from './TimeCell.tsx'; +interface ElementLike { + attr: (name: string, value?: string) => string | undefined; +} + const currentDate = new Date(2021, 3, 27); const views: SchedulerTypes.ViewType[] = ['workWeek', 'month']; const ariaDescription = () => { @@ -38,7 +41,8 @@ const notifyDisableDate = () => { }; const onContentReady = (e: SchedulerTypes.ContentReadyEvent) => { - setComponentAria(e.component?.$element()); + const element = e.component?.$element(); + element && typeof element.attr === 'function' && setComponentAria(element); }; const applyDisableDatesToDateEditors = (form: ReturnType) => { @@ -76,7 +80,7 @@ const onAppointmentUpdating = (e: SchedulerTypes.AppointmentUpdatingEvent) => { } }; -const setComponentAria = (element: dxElementWrapper) => { +const setComponentAria = (element: ElementLike) => { const prevAria = element?.attr('aria-label') || ''; const description = ariaDescription(); const nextAria = `${prevAria}${description ? ` ${description}` : ''}`; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js deleted file mode 100644 index 66e165ea6ddc..000000000000 --- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js +++ /dev/null @@ -1,116 +0,0 @@ -import React, { useCallback, useMemo, useState } from 'react'; -import Scheduler from 'devextreme-react/scheduler'; -import notify from 'devextreme/ui/notify'; -import { data, holidays } from './data.js'; -import Utils from './utils.js'; -import DataCell from './DataCell.js'; -import DataCellMonth from './DataCellMonth.js'; -import DateCell from './DateCell.js'; -import TimeCell from './TimeCell.js'; - -const currentDate = new Date(2021, 3, 27); -const views = ['workWeek', 'month']; -const ariaDescription = () => { - const disabledDates = holidays - .filter((date) => !Utils.isWeekend(date)) - .map((date) => - new Date(date).toLocaleDateString('en-US', { - weekday: 'long', - year: 'numeric', - month: 'long', - day: 'numeric', - }), - ); - if (disabledDates?.length === 1) { - return `${disabledDates} is a disabled date`; - } - if (disabledDates?.length > 1) { - return `${disabledDates.join(', ')} are disabled dates`; - } - return ''; -}; -const notifyDisableDate = () => { - notify( - 'Cannot create or move an appointment/event to disabled time/date regions.', - 'warning', - 1000, - ); -}; -const onContentReady = (e) => { - setComponentAria(e.component?.$element()); -}; -const applyDisableDatesToDateEditors = (form) => { - const startDateEditor = form.getEditor('startDate'); - startDateEditor?.option('disabledDates', holidays); - const endDateEditor = form.getEditor('endDate'); - endDateEditor?.option('disabledDates', holidays); -}; -const onAppointmentFormOpening = (e) => { - if (e.appointmentData?.startDate) { - const startDate = new Date(e.appointmentData.startDate); - if (!Utils.isValidAppointmentDate(startDate)) { - e.cancel = true; - notifyDisableDate(); - } - applyDisableDatesToDateEditors(e.form); - } -}; -const onAppointmentAdding = (e) => { - const isValidAppointment = Utils.isValidAppointment(e.component, e.appointmentData); - if (!isValidAppointment) { - e.cancel = true; - notifyDisableDate(); - } -}; -const onAppointmentUpdating = (e) => { - const isValidAppointment = Utils.isValidAppointment(e.component, e.newData); - if (!isValidAppointment) { - e.cancel = true; - notifyDisableDate(); - } -}; -const setComponentAria = (element) => { - const prevAria = element?.attr('aria-label') || ''; - const description = ariaDescription(); - const nextAria = `${prevAria}${description ? ` ${description}` : ''}`; - element?.attr('aria-label', nextAria); -}; -const App = () => { - const [currentView, setCurrentView] = useState(views[0]); - const DataCellComponent = useMemo( - () => (currentView === 'month' ? DataCellMonth : DataCell), - [currentView], - ); - const onCurrentViewChange = useCallback((value) => setCurrentView(value), [setCurrentView]); - const renderDateCell = useCallback( - (itemData) => ( - - ), - [currentView], - ); - return ( - - ); -}; -export default App; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DataCell.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DataCell.js deleted file mode 100644 index 2248bcd8b470..000000000000 --- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DataCell.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import Utils from './utils.js'; - -const DataCell = (props) => { - const { startDate } = props.data; - const isDinner = Utils.isDinner(startDate); - let cssClasses = props.className || ''; - if (Utils.isDisableDate(startDate)) { - cssClasses += ' disable-date'; - } else if (isDinner) { - cssClasses += ' dinner'; - } - return
{props.children}
; -}; -export default DataCell; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DataCellMonth.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DataCellMonth.js deleted file mode 100644 index f42d0005e662..000000000000 --- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DataCellMonth.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import DataCell from './DataCell.js'; - -const DataCellMonth = (props) => { - const { startDate } = props.data; - return ( - - {startDate.getDate()} - - ); -}; -export default DataCellMonth; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DateCell.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DateCell.js deleted file mode 100644 index 2b0f372d0119..000000000000 --- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DateCell.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import Utils from './utils.js'; - -const DateCell = (props) => { - const { currentView, date, text } = props.itemData; - const isDisabled = currentView === 'month' ? Utils.isWeekend(date) : Utils.isDisableDate(date); - return ( -
-
{text}
-
- ); -}; -export default DateCell; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/TimeCell.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/TimeCell.js deleted file mode 100644 index 497799ec5498..000000000000 --- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/TimeCell.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import Utils from './utils.js'; - -const TimeCell = (props) => { - const { date, text } = props.data; - const isDinner = Utils.isDinner(date); - const hasCoffeeCupIcon = Utils.hasCoffeeCupIcon(date); - return ( -
- {text} - {hasCoffeeCupIcon &&
} -
- ); -}; -export default TimeCell; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/data.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/data.js deleted file mode 100644 index 17c1046e6fc9..000000000000 --- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/data.js +++ /dev/null @@ -1,74 +0,0 @@ -export const dinnerTime = { from: 12, to: 13 }; -export const holidays = [new Date(2021, 3, 29), new Date(2021, 5, 6)]; -export const data = [ - { - text: 'Website Re-Design Plan', - startDate: new Date(2021, 3, 26, 9, 30), - endDate: new Date(2021, 3, 26, 11, 30), - }, - { - text: 'Install New Router in Dev Room', - startDate: new Date(2021, 3, 26, 13), - endDate: new Date(2021, 3, 26, 14), - }, - { - text: 'Approve Personal Computer Upgrade Plan', - startDate: new Date(2021, 3, 27, 10), - endDate: new Date(2021, 3, 27, 11), - }, - { - text: 'Final Budget Review', - startDate: new Date(2021, 3, 27, 13, 30), - endDate: new Date(2021, 3, 27, 15), - }, - { - text: 'New Brochures', - startDate: new Date(2021, 3, 26, 15), - endDate: new Date(2021, 3, 26, 16, 15), - }, - { - text: 'Install New Database', - startDate: new Date(2021, 3, 28, 9, 45), - endDate: new Date(2021, 3, 28, 12), - }, - { - text: 'Approve New Online Marketing Strategy', - startDate: new Date(2021, 3, 28, 14, 30), - endDate: new Date(2021, 3, 28, 16, 30), - }, - { - text: 'Upgrade Personal Computers', - startDate: new Date(2021, 3, 27, 15, 30), - endDate: new Date(2021, 3, 27, 16, 45), - }, - { - text: 'Prepare 2021 Marketing Plan', - startDate: new Date(2021, 4, 3, 13), - endDate: new Date(2021, 4, 3, 15), - }, - { - text: 'Brochure Design Review', - startDate: new Date(2021, 4, 4, 15, 30), - endDate: new Date(2021, 4, 5), - }, - { - text: 'Create Icons for Website', - startDate: new Date(2021, 3, 30, 10), - endDate: new Date(2021, 3, 30, 12), - }, - { - text: 'Upgrade Server Hardware', - startDate: new Date(2021, 3, 30, 16, 30), - endDate: new Date(2021, 3, 30, 18), - }, - { - text: 'Submit New Website Design', - startDate: new Date(2021, 4, 5, 10), - endDate: new Date(2021, 4, 5, 11, 30), - }, - { - text: 'Launch New Website', - startDate: new Date(2021, 3, 30, 14, 30), - endDate: new Date(2021, 3, 30, 16, 10), - }, -]; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/index.html b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/index.html deleted file mode 100644 index db31b0fd60c6..000000000000 --- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/index.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/styles.css b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/styles.css deleted file mode 100644 index c88932fa0839..000000000000 --- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/styles.css +++ /dev/null @@ -1,79 +0,0 @@ -@-moz-document url-prefix() { - .dx-scheduler-work-space-month .dx-scheduler-date-table-cell { - position: relative; - } - - .dx-scheduler-work-space-month .dx-scheduler-date-table-cell .disable-date { - position: absolute; - width: 100%; - height: 100%; - } -} - -.disable-date, -.dinner { - height: 100%; - width: 100%; -} - -.disable-date { - background-image: - repeating-linear-gradient( - 135deg, - rgba(247, 234, 224, 1), - rgba(247, 234, 224, 1) 4px, - transparent 4px, - transparent 9px - ); - color: rgba(178, 74, 0, 1); -} - -.dx-scheduler-header-panel-cell .disable-date { - display: flex; - flex-direction: column; - justify-content: center; -} - -.dx-theme-fluent .dx-scheduler-header-panel-cell .disable-date, -.dx-theme-material .dx-scheduler-header-panel-cell .disable-date { - flex-direction: row; - align-items: flex-end; - justify-content: initial; -} - -.dinner { - background: #FBF1EB; -} - -.dx-scheduler-time-panel-cell .dinner { - color: #C25100; - font-weight: 400; - background: transparent; -} - -.dx-draggable { - cursor: auto; -} - -td.dx-scheduler-time-panel-cell .dinner .cafe { - height: 200%; - width: 100%; - left: 50%; - mask: url('data:image/svg+xml;utf8,'); - mask-repeat: no-repeat; - -webkit-mask-position-y: 50%; - -webkit-mask-position-x: 100%; - margin-top: -4px; - background-color: #C25100; -} - -.dx-scheduler-date-table-cell { - padding: 0; - opacity: 1; -} - -@media all and (-ms-high-contrast: none) { - td.dx-scheduler-time-panel-cell .dinner .cafe { - background-color: transparent; - } -} diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/utils.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/utils.js deleted file mode 100644 index 74d5884f577a..000000000000 --- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/utils.js +++ /dev/null @@ -1,56 +0,0 @@ -import { dinnerTime, holidays } from './data.js'; - -export default class Utils { - static isHoliday(date) { - const localeDate = date.toLocaleDateString(); - return holidays.filter((holiday) => holiday.toLocaleDateString() === localeDate).length > 0; - } - - static isWeekend(date) { - const day = date.getDay(); - return day === 0 || day === 6; - } - - static isDisableDate(date) { - return Utils.isHoliday(date) || Utils.isWeekend(date); - } - - static isDinner(date) { - const hours = date.getHours(); - return hours >= dinnerTime.from && hours < dinnerTime.to; - } - - static hasCoffeeCupIcon(date) { - const hours = date.getHours(); - const minutes = date.getMinutes(); - return hours === dinnerTime.from && minutes === 0; - } - - static isValidAppointment(component, appointmentData) { - const startDate = appointmentData.startDate ? new Date(appointmentData.startDate) : new Date(); - const endDate = appointmentData.endDate ? new Date(appointmentData.endDate) : new Date(); - const cellDuration = Number(component.option('cellDuration')); - return Utils.isValidAppointmentInterval(startDate, endDate, cellDuration); - } - - static isValidAppointmentInterval(startDate, endDate, cellDuration) { - const edgeEndDate = new Date(endDate.getTime() - 1); - if (!Utils.isValidAppointmentDate(edgeEndDate)) { - return false; - } - const durationInMs = cellDuration * 60 * 1000; - const date = startDate; - while (date <= endDate) { - if (!Utils.isValidAppointmentDate(date)) { - return false; - } - const newDateTime = date.getTime() + durationInMs - 1; - date.setTime(newDateTime); - } - return true; - } - - static isValidAppointmentDate(date) { - return !Utils.isHoliday(date) && !Utils.isDinner(date) && !Utils.isWeekend(date); - } -} diff --git a/apps/demos/Demos/Scheduler/ContextMenu/React/types.ts b/apps/demos/Demos/Scheduler/ContextMenu/React/types.ts index b24978c31031..c73a675d54a8 100644 --- a/apps/demos/Demos/Scheduler/ContextMenu/React/types.ts +++ b/apps/demos/Demos/Scheduler/ContextMenu/React/types.ts @@ -1,4 +1,4 @@ -import type { SchedulerTypes } from 'devextreme-react/scheduler'; +import { type SchedulerTypes } from 'devextreme-react/scheduler'; import { type ContextMenuTypes } from 'devextreme-react/context-menu'; export type Appointment = SchedulerTypes.Appointment & { roomId: number[] }; diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js deleted file mode 100644 index 2052f22053ec..000000000000 --- a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js +++ /dev/null @@ -1,140 +0,0 @@ -import React, { useCallback, useRef, useState } from 'react'; -import { Scheduler, Resource } from 'devextreme-react/scheduler'; -import { ContextMenu } from 'devextreme-react/context-menu'; -import AppointmentMenuTemplate from './AppointmentTemplate.js'; -import { data, resourcesData } from './data.js'; - -const views = ['day', 'month']; -const appointmentClassName = '.dx-scheduler-appointment'; -const cellClassName = '.dx-scheduler-date-table-cell'; -const onContextMenuItemClick = (e) => { - e.itemData?.onItemClick?.(e); -}; -const App = () => { - const schedulerRef = useRef(null); - const [currentDate, setCurrentDate] = useState(new Date(2020, 10, 25)); - const [contextMenuItems, setContextMenuItems] = useState([]); - const [target, setTarget] = useState(appointmentClassName); - const [disabled, setDisabled] = useState(true); - const [groups, setGroups] = useState(undefined); - const [crossScrollingEnabled, setCrossScrollingEnabled] = useState(false); - const onAppointmentContextMenu = useCallback((event) => { - const { appointmentData, targetedAppointmentData } = event; - const scheduler = schedulerRef.current?.instance(); - const resourceItems = resourcesData.map((item) => ({ - ...item, - onItemClick: (e) => - scheduler?.updateAppointment(appointmentData, { - ...appointmentData, - ...{ roomId: [e.itemData?.id] }, - }), - })); - setTarget(appointmentClassName); - setDisabled(false); - setContextMenuItems([ - { - text: 'Open', - onItemClick: () => scheduler?.showAppointmentPopup(appointmentData), - }, - { - text: 'Delete', - onItemClick: () => scheduler?.deleteAppointment(appointmentData), - }, - { - text: 'Repeat Weekly', - beginGroup: true, - onItemClick: () => - scheduler?.updateAppointment(appointmentData, { - startDate: targetedAppointmentData?.startDate, - recurrenceRule: 'FREQ=WEEKLY', - }), - }, - { - text: 'Set Room', - beginGroup: true, - disabled: true, - }, - ...resourceItems, - ]); - }, []); - const onCellContextMenu = useCallback( - (e) => { - const scheduler = schedulerRef.current?.instance(); - setTarget(cellClassName); - setDisabled(false); - setContextMenuItems([ - { - text: 'New Appointment', - onItemClick: () => - scheduler?.showAppointmentPopup({ startDate: e.cellData.startDateUTC }, true), - }, - { - text: 'New Recurring Appointment', - onItemClick: () => - scheduler?.showAppointmentPopup( - { - startDate: e.cellData.startDateUTC, - recurrenceRule: 'FREQ=DAILY', - }, - true, - ), - }, - { - text: 'Group by Room/Ungroup', - beginGroup: true, - onItemClick: () => { - if (groups) { - setCrossScrollingEnabled(false); - setGroups(undefined); - } else { - setCrossScrollingEnabled(true); - setGroups(['roomId']); - } - }, - }, - { - text: 'Go to Today', - onItemClick: () => { - setCurrentDate(new Date()); - }, - }, - ]); - }, - [groups], - ); - return ( - <> - - - - - - ); -}; -export default App; diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/AppointmentTemplate.js b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/AppointmentTemplate.js deleted file mode 100644 index ff6707af3299..000000000000 --- a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/AppointmentTemplate.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -const AppointmentMenuTemplate = (props) => ( -
- {props.data.color && ( -
- )} - {props.data.text} -
-); -export default AppointmentMenuTemplate; diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/data.js b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/data.js deleted file mode 100644 index cd88de29c3e4..000000000000 --- a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/data.js +++ /dev/null @@ -1,86 +0,0 @@ -export const data = [ - { - text: 'Watercolor Landscape', - roomId: [1], - startDate: new Date('2020-11-01T17:30:00.000Z'), - endDate: new Date('2020-11-01T19:00:00.000Z'), - recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TH;COUNT=10', - }, - { - text: 'Oil Painting for Beginners', - roomId: [2], - startDate: new Date('2020-11-01T17:30:00.000Z'), - endDate: new Date('2020-11-01T19:00:00.000Z'), - recurrenceRule: 'FREQ=WEEKLY;BYDAY=SU,WE;COUNT=10', - }, - { - text: 'Testing', - roomId: [3], - startDate: new Date('2020-11-01T20:00:00.000Z'), - endDate: new Date('2020-11-01T21:00:00.000Z'), - recurrenceRule: 'FREQ=WEEKLY;BYDAY=SU;WKST=TU;INTERVAL=2;COUNT=2', - }, - { - text: 'Meeting of Instructors', - roomId: [4], - startDate: new Date('2020-11-01T17:00:00.000Z'), - endDate: new Date('2020-11-01T17:15:00.000Z'), - recurrenceRule: 'FREQ=DAILY;BYDAY=TU;UNTIL=20201203', - }, - { - text: 'Recruiting students', - roomId: [5], - startDate: new Date('2020-10-24T18:00:00.000Z'), - endDate: new Date('2020-10-24T19:00:00.000Z'), - recurrenceRule: 'FREQ=YEARLY;BYWEEKNO=50;WKST=SU', - recurrenceException: '20201212T190000Z', - }, - { - text: 'Final exams', - roomId: [3], - startDate: new Date('2020-10-24T20:00:00.000Z'), - endDate: new Date('2020-10-24T21:35:00.000Z'), - recurrenceRule: 'FREQ=YEARLY;BYWEEKNO=51;BYDAY=WE,TH', - }, - { - text: 'Monthly Planning', - roomId: [4], - startDate: new Date('2020-11-24T22:30:00.000Z'), - endDate: new Date('2020-11-24T23:45:00.000Z'), - recurrenceRule: 'FREQ=MONTHLY;BYMONTHDAY=28;COUNT=1', - }, - { - text: 'Open Day', - roomId: [5], - startDate: new Date('2020-11-01T17:30:00.000Z'), - endDate: new Date('2020-11-01T21:00:00.000Z'), - recurrenceRule: 'FREQ=YEARLY;BYYEARDAY=333', - }, -]; -export const resourcesData = [ - { - text: 'Room 101', - id: 1, - color: '#bbd806', - }, - { - text: 'Room 102', - id: 2, - color: '#f34c8a', - }, - { - text: 'Room 103', - id: 3, - color: '#ae7fcc', - }, - { - text: 'Meeting room', - id: 4, - color: '#ff8817', - }, - { - text: 'Conference hall', - id: 5, - color: '#03bb92', - }, -]; diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/index.html b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/index.html deleted file mode 100644 index d6d83f735a76..000000000000 --- a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/index.js b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css deleted file mode 100644 index 7d52d89364e2..000000000000 --- a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css +++ /dev/null @@ -1,21 +0,0 @@ -.dx-menu-item-content span { - margin-right: 5px; -} - -.dx-menu-item-has-submenu .dx-icon-spinright { - position: absolute; - top: 7px; - right: 2px; -} - -.item-badge { - text-align: center; - float: left; - margin-right: 12px; - color: white; - width: 18px; - height: 18px; - font-size: 19.5px; - border-radius: 18px; - margin-top: 2px; -} diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/App.tsx b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/App.tsx index 3a415c2a8e58..c55d76f96ae6 100644 --- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/App.tsx +++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/App.tsx @@ -1,7 +1,10 @@ import React, { useCallback, useState } from 'react'; -import Scheduler, { Resource, type SchedulerTypes } from 'devextreme-react/scheduler'; -import { Switch, type SwitchTypes } from 'devextreme-react/switch'; -import { NumberBox, type NumberBoxTypes } from 'devextreme-react/number-box'; +import Scheduler, { Resource } from 'devextreme-react/scheduler'; +import { Switch } from 'devextreme-react/switch'; +import { NumberBox } from 'devextreme-react/number-box'; +import { type SchedulerTypes } from 'devextreme-react/scheduler'; +import { type SwitchTypes } from 'devextreme-react/switch'; +import { type NumberBoxTypes } from 'devextreme-react/number-box'; import { data, moviesData } from './data.ts'; import AppointmentTemplate from './AppointmentTemplate.tsx'; diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/App.js b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/App.js deleted file mode 100644 index a81524b173e8..000000000000 --- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/App.js +++ /dev/null @@ -1,101 +0,0 @@ -import React, { useCallback, useState } from 'react'; -import Scheduler, { Resource } from 'devextreme-react/scheduler'; -import { Switch } from 'devextreme-react/switch'; -import { NumberBox } from 'devextreme-react/number-box'; -import { data, moviesData } from './data.js'; -import AppointmentTemplate from './AppointmentTemplate.js'; - -const currentDate = new Date(); -const views = ['week', 'timelineWeek']; -const intervalLabel = { 'aria-label': 'Interval' }; -const onContentReady = (e) => { - e.component.scrollTo(new Date()); -}; -const onAppointmentClick = (e) => { - e.cancel = true; -}; -const onAppointmentDblClick = (e) => { - e.cancel = true; -}; -const App = () => { - const [showCurrentTimeIndicator, setShowCurrentTimeIndicator] = useState(true); - const [shadeUntilCurrentTime, setShadeUntilCurrentTime] = useState(true); - const [updateInterval, setUpdateInterval] = useState(10); - const onShowCurrentTimeIndicatorChanged = useCallback((e) => { - setShowCurrentTimeIndicator(e.value); - }, []); - const onShadeUntilCurrentTimeChanged = useCallback((e) => { - setShadeUntilCurrentTime(e.value); - }, []); - const onUpdateIntervalChanged = useCallback((e) => { - setUpdateInterval(e.value); - }, []); - return ( - <> - - - -
-
-
-
Current time indicator
{' '} -
- -
-
-
-
Shading until current time
{' '} -
- -
-
-
{' '} -
-
-
Update position in
{' '} -
- -
-
-
-
- - ); -}; -export default App; diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/AppointmentTemplate.js b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/AppointmentTemplate.js deleted file mode 100644 index 4a6ade362935..000000000000 --- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/AppointmentTemplate.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { query as Query } from 'devextreme-react/common/data'; -import { moviesData } from './data.js'; - -const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0]; -const AppointmentTemplate = (props) => { - const { appointmentData } = props.data; - const movieInfo = getMovieById(appointmentData.movieId) || {}; - return ( -
- {`${movieInfo.text} -
{movieInfo.text}
-
- ); -}; -export default AppointmentTemplate; diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/data.js b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/data.js deleted file mode 100644 index d0e709e54612..000000000000 --- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/data.js +++ /dev/null @@ -1,62 +0,0 @@ -export const today = new Date(); -today.setHours(0, 0, 0, 0); -today.setDate(today.getDate() - today.getDay() + 3); -export const data = [ - { - movieId: 1, - startDate: new Date(today.getTime() - 113.5 * 3600000), - endDate: new Date(today.getTime() - 111.5 * 3600000), - recurrenceRule: 'FREQ=HOURLY;INTERVAL=15;COUNT=15', - }, - { - movieId: 2, - startDate: new Date(today.getTime() - 110.5 * 3600000), - endDate: new Date(today.getTime() - 108.5 * 3600000), - recurrenceRule: 'FREQ=HOURLY;INTERVAL=15;COUNT=15', - }, - { - movieId: 3, - startDate: new Date(today.getTime() - 106.5 * 3600000), - endDate: new Date(today.getTime() - 104.5 * 3600000), - recurrenceRule: 'FREQ=HOURLY;INTERVAL=15;COUNT=15', - }, - { - movieId: 4, - startDate: new Date(today.getTime() - 104 * 3600000), - endDate: new Date(today.getTime() - 102 * 3600000), - recurrenceRule: 'FREQ=HOURLY;INTERVAL=15;COUNT=15', - }, - { - movieId: 5, - startDate: new Date(today.getTime() - 101 * 3600000), - endDate: new Date(today.getTime() - 99 * 3600000), - recurrenceRule: 'FREQ=HOURLY;INTERVAL=15;COUNT=15', - }, -]; -export const moviesData = [ - { - id: 1, - text: 'His Girl Friday', - image: '../../../../images/movies/HisGirlFriday.jpg', - }, - { - id: 2, - text: 'Royal Wedding', - image: '../../../../images/movies/RoyalWedding.jpg', - }, - { - id: 3, - text: 'A Star Is Born', - image: '../../../../images/movies/AStartIsBorn.jpg', - }, - { - id: 4, - text: 'The Screaming Skull', - image: '../../../../images/movies/ScreamingSkull.jpg', - }, - { - id: 5, - text: "It's a Wonderful Life", - image: '../../../../images/movies/ItsAWonderfulLife.jpg', - }, -]; diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/index.html b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/index.html deleted file mode 100644 index db31b0fd60c6..000000000000 --- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/index.js b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css deleted file mode 100644 index e3d73f429139..000000000000 --- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css +++ /dev/null @@ -1,58 +0,0 @@ -.dx-scheduler-appointment { - color: #000; - font-weight: 500; - background-color: #e4e4e4; -} - -.dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content { - padding: 5px 0 5px 7px; -} - -.options { - background-color: rgba(191, 191, 191, 0.15); - margin-top: 20px; - display: flex; - align-items: flex-start; -} - -.column { - width: 40%; - display: inline-block; - margin: 15px 3%; - text-align: left; - vertical-align: top; -} - -.option { - padding: 5px 0; - display: flex; - align-items: center; -} - -.label, -.value { - display: inline-block; - vertical-align: middle; -} - -.label { - width: 180px; -} - -.value { - width: 30%; -} - -.movie img { - height: 70px; -} - -.movie-text { - font-size: 90%; - white-space: normal; -} - -#allow-shading, -#show-indicator { - height: 36px; -} diff --git a/apps/demos/Demos/Scheduler/CustomViewDuration/React/App.tsx b/apps/demos/Demos/Scheduler/CustomViewDuration/React/App.tsx index faa059b468c8..27b351ebe230 100644 --- a/apps/demos/Demos/Scheduler/CustomViewDuration/React/App.tsx +++ b/apps/demos/Demos/Scheduler/CustomViewDuration/React/App.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler'; +import Scheduler from 'devextreme-react/scheduler'; +import { type SchedulerTypes } from 'devextreme-react/scheduler'; import { data } from './data.ts'; diff --git a/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/App.js b/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/App.js deleted file mode 100644 index 8b4166619943..000000000000 --- a/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/App.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import Scheduler from 'devextreme-react/scheduler'; -import { data } from './data.js'; - -const currentDate = new Date(2021, 3, 5); -const views = [ - { - name: '3 Days', - type: 'day', - intervalCount: 3, - startDate: new Date(2021, 3, 4), - }, - { - name: '2 Work Weeks', - type: 'workWeek', - intervalCount: 2, - startDate: new Date(2021, 2, 4), - }, - { - name: '2 Months', - type: 'month', - intervalCount: 2, - }, -]; -const App = () => ( - -); -export default App; diff --git a/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/data.js b/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/data.js deleted file mode 100644 index 3cd19970e582..000000000000 --- a/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/data.js +++ /dev/null @@ -1,287 +0,0 @@ -export const data = [ - { - text: 'Google AdWords Strategy', - startDate: new Date('2021-04-05T16:00:00.000Z'), - endDate: new Date('2021-04-05T17:30:00.000Z'), - }, - { - text: 'New Brochures', - startDate: new Date('2021-04-05T18:30:00.000Z'), - endDate: new Date('2021-04-05T21:15:00.000Z'), - }, - { - text: 'Brochure Design Review', - startDate: new Date('2021-05-04T17:15:00.000Z'), - endDate: new Date('2021-05-04T19:15:00.000Z'), - }, - { - text: 'Website Re-Design Plan', - startDate: new Date('2021-04-05T23:45:00.000Z'), - endDate: new Date('2021-04-07T00:15:00.000Z'), - }, - { - text: 'Rollout of New Website and Marketing Brochures', - startDate: new Date('2021-04-06T15:15:00.000Z'), - endDate: new Date('2021-04-06T17:45:00.000Z'), - }, - { - text: 'Update Sales Strategy Documents', - startDate: new Date('2021-05-05T16:00:00.000Z'), - endDate: new Date('2021-05-05T17:45:00.000Z'), - }, - { - text: 'Non-Compete Agreements', - startDate: new Date('2021-04-07T15:15:00.000Z'), - endDate: new Date('2021-04-07T16:00:00.000Z'), - }, - { - text: 'Approve Hiring of John Jeffers', - startDate: new Date('2021-04-07T17:00:00.000Z'), - endDate: new Date('2021-04-07T18:15:00.000Z'), - }, - { - text: 'Update NDA Agreement', - startDate: new Date('2021-05-05T16:45:00.000Z'), - endDate: new Date('2021-05-05T18:45:00.000Z'), - }, - { - text: 'Update Employee Files with New NDA', - startDate: new Date('2021-05-05T19:00:00.000Z'), - endDate: new Date('2021-05-05T21:45:00.000Z'), - }, - { - text: 'Submit Questions Regarding New NDA', - startDate: new Date('2021-04-09T01:00:00.000Z'), - endDate: new Date('2021-04-08T16:30:00.000Z'), - }, - { - text: 'Submit Signed NDA', - startDate: new Date('2021-05-09T16:45:00.000Z'), - endDate: new Date('2021-05-09T18:00:00.000Z'), - }, - { - text: 'Review Revenue Projections', - startDate: new Date('2021-04-09T00:15:00.000Z'), - endDate: new Date('2021-04-08T15:00:00.000Z'), - }, - { - text: 'Comment on Revenue Projections', - startDate: new Date('2021-04-09T16:15:00.000Z'), - endDate: new Date('2021-04-09T18:15:00.000Z'), - }, - { - text: 'Provide New Health Insurance Docs', - startDate: new Date('2021-05-10T16:15:00.000Z'), - endDate: new Date('2021-05-10T17:45:00.000Z'), - }, - { - text: 'Review Changes to Health Insurance Coverage', - startDate: new Date('2021-05-10T17:50:00.000Z'), - endDate: new Date('2021-05-10T19:30:00.000Z'), - }, - { - text: 'Review Training Course for any Omissions', - startDate: new Date('2021-04-12T21:00:00.000Z'), - endDate: new Date('2021-04-13T21:00:00.000Z'), - }, - { - text: 'Recall Rebate Form', - startDate: new Date('2021-05-11T17:00:00.000Z'), - endDate: new Date('2021-05-11T18:15:00.000Z'), - }, - { - text: 'Create Report on Customer Feedback', - startDate: new Date('2021-04-13T22:15:00.000Z'), - endDate: new Date('2021-04-14T00:30:00.000Z'), - }, - { - text: 'Review Customer Feedback Report', - startDate: new Date('2021-04-13T23:15:00.000Z'), - endDate: new Date('2021-04-14T01:30:00.000Z'), - }, - { - text: 'Customer Feedback Report Analysis', - startDate: new Date('2021-04-14T16:30:00.000Z'), - endDate: new Date('2021-04-14T17:30:00.000Z'), - }, - { - text: 'Prepare Shipping Cost Analysis Report', - startDate: new Date('2021-05-12T18:30:00.000Z'), - endDate: new Date('2021-05-12T19:30:00.000Z'), - }, - { - text: 'Provide Feedback on Shippers', - startDate: new Date('2021-05-13T17:15:00.000Z'), - endDate: new Date('2021-05-13T19:00:00.000Z'), - }, - { - text: 'Select Preferred Shipper', - startDate: new Date('2021-05-13T19:30:00.000Z'), - endDate: new Date('2021-05-13T21:00:00.000Z'), - }, - { - text: 'Complete Shipper Selection Form', - startDate: new Date('2021-05-16T15:30:00.000Z'), - endDate: new Date('2021-05-16T17:00:00.000Z'), - }, - { - text: 'Upgrade Server Hardware', - startDate: new Date('2021-04-15T19:00:00.000Z'), - endDate: new Date('2021-04-15T21:15:00.000Z'), - }, - { - text: 'Upgrade Personal Computers', - startDate: new Date('2021-04-15T21:45:00.000Z'), - endDate: new Date('2021-04-15T23:30:00.000Z'), - }, - { - text: 'Upgrade Apps to Windows RT or stay with WinForms', - startDate: new Date('2021-04-16T17:30:00.000Z'), - endDate: new Date('2021-04-16T20:00:00.000Z'), - }, - { - text: 'Estimate Time Required to Touch-Enable Apps', - startDate: new Date('2021-05-17T16:45:00.000Z'), - endDate: new Date('2021-05-17T18:00:00.000Z'), - }, - { - text: 'Report on Tranistion to Touch-Based Apps', - startDate: new Date('2021-05-18T18:30:00.000Z'), - endDate: new Date('2021-05-18T19:30:00.000Z'), - }, - { - text: 'Submit New Website Design', - startDate: new Date('2021-04-19T15:00:00.000Z'), - endDate: new Date('2021-04-19T17:00:00.000Z'), - }, - { - text: 'Create Icons for Website', - startDate: new Date('2021-05-19T18:30:00.000Z'), - endDate: new Date('2021-05-19T20:15:00.000Z'), - }, - { - text: 'Create New Product Pages', - startDate: new Date('2021-04-20T16:45:00.000Z'), - endDate: new Date('2021-04-20T18:45:00.000Z'), - }, - { - text: 'Approve Website Launch', - startDate: new Date('2021-05-20T19:00:00.000Z'), - endDate: new Date('2021-05-20T22:15:00.000Z'), - }, - { - text: 'Update Customer Shipping Profiles', - startDate: new Date('2021-04-21T16:30:00.000Z'), - endDate: new Date('2021-04-21T18:00:00.000Z'), - }, - { - text: 'Create New Shipping Return Labels', - startDate: new Date('2021-04-21T19:45:00.000Z'), - endDate: new Date('2021-04-21T21:00:00.000Z'), - }, - { - text: 'Get Design for Shipping Return Labels', - startDate: new Date('2021-04-21T22:00:00.000Z'), - endDate: new Date('2021-04-21T23:30:00.000Z'), - }, - { - text: 'PSD needed for Shipping Return Labels', - startDate: new Date('2021-04-22T15:30:00.000Z'), - endDate: new Date('2021-04-22T16:15:00.000Z'), - }, - { - text: 'Contact ISP and Discuss Payment Options', - startDate: new Date('2021-05-23T18:30:00.000Z'), - endDate: new Date('2021-05-23T23:00:00.000Z'), - }, - { - text: 'Prepare Year-End Support Summary Report', - startDate: new Date('2021-05-23T17:00:00.000Z'), - endDate: new Date('2021-05-23T19:00:00.000Z'), - }, - { - text: 'Review New Training Material', - startDate: new Date('2021-04-26T15:00:00.000Z'), - endDate: new Date('2021-04-26T16:15:00.000Z'), - }, - { - text: 'Distribute Training Material to Support Staff', - startDate: new Date('2021-04-23T19:45:00.000Z'), - endDate: new Date('2021-04-23T21:00:00.000Z'), - }, - { - text: 'Training Material Distribution Schedule', - startDate: new Date('2021-05-24T21:15:00.000Z'), - endDate: new Date('2021-05-24T23:15:00.000Z'), - }, - { - text: 'Approval on Converting to New HDMI Specification', - startDate: new Date('2021-05-03T16:30:00.000Z'), - endDate: new Date('2021-05-03T17:15:00.000Z'), - }, - { - text: 'Create New Spike for Automation Server', - startDate: new Date('2021-05-25T17:00:00.000Z'), - endDate: new Date('2021-05-25T19:30:00.000Z'), - }, - { - text: 'Code Review - New Automation Server', - startDate: new Date('2021-05-25T20:00:00.000Z'), - endDate: new Date('2021-05-25T22:00:00.000Z'), - }, - { - text: 'Confirm Availability for Sales Meeting', - startDate: new Date('2021-04-27T17:15:00.000Z'), - endDate: new Date('2021-04-27T22:15:00.000Z'), - }, - { - text: 'Reschedule Sales Team Meeting', - startDate: new Date('2021-04-28T23:15:00.000Z'), - endDate: new Date('2021-04-29T01:00:00.000Z'), - }, - { - text: 'Send 2 Remotes for Giveaways', - startDate: new Date('2021-05-26T16:30:00.000Z'), - endDate: new Date('2021-05-26T18:45:00.000Z'), - }, - { - text: 'Discuss Product Giveaways with Management', - startDate: new Date('2021-05-27T19:15:00.000Z'), - endDate: new Date('2021-05-27T23:45:00.000Z'), - }, - { - text: 'Replace Desktops on the 3rd Floor', - startDate: new Date('2021-04-29T16:30:00.000Z'), - endDate: new Date('2021-04-29T17:45:00.000Z'), - }, - { - text: 'Update Database with New Leads', - startDate: new Date('2021-05-30T19:00:00.000Z'), - endDate: new Date('2021-05-30T21:15:00.000Z'), - }, - { - text: 'Mail New Leads for Follow Up', - startDate: new Date('2021-05-31T21:45:00.000Z'), - endDate: new Date('2021-05-31T22:30:00.000Z'), - }, - { - text: 'Send Territory Sales Breakdown', - startDate: new Date('2021-04-30T01:00:00.000Z'), - endDate: new Date('2021-04-30T03:00:00.000Z'), - }, - { - text: 'Territory Sales Breakdown Report', - startDate: new Date('2021-04-30T15:45:00.000Z'), - endDate: new Date('2021-04-30T16:45:00.000Z'), - }, - { - text: 'Report on the State of Engineering Dept', - startDate: new Date('2021-04-30T21:45:00.000Z'), - endDate: new Date('2021-04-30T22:30:00.000Z'), - }, - { - text: 'Staff Productivity Report', - startDate: new Date('2021-05-31T23:15:00.000Z'), - endDate: new Date('2021-06-01T02:30:00.000Z'), - }, -]; diff --git a/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/index.html b/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/index.html deleted file mode 100644 index d6d83f735a76..000000000000 --- a/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/index.js b/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/App.js b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/App.js deleted file mode 100644 index 70fcdccdb2f6..000000000000 --- a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/App.js +++ /dev/null @@ -1,91 +0,0 @@ -import React, { useCallback, useState } from 'react'; -import Scheduler, { AppointmentDragging } from 'devextreme-react/scheduler'; -import Draggable from 'devextreme-react/draggable'; -import ScrollView from 'devextreme-react/scroll-view'; -import { appointments as defaultAppointments, tasks as defaultTasks } from './data.js'; - -const currentDate = new Date(2021, 3, 26); -const views = [{ type: 'day', intervalCount: 3 }]; -const draggingGroupName = 'appointmentsGroup'; -const onListDragStart = (e) => { - e.cancel = true; -}; -const onItemDragStart = (e) => { - e.itemData = e.fromData; -}; -const onItemDragEnd = (e) => { - if (e.toData) { - e.cancel = true; - } -}; -const App = () => { - const [state, setState] = useState({ - tasks: defaultTasks, - appointments: defaultAppointments, - }); - const onAppointmentRemove = useCallback((e) => { - setState((currentState) => { - const { appointments, tasks } = currentState; - const index = appointments.indexOf(e.itemData); - if (index >= 0) { - tasks.push(e.itemData); - appointments.splice(index, 1); - } - return { appointments: [...appointments], tasks: [...tasks] }; - }); - }, []); - const onAppointmentAdd = useCallback((e) => { - setState((currentState) => { - const { appointments, tasks } = currentState; - const index = tasks.indexOf(e.fromData); - if (index >= 0) { - tasks.splice(index, 1); - appointments.push(e.itemData); - } - return { appointments: [...appointments], tasks: [...tasks] }; - }); - }, []); - return ( - <> - - - {state.tasks.map((task) => ( - - {task.text} - - ))} - - - - - - - ); -}; -export default App; diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/data.js b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/data.js deleted file mode 100644 index 49676e864634..000000000000 --- a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/data.js +++ /dev/null @@ -1,66 +0,0 @@ -export const tasks = [ - { - text: 'New Brochures', - }, - { - text: 'Brochure Design Review', - }, - { - text: 'Upgrade Personal Computers', - }, - { - text: 'Install New Router in Dev Room', - }, - { - text: 'Upgrade Server Hardware', - }, - { - text: 'Install New Database', - }, - { - text: 'Website Re-Design Plan', - }, - { - text: 'Create Icons for Website', - }, - { - text: 'Submit New Website Design', - }, - { - text: 'Launch New Website', - }, -]; -export const appointments = [ - { - text: 'Book Flights to San Fran for Sales Trip', - startDate: new Date('2021-04-26T19:00:00.000Z'), - endDate: new Date('2021-04-26T20:00:00.000Z'), - allDay: true, - }, - { - text: 'Approve Personal Computer Upgrade Plan', - startDate: new Date('2021-04-27T17:00:00.000Z'), - endDate: new Date('2021-04-27T18:00:00.000Z'), - }, - { - text: 'Final Budget Review', - startDate: new Date('2021-04-27T19:00:00.000Z'), - endDate: new Date('2021-04-27T20:35:00.000Z'), - }, - { - text: 'Approve New Online Marketing Strategy', - startDate: new Date('2021-04-28T19:00:00.000Z'), - endDate: new Date('2021-04-28T21:00:00.000Z'), - }, - { - text: 'Customer Workshop', - startDate: new Date('2021-04-29T18:00:00.000Z'), - endDate: new Date('2021-04-29T19:00:00.000Z'), - allDay: true, - }, - { - text: 'Prepare 2021 Marketing Plan', - startDate: new Date('2021-04-29T18:00:00.000Z'), - endDate: new Date('2021-04-29T20:30:00.000Z'), - }, -]; diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/index.html b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/index.html deleted file mode 100644 index db31b0fd60c6..000000000000 --- a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/index.js b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/styles.css b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/styles.css deleted file mode 100644 index 3b710d6f4094..000000000000 --- a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/styles.css +++ /dev/null @@ -1,28 +0,0 @@ -#scroll, -#list { - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 240px; -} - -.item { - color: var(--dx-color-text); - background-color: var(--dx-component-color-bg); - box-sizing: border-box; - padding: 10px 20px; - margin-bottom: 10px; -} - -#scheduler { - margin-left: 270px; -} - -.dx-draggable-source { - opacity: 0.5; -} - -.dx-draggable-dragging > * { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2); -} diff --git a/apps/demos/Demos/Scheduler/Editing/ReactJs/App.js b/apps/demos/Demos/Scheduler/Editing/ReactJs/App.js deleted file mode 100644 index 9920f6750be7..000000000000 --- a/apps/demos/Demos/Scheduler/Editing/ReactJs/App.js +++ /dev/null @@ -1,100 +0,0 @@ -import React, { useCallback, useState } from 'react'; -import Scheduler, { Editing } from 'devextreme-react/scheduler'; -import { CheckBox } from 'devextreme-react/check-box'; -import notify from 'devextreme/ui/notify'; -import { data } from './data.js'; - -const currentDate = new Date(2021, 3, 29); -const views = ['day', 'week']; -const showToast = (event, value, type) => { - notify(`${event} "${value}" task`, type, 800); -}; -const showAddedToast = (e) => { - showToast('Added', e.appointmentData.text ?? '', 'success'); -}; -const showUpdatedToast = (e) => { - showToast('Updated', e.appointmentData.text ?? '', 'info'); -}; -const showDeletedToast = (e) => { - showToast('Deleted', e.appointmentData.text ?? '', 'warning'); -}; -const App = () => { - const [allowAdding, setAllowAdding] = useState(true); - const [allowDeleting, setAllowDeleting] = useState(true); - const [allowResizing, setAllowResizing] = useState(true); - const [allowDragging, setAllowDragging] = useState(true); - const [allowUpdating, setAllowUpdating] = useState(true); - const onAllowAddingChanged = useCallback((e) => setAllowAdding(e.value), []); - const onAllowDeletingChanged = useCallback((e) => setAllowDeleting(e.value), []); - const onAllowResizingChanged = useCallback((e) => setAllowResizing(e.value), []); - const onAllowDraggingChanged = useCallback((e) => setAllowDragging(e.value), []); - const onAllowUpdatingChanged = useCallback((e) => setAllowUpdating(e.value), []); - return ( - <> - - - -
-
Options
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
- - ); -}; -export default App; diff --git a/apps/demos/Demos/Scheduler/Editing/ReactJs/data.js b/apps/demos/Demos/Scheduler/Editing/ReactJs/data.js deleted file mode 100644 index 1a0c9464f9f2..000000000000 --- a/apps/demos/Demos/Scheduler/Editing/ReactJs/data.js +++ /dev/null @@ -1,84 +0,0 @@ -export const data = [ - { - text: 'Website Re-Design Plan', - startDate: new Date('2021-04-26T16:30:00.000Z'), - endDate: new Date('2021-04-26T18:30:00.000Z'), - }, - { - text: 'Book Flights to San Fran for Sales Trip', - startDate: new Date('2021-04-26T19:00:00.000Z'), - endDate: new Date('2021-04-26T20:00:00.000Z'), - allDay: true, - }, - { - text: 'Install New Router in Dev Room', - startDate: new Date('2021-04-26T21:30:00.000Z'), - endDate: new Date('2021-04-26T22:30:00.000Z'), - }, - { - text: 'Approve Personal Computer Upgrade Plan', - startDate: new Date('2021-04-27T17:00:00.000Z'), - endDate: new Date('2021-04-27T18:00:00.000Z'), - }, - { - text: 'Final Budget Review', - startDate: new Date('2021-04-27T19:00:00.000Z'), - endDate: new Date('2021-04-27T20:35:00.000Z'), - }, - { - text: 'New Brochures', - startDate: new Date('2021-04-27T21:30:00.000Z'), - endDate: new Date('2021-04-27T22:45:00.000Z'), - }, - { - text: 'Install New Database', - startDate: new Date('2021-04-28T16:45:00.000Z'), - endDate: new Date('2021-04-28T18:15:00.000Z'), - }, - { - text: 'Approve New Online Marketing Strategy', - startDate: new Date('2021-04-28T19:00:00.000Z'), - endDate: new Date('2021-04-28T21:00:00.000Z'), - }, - { - text: 'Upgrade Personal Computers', - startDate: new Date('2021-04-28T22:15:00.000Z'), - endDate: new Date('2021-04-28T23:30:00.000Z'), - }, - { - text: 'Customer Workshop', - startDate: new Date('2021-04-29T18:00:00.000Z'), - endDate: new Date('2021-04-29T19:00:00.000Z'), - allDay: true, - }, - { - text: 'Prepare 2021 Marketing Plan', - startDate: new Date('2021-04-29T18:00:00.000Z'), - endDate: new Date('2021-04-29T20:30:00.000Z'), - }, - { - text: 'Brochure Design Review', - startDate: new Date('2021-04-29T21:00:00.000Z'), - endDate: new Date('2021-04-29T22:30:00.000Z'), - }, - { - text: 'Create Icons for Website', - startDate: new Date('2021-04-30T17:00:00.000Z'), - endDate: new Date('2021-04-30T18:30:00.000Z'), - }, - { - text: 'Upgrade Server Hardware', - startDate: new Date('2021-04-30T21:30:00.000Z'), - endDate: new Date('2021-04-30T23:00:00.000Z'), - }, - { - text: 'Submit New Website Design', - startDate: new Date('2021-04-30T23:30:00.000Z'), - endDate: new Date('2021-05-01T01:00:00.000Z'), - }, - { - text: 'Launch New Website', - startDate: new Date('2021-04-30T19:20:00.000Z'), - endDate: new Date('2021-04-30T21:00:00.000Z'), - }, -]; diff --git a/apps/demos/Demos/Scheduler/Editing/ReactJs/index.html b/apps/demos/Demos/Scheduler/Editing/ReactJs/index.html deleted file mode 100644 index db31b0fd60c6..000000000000 --- a/apps/demos/Demos/Scheduler/Editing/ReactJs/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/Editing/ReactJs/index.js b/apps/demos/Demos/Scheduler/Editing/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/Editing/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/Editing/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Editing/ReactJs/styles.css deleted file mode 100644 index 5e279be151fd..000000000000 --- a/apps/demos/Demos/Scheduler/Editing/ReactJs/styles.css +++ /dev/null @@ -1,21 +0,0 @@ -.options { - padding: 20px; - background-color: rgba(191, 191, 191, 0.15); - margin-top: 20px; -} - -.caption { - font-size: 18px; - font-weight: 500; -} - -.option { - margin-top: 10px; - display: inline-block; - width: 19%; -} - -.options-container { - display: flex; - align-items: center; -} diff --git a/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/React/App.tsx b/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/React/App.tsx index e738eba052f0..7277e6b4989d 100644 --- a/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/React/App.tsx +++ b/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/React/App.tsx @@ -1,8 +1,9 @@ import 'whatwg-fetch'; import React from 'react'; -import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler'; -import type { LoadOptions } from 'devextreme/data'; +import Scheduler from 'devextreme-react/scheduler'; +import { type SchedulerTypes } from 'devextreme-react/scheduler'; +import { type LoadOptions } from 'devextreme/data'; import { CustomStore } from 'devextreme-react/common/data'; diff --git a/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/App.js b/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/App.js deleted file mode 100644 index 8f8b36ead4d3..000000000000 --- a/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/App.js +++ /dev/null @@ -1,41 +0,0 @@ -import 'whatwg-fetch'; -import React from 'react'; -import Scheduler from 'devextreme-react/scheduler'; -import { CustomStore } from 'devextreme-react/common/data'; - -const getData = async (_, requestOptions) => { - const GOOGLE_CALENDAR_URL = 'https://www.googleapis.com/calendar/v3/calendars/'; - const CALENDAR_ID = 'f7jnetm22dsjc3npc2lu3buvu4@group.calendar.google.com'; - const PUBLIC_KEY = 'AIzaSyBnNAISIUKe6xdhq1_rjor2rxoI3UlMY7k'; - const dataUrl = [GOOGLE_CALENDAR_URL, CALENDAR_ID, '/events?key=', PUBLIC_KEY].join(''); - const response = await fetch(dataUrl, requestOptions); - const data = await response.json(); - return data.items; -}; -const dataSource = new CustomStore({ - load: (options) => getData(options, { showDeleted: false }), -}); -const currentDate = new Date(2017, 4, 25); -const views = ['day', 'workWeek', 'month']; -const App = () => ( - <> -
-

Tasks for Employees (USA Office)

-
- - -); -export default App; diff --git a/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/index.html b/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/index.html deleted file mode 100644 index db31b0fd60c6..000000000000 --- a/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/index.js b/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/styles.css b/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/styles.css deleted file mode 100644 index cf2b52780a4d..000000000000 --- a/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/styles.css +++ /dev/null @@ -1,13 +0,0 @@ -.long-title h3 { - font-family: - "Segoe UI Light", - "Helvetica Neue Light", - "Segoe UI", - "Helvetica Neue", - "Trebuchet MS", - Verdana; - font-weight: 200; - font-size: 28px; - text-align: center; - margin-bottom: 20px; -} diff --git a/apps/demos/Demos/Scheduler/GroupByDate/React/App.tsx b/apps/demos/Demos/Scheduler/GroupByDate/React/App.tsx index 992df21fd44d..776454646977 100644 --- a/apps/demos/Demos/Scheduler/GroupByDate/React/App.tsx +++ b/apps/demos/Demos/Scheduler/GroupByDate/React/App.tsx @@ -1,6 +1,7 @@ import React, { useCallback, useState } from 'react'; -import Switch, { type SwitchTypes } from 'devextreme-react/switch'; +import Switch from 'devextreme-react/switch'; +import { type SwitchTypes } from 'devextreme-react/switch'; import Scheduler, { Resource, View } from 'devextreme-react/scheduler'; import { data, priorityData } from './data.ts'; diff --git a/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/App.js b/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/App.js deleted file mode 100644 index 79c4f855bf3d..000000000000 --- a/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/App.js +++ /dev/null @@ -1,55 +0,0 @@ -import React, { useCallback, useState } from 'react'; -import Switch from 'devextreme-react/switch'; -import Scheduler, { Resource, View } from 'devextreme-react/scheduler'; -import { data, priorityData } from './data.js'; - -const currentDate = new Date(2021, 3, 21); -const groups = ['priorityId']; -const App = () => { - const [groupByDate, setGroupByDate] = useState(true); - const onGroupByDateChanged = useCallback((args) => { - setGroupByDate(args.value); - }, []); - return ( -
- - - - - -
-
Group by Date First
-
- -
-
-
- ); -}; -export default App; diff --git a/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/data.js b/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/data.js deleted file mode 100644 index 4ea52e5c503e..000000000000 --- a/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/data.js +++ /dev/null @@ -1,183 +0,0 @@ -export const data = [ - { - text: 'Website Re-Design Plan', - priorityId: 2, - startDate: new Date('2021-04-19T16:30:00.000Z'), - endDate: new Date('2021-04-19T18:30:00.000Z'), - }, - { - text: 'Book Flights to San Fran for Sales Trip', - priorityId: 1, - startDate: new Date('2021-04-22T17:00:00.000Z'), - endDate: new Date('2021-04-22T19:00:00.000Z'), - }, - { - text: 'Install New Router in Dev Room', - priorityId: 1, - startDate: new Date('2021-04-18T20:00:00.000Z'), - endDate: new Date('2021-04-18T22:30:00.000Z'), - }, - { - text: 'Approve Personal Computer Upgrade Plan', - priorityId: 2, - startDate: new Date('2021-04-20T17:00:00.000Z'), - endDate: new Date('2021-04-20T18:00:00.000Z'), - }, - { - text: 'Final Budget Review', - priorityId: 2, - startDate: new Date('2021-04-20T19:00:00.000Z'), - endDate: new Date('2021-04-20T20:35:00.000Z'), - }, - { - text: 'New Brochures', - priorityId: 2, - startDate: new Date('2021-04-19T20:00:00.000Z'), - endDate: new Date('2021-04-19T22:15:00.000Z'), - }, - { - text: 'Install New Database', - priorityId: 2, - startDate: new Date('2021-04-11T16:00:00.000Z'), - endDate: new Date('2021-04-13T19:15:00.000Z'), - }, - { - text: 'Approve New Online Marketing Strategy', - priorityId: 2, - startDate: new Date('2021-04-21T19:00:00.000Z'), - endDate: new Date('2021-04-21T21:00:00.000Z'), - }, - { - text: 'Upgrade Personal Computers', - priorityId: 1, - startDate: new Date('2021-04-11T16:00:00.000Z'), - endDate: new Date('2021-04-11T18:30:00.000Z'), - recurrenceRule: 'FREQ=DAILY;COUNT=4', - }, - { - text: 'Prepare 2021 Marketing Plan', - priorityId: 2, - startDate: new Date('2021-04-22T18:00:00.000Z'), - endDate: new Date('2021-04-22T20:30:00.000Z'), - }, - { - text: 'Brochure Design Review', - priorityId: 1, - startDate: new Date('2021-04-21T18:00:00.000Z'), - endDate: new Date('2021-04-21T20:30:00.000Z'), - }, - { - text: 'Create Icons for Website', - priorityId: 2, - startDate: new Date('2021-04-23T17:00:00.000Z'), - endDate: new Date('2021-04-23T18:30:00.000Z'), - }, - { - text: 'Upgrade Server Hardware', - priorityId: 1, - startDate: new Date('2021-04-05T16:00:00.000Z'), - endDate: new Date('2021-04-08T22:00:00.000Z'), - }, - { - text: 'Submit New Website Design', - priorityId: 2, - startDate: new Date('2021-04-23T23:30:00.000Z'), - endDate: new Date('2021-04-24T01:00:00.000Z'), - }, - { - text: 'Launch New Website', - priorityId: 2, - startDate: new Date('2021-04-24T19:20:00.000Z'), - endDate: new Date('2021-04-24T21:00:00.000Z'), - }, - { - text: 'Google AdWords Strategy', - priorityId: 1, - startDate: new Date('2021-04-26T16:00:00.000Z'), - endDate: new Date('2021-04-26T19:00:00.000Z'), - }, - { - text: 'Rollout of New Website and Marketing Brochures', - priorityId: 1, - startDate: new Date('2021-04-26T20:00:00.000Z'), - endDate: new Date('2021-04-26T22:30:00.000Z'), - }, - { - text: 'Non-Compete Agreements', - priorityId: 2, - startDate: new Date('2021-04-27T20:00:00.000Z'), - endDate: new Date('2021-04-27T22:45:00.000Z'), - }, - { - text: 'Approve Hiring of John Jeffers', - priorityId: 2, - startDate: new Date('2021-04-27T16:00:00.000Z'), - endDate: new Date('2021-04-27T19:00:00.000Z'), - }, - { - text: 'Update NDA Agreement', - priorityId: 1, - startDate: new Date('2021-04-27T18:00:00.000Z'), - endDate: new Date('2021-04-27T21:15:00.000Z'), - }, - { - text: 'Update Employee Files with New NDA', - priorityId: 1, - startDate: new Date('2021-04-30T16:00:00.000Z'), - endDate: new Date('2021-04-30T18:45:00.000Z'), - }, - { - text: 'Submit Questions Regarding New NDA', - priorityId: 1, - startDate: new Date('2021-04-28T17:00:00.000Z'), - endDate: new Date('2021-04-28T18:30:00.000Z'), - }, - { - text: 'Submit Signed NDA', - priorityId: 1, - startDate: new Date('2021-04-28T20:00:00.000Z'), - endDate: new Date('2021-04-28T22:00:00.000Z'), - }, - { - text: 'Review Revenue Projections', - priorityId: 2, - startDate: new Date('2021-04-28T18:00:00.000Z'), - endDate: new Date('2021-04-28T21:00:00.000Z'), - }, - { - text: 'Comment on Revenue Projections', - priorityId: 2, - startDate: new Date('2021-04-26T17:00:00.000Z'), - endDate: new Date('2021-04-26T20:00:00.000Z'), - }, - { - text: 'Provide New Health Insurance Docs', - priorityId: 2, - startDate: new Date('2021-04-30T19:00:00.000Z'), - endDate: new Date('2021-04-30T22:00:00.000Z'), - }, - { - text: 'Review Changes to Health Insurance Coverage', - priorityId: 2, - startDate: new Date('2021-04-29T16:00:00.000Z'), - endDate: new Date('2021-04-29T20:00:00.000Z'), - }, - { - text: 'Review Training Course for any Omissions', - priorityId: 1, - startDate: new Date('2021-04-29T18:00:00.000Z'), - endDate: new Date('2021-04-29T21:00:00.000Z'), - }, -]; -export const priorityData = [ - { - text: 'Low Priority', - id: 1, - color: '#1e90ff', - }, - { - text: 'High Priority', - id: 2, - color: '#ff9747', - }, -]; diff --git a/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/index.html b/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/index.html deleted file mode 100644 index db31b0fd60c6..000000000000 --- a/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/index.js b/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/styles.css b/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/styles.css deleted file mode 100644 index 0f39434b0913..000000000000 --- a/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/styles.css +++ /dev/null @@ -1,24 +0,0 @@ -#scheduler { - display: flex; - flex-direction: column; -} - -.options { - padding: 20px; - background-color: rgba(191, 191, 191, 0.15); - margin-top: 20px; -} - -.caption { - font-size: 18px; - font-weight: 500; -} - -.option { - margin-top: 10px; - display: inline-block; -} - -.dx-scheduler-work-space-group-by-date .dx-scheduler-group-header-content { - font-size: 11px; -} diff --git a/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/App.js b/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/App.js deleted file mode 100644 index 81d245978d1f..000000000000 --- a/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/App.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import Scheduler, { Resource, View } from 'devextreme-react/scheduler'; -import { data, priorityData } from './data.js'; - -const currentDate = new Date(2021, 3, 21); -const groups = ['priorityId']; -const App = () => ( - - - - - -); -export default App; diff --git a/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/data.js b/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/data.js deleted file mode 100644 index adeef6c16445..000000000000 --- a/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/data.js +++ /dev/null @@ -1,182 +0,0 @@ -export const data = [ - { - text: 'Website Re-Design Plan', - priorityId: 2, - startDate: new Date('2021-04-19T16:30:00.000Z'), - endDate: new Date('2021-04-19T18:30:00.000Z'), - }, - { - text: 'Book Flights to San Fran for Sales Trip', - priorityId: 1, - startDate: new Date('2021-04-22T17:00:00.000Z'), - endDate: new Date('2021-04-22T19:00:00.000Z'), - }, - { - text: 'Install New Router in Dev Room', - priorityId: 1, - startDate: new Date('2021-04-19T20:00:00.000Z'), - endDate: new Date('2021-04-19T22:30:00.000Z'), - }, - { - text: 'Approve Personal Computer Upgrade Plan', - priorityId: 2, - startDate: new Date('2021-04-20T17:00:00.000Z'), - endDate: new Date('2021-04-20T18:00:00.000Z'), - }, - { - text: 'Final Budget Review', - priorityId: 2, - startDate: new Date('2021-04-20T19:00:00.000Z'), - endDate: new Date('2021-04-20T20:35:00.000Z'), - }, - { - text: 'New Brochures', - priorityId: 2, - startDate: new Date('2021-04-19T20:00:00.000Z'), - endDate: new Date('2021-04-19T22:15:00.000Z'), - }, - { - text: 'Install New Database', - priorityId: 1, - startDate: new Date('2021-04-20T16:00:00.000Z'), - endDate: new Date('2021-04-20T19:15:00.000Z'), - }, - { - text: 'Approve New Online Marketing Strategy', - priorityId: 2, - startDate: new Date('2021-04-21T19:00:00.000Z'), - endDate: new Date('2021-04-21T21:00:00.000Z'), - }, - { - text: 'Upgrade Personal Computers', - priorityId: 1, - startDate: new Date('2021-04-19T16:00:00.000Z'), - endDate: new Date('2021-04-19T18:30:00.000Z'), - }, - { - text: 'Prepare 2021 Marketing Plan', - priorityId: 2, - startDate: new Date('2021-04-22T18:00:00.000Z'), - endDate: new Date('2021-04-22T20:30:00.000Z'), - }, - { - text: 'Brochure Design Review', - priorityId: 1, - startDate: new Date('2021-04-21T18:00:00.000Z'), - endDate: new Date('2021-04-21T20:30:00.000Z'), - }, - { - text: 'Create Icons for Website', - priorityId: 2, - startDate: new Date('2021-04-23T17:00:00.000Z'), - endDate: new Date('2021-04-23T18:30:00.000Z'), - }, - { - text: 'Upgrade Server Hardware', - priorityId: 1, - startDate: new Date('2021-04-23T16:00:00.000Z'), - endDate: new Date('2021-04-23T22:00:00.000Z'), - }, - { - text: 'Submit New Website Design', - priorityId: 2, - startDate: new Date('2021-04-23T23:30:00.000Z'), - endDate: new Date('2021-04-24T01:00:00.000Z'), - }, - { - text: 'Launch New Website', - priorityId: 2, - startDate: new Date('2021-04-23T19:20:00.000Z'), - endDate: new Date('2021-04-23T21:00:00.000Z'), - }, - { - text: 'Google AdWords Strategy', - priorityId: 1, - startDate: new Date('2021-04-26T16:00:00.000Z'), - endDate: new Date('2021-04-26T19:00:00.000Z'), - }, - { - text: 'Rollout of New Website and Marketing Brochures', - priorityId: 1, - startDate: new Date('2021-04-26T20:00:00.000Z'), - endDate: new Date('2021-04-26T22:30:00.000Z'), - }, - { - text: 'Non-Compete Agreements', - priorityId: 2, - startDate: new Date('2021-04-27T20:00:00.000Z'), - endDate: new Date('2021-04-27T22:45:00.000Z'), - }, - { - text: 'Approve Hiring of John Jeffers', - priorityId: 2, - startDate: new Date('2021-04-27T16:00:00.000Z'), - endDate: new Date('2021-04-27T19:00:00.000Z'), - }, - { - text: 'Update NDA Agreement', - priorityId: 1, - startDate: new Date('2021-04-27T18:00:00.000Z'), - endDate: new Date('2021-04-27T21:15:00.000Z'), - }, - { - text: 'Update Employee Files with New NDA', - priorityId: 1, - startDate: new Date('2021-04-30T16:00:00.000Z'), - endDate: new Date('2021-04-30T18:45:00.000Z'), - }, - { - text: 'Submit Questions Regarding New NDA', - priorityId: 1, - startDate: new Date('2021-04-28T17:00:00.000Z'), - endDate: new Date('2021-04-28T18:30:00.000Z'), - }, - { - text: 'Submit Signed NDA', - priorityId: 1, - startDate: new Date('2021-04-28T20:00:00.000Z'), - endDate: new Date('2021-04-28T22:00:00.000Z'), - }, - { - text: 'Review Revenue Projections', - priorityId: 2, - startDate: new Date('2021-04-28T18:00:00.000Z'), - endDate: new Date('2021-04-28T21:00:00.000Z'), - }, - { - text: 'Comment on Revenue Projections', - priorityId: 2, - startDate: new Date('2021-04-26T17:00:00.000Z'), - endDate: new Date('2021-04-26T20:00:00.000Z'), - }, - { - text: 'Provide New Health Insurance Docs', - priorityId: 2, - startDate: new Date('2021-04-30T19:00:00.000Z'), - endDate: new Date('2021-04-30T22:00:00.000Z'), - }, - { - text: 'Review Changes to Health Insurance Coverage', - priorityId: 2, - startDate: new Date('2021-04-29T16:00:00.000Z'), - endDate: new Date('2021-04-29T20:00:00.000Z'), - }, - { - text: 'Review Training Course for any Omissions', - priorityId: 1, - startDate: new Date('2021-04-29T18:00:00.000Z'), - endDate: new Date('2021-04-29T21:00:00.000Z'), - }, -]; -export const priorityData = [ - { - text: 'Low Priority', - id: 1, - color: '#1e90ff', - }, - { - text: 'High Priority', - id: 2, - color: '#ff9747', - }, -]; diff --git a/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/index.html b/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/index.html deleted file mode 100644 index db31b0fd60c6..000000000000 --- a/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/index.js b/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/styles.css b/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/styles.css deleted file mode 100644 index d1fbf48b9b7e..000000000000 --- a/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/styles.css +++ /dev/null @@ -1,3 +0,0 @@ -.dx-scheduler-cell-sizes-horizontal { - width: 100px; -} diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/App.js b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/App.js deleted file mode 100644 index 1b6cf72dcde0..000000000000 --- a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/App.js +++ /dev/null @@ -1,84 +0,0 @@ -import React from 'react'; -import Scheduler, { - Resource, - View, - Editing, - Form as SchedulerForm, - Item, -} from 'devextreme-react/scheduler'; -import { data, priorityData, typeData } from './data.js'; - -const currentDate = new Date(2021, 3, 27); -const dayOfWeekNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; -const typeGroups = ['typeId']; -const priorityGroups = ['priorityId']; -const DateCell = ({ data: cellData }) => ( - <> -
{dayOfWeekNames[cellData.date.getDay()]}
-
{cellData.date.getDate()}
- -); -const App = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - -); -export default App; diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/data.js b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/data.js deleted file mode 100644 index b87a362118c9..000000000000 --- a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/data.js +++ /dev/null @@ -1,154 +0,0 @@ -export const data = [ - { - text: 'Walking a dog', - priorityId: 1, - typeId: 1, - startDate: new Date('2021-04-26T15:00:00.000Z'), - endDate: new Date('2021-04-26T15:30:00.000Z'), - recurrenceRule: 'FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR;UNTIL=20210502', - }, - { - text: 'Website Re-Design Plan', - priorityId: 2, - typeId: 2, - startDate: new Date('2021-04-26T16:00:00.000Z'), - endDate: new Date('2021-04-26T18:30:00.000Z'), - }, - { - text: 'Book Flights to San Fran for Sales Trip', - priorityId: 2, - typeId: 2, - startDate: new Date('2021-04-26T19:00:00.000Z'), - endDate: new Date('2021-04-26T20:00:00.000Z'), - }, - { - text: 'Install New Router in Dev Room', - priorityId: 1, - typeId: 2, - startDate: new Date('2021-04-26T21:30:00.000Z'), - endDate: new Date('2021-04-26T22:30:00.000Z'), - }, - { - text: 'Go Grocery Shopping', - priorityId: 1, - typeId: 1, - startDate: new Date('2021-04-27T01:30:00.000Z'), - endDate: new Date('2021-04-27T02:30:00.000Z'), - recurrenceRule: 'FREQ=DAILY;BYDAY=MO,WE,FR;UNTIL=20210502', - }, - { - text: 'Approve Personal Computer Upgrade Plan', - priorityId: 2, - typeId: 2, - startDate: new Date('2021-04-27T17:00:00.000Z'), - endDate: new Date('2021-04-27T18:00:00.000Z'), - }, - { - text: 'Final Budget Review', - priorityId: 2, - typeId: 2, - startDate: new Date('2021-04-27T19:00:00.000Z'), - endDate: new Date('2021-04-27T20:35:00.000Z'), - }, - { - text: 'New Brochures', - priorityId: 2, - typeId: 2, - startDate: new Date('2021-04-27T21:30:00.000Z'), - endDate: new Date('2021-04-27T22:45:00.000Z'), - }, - { - text: 'Install New Database', - priorityId: 1, - typeId: 2, - startDate: new Date('2021-04-28T16:45:00.000Z'), - endDate: new Date('2021-04-28T18:15:00.000Z'), - }, - { - text: 'Approve New Online Marketing Strategy', - priorityId: 2, - typeId: 2, - startDate: new Date('2021-04-28T19:00:00.000Z'), - endDate: new Date('2021-04-28T21:00:00.000Z'), - }, - { - text: 'Upgrade Personal Computers', - priorityId: 1, - typeId: 2, - startDate: new Date('2021-04-28T22:15:00.000Z'), - endDate: new Date('2021-04-28T23:30:00.000Z'), - }, - { - text: 'Prepare 2021 Marketing Plan', - priorityId: 2, - typeId: 2, - startDate: new Date('2021-04-29T18:00:00.000Z'), - endDate: new Date('2021-04-29T20:30:00.000Z'), - }, - { - text: 'Brochure Design Review', - priorityId: 1, - typeId: 2, - startDate: new Date('2021-04-29T21:00:00.000Z'), - endDate: new Date('2021-04-29T22:30:00.000Z'), - }, - { - text: 'Create Icons for Website', - priorityId: 2, - typeId: 2, - startDate: new Date('2021-04-30T17:00:00.000Z'), - endDate: new Date('2021-04-30T18:30:00.000Z'), - }, - { - text: 'Upgrade Server Hardware', - priorityId: 1, - typeId: 2, - startDate: new Date('2021-04-30T21:30:00.000Z'), - endDate: new Date('2021-04-30T23:00:00.000Z'), - }, - { - text: 'Submit New Website Design', - priorityId: 2, - typeId: 2, - startDate: new Date('2021-04-30T23:30:00.000Z'), - endDate: new Date('2021-05-01T01:00:00.000Z'), - }, - { - text: 'Launch New Website', - priorityId: 2, - typeId: 2, - startDate: new Date('2021-04-30T19:20:00.000Z'), - endDate: new Date('2021-04-30T21:00:00.000Z'), - }, - { - text: 'Visiting a Doctor', - priorityId: 2, - typeId: 1, - startDate: new Date('2021-05-01T17:00:00.000Z'), - endDate: new Date('2021-05-01T20:30:00.000Z'), - }, -]; -export const priorityData = [ - { - text: 'Low Priority', - id: 1, - color: '#fcb65e', - }, - { - text: 'High Priority', - id: 2, - color: '#e18e92', - }, -]; -export const typeData = [ - { - text: 'Home', - id: 1, - color: '#b6d623', - }, - { - text: 'Work', - id: 2, - color: '#679ec5', - }, -]; diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/index.html b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/index.html deleted file mode 100644 index db31b0fd60c6..000000000000 --- a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/index.js b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/styles.css b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/styles.css deleted file mode 100644 index ee431ebd03bf..000000000000 --- a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/styles.css +++ /dev/null @@ -1,15 +0,0 @@ -.dx-scheduler-work-space-week .dx-scheduler-header-panel-cell, -.dx-scheduler-work-space-work-week .dx-scheduler-header-panel-cell { - text-align: center; - vertical-align: middle; -} - -.dx-scheduler-work-space .dx-scheduler-header-panel-cell .name { - font-size: 13px; - line-height: 15px; -} - -.dx-scheduler-work-space .dx-scheduler-header-panel-cell .number { - font-size: 15px; - line-height: 15px; -} diff --git a/apps/demos/Demos/Scheduler/Overview/React/App.tsx b/apps/demos/Demos/Scheduler/Overview/React/App.tsx index 29588d559451..8106798630c6 100644 --- a/apps/demos/Demos/Scheduler/Overview/React/App.tsx +++ b/apps/demos/Demos/Scheduler/Overview/React/App.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import Scheduler, { Resource, type SchedulerTypes } from 'devextreme-react/scheduler'; +import Scheduler, { Resource } from 'devextreme-react/scheduler'; +import { type SchedulerTypes } from 'devextreme-react/scheduler'; import { employees, data } from './data.ts'; import DataCell from './DataCell.tsx'; diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/App.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/App.js deleted file mode 100644 index 9c9fce34b864..000000000000 --- a/apps/demos/Demos/Scheduler/Overview/ReactJs/App.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import Scheduler, { Resource } from 'devextreme-react/scheduler'; -import { employees, data } from './data.js'; -import DataCell from './DataCell.js'; -import ResourceCell from './ResourceCell.js'; - -const currentDate = new Date(2021, 5, 2, 11, 30); -const groups = ['employeeID']; -const views = ['month']; -const App = () => ( - - - -); -export default App; diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/DataCell.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/DataCell.js deleted file mode 100644 index 1cce0d508039..000000000000 --- a/apps/demos/Demos/Scheduler/Overview/ReactJs/DataCell.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; - -const isWeekEnd = (date) => { - const day = date.getDay(); - return day === 0 || day === 6; -}; -const getCurrentTraining = (date, employeeID) => { - const result = (date + employeeID) % 3; - const currentTraining = `training-background-${result}`; - return currentTraining; -}; -const DataCell = (props) => { - const { - data: { - startDate, - groups: { employeeID }, - text, - }, - } = props; - const dayClasses = ['day-cell', getCurrentTraining(startDate.getDate(), employeeID)]; - const employeeClasses = [`employee-${employeeID}`, 'dx-template-wrapper']; - if (isWeekEnd(startDate)) { - employeeClasses.push(`employee-weekend-${employeeID}`); - } - return ( -
-
{text}
-
- ); -}; -export default DataCell; diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js deleted file mode 100644 index 6f080eb30b8a..000000000000 --- a/apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; - -const ResourceCell = (props) => { - const { - data: { - color, - text, - data: { avatar, age, discipline }, - }, - } = props; - return ( -
-
-

{text}

-
-
- {`${text} -
-
- Age: {age} -
- {discipline} -
-
- ); -}; -export default ResourceCell; diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js deleted file mode 100644 index 2ae3c1170144..000000000000 --- a/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js +++ /dev/null @@ -1,98 +0,0 @@ -export const data = [ - { - text: 'Helen', - employeeID: 2, - startDate: new Date('2021-06-01T16:30:00.000Z'), - endDate: new Date('2021-06-01T18:30:00.000Z'), - }, - { - text: 'Helen', - employeeID: 2, - startDate: new Date('2021-06-10T16:30:00.000Z'), - endDate: new Date('2021-06-11T18:30:00.000Z'), - }, - { - text: 'Alex', - employeeID: 1, - startDate: new Date('2021-06-02T16:30:00.000Z'), - endDate: new Date('2021-06-02T18:30:00.000Z'), - }, - { - text: 'Alex', - employeeID: 1, - startDate: new Date('2021-06-11T19:00:00.000Z'), - endDate: new Date('2021-06-11T20:00:00.000Z'), - }, - { - text: 'Alex', - employeeID: 2, - startDate: new Date('2021-06-16T16:30:00.000Z'), - endDate: new Date('2021-06-16T18:30:00.000Z'), - }, - { - text: 'Stan', - employeeID: 1, - startDate: new Date('2021-06-07T16:30:00.000Z'), - endDate: new Date('2021-06-07T18:30:00.000Z'), - }, - { - text: 'Stan', - employeeID: 1, - startDate: new Date('2021-06-28T16:30:00.000Z'), - endDate: new Date('2021-06-28T18:30:00.000Z'), - }, - { - text: 'Stan', - employeeID: 1, - startDate: new Date('2021-06-30T16:30:00.000Z'), - endDate: new Date('2021-06-30T18:30:00.000Z'), - }, - { - text: 'Rachel', - employeeID: 2, - startDate: new Date('2021-06-04T16:30:00.000Z'), - endDate: new Date('2021-06-04T18:30:00.000Z'), - }, - { - text: 'Rachel', - employeeID: 2, - startDate: new Date('2021-06-07T16:30:00.000Z'), - endDate: new Date('2021-06-07T18:30:00.000Z'), - }, - { - text: 'Rachel', - employeeID: 1, - startDate: new Date('2021-06-21T16:30:00.000Z'), - endDate: new Date('2021-06-21T18:30:00.000Z'), - }, - { - text: 'Kelly', - employeeID: 2, - startDate: new Date('2021-06-15T16:30:00.000Z'), - endDate: new Date('2021-06-15T18:30:00.000Z'), - }, - { - text: 'Kelly', - employeeID: 2, - startDate: new Date('2021-06-29T16:30:00.000Z'), - endDate: new Date('2021-06-29T18:30:00.000Z'), - }, -]; -export const employees = [ - { - text: 'John Heart', - id: 1, - color: 'var(--background-color-1)', - avatar: '../../../../images/employees/19.png', - age: 27, - discipline: 'ABS, Fitball, StepFit', - }, - { - text: 'Greta Sims', - id: 2, - color: 'var(--background-color-2)', - avatar: '../../../../images/employees/31.png', - age: 25, - discipline: 'ABS, Fitball, StepFit', - }, -]; diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/description.md b/apps/demos/Demos/Scheduler/Overview/ReactJs/description.md deleted file mode 100644 index 5bc9cd563916..000000000000 --- a/apps/demos/Demos/Scheduler/Overview/ReactJs/description.md +++ /dev/null @@ -1,4 +0,0 @@ -DevExtreme React Scheduler is a UI component for scheduling. It implements all the features necessary for its purpose: flexible data binding, easy appointment editing, multiple calendar views, time zones support, and more. [Learn more about DevExtreme React components](/Documentation/Guide/React_Components/DevExtreme_React_Components/). - -To get started with the DevExtreme Scheduler component, refer to the following tutorial for step-by-step instructions: [Getting Started with Scheduler](/Documentation/Guide/UI_Components/Scheduler/Getting_Started_with_Scheduler/). - \ No newline at end of file diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/index.html b/apps/demos/Demos/Scheduler/Overview/ReactJs/index.html deleted file mode 100644 index db31b0fd60c6..000000000000 --- a/apps/demos/Demos/Scheduler/Overview/ReactJs/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/index.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/Overview/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css deleted file mode 100644 index 97f1dab526a7..000000000000 --- a/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css +++ /dev/null @@ -1,171 +0,0 @@ -.dx-scheduler-group-header, -.dx-scheduler-date-table-cell { - position: relative; -} - -.dx-scheduler-group-header-content { - padding-left: 8px; -} - -.dx-color-scheme-light, -.dx-color-scheme-carmine, -.dx-color-scheme-softblue, -.dx-color-scheme-blue-light, -.dx-color-scheme-saas-light, -.dx-color-scheme-lime-light, -.dx-color-scheme-orange-light, -.dx-color-scheme-purple-light, -.dx-color-scheme-teal-light { - --text-color-1: rgba(0, 0, 0, .6); - --text-color-2: rgba(255, 255, 255, 1); - --disabled-color: rgba(0, 0, 0, 0.38); - --background-color-1: rgba(50, 134, 56, 1); - --background-color-2: rgba(194, 81, 0, 1); -} - -.dx-color-scheme-dark, -.dx-color-scheme-darkviolet, -.dx-color-scheme-darkmoon, -.dx-color-scheme-blue-dark, -.dx-color-scheme-saas-dark, -.dx-color-scheme-lime-dark, -.dx-color-scheme-orange-dark, -.dx-color-scheme-purple-dark, -.dx-color-scheme-teal-dark { - --text-color-1: rgba(255, 255, 255, 1); - --text-color-2: rgba(54, 54, 64, 1); - --disabled-color: rgba(255, 255, 255, 0.38); - --background-color-1: rgba(159, 213, 161, 1); - --background-color-2: rgba(255, 181, 127, 1); - -} - -.dx-scheduler-header .dx-toolbar .dx-button, -.dx-scheduler-header .dx-toolbar .dx-button .dx-icon { - color: var(--text-color-1); -} - -.dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell { - opacity: 1; - color: var(--disabled-color) !important; -} - -.dx-scheduler-work-space-month .dx-scheduler-date-table-cell { - color: var(--text-color-1); -} - -.dx-scheduler-work-space-month .dx-scheduler-appointment, -.dx-scheduler-work-space-month .dx-scheduler-appointment.dx-state-focused { - color: var(--text-color-2); - line-height: 22px; -} - -.dx-scheduler-work-space-month .dx-scheduler-appointment .dx-scheduler-appointment-content { - padding-top: 0; -} - -.dx-scheduler-date-table-cell .dx-template-wrapper { - position: absolute; - height: 100%; - width: 100%; - padding-right: 6px; -} - -.avatar { - width: 124px; - float: left; - overflow: hidden; - position: relative; - height: 124px; - border: 1px solid rgba(0, 0, 0, 0.24); - border-radius: 50%; - background-color: rgba(255, 255, 255, 1); -} - -.avatar img { - position: relative; - width: 126px; - height: 130px; - object-fit: contain; -} - -.avatar[title="John Heart"] img { - top: 5px; - left: 3px; -} - -.avatar[title="Greta Sims"] img { - top: 5px; - left: -7px; -} - -.name { - position: absolute; - bottom: 0; - left: 0; - width: 100%; -} - -.name h2 { - color: var(--text-color-2); - font-size: 28px; - text-align: left; - padding: 0 0 0 170px; - margin: 0; - height: 40px; - line-height: 40px; -} - -.info { - width: auto; - text-align: left; - height: 100%; - font-size: 14px; - line-height: 20px; - font-weight: normal; - padding: 25px 20px 25px 40px; - color: #707070; -} - -.dx-color-scheme-contrast .info { - color: #fff; -} - -.day-cell { - width: 100%; - height: 100%; - background-position: center center; - background-repeat: no-repeat; -} - -.dx-scheduler-appointment { - color: rgba(255, 255, 255, 1); -} - -.employee-1 { - background-color: rgba(55, 126, 58, 0.08); -} - -.employee-2 { - background-color: rgba(194, 81, 0, 0.08); -} - -.employee-weekend-1 { - background-color: rgba(55, 126, 58, 0.12); -} - -.employee-weekend-2 { - background-color: rgba(194, 81, 0, 0.12); -} - -.training-background-0 { - background-image: url("../../../../images/Scheduler/Overview/icon-abs.png"); -} - -.training-background-1 { - background-image: url("../../../../images/Scheduler/Overview/icon-step.png"); -} - -.training-background-2 { - background-image: url("../../../../images/Scheduler/Overview/icon-fitball.png"); -} diff --git a/apps/demos/Demos/Scheduler/RecurringAppointments/React/App.tsx b/apps/demos/Demos/Scheduler/RecurringAppointments/React/App.tsx index c99213f36aa9..7e1d127fb533 100644 --- a/apps/demos/Demos/Scheduler/RecurringAppointments/React/App.tsx +++ b/apps/demos/Demos/Scheduler/RecurringAppointments/React/App.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import Scheduler, { Resource, type SchedulerTypes } from 'devextreme-react/scheduler'; +import Scheduler, { Resource } from 'devextreme-react/scheduler'; +import { type SchedulerTypes } from 'devextreme-react/scheduler'; import { data, resourcesData } from './data.ts'; diff --git a/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/App.js b/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/App.js deleted file mode 100644 index 2728afe6fe6b..000000000000 --- a/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/App.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import Scheduler, { Resource } from 'devextreme-react/scheduler'; -import { data, resourcesData } from './data.js'; - -const currentDate = new Date(2020, 10, 25); -const views = ['day', 'week', 'month']; -const App = () => ( - - - -); -export default App; diff --git a/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/data.js b/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/data.js deleted file mode 100644 index cd88de29c3e4..000000000000 --- a/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/data.js +++ /dev/null @@ -1,86 +0,0 @@ -export const data = [ - { - text: 'Watercolor Landscape', - roomId: [1], - startDate: new Date('2020-11-01T17:30:00.000Z'), - endDate: new Date('2020-11-01T19:00:00.000Z'), - recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TH;COUNT=10', - }, - { - text: 'Oil Painting for Beginners', - roomId: [2], - startDate: new Date('2020-11-01T17:30:00.000Z'), - endDate: new Date('2020-11-01T19:00:00.000Z'), - recurrenceRule: 'FREQ=WEEKLY;BYDAY=SU,WE;COUNT=10', - }, - { - text: 'Testing', - roomId: [3], - startDate: new Date('2020-11-01T20:00:00.000Z'), - endDate: new Date('2020-11-01T21:00:00.000Z'), - recurrenceRule: 'FREQ=WEEKLY;BYDAY=SU;WKST=TU;INTERVAL=2;COUNT=2', - }, - { - text: 'Meeting of Instructors', - roomId: [4], - startDate: new Date('2020-11-01T17:00:00.000Z'), - endDate: new Date('2020-11-01T17:15:00.000Z'), - recurrenceRule: 'FREQ=DAILY;BYDAY=TU;UNTIL=20201203', - }, - { - text: 'Recruiting students', - roomId: [5], - startDate: new Date('2020-10-24T18:00:00.000Z'), - endDate: new Date('2020-10-24T19:00:00.000Z'), - recurrenceRule: 'FREQ=YEARLY;BYWEEKNO=50;WKST=SU', - recurrenceException: '20201212T190000Z', - }, - { - text: 'Final exams', - roomId: [3], - startDate: new Date('2020-10-24T20:00:00.000Z'), - endDate: new Date('2020-10-24T21:35:00.000Z'), - recurrenceRule: 'FREQ=YEARLY;BYWEEKNO=51;BYDAY=WE,TH', - }, - { - text: 'Monthly Planning', - roomId: [4], - startDate: new Date('2020-11-24T22:30:00.000Z'), - endDate: new Date('2020-11-24T23:45:00.000Z'), - recurrenceRule: 'FREQ=MONTHLY;BYMONTHDAY=28;COUNT=1', - }, - { - text: 'Open Day', - roomId: [5], - startDate: new Date('2020-11-01T17:30:00.000Z'), - endDate: new Date('2020-11-01T21:00:00.000Z'), - recurrenceRule: 'FREQ=YEARLY;BYYEARDAY=333', - }, -]; -export const resourcesData = [ - { - text: 'Room 101', - id: 1, - color: '#bbd806', - }, - { - text: 'Room 102', - id: 2, - color: '#f34c8a', - }, - { - text: 'Room 103', - id: 3, - color: '#ae7fcc', - }, - { - text: 'Meeting room', - id: 4, - color: '#ff8817', - }, - { - text: 'Conference hall', - id: 5, - color: '#03bb92', - }, -]; diff --git a/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/index.html b/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/index.html deleted file mode 100644 index d6d83f735a76..000000000000 --- a/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/index.js b/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/Resources/React/App.tsx b/apps/demos/Demos/Scheduler/Resources/React/App.tsx index 8cbbc9cfb16b..820cc4a1e265 100644 --- a/apps/demos/Demos/Scheduler/Resources/React/App.tsx +++ b/apps/demos/Demos/Scheduler/Resources/React/App.tsx @@ -8,7 +8,8 @@ import Scheduler, { type SchedulerTypes, } from 'devextreme-react/scheduler'; -import RadioGroup, { type RadioGroupTypes } from 'devextreme-react/radio-group'; +import RadioGroup from 'devextreme-react/radio-group'; +import { type RadioGroupTypes } from 'devextreme-react/radio-group'; import { data, assignees, rooms, priorities, resourcesList, diff --git a/apps/demos/Demos/Scheduler/Resources/ReactJs/App.js b/apps/demos/Demos/Scheduler/Resources/ReactJs/App.js deleted file mode 100644 index c680aff016ef..000000000000 --- a/apps/demos/Demos/Scheduler/Resources/ReactJs/App.js +++ /dev/null @@ -1,93 +0,0 @@ -import React, { useCallback, useState } from 'react'; -import Scheduler, { - Resource, - Editing, - Form as SchedulerForm, - Item, -} from 'devextreme-react/scheduler'; -import RadioGroup from 'devextreme-react/radio-group'; -import { - data, assignees, rooms, priorities, resourcesList, -} from './data.js'; - -const currentDate = new Date(2021, 3, 27); -const views = ['workWeek']; -const App = () => { - const [currentResource, setCurrentResource] = useState(resourcesList[0]); - const onRadioGroupValueChanged = useCallback((e) => { - setCurrentResource(e.value); - }, []); - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - -
-
Use colors of:
-
- -
-
- - ); -}; -export default App; diff --git a/apps/demos/Demos/Scheduler/Resources/ReactJs/data.js b/apps/demos/Demos/Scheduler/Resources/ReactJs/data.js deleted file mode 100644 index ea10053c8016..000000000000 --- a/apps/demos/Demos/Scheduler/Resources/ReactJs/data.js +++ /dev/null @@ -1,184 +0,0 @@ -export const resourcesList = ['Assignee', 'Room', 'Priority']; -export const data = [ - { - text: 'Website Re-Design Plan', - assigneeId: [4], - roomId: 1, - priorityId: 2, - startDate: new Date('2021-04-26T16:30:00.000Z'), - endDate: new Date('2021-04-26T18:30:00.000Z'), - }, - { - text: 'Book Flights to San Fran for Sales Trip', - assigneeId: [2], - roomId: 2, - priorityId: 1, - startDate: new Date('2021-04-26T19:00:00.000Z'), - endDate: new Date('2021-04-26T20:00:00.000Z'), - allDay: true, - }, - { - text: 'Install New Router in Dev Room', - assigneeId: [1], - roomId: 1, - priorityId: 2, - startDate: new Date('2021-04-26T21:30:00.000Z'), - endDate: new Date('2021-04-26T22:30:00.000Z'), - }, - { - text: 'Approve Personal Computer Upgrade Plan', - assigneeId: [3], - roomId: 2, - priorityId: 2, - startDate: new Date('2021-04-27T17:00:00.000Z'), - endDate: new Date('2021-04-27T18:00:00.000Z'), - }, - { - text: 'Final Budget Review', - assigneeId: [1], - roomId: 1, - priorityId: 1, - startDate: new Date('2021-04-27T19:00:00.000Z'), - endDate: new Date('2021-04-27T20:35:00.000Z'), - }, - { - text: 'New Brochures', - assigneeId: [4], - roomId: 3, - priorityId: 2, - startDate: new Date('2021-04-27T21:30:00.000Z'), - endDate: new Date('2021-04-27T22:45:00.000Z'), - }, - { - text: 'Install New Database', - assigneeId: [2], - roomId: 3, - priorityId: 1, - startDate: new Date('2021-04-28T16:45:00.000Z'), - endDate: new Date('2021-04-28T18:15:00.000Z'), - }, - { - text: 'Approve New Online Marketing Strategy', - assigneeId: [4], - roomId: 2, - priorityId: 1, - startDate: new Date('2021-04-28T19:00:00.000Z'), - endDate: new Date('2021-04-28T21:00:00.000Z'), - }, - { - text: 'Upgrade Personal Computers', - assigneeId: [2], - roomId: 2, - priorityId: 2, - startDate: new Date('2021-04-28T22:15:00.000Z'), - endDate: new Date('2021-04-28T23:30:00.000Z'), - }, - { - text: 'Customer Workshop', - assigneeId: [3], - roomId: 3, - priorityId: 1, - startDate: new Date('2021-04-29T18:00:00.000Z'), - endDate: new Date('2021-04-29T19:00:00.000Z'), - allDay: true, - }, - { - text: 'Prepare 2021 Marketing Plan', - assigneeId: [1], - roomId: 1, - priorityId: 2, - startDate: new Date('2021-04-29T18:00:00.000Z'), - endDate: new Date('2021-04-29T20:30:00.000Z'), - }, - { - text: 'Brochure Design Review', - assigneeId: [4], - roomId: 1, - priorityId: 1, - startDate: new Date('2021-04-29T21:00:00.000Z'), - endDate: new Date('2021-04-29T22:30:00.000Z'), - }, - { - text: 'Create Icons for Website', - assigneeId: [3], - roomId: 3, - priorityId: 1, - startDate: new Date('2021-04-30T17:00:00.000Z'), - endDate: new Date('2021-04-30T18:30:00.000Z'), - }, - { - text: 'Upgrade Server Hardware', - assigneeId: [4], - roomId: 2, - priorityId: 2, - startDate: new Date('2021-04-30T21:30:00.000Z'), - endDate: new Date('2021-04-30T23:00:00.000Z'), - }, - { - text: 'Submit New Website Design', - assigneeId: [1], - roomId: 1, - priorityId: 2, - startDate: new Date('2021-04-30T23:30:00.000Z'), - endDate: new Date('2021-05-01T01:00:00.000Z'), - }, - { - text: 'Launch New Website', - assigneeId: [2], - roomId: 3, - priorityId: 1, - startDate: new Date('2021-04-30T19:20:00.000Z'), - endDate: new Date('2021-04-30T21:00:00.000Z'), - }, -]; -export const assignees = [ - { - text: 'Samantha Bright', - id: 1, - color: '#727bd2', - }, - { - text: 'John Heart', - id: 2, - color: '#32c9ed', - }, - { - text: 'Todd Hoffman', - id: 3, - color: '#2a7ee4', - }, - { - text: 'Sandra Johnson', - id: 4, - color: '#7b49d3', - }, -]; -export const rooms = [ - { - text: 'Room 1', - id: 1, - color: '#00af2c', - }, - { - text: 'Room 2', - id: 2, - color: '#56ca85', - }, - { - text: 'Room 3', - id: 3, - color: '#8ecd3c', - }, -]; -export const priorities = [ - { - text: 'High', - id: 1, - color: '#cc5c53', - }, - { - text: 'Low', - id: 2, - color: '#ff9747', - }, -]; diff --git a/apps/demos/Demos/Scheduler/Resources/ReactJs/index.html b/apps/demos/Demos/Scheduler/Resources/ReactJs/index.html deleted file mode 100644 index db31b0fd60c6..000000000000 --- a/apps/demos/Demos/Scheduler/Resources/ReactJs/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/Resources/ReactJs/index.js b/apps/demos/Demos/Scheduler/Resources/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/Resources/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/Resources/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Resources/ReactJs/styles.css deleted file mode 100644 index 1fe9c38fdd0f..000000000000 --- a/apps/demos/Demos/Scheduler/Resources/ReactJs/styles.css +++ /dev/null @@ -1,15 +0,0 @@ -.options { - padding: 20px; - background-color: rgba(191, 191, 191, 0.15); - margin-top: 20px; -} - -.caption { - font-size: 18px; - font-weight: 500; -} - -.option { - margin-top: 10px; - display: inline-block; -} diff --git a/apps/demos/Demos/Scheduler/SignalRService/React/App.tsx b/apps/demos/Demos/Scheduler/SignalRService/React/App.tsx index 8637b0c5f722..d7fcd4c6b604 100644 --- a/apps/demos/Demos/Scheduler/SignalRService/React/App.tsx +++ b/apps/demos/Demos/Scheduler/SignalRService/React/App.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler'; +import Scheduler from 'devextreme-react/scheduler'; +import { type SchedulerTypes } from 'devextreme-react/scheduler'; import * as AspNetData from 'devextreme-aspnet-data-nojquery'; diff --git a/apps/demos/Demos/Scheduler/SignalRService/ReactJs/App.js b/apps/demos/Demos/Scheduler/SignalRService/ReactJs/App.js deleted file mode 100644 index c55f006fa192..000000000000 --- a/apps/demos/Demos/Scheduler/SignalRService/ReactJs/App.js +++ /dev/null @@ -1,84 +0,0 @@ -import React from 'react'; -import Scheduler from 'devextreme-react/scheduler'; -import * as AspNetData from 'devextreme-aspnet-data-nojquery'; -import { HubConnectionBuilder, HttpTransportType } from '@aspnet/signalr'; - -const BASE_PATH = 'https://js.devexpress.com/Demos/NetCore/'; -const url = `${BASE_PATH}api/SchedulerSignalR`; -const createStore = () => - AspNetData.createStore({ - key: 'AppointmentId', - loadUrl: url, - insertUrl: url, - updateUrl: url, - deleteUrl: url, - onBeforeSend(method, ajaxOptions) { - ajaxOptions.xhrFields = { withCredentials: true }; - }, - }); -const store1 = createStore(); -const store2 = createStore(); -const currentDate = new Date(2021, 3, 27); -const views = ['day', 'workWeek']; -const connection = new HubConnectionBuilder() - .withUrl(`${BASE_PATH}schedulerSignalRHub`, { - skipNegotiation: true, - transport: HttpTransportType.WebSockets, - }) - .build(); -connection.start().then(() => { - connection.on('update', (key, data) => { - store1.push([{ type: 'update', key, data }]); - store2.push([{ type: 'update', key, data }]); - }); - connection.on('insert', (data) => { - store1.push([{ type: 'insert', data }]); - store2.push([{ type: 'insert', data }]); - }); - connection.on('remove', (key) => { - store1.push([{ type: 'remove', key }]); - store2.push([{ type: 'remove', key }]); - }); -}); -const App = () => ( -
-
- -
-
- -
-
-); -export default App; diff --git a/apps/demos/Demos/Scheduler/SignalRService/ReactJs/index.html b/apps/demos/Demos/Scheduler/SignalRService/ReactJs/index.html deleted file mode 100644 index 4828e70dfadb..000000000000 --- a/apps/demos/Demos/Scheduler/SignalRService/ReactJs/index.html +++ /dev/null @@ -1,45 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/SignalRService/ReactJs/index.js b/apps/demos/Demos/Scheduler/SignalRService/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/SignalRService/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/SignalRService/ReactJs/styles.css b/apps/demos/Demos/Scheduler/SignalRService/ReactJs/styles.css deleted file mode 100644 index b57f7f9ea5d6..000000000000 --- a/apps/demos/Demos/Scheduler/SignalRService/ReactJs/styles.css +++ /dev/null @@ -1,15 +0,0 @@ -.schedulers { - display: flex; -} - -.column-1 { - padding-right: 5px; -} - -.column-2 { - padding-left: 5px; -} - -.dx-scheduler-small .dx-scheduler-view-switcher.dx-tabs { - display: table; -} diff --git a/apps/demos/Demos/Scheduler/SimpleArray/React/App.tsx b/apps/demos/Demos/Scheduler/SimpleArray/React/App.tsx index 0ae0ebd705d8..1ae38a676617 100644 --- a/apps/demos/Demos/Scheduler/SimpleArray/React/App.tsx +++ b/apps/demos/Demos/Scheduler/SimpleArray/React/App.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler'; +import Scheduler from 'devextreme-react/scheduler'; +import { type SchedulerTypes } from 'devextreme-react/scheduler'; import { data } from './data.ts'; diff --git a/apps/demos/Demos/Scheduler/SimpleArray/React/data.ts b/apps/demos/Demos/Scheduler/SimpleArray/React/data.ts index 225b0480ee3d..770451974563 100644 --- a/apps/demos/Demos/Scheduler/SimpleArray/React/data.ts +++ b/apps/demos/Demos/Scheduler/SimpleArray/React/data.ts @@ -1,4 +1,4 @@ -import type { SchedulerTypes } from 'devextreme-react/scheduler'; +import { type SchedulerTypes } from 'devextreme-react/scheduler'; export const data: SchedulerTypes.Appointment[] = [ { diff --git a/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/App.js b/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/App.js deleted file mode 100644 index ada8b158b8e6..000000000000 --- a/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/App.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import Scheduler from 'devextreme-react/scheduler'; -import { data } from './data.js'; - -const currentDate = new Date(2021, 2, 28); -const views = ['week', 'month']; -const App = () => ( - -); -export default App; diff --git a/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/data.js b/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/data.js deleted file mode 100644 index 8f9ddd64cd66..000000000000 --- a/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/data.js +++ /dev/null @@ -1,84 +0,0 @@ -export const data = [ - { - text: 'Website Re-Design Plan', - startDate: new Date('2021-03-29T16:30:00.000Z'), - endDate: new Date('2021-03-29T18:30:00.000Z'), - }, - { - text: 'Book Flights to San Fran for Sales Trip', - startDate: new Date('2021-03-29T19:00:00.000Z'), - endDate: new Date('2021-03-29T20:00:00.000Z'), - allDay: true, - }, - { - text: 'Install New Router in Dev Room', - startDate: new Date('2021-03-29T21:30:00.000Z'), - endDate: new Date('2021-03-29T22:30:00.000Z'), - }, - { - text: 'Approve Personal Computer Upgrade Plan', - startDate: new Date('2021-03-30T17:00:00.000Z'), - endDate: new Date('2021-03-30T18:00:00.000Z'), - }, - { - text: 'Final Budget Review', - startDate: new Date('2021-03-30T19:00:00.000Z'), - endDate: new Date('2021-03-30T20:35:00.000Z'), - }, - { - text: 'New Brochures', - startDate: new Date('2021-03-30T21:30:00.000Z'), - endDate: new Date('2021-03-30T22:45:00.000Z'), - }, - { - text: 'Install New Database', - startDate: new Date('2021-03-31T16:45:00.000Z'), - endDate: new Date('2021-03-31T18:15:00.000Z'), - }, - { - text: 'Approve New Online Marketing Strategy', - startDate: new Date('2021-03-31T19:00:00.000Z'), - endDate: new Date('2021-03-31T21:00:00.000Z'), - }, - { - text: 'Upgrade Personal Computers', - startDate: new Date('2021-03-31T22:15:00.000Z'), - endDate: new Date('2021-03-31T23:30:00.000Z'), - }, - { - text: 'Customer Workshop', - startDate: new Date('2021-04-01T18:00:00.000Z'), - endDate: new Date('2021-04-01T19:00:00.000Z'), - allDay: true, - }, - { - text: 'Prepare 2021 Marketing Plan', - startDate: new Date('2021-04-01T18:00:00.000Z'), - endDate: new Date('2021-04-01T20:30:00.000Z'), - }, - { - text: 'Brochure Design Review', - startDate: new Date('2021-04-01T21:00:00.000Z'), - endDate: new Date('2021-04-01T22:30:00.000Z'), - }, - { - text: 'Create Icons for Website', - startDate: new Date('2021-04-02T17:00:00.000Z'), - endDate: new Date('2021-04-02T18:30:00.000Z'), - }, - { - text: 'Upgrade Server Hardware', - startDate: new Date('2021-04-02T21:30:00.000Z'), - endDate: new Date('2021-04-02T23:00:00.000Z'), - }, - { - text: 'Submit New Website Design', - startDate: new Date('2021-04-02T23:30:00.000Z'), - endDate: new Date('2021-04-03T01:00:00.000Z'), - }, - { - text: 'Launch New Website', - startDate: new Date('2021-04-02T19:20:00.000Z'), - endDate: new Date('2021-04-02T21:00:00.000Z'), - }, -]; diff --git a/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/index.html b/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/index.html deleted file mode 100644 index d6d83f735a76..000000000000 --- a/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/index.js b/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/Templates/React/App.tsx b/apps/demos/Demos/Scheduler/Templates/React/App.tsx index 5099ffe32d73..4c28b9670e8f 100644 --- a/apps/demos/Demos/Scheduler/Templates/React/App.tsx +++ b/apps/demos/Demos/Scheduler/Templates/React/App.tsx @@ -5,9 +5,9 @@ import Scheduler, { Form as SchedulerForm, Item, Label, - type SchedulerTypes, } from 'devextreme-react/scheduler'; import { query } from 'devextreme-react/common/data'; +import { type SchedulerTypes } from 'devextreme-react/scheduler'; import { type SelectBoxTypes } from 'devextreme-react/select-box'; import { type FormTypes } from 'devextreme-react/form'; import { type PopupTypes } from 'devextreme-react/popup'; @@ -15,9 +15,10 @@ import Appointment from './Appointment.tsx'; import AppointmentTooltip from './AppointmentTooltip.tsx'; import MovieInfoContainer from './MovieInfoContainer.tsx'; import { - data, moviesData, theatreData, type MovieResource, + data, moviesData, theatreData, } from './data.ts'; -import type { ToolbarItem } from 'devextreme/ui/popup'; +import { type MovieResource } from './data.ts'; +import { type ToolbarItem } from 'devextreme/ui/popup'; type dxForm = NonNullable; diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/App.js b/apps/demos/Demos/Scheduler/Templates/ReactJs/App.js deleted file mode 100644 index bc24053b74da..000000000000 --- a/apps/demos/Demos/Scheduler/Templates/ReactJs/App.js +++ /dev/null @@ -1,181 +0,0 @@ -import React, { useCallback, useMemo, useRef } from 'react'; -import Scheduler, { - Editing, - Resource, - Form as SchedulerForm, - Item, - Label, -} from 'devextreme-react/scheduler'; -import { query } from 'devextreme-react/common/data'; -import Appointment from './Appointment.js'; -import AppointmentTooltip from './AppointmentTooltip.js'; -import MovieInfoContainer from './MovieInfoContainer.js'; -import { data, moviesData, theatreData } from './data.js'; - -const currentDate = new Date(2025, 3, 27); -const views = ['day', 'week', 'timelineDay']; -const groups = ['theatreId']; -const getMovieById = (id) => - id ? query(moviesData).filter(['id', '=', id]).toArray()[0] ?? null : null; -const getEditorStylingMode = () => { - const isMaterialOrFluent = document.querySelector('.dx-theme-fluent, .dx-theme-material'); - return isMaterialOrFluent ? 'filled' : 'outlined'; -}; -const priceDisplayExpr = (value) => `$${value}`; -const colCountByScreen = { xs: 2 }; -const App = () => { - const formInstanceRef = useRef(null); - const onPopupOptionChanged = useCallback((e) => { - if (e.fullName === 'toolbarItems' && e.value) { - e.value.forEach((item, index) => { - if (item.shortcut === 'done' || item.shortcut === 'cancel') { - e.component.option(`toolbarItems[${index}].toolbar`, 'bottom'); - } - }); - } - }, []); - const popupOptions = useMemo( - () => ({ - maxWidth: 440, - onOptionChanged: onPopupOptionChanged, - }), - [onPopupOptionChanged], - ); - const updateEndDate = useCallback((movie) => { - const form = formInstanceRef.current; - const formData = form?.option('formData'); - const { startDate } = formData; - if (startDate) { - const newEndDate = new Date(startDate.getTime() + 60 * 1000 * movie.duration); - form?.updateData('endDate', newEndDate); - } - }, []); - const onFormInitialized = useCallback( - (e) => { - const form = e.component; - form && (formInstanceRef.current = form); - form?.on('fieldDataChanged', (fieldEvent) => { - if (fieldEvent.dataField === 'startDate') { - const currentFormData = form?.option('formData'); - const movie = getMovieById(currentFormData.movieId); - if (movie) { - updateEndDate(movie); - } - } - }); - }, - [updateEndDate], - ); - const onMovieValueChanged = useCallback( - (e) => { - const form = formInstanceRef.current; - const movie = getMovieById(e.value); - if (movie) { - form?.updateData('director', movie.director); - updateEndDate(movie); - } - }, - [updateEndDate], - ); - const movieInfoContainerRender = useCallback( - () => , - [], - ); - const onCustomEditorContentReady = useCallback((e) => { - e.component.option('stylingMode', getEditorStylingMode()); - }, []); - const movieEditorOptions = useMemo( - () => ({ - items: moviesData, - displayExpr: 'text', - valueExpr: 'id', - stylingMode: getEditorStylingMode(), - onValueChanged: onMovieValueChanged, - onContentReady: onCustomEditorContentReady, - }), - [onMovieValueChanged, onCustomEditorContentReady], - ); - const priceEditorOptions = useMemo( - () => ({ - items: [5, 10, 15, 20], - displayExpr: priceDisplayExpr, - stylingMode: getEditorStylingMode(), - onContentReady: onCustomEditorContentReady, - }), - [onCustomEditorContentReady], - ); - return ( - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; -export default App; diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/Appointment.js b/apps/demos/Demos/Scheduler/Templates/ReactJs/Appointment.js deleted file mode 100644 index 924b55367367..000000000000 --- a/apps/demos/Demos/Scheduler/Templates/ReactJs/Appointment.js +++ /dev/null @@ -1,35 +0,0 @@ -import React, { useMemo } from 'react'; -import { query as Query } from 'devextreme-react/common/data'; -import { formatDate } from 'devextreme-react/common/core/localization'; -import { moviesData } from './data.js'; - -const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0]; -const Appointment = (props) => { - const { targetedAppointmentData } = props.data; - const { - movieId, price, displayStartDate, displayEndDate, - } = targetedAppointmentData; - const movieData = useMemo(() => getMovieById(movieId), [movieId]); - return ( -
-
- {movieData.text} -
-
-
{movieData.text}
-
- Ticket Price: ${price} -
-
- {formatDate(displayStartDate, 'shortTime')} - {' - '} - {formatDate(displayEndDate, 'shortTime')} -
-
-
- ); -}; -export default Appointment; diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/AppointmentTooltip.js b/apps/demos/Demos/Scheduler/Templates/ReactJs/AppointmentTooltip.js deleted file mode 100644 index 9d38e81296d3..000000000000 --- a/apps/demos/Demos/Scheduler/Templates/ReactJs/AppointmentTooltip.js +++ /dev/null @@ -1,27 +0,0 @@ -import React, { useMemo } from 'react'; -import { query as Query } from 'devextreme-react/common/data'; -import { moviesData } from './data.js'; - -const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0]; -const AppointmentTooltip = ({ data }) => { - const { movieId } = data.appointmentData; - const movieData = useMemo(() => getMovieById(movieId), [movieId]); - return ( -
-
- {movieData.text} -
-
-
- {movieData.text} ({movieData.year}) -
-
Director: {movieData.director}
-
Duration: {movieData.duration} minutes
-
-
- ); -}; -export default AppointmentTooltip; diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/MovieInfoContainer.js b/apps/demos/Demos/Scheduler/Templates/ReactJs/MovieInfoContainer.js deleted file mode 100644 index fff4c39573fc..000000000000 --- a/apps/demos/Demos/Scheduler/Templates/ReactJs/MovieInfoContainer.js +++ /dev/null @@ -1,54 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { query } from 'devextreme-react/common/data'; -import { moviesData } from './data.js'; - -const getMovieById = (id) => - id ? query(moviesData).filter(['id', '=', id]).toArray()[0] ?? null : null; -const MovieInfoContainer = ({ formInstanceRef }) => { - const [movie, setMovie] = useState(null); - useEffect(() => { - const form = formInstanceRef.current; - const formData = form?.option('formData'); - const currentMovie = getMovieById(formData.movieId); - setMovie(currentMovie); - const handleFieldDataChanged = (e) => { - if (e.dataField === 'movieId') { - const updatedMovie = getMovieById(e.value); - setMovie(updatedMovie); - } - }; - form?.on('fieldDataChanged', handleFieldDataChanged); - return () => { - form?.off('fieldDataChanged', handleFieldDataChanged); - }; - }, [formInstanceRef]); - return ( -
- {movie ? ( -
-
- {movie.text} -
-
-
- {movie.text} ({movie.year}) -
-
Director: {movie.director}
-
Duration: {movie.duration} minutes
-
-
- ) : ( -
-
-
-
Select a movie
-
-
- )} -
- ); -}; -export default MovieInfoContainer; diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/data.js b/apps/demos/Demos/Scheduler/Templates/ReactJs/data.js deleted file mode 100644 index 678c9317db61..000000000000 --- a/apps/demos/Demos/Scheduler/Templates/ReactJs/data.js +++ /dev/null @@ -1,1279 +0,0 @@ -export const moviesData = [ - { - id: 1, - text: 'His Girl Friday', - director: 'Howard Hawks', - year: 1940, - image: '../../../../images/movies/HisGirlFriday.jpg', - duration: 92, - color: '#9FD89F', - }, - { - id: 2, - text: 'Royal Wedding', - director: 'Stanley Donen', - year: 1951, - image: '../../../../images/movies/RoyalWedding.jpg', - duration: 93, - color: '#F1BBBC', - }, - { - id: 3, - text: 'A Star Is Born', - director: 'William A. Wellman', - year: 1937, - image: '../../../../images/movies/AStartIsBorn.jpg', - duration: 111, - color: '#F9E2AE', - }, - { - id: 4, - text: 'The Screaming Skull', - director: 'Alex Nicol', - year: 1958, - image: '../../../../images/movies/ScreamingSkull.jpg', - duration: 68, - color: '#EDBBE7', - }, - { - id: 5, - text: "It's a Wonderful Life", - director: 'Frank Capra', - year: 1946, - image: '../../../../images/movies/ItsAWonderfulLife.jpg', - duration: 130, - color: '#B4D6FA', - }, - { - id: 6, - text: 'City Lights', - director: 'Charlie Chaplin', - year: 1931, - image: '../../../../images/movies/CityLights.jpg', - duration: 87, - color: '#C6B1DE', - }, -]; -export const theatreData = [ - { - text: 'Cinema Hall 1', - id: 0, - }, - { - text: 'Cinema Hall 2', - id: 1, - }, -]; -export const data = [ - { - theatreId: 0, - movieId: 3, - price: 10, - startDate: new Date('2025-04-26T16:10:00.000Z'), - endDate: new Date('2025-04-26T18:01:00.000Z'), - }, - { - theatreId: 0, - movieId: 1, - price: 5, - startDate: new Date('2025-04-26T18:30:00.000Z'), - endDate: new Date('2025-04-26T20:02:00.000Z'), - }, - { - theatreId: 0, - movieId: 3, - price: 15, - startDate: new Date('2025-04-26T20:30:00.000Z'), - endDate: new Date('2025-04-26T22:21:00.000Z'), - }, - { - theatreId: 0, - movieId: 4, - price: 5, - startDate: new Date('2025-04-26T23:00:00.000Z'), - endDate: new Date('2025-04-27T00:08:00.000Z'), - }, - { - theatreId: 0, - movieId: 2, - price: 10, - startDate: new Date('2025-04-27T00:30:00.000Z'), - endDate: new Date('2025-04-27T02:03:00.000Z'), - }, - { - theatreId: 0, - movieId: 1, - price: 10, - startDate: new Date('2025-04-27T02:30:00.000Z'), - endDate: new Date('2025-04-27T04:02:00.000Z'), - }, - { - theatreId: 0, - movieId: 2, - price: 10, - startDate: new Date('2025-04-27T04:20:00.000Z'), - endDate: new Date('2025-04-27T05:53:00.000Z'), - }, - { - theatreId: 0, - movieId: 5, - price: 10, - startDate: new Date('2025-04-27T16:10:00.000Z'), - endDate: new Date('2025-04-27T18:20:00.000Z'), - }, - { - theatreId: 0, - movieId: 2, - price: 5, - startDate: new Date('2025-04-27T19:00:00.000Z'), - endDate: new Date('2025-04-27T20:33:00.000Z'), - }, - { - theatreId: 0, - movieId: 3, - price: 5, - startDate: new Date('2025-04-27T21:00:00.000Z'), - endDate: new Date('2025-04-27T22:51:00.000Z'), - }, - { - theatreId: 0, - movieId: 4, - price: 5, - startDate: new Date('2025-04-27T23:20:00.000Z'), - endDate: new Date('2025-04-28T00:28:00.000Z'), - }, - { - theatreId: 0, - movieId: 1, - price: 10, - startDate: new Date('2025-04-28T01:00:00.000Z'), - endDate: new Date('2025-04-28T02:32:00.000Z'), - }, - { - theatreId: 0, - movieId: 2, - price: 15, - startDate: new Date('2025-04-28T03:00:00.000Z'), - endDate: new Date('2025-04-28T04:33:00.000Z'), - }, - { - theatreId: 0, - movieId: 4, - price: 5, - startDate: new Date('2025-04-28T04:50:00.000Z'), - endDate: new Date('2025-04-28T05:58:00.000Z'), - }, - { - theatreId: 0, - movieId: 1, - price: 5, - startDate: new Date('2025-04-28T16:00:00.000Z'), - endDate: new Date('2025-04-28T17:32:00.000Z'), - }, - { - theatreId: 0, - movieId: 2, - price: 5, - startDate: new Date('2025-04-28T18:00:00.000Z'), - endDate: new Date('2025-04-28T19:33:00.000Z'), - }, - { - theatreId: 0, - movieId: 3, - price: 10, - startDate: new Date('2025-04-28T20:20:00.000Z'), - endDate: new Date('2025-04-28T22:11:00.000Z'), - }, - { - theatreId: 0, - movieId: 5, - price: 15, - startDate: new Date('2025-04-28T22:45:00.000Z'), - endDate: new Date('2025-04-29T00:55:00.000Z'), - }, - { - theatreId: 0, - movieId: 4, - price: 10, - startDate: new Date('2025-04-29T01:20:00.000Z'), - endDate: new Date('2025-04-29T02:28:00.000Z'), - }, - { - theatreId: 0, - movieId: 5, - price: 20, - startDate: new Date('2025-04-29T03:00:00.000Z'), - endDate: new Date('2025-04-29T05:10:00.000Z'), - }, - { - theatreId: 0, - movieId: 1, - price: 5, - startDate: new Date('2025-04-29T16:00:00.000Z'), - endDate: new Date('2025-04-29T17:32:00.000Z'), - }, - { - theatreId: 0, - movieId: 2, - price: 5, - startDate: new Date('2025-04-29T18:00:00.000Z'), - endDate: new Date('2025-04-29T19:33:00.000Z'), - }, - { - theatreId: 0, - movieId: 3, - price: 10, - startDate: new Date('2025-04-29T20:20:00.000Z'), - endDate: new Date('2025-04-29T22:11:00.000Z'), - }, - { - theatreId: 0, - movieId: 5, - price: 10, - startDate: new Date('2025-04-29T22:45:00.000Z'), - endDate: new Date('2025-04-30T00:55:00.000Z'), - }, - { - theatreId: 0, - movieId: 4, - price: 5, - startDate: new Date('2025-04-30T01:20:00.000Z'), - endDate: new Date('2025-04-30T02:28:00.000Z'), - }, - { - theatreId: 0, - movieId: 5, - price: 15, - startDate: new Date('2025-04-30T03:00:00.000Z'), - endDate: new Date('2025-04-30T05:10:00.000Z'), - }, - { - theatreId: 0, - movieId: 2, - price: 5, - startDate: new Date('2025-04-30T16:30:00.000Z'), - endDate: new Date('2025-04-30T18:03:00.000Z'), - }, - { - theatreId: 0, - movieId: 1, - price: 5, - startDate: new Date('2025-04-30T18:30:00.000Z'), - endDate: new Date('2025-04-30T20:02:00.000Z'), - }, - { - theatreId: 0, - movieId: 3, - price: 5, - startDate: new Date('2025-04-30T20:30:00.000Z'), - endDate: new Date('2025-04-30T22:21:00.000Z'), - }, - { - theatreId: 0, - movieId: 5, - price: 10, - startDate: new Date('2025-04-30T23:00:00.000Z'), - endDate: new Date('2025-05-01T01:10:00.000Z'), - }, - { - theatreId: 0, - movieId: 4, - price: 5, - startDate: new Date('2025-05-01T01:30:00.000Z'), - endDate: new Date('2025-05-01T02:38:00.000Z'), - }, - { - theatreId: 0, - movieId: 3, - price: 15, - startDate: new Date('2025-05-01T03:20:00.000Z'), - endDate: new Date('2025-05-01T05:11:00.000Z'), - }, - { - theatreId: 0, - movieId: 2, - price: 5, - startDate: new Date('2025-05-01T16:30:00.000Z'), - endDate: new Date('2025-05-01T18:03:00.000Z'), - }, - { - theatreId: 0, - movieId: 1, - price: 10, - startDate: new Date('2025-05-01T18:30:00.000Z'), - endDate: new Date('2025-05-01T20:02:00.000Z'), - }, - { - theatreId: 0, - movieId: 3, - price: 10, - startDate: new Date('2025-05-01T20:30:00.000Z'), - endDate: new Date('2025-05-01T22:21:00.000Z'), - }, - { - theatreId: 0, - movieId: 5, - price: 10, - startDate: new Date('2025-05-01T23:00:00.000Z'), - endDate: new Date('2025-05-02T01:10:00.000Z'), - }, - { - theatreId: 0, - movieId: 4, - price: 10, - startDate: new Date('2025-05-02T01:30:00.000Z'), - endDate: new Date('2025-05-02T02:38:00.000Z'), - }, - { - theatreId: 0, - movieId: 3, - price: 10, - startDate: new Date('2025-05-02T03:20:00.000Z'), - endDate: new Date('2025-05-02T05:11:00.000Z'), - }, - { - theatreId: 0, - movieId: 2, - price: 5, - startDate: new Date('2025-05-02T16:30:00.000Z'), - endDate: new Date('2025-05-02T18:03:00.000Z'), - }, - { - theatreId: 0, - movieId: 1, - price: 5, - startDate: new Date('2025-05-02T18:30:00.000Z'), - endDate: new Date('2025-05-02T20:02:00.000Z'), - }, - { - theatreId: 0, - movieId: 3, - price: 10, - startDate: new Date('2025-05-02T20:30:00.000Z'), - endDate: new Date('2025-05-02T22:21:00.000Z'), - }, - { - theatreId: 0, - movieId: 5, - price: 15, - startDate: new Date('2025-05-02T23:00:00.000Z'), - endDate: new Date('2025-05-03T01:10:00.000Z'), - }, - { - theatreId: 0, - movieId: 4, - price: 10, - startDate: new Date('2025-05-03T01:30:00.000Z'), - endDate: new Date('2025-05-03T02:38:00.000Z'), - }, - { - theatreId: 0, - movieId: 3, - price: 15, - startDate: new Date('2025-05-03T03:20:00.000Z'), - endDate: new Date('2025-05-03T05:11:00.000Z'), - }, - { - theatreId: 0, - movieId: 2, - price: 5, - startDate: new Date('2025-05-03T16:30:00.000Z'), - endDate: new Date('2025-05-03T18:03:00.000Z'), - }, - { - theatreId: 0, - movieId: 6, - price: 15, - startDate: new Date('2025-05-03T18:30:00.000Z'), - endDate: new Date('2025-05-03T19:57:00.000Z'), - }, - { - theatreId: 0, - movieId: 3, - price: 10, - startDate: new Date('2025-05-03T20:20:00.000Z'), - endDate: new Date('2025-05-03T22:11:00.000Z'), - }, - { - theatreId: 0, - movieId: 1, - price: 5, - startDate: new Date('2025-05-03T23:00:00.000Z'), - endDate: new Date('2025-05-04T00:32:00.000Z'), - }, - { - theatreId: 0, - movieId: 2, - price: 10, - startDate: new Date('2025-05-04T01:00:00.000Z'), - endDate: new Date('2025-05-04T02:33:00.000Z'), - }, - { - theatreId: 0, - movieId: 6, - price: 20, - startDate: new Date('2025-05-04T03:00:00.000Z'), - endDate: new Date('2025-05-04T04:27:00.000Z'), - }, - { - theatreId: 0, - movieId: 4, - price: 15, - startDate: new Date('2025-05-04T04:50:00.000Z'), - endDate: new Date('2025-05-04T05:58:00.000Z'), - }, - { - theatreId: 0, - movieId: 1, - price: 5, - startDate: new Date('2025-05-04T16:30:00.000Z'), - endDate: new Date('2025-05-04T18:02:00.000Z'), - }, - { - theatreId: 0, - movieId: 2, - price: 5, - startDate: new Date('2025-05-04T18:30:00.000Z'), - endDate: new Date('2025-05-04T20:03:00.000Z'), - }, - { - theatreId: 0, - movieId: 3, - price: 10, - startDate: new Date('2025-05-04T20:30:00.000Z'), - endDate: new Date('2025-05-04T22:21:00.000Z'), - }, - { - theatreId: 0, - movieId: 3, - price: 10, - startDate: new Date('2025-05-04T22:30:00.000Z'), - endDate: new Date('2025-05-05T00:21:00.000Z'), - }, - { - theatreId: 0, - movieId: 6, - price: 15, - startDate: new Date('2025-05-05T00:30:00.000Z'), - endDate: new Date('2025-05-05T01:57:00.000Z'), - }, - { - theatreId: 0, - movieId: 5, - price: 15, - startDate: new Date('2025-05-05T03:00:00.000Z'), - endDate: new Date('2025-05-05T05:10:00.000Z'), - }, - { - theatreId: 0, - movieId: 1, - price: 5, - startDate: new Date('2025-05-05T16:00:00.000Z'), - endDate: new Date('2025-05-05T17:32:00.000Z'), - }, - { - theatreId: 0, - movieId: 2, - price: 5, - startDate: new Date('2025-05-05T18:00:00.000Z'), - endDate: new Date('2025-05-05T19:33:00.000Z'), - }, - { - theatreId: 0, - movieId: 3, - price: 10, - startDate: new Date('2025-05-05T20:00:00.000Z'), - endDate: new Date('2025-05-05T21:51:00.000Z'), - }, - { - theatreId: 0, - movieId: 3, - price: 10, - startDate: new Date('2025-05-05T22:30:00.000Z'), - endDate: new Date('2025-05-06T00:21:00.000Z'), - }, - { - theatreId: 0, - movieId: 6, - price: 15, - startDate: new Date('2025-05-06T00:30:00.000Z'), - endDate: new Date('2025-05-06T01:57:00.000Z'), - }, - { - theatreId: 0, - movieId: 5, - price: 15, - startDate: new Date('2025-05-06T03:00:00.000Z'), - endDate: new Date('2025-05-06T05:10:00.000Z'), - }, - { - theatreId: 0, - movieId: 1, - price: 5, - startDate: new Date('2025-05-06T16:00:00.000Z'), - endDate: new Date('2025-05-06T17:32:00.000Z'), - }, - { - theatreId: 0, - movieId: 2, - price: 5, - startDate: new Date('2025-05-06T18:00:00.000Z'), - endDate: new Date('2025-05-06T19:33:00.000Z'), - }, - { - theatreId: 0, - movieId: 3, - price: 10, - startDate: new Date('2025-05-06T20:00:00.000Z'), - endDate: new Date('2025-05-06T21:51:00.000Z'), - }, - { - theatreId: 0, - movieId: 3, - price: 10, - startDate: new Date('2025-05-06T22:30:00.000Z'), - endDate: new Date('2025-05-07T00:21:00.000Z'), - }, - { - theatreId: 0, - movieId: 6, - price: 15, - startDate: new Date('2025-05-07T00:30:00.000Z'), - endDate: new Date('2025-05-07T01:57:00.000Z'), - }, - { - theatreId: 0, - movieId: 5, - price: 15, - startDate: new Date('2025-05-07T03:00:00.000Z'), - endDate: new Date('2025-05-07T05:10:00.000Z'), - }, - { - theatreId: 0, - movieId: 2, - price: 5, - startDate: new Date('2025-05-07T16:00:00.000Z'), - endDate: new Date('2025-05-07T17:33:00.000Z'), - }, - { - theatreId: 0, - movieId: 1, - price: 5, - startDate: new Date('2025-05-07T18:00:00.000Z'), - endDate: new Date('2025-05-07T19:32:00.000Z'), - }, - { - theatreId: 0, - movieId: 3, - price: 10, - startDate: new Date('2025-05-07T20:00:00.000Z'), - endDate: new Date('2025-05-07T21:51:00.000Z'), - }, - { - theatreId: 0, - movieId: 5, - price: 10, - startDate: new Date('2025-05-07T22:30:00.000Z'), - endDate: new Date('2025-05-08T00:40:00.000Z'), - }, - { - theatreId: 0, - movieId: 6, - price: 15, - startDate: new Date('2025-05-08T01:00:00.000Z'), - endDate: new Date('2025-05-08T02:27:00.000Z'), - }, - { - theatreId: 0, - movieId: 1, - price: 15, - startDate: new Date('2025-05-08T03:00:00.000Z'), - endDate: new Date('2025-05-08T04:32:00.000Z'), - }, - { - theatreId: 0, - movieId: 2, - price: 5, - startDate: new Date('2025-05-08T16:00:00.000Z'), - endDate: new Date('2025-05-08T17:33:00.000Z'), - }, - { - theatreId: 0, - movieId: 1, - price: 5, - startDate: new Date('2025-05-08T18:00:00.000Z'), - endDate: new Date('2025-05-08T19:32:00.000Z'), - }, - { - theatreId: 0, - movieId: 3, - price: 10, - startDate: new Date('2025-05-08T20:00:00.000Z'), - endDate: new Date('2025-05-08T21:51:00.000Z'), - }, - { - theatreId: 0, - movieId: 5, - price: 10, - startDate: new Date('2025-05-08T22:30:00.000Z'), - endDate: new Date('2025-05-09T00:40:00.000Z'), - }, - { - theatreId: 0, - movieId: 6, - price: 15, - startDate: new Date('2025-05-09T01:00:00.000Z'), - endDate: new Date('2025-05-09T02:27:00.000Z'), - }, - { - theatreId: 0, - movieId: 1, - price: 15, - startDate: new Date('2025-05-09T03:00:00.000Z'), - endDate: new Date('2025-05-09T04:32:00.000Z'), - }, - { - theatreId: 0, - movieId: 2, - price: 5, - startDate: new Date('2025-05-09T16:00:00.000Z'), - endDate: new Date('2025-05-09T17:33:00.000Z'), - }, - { - theatreId: 0, - movieId: 1, - price: 5, - startDate: new Date('2025-05-09T18:00:00.000Z'), - endDate: new Date('2025-05-09T19:32:00.000Z'), - }, - { - theatreId: 0, - movieId: 3, - price: 10, - startDate: new Date('2025-05-09T20:00:00.000Z'), - endDate: new Date('2025-05-09T21:51:00.000Z'), - }, - { - theatreId: 0, - movieId: 5, - price: 10, - startDate: new Date('2025-05-09T22:30:00.000Z'), - endDate: new Date('2025-05-10T00:40:00.000Z'), - }, - { - theatreId: 0, - movieId: 6, - price: 15, - startDate: new Date('2025-05-10T01:00:00.000Z'), - endDate: new Date('2025-05-10T02:27:00.000Z'), - }, - { - theatreId: 0, - movieId: 1, - price: 15, - startDate: new Date('2025-05-10T03:00:00.000Z'), - endDate: new Date('2025-05-10T04:32:00.000Z'), - }, - { - theatreId: 1, - movieId: 3, - price: 10, - startDate: new Date('2025-04-26T16:10:00.000Z'), - endDate: new Date('2025-04-26T18:01:00.000Z'), - }, - { - theatreId: 1, - movieId: 1, - price: 5, - startDate: new Date('2025-04-26T19:00:00.000Z'), - endDate: new Date('2025-04-26T20:32:00.000Z'), - }, - { - theatreId: 1, - movieId: 3, - price: 15, - startDate: new Date('2025-04-26T21:00:00.000Z'), - endDate: new Date('2025-04-26T22:51:00.000Z'), - }, - { - theatreId: 1, - movieId: 4, - price: 5, - startDate: new Date('2025-04-26T23:10:00.000Z'), - endDate: new Date('2025-04-27T00:18:00.000Z'), - }, - { - theatreId: 1, - movieId: 2, - price: 10, - startDate: new Date('2025-04-27T00:30:00.000Z'), - endDate: new Date('2025-04-27T02:03:00.000Z'), - }, - { - theatreId: 1, - movieId: 1, - price: 10, - startDate: new Date('2025-04-27T02:30:00.000Z'), - endDate: new Date('2025-04-27T04:02:00.000Z'), - }, - { - theatreId: 1, - movieId: 2, - price: 10, - startDate: new Date('2025-04-27T04:20:00.000Z'), - endDate: new Date('2025-04-27T05:53:00.000Z'), - }, - { - theatreId: 1, - movieId: 1, - price: 5, - startDate: new Date('2025-04-27T16:30:00.000Z'), - endDate: new Date('2025-04-27T18:02:00.000Z'), - }, - { - theatreId: 1, - movieId: 2, - price: 5, - startDate: new Date('2025-04-27T18:30:00.000Z'), - endDate: new Date('2025-04-27T20:03:00.000Z'), - }, - { - theatreId: 1, - movieId: 5, - price: 15, - startDate: new Date('2025-04-27T20:30:00.000Z'), - endDate: new Date('2025-04-27T22:40:00.000Z'), - }, - { - theatreId: 1, - movieId: 4, - price: 5, - startDate: new Date('2025-04-27T23:00:00.000Z'), - endDate: new Date('2025-04-28T00:08:00.000Z'), - }, - { - theatreId: 1, - movieId: 1, - price: 10, - startDate: new Date('2025-04-28T00:30:00.000Z'), - endDate: new Date('2025-04-28T02:02:00.000Z'), - }, - { - theatreId: 1, - movieId: 2, - price: 15, - startDate: new Date('2025-04-28T02:40:00.000Z'), - endDate: new Date('2025-04-28T04:13:00.000Z'), - }, - { - theatreId: 1, - movieId: 4, - price: 5, - startDate: new Date('2025-04-28T04:40:00.000Z'), - endDate: new Date('2025-04-28T05:48:00.000Z'), - }, - { - theatreId: 1, - movieId: 1, - price: 5, - startDate: new Date('2025-04-28T16:30:00.000Z'), - endDate: new Date('2025-04-28T18:02:00.000Z'), - }, - { - theatreId: 1, - movieId: 2, - price: 5, - startDate: new Date('2025-04-28T18:30:00.000Z'), - endDate: new Date('2025-04-28T20:03:00.000Z'), - }, - { - theatreId: 1, - movieId: 5, - price: 10, - startDate: new Date('2025-04-28T20:30:00.000Z'), - endDate: new Date('2025-04-28T22:41:00.000Z'), - }, - { - theatreId: 1, - movieId: 5, - price: 15, - startDate: new Date('2025-04-28T23:00:00.000Z'), - endDate: new Date('2025-04-29T01:10:00.000Z'), - }, - { - theatreId: 1, - movieId: 4, - price: 10, - startDate: new Date('2025-04-29T01:30:00.000Z'), - endDate: new Date('2025-04-29T02:38:00.000Z'), - }, - { - theatreId: 1, - movieId: 5, - price: 20, - startDate: new Date('2025-04-29T03:20:00.000Z'), - endDate: new Date('2025-04-29T05:30:00.000Z'), - }, - { - theatreId: 1, - movieId: 1, - price: 5, - startDate: new Date('2025-04-29T16:30:00.000Z'), - endDate: new Date('2025-04-29T18:02:00.000Z'), - }, - { - theatreId: 1, - movieId: 2, - price: 5, - startDate: new Date('2025-04-29T18:30:00.000Z'), - endDate: new Date('2025-04-29T20:03:00.000Z'), - }, - { - theatreId: 1, - movieId: 5, - price: 10, - startDate: new Date('2025-04-29T20:30:00.000Z'), - endDate: new Date('2025-04-29T22:41:00.000Z'), - }, - { - theatreId: 1, - movieId: 5, - price: 10, - startDate: new Date('2025-04-29T23:00:00.000Z'), - endDate: new Date('2025-04-30T01:10:00.000Z'), - }, - { - theatreId: 1, - movieId: 4, - price: 5, - startDate: new Date('2025-04-30T01:30:00.000Z'), - endDate: new Date('2025-04-30T02:38:00.000Z'), - }, - { - theatreId: 1, - movieId: 5, - price: 15, - startDate: new Date('2025-04-30T03:20:00.000Z'), - endDate: new Date('2025-04-30T05:30:00.000Z'), - }, - { - theatreId: 1, - movieId: 2, - price: 5, - startDate: new Date('2025-04-30T16:10:00.000Z'), - endDate: new Date('2025-04-30T17:43:00.000Z'), - }, - { - theatreId: 1, - movieId: 1, - price: 5, - startDate: new Date('2025-04-30T18:00:00.000Z'), - endDate: new Date('2025-04-30T19:32:00.000Z'), - }, - { - theatreId: 1, - movieId: 3, - price: 5, - startDate: new Date('2025-04-30T20:10:00.000Z'), - endDate: new Date('2025-04-30T22:01:00.000Z'), - }, - { - theatreId: 1, - movieId: 5, - price: 10, - startDate: new Date('2025-04-30T22:40:00.000Z'), - endDate: new Date('2025-05-01T00:50:00.000Z'), - }, - { - theatreId: 1, - movieId: 4, - price: 5, - startDate: new Date('2025-05-01T01:20:00.000Z'), - endDate: new Date('2025-05-01T02:28:00.000Z'), - }, - { - theatreId: 1, - movieId: 3, - price: 15, - startDate: new Date('2025-05-01T03:20:00.000Z'), - endDate: new Date('2025-05-01T05:11:00.000Z'), - }, - { - theatreId: 1, - movieId: 2, - price: 5, - startDate: new Date('2025-05-01T17:00:00.000Z'), - endDate: new Date('2025-05-01T18:33:00.000Z'), - }, - { - theatreId: 1, - movieId: 1, - price: 10, - startDate: new Date('2025-05-01T19:00:00.000Z'), - endDate: new Date('2025-05-01T20:32:00.000Z'), - }, - { - theatreId: 1, - movieId: 3, - price: 10, - startDate: new Date('2025-05-01T21:00:00.000Z'), - endDate: new Date('2025-05-01T22:51:00.000Z'), - }, - { - theatreId: 1, - movieId: 5, - price: 10, - startDate: new Date('2025-05-01T23:30:00.000Z'), - endDate: new Date('2025-05-02T01:40:00.000Z'), - }, - { - theatreId: 1, - movieId: 4, - price: 10, - startDate: new Date('2025-05-02T02:00:00.000Z'), - endDate: new Date('2025-05-02T03:08:00.000Z'), - }, - { - theatreId: 1, - movieId: 5, - price: 20, - startDate: new Date('2025-05-02T03:30:00.000Z'), - endDate: new Date('2025-05-02T05:50:00.000Z'), - }, - { - theatreId: 1, - movieId: 2, - price: 5, - startDate: new Date('2025-05-02T17:00:00.000Z'), - endDate: new Date('2025-05-02T18:33:00.000Z'), - }, - { - theatreId: 1, - movieId: 1, - price: 5, - startDate: new Date('2025-05-02T19:00:00.000Z'), - endDate: new Date('2025-05-02T20:32:00.000Z'), - }, - { - theatreId: 1, - movieId: 3, - price: 10, - startDate: new Date('2025-05-02T21:00:00.000Z'), - endDate: new Date('2025-05-02T22:51:00.000Z'), - }, - { - theatreId: 1, - movieId: 5, - price: 15, - startDate: new Date('2025-05-02T23:30:00.000Z'), - endDate: new Date('2025-05-03T01:40:00.000Z'), - }, - { - theatreId: 1, - movieId: 4, - price: 10, - startDate: new Date('2025-05-03T02:00:00.000Z'), - endDate: new Date('2025-05-03T03:08:00.000Z'), - }, - { - theatreId: 1, - movieId: 5, - price: 15, - startDate: new Date('2025-05-03T03:30:00.000Z'), - endDate: new Date('2025-05-03T05:50:00.000Z'), - }, - { - theatreId: 1, - movieId: 2, - price: 5, - startDate: new Date('2025-05-03T17:00:00.000Z'), - endDate: new Date('2025-05-03T18:33:00.000Z'), - }, - { - theatreId: 1, - movieId: 6, - price: 15, - startDate: new Date('2025-05-03T19:00:00.000Z'), - endDate: new Date('2025-05-03T20:27:00.000Z'), - }, - { - theatreId: 1, - movieId: 3, - price: 10, - startDate: new Date('2025-05-03T21:00:00.000Z'), - endDate: new Date('2025-05-03T22:51:00.000Z'), - }, - { - theatreId: 1, - movieId: 1, - price: 10, - startDate: new Date('2025-05-03T23:30:00.000Z'), - endDate: new Date('2025-05-04T01:02:00.000Z'), - }, - { - theatreId: 1, - movieId: 5, - price: 15, - startDate: new Date('2025-05-04T01:30:00.000Z'), - endDate: new Date('2025-05-04T03:40:00.000Z'), - }, - { - theatreId: 1, - movieId: 6, - price: 20, - startDate: new Date('2025-05-04T04:00:00.000Z'), - endDate: new Date('2025-05-04T05:27:00.000Z'), - }, - { - theatreId: 1, - movieId: 1, - price: 5, - startDate: new Date('2025-05-04T16:30:00.000Z'), - endDate: new Date('2025-05-04T18:02:00.000Z'), - }, - { - theatreId: 1, - movieId: 6, - price: 5, - startDate: new Date('2025-05-04T19:00:00.000Z'), - endDate: new Date('2025-05-04T20:27:00.000Z'), - }, - { - theatreId: 1, - movieId: 3, - price: 10, - startDate: new Date('2025-05-04T21:00:00.000Z'), - endDate: new Date('2025-05-04T22:51:00.000Z'), - }, - { - theatreId: 1, - movieId: 3, - price: 10, - startDate: new Date('2025-05-04T23:30:00.000Z'), - endDate: new Date('2025-05-05T01:21:00.000Z'), - }, - { - theatreId: 1, - movieId: 6, - price: 15, - startDate: new Date('2025-05-05T01:30:00.000Z'), - endDate: new Date('2025-05-05T02:57:00.000Z'), - }, - { - theatreId: 1, - movieId: 2, - price: 15, - startDate: new Date('2025-05-05T03:30:00.000Z'), - endDate: new Date('2025-05-05T05:03:00.000Z'), - }, - { - theatreId: 1, - movieId: 1, - price: 5, - startDate: new Date('2025-05-05T16:30:00.000Z'), - endDate: new Date('2025-05-05T18:02:00.000Z'), - }, - { - theatreId: 1, - movieId: 6, - price: 5, - startDate: new Date('2025-05-05T19:00:00.000Z'), - endDate: new Date('2025-05-05T20:27:00.000Z'), - }, - { - theatreId: 1, - movieId: 3, - price: 10, - startDate: new Date('2025-05-05T21:00:00.000Z'), - endDate: new Date('2025-05-05T22:51:00.000Z'), - }, - { - theatreId: 1, - movieId: 2, - price: 10, - startDate: new Date('2025-05-05T23:30:00.000Z'), - endDate: new Date('2025-05-06T01:03:00.000Z'), - }, - { - theatreId: 1, - movieId: 6, - price: 15, - startDate: new Date('2025-05-06T01:30:00.000Z'), - endDate: new Date('2025-05-06T02:57:00.000Z'), - }, - { - theatreId: 1, - movieId: 2, - price: 15, - startDate: new Date('2025-05-06T03:30:00.000Z'), - endDate: new Date('2025-05-06T05:03:00.000Z'), - }, - { - theatreId: 1, - movieId: 1, - price: 5, - startDate: new Date('2025-05-06T16:30:00.000Z'), - endDate: new Date('2025-05-06T18:02:00.000Z'), - }, - { - theatreId: 1, - movieId: 2, - price: 5, - startDate: new Date('2025-05-06T18:30:00.000Z'), - endDate: new Date('2025-05-06T20:03:00.000Z'), - }, - { - theatreId: 1, - movieId: 6, - price: 10, - startDate: new Date('2025-05-06T21:00:00.000Z'), - endDate: new Date('2025-05-06T22:27:00.000Z'), - }, - { - theatreId: 1, - movieId: 3, - price: 10, - startDate: new Date('2025-05-06T23:00:00.000Z'), - endDate: new Date('2025-05-07T00:51:00.000Z'), - }, - { - theatreId: 1, - movieId: 6, - price: 15, - startDate: new Date('2025-05-07T01:10:00.000Z'), - endDate: new Date('2025-05-07T02:37:00.000Z'), - }, - { - theatreId: 1, - movieId: 5, - price: 20, - startDate: new Date('2025-05-07T03:30:00.000Z'), - endDate: new Date('2025-05-07T05:40:00.000Z'), - }, - { - theatreId: 1, - movieId: 2, - price: 5, - startDate: new Date('2025-05-07T16:30:00.000Z'), - endDate: new Date('2025-05-07T18:02:00.000Z'), - }, - { - theatreId: 1, - movieId: 1, - price: 5, - startDate: new Date('2025-05-07T18:30:00.000Z'), - endDate: new Date('2025-05-07T20:02:00.000Z'), - }, - { - theatreId: 1, - movieId: 6, - price: 10, - startDate: new Date('2025-05-07T21:00:00.000Z'), - endDate: new Date('2025-05-07T22:27:00.000Z'), - }, - { - theatreId: 1, - movieId: 5, - price: 10, - startDate: new Date('2025-05-07T23:00:00.000Z'), - endDate: new Date('2025-05-08T00:51:00.000Z'), - }, - { - theatreId: 1, - movieId: 6, - price: 15, - startDate: new Date('2025-05-08T01:10:00.000Z'), - endDate: new Date('2025-05-08T02:37:00.000Z'), - }, - { - theatreId: 1, - movieId: 5, - price: 15, - startDate: new Date('2025-05-08T03:20:00.000Z'), - endDate: new Date('2025-05-08T05:30:00.000Z'), - }, - { - theatreId: 1, - movieId: 2, - price: 5, - startDate: new Date('2025-05-08T16:30:00.000Z'), - endDate: new Date('2025-05-08T18:02:00.000Z'), - }, - { - theatreId: 1, - movieId: 1, - price: 5, - startDate: new Date('2025-05-08T18:30:00.000Z'), - endDate: new Date('2025-05-08T20:02:00.000Z'), - }, - { - theatreId: 1, - movieId: 3, - price: 10, - startDate: new Date('2025-05-08T20:30:00.000Z'), - endDate: new Date('2025-05-08T22:21:00.000Z'), - }, - { - theatreId: 1, - movieId: 5, - price: 10, - startDate: new Date('2025-05-08T23:00:00.000Z'), - endDate: new Date('2025-05-09T01:10:00.000Z'), - }, - { - theatreId: 1, - movieId: 6, - price: 15, - startDate: new Date('2025-05-09T01:30:00.000Z'), - endDate: new Date('2025-05-09T02:57:00.000Z'), - }, - { - theatreId: 1, - movieId: 2, - price: 15, - startDate: new Date('2025-05-09T03:30:00.000Z'), - endDate: new Date('2025-05-09T05:03:00.000Z'), - }, - { - theatreId: 1, - movieId: 2, - price: 5, - startDate: new Date('2025-05-09T16:30:00.000Z'), - endDate: new Date('2025-05-09T18:03:00.000Z'), - }, - { - theatreId: 1, - movieId: 1, - price: 5, - startDate: new Date('2025-05-09T18:30:00.000Z'), - endDate: new Date('2025-05-09T20:02:00.000Z'), - }, - { - theatreId: 1, - movieId: 3, - price: 10, - startDate: new Date('2025-05-09T20:30:00.000Z'), - endDate: new Date('2025-05-09T22:21:00.000Z'), - }, - { - theatreId: 1, - movieId: 5, - price: 10, - startDate: new Date('2025-05-09T23:00:00.000Z'), - endDate: new Date('2025-05-10T01:10:00.000Z'), - }, - { - theatreId: 1, - movieId: 6, - price: 15, - startDate: new Date('2025-05-10T01:30:00.000Z'), - endDate: new Date('2025-05-10T02:57:00.000Z'), - }, - { - theatreId: 1, - movieId: 1, - price: 15, - startDate: new Date('2025-05-10T03:30:00.000Z'), - endDate: new Date('2025-05-10T05:02:00.000Z'), - }, -]; diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/description.md b/apps/demos/Demos/Scheduler/Templates/ReactJs/description.md deleted file mode 100644 index fbd05e77b108..000000000000 --- a/apps/demos/Demos/Scheduler/Templates/ReactJs/description.md +++ /dev/null @@ -1,14 +0,0 @@ -You can double-click a DevExtreme Scheduler appointment or an empty cell to activate our built in edit form. Our Scheduler allows you to customize the form as needs dictate (rearrange items, create custom fields, and specify popup settings). - -The form includes two groups: `mainGroup` (general information) and `recurrenceGroup` (recurrence settings). Scheduler displays `mainGroup` first and switches to `recurrenceGroup` when users change the "Repeat" drop-down. Configure **editing**.[form](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/editing/form/) to customize form layout and **editing**.[popup](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/editing/popup/) to customize the dialog window. This demo configures these objects to add custom fields (**movieId** and **price**) to the edit form. - -For additional information, refer to the following help topic: [Appointment Edit Form](/Documentation/Guide/UI_Components/Scheduler/Appointment/Appointment_Edit_Form/). - - -You can customize the following DevExtreme Scheduler elements using custom templates (globally and for individual views): - -* Appointment rectangle: [appointmentRender](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentRender)/[appointmentComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentComponent) / **views[]**.[appointmentRender](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentRender)/**views[]**.[appointmentComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentComponent) - -* Tooltip: [appointmentTooltipRender](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentTooltipRender)/[appointmentTooltipComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentTooltipComponent) / **views[]**.[appointmentTooltipRender](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentTooltipRender)/**views[]**.[appointmentTooltipComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentTooltipComponent). - -[note] Image Source: **Wikimedia Commons** \ No newline at end of file diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/index.html b/apps/demos/Demos/Scheduler/Templates/ReactJs/index.html deleted file mode 100644 index c767f7b4dac7..000000000000 --- a/apps/demos/Demos/Scheduler/Templates/ReactJs/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - -
-

DXCinema Show Times

-
-
- - diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/index.js b/apps/demos/Demos/Scheduler/Templates/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/Templates/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Templates/ReactJs/styles.css deleted file mode 100644 index 754b4e4f8522..000000000000 --- a/apps/demos/Demos/Scheduler/Templates/ReactJs/styles.css +++ /dev/null @@ -1,88 +0,0 @@ -.dx-scheduler-work-space-week .dx-scheduler-date-table { - width: 3500px; -} - -.dx-scheduler-timeline-day .dx-scheduler-date-table { - width: 3500px; -} - -.dx-tooltip-wrapper .dx-overlay-content .dx-popup-content { - padding: 12px; -} - -.movie-preview-image { - max-height: 80px; - max-width: 80px; - min-height: 60px; - min-width: 60px; - border-radius: 2px; - overflow: hidden; -} - -.movie-preview-image img { - width: 100%; - position: relative; - top: -25%; - pointer-events: none; -} - -.movie-preview { - display: flex; - gap: 8px; - max-height: 100%; - white-space: normal; -} - -.movie-preview>.movie-details { - font-size: 12px; - color: #242424; -} - -.movie-preview>.movie-details>.title { - font-weight: 600; - font-size: 14px; - margin-bottom: 4px; -} - -.movie-info-container { - border-radius: 8px; - padding-bottom: 8px; -} - -.movie-info { - display: flex; - gap: 12px; -} - -.dx-theme-material .movie-info { - gap: 16px; -} - -.movie-info .movie-preview-image { - border: 1px solid var(--dx-color-border); -} - -.movie-info .movie-details { - text-align: left; -} - -.movie-info .movie-details>.title { - font-weight: 600; - font-size: 14px; - margin-bottom: 8px; -} - -.dx-scheduler-form-end-date-group.dx-field-item { - padding-bottom: 12px; -} - -.long-title h3 { - font-weight: 200; - font-size: 28px; - text-align: center; - margin-bottom: 20px; -} - -.dx-scheduler-appointment::before { - opacity: 0.26 !important; -} diff --git a/apps/demos/Demos/Scheduler/TimeZonesSupport/React/App.tsx b/apps/demos/Demos/Scheduler/TimeZonesSupport/React/App.tsx index 02efa162bf9d..5c61e47ec9fb 100644 --- a/apps/demos/Demos/Scheduler/TimeZonesSupport/React/App.tsx +++ b/apps/demos/Demos/Scheduler/TimeZonesSupport/React/App.tsx @@ -1,6 +1,8 @@ import React, { useCallback, useState } from 'react'; -import Scheduler, { Editing, type SchedulerTypes } from 'devextreme-react/scheduler'; -import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box'; +import Scheduler, { Editing } from 'devextreme-react/scheduler'; +import SelectBox from 'devextreme-react/select-box'; +import { type SchedulerTypes } from 'devextreme-react/scheduler'; +import { type SelectBoxTypes } from 'devextreme-react/select-box'; import * as timeZoneUtils from 'devextreme/time_zone_utils'; import { data, locations } from './data.ts'; diff --git a/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/App.js b/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/App.js deleted file mode 100644 index 92b45c7c02dc..000000000000 --- a/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/App.js +++ /dev/null @@ -1,64 +0,0 @@ -import React, { useCallback, useState } from 'react'; -import Scheduler, { Editing } from 'devextreme-react/scheduler'; -import SelectBox from 'devextreme-react/select-box'; -import * as timeZoneUtils from 'devextreme/time_zone_utils'; -import { data, locations } from './data.js'; - -const timeZoneLabel = { 'aria-label': 'Time zone' }; -const currentDate = new Date(2021, 3, 27); -const views = ['workWeek']; -const getTimeZones = (date) => timeZoneUtils.getTimeZones(date, locations); -const defaultTimeZones = getTimeZones(currentDate); -const onAppointmentFormOpening = (e) => { - const { form } = e; - const startDateTimezoneEditor = form.getEditor('startDateTimeZone'); - const endDateTimezoneEditor = form.getEditor('endDateTimeZone'); - const startDateDataSource = startDateTimezoneEditor?.option('dataSource'); - const endDateDataSource = endDateTimezoneEditor?.option('dataSource'); - startDateDataSource.filter(['id', 'contains', 'Europe']); - endDateDataSource.filter(['id', 'contains', 'Europe']); - startDateDataSource.load(); - endDateDataSource.load(); -}; -const App = () => { - const [currentTimeZone, setCurrentTimeZone] = useState(defaultTimeZones[0].id); - const [timeZones, setTimeZones] = useState(defaultTimeZones); - const onValueChanged = useCallback((e) => { - setCurrentTimeZone(e.value); - }, []); - const onOptionChanged = useCallback((e) => { - if (e.name === 'currentDate') { - setTimeZones(getTimeZones(e.value)); - } - }, []); - return ( - <> -
- Office Time Zone - -
- - - - - ); -}; -export default App; diff --git a/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/data.js b/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/data.js deleted file mode 100644 index d2d702f05023..000000000000 --- a/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/data.js +++ /dev/null @@ -1,59 +0,0 @@ -export const data = [ - { - text: 'Stand-up meeting', - startDate: '2021-04-26T15:30:00.000Z', - endDate: '2021-04-26T15:45:00.000Z', - recurrenceRule: 'FREQ=DAILY', - }, - { - text: 'Book Flights to San Fran for Sales Trip', - startDate: '2021-04-28T18:00:00.000Z', - endDate: '2021-04-28T19:00:00.000Z', - }, - { - text: 'New Brochures', - startDate: '2021-04-30T18:30:00.000Z', - endDate: '2021-04-30T18:45:00.000Z', - }, - { - text: 'Website Re-Design Plan', - startDate: '2021-04-27T12:30:00.000Z', - endDate: '2021-04-27T13:30:00.000Z', - }, - { - text: 'Book Flights to San Fran for Sales Trip', - startDate: '2021-04-28T16:00:00.000Z', - endDate: '2021-04-28T15:00:00.000Z', - }, - { - text: 'Prepare 2021 Marketing Plan', - startDate: '2021-04-26T07:00:00.000Z', - endDate: '2021-04-26T09:30:00.000Z', - }, - { - text: 'Launch New Website', - startDate: '2021-04-28T08:00:00.000Z', - endDate: '2021-04-28T10:00:00.000Z', - }, - { - text: 'Submit New Website Design', - startDate: '2021-04-29T09:30:00.000Z', - endDate: '2021-04-29T11:00:00.000Z', - }, - { - text: 'Upgrade Server Hardware', - startDate: '2021-04-30T06:30:00.000Z', - endDate: '2021-04-30T08:00:00.000Z', - }, - { - text: 'Approve New Online Marketing Strategy', - startDate: '2021-04-30T11:00:00.000Z', - endDate: '2021-04-30T12:30:00.000Z', - }, - { - text: 'Final Budget Review', - startDate: '2021-04-27T09:00:00.000Z', - endDate: '2021-04-27T10:35:00.000Z', - }, -]; -export const locations = ['Europe/London', 'Europe/Berlin', 'Europe/Helsinki']; diff --git a/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/index.html b/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/index.html deleted file mode 100644 index db31b0fd60c6..000000000000 --- a/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/index.js b/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/styles.css b/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/styles.css deleted file mode 100644 index 5cfb426f0cb9..000000000000 --- a/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/styles.css +++ /dev/null @@ -1,13 +0,0 @@ -.option { - display: flex; -} - -.option > span { - display: flex; - align-items: center; - margin-right: 10px; -} - -.dx-scheduler { - margin-top: 20px; -} diff --git a/apps/demos/Demos/Scheduler/Timelines/ReactJs/App.js b/apps/demos/Demos/Scheduler/Timelines/ReactJs/App.js deleted file mode 100644 index e3d601cfdf95..000000000000 --- a/apps/demos/Demos/Scheduler/Timelines/ReactJs/App.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import Scheduler, { Resource } from 'devextreme-react/scheduler'; -import { data, resourcesData, priorityData } from './data.js'; - -const currentDate = new Date(2021, 1, 2); -const views = ['timelineDay', 'timelineWeek', 'timelineWorkWeek', 'timelineMonth']; -const groups = ['priority']; -const App = () => ( - - - - -); -export default App; diff --git a/apps/demos/Demos/Scheduler/Timelines/ReactJs/data.js b/apps/demos/Demos/Scheduler/Timelines/ReactJs/data.js deleted file mode 100644 index bd1e617a45f6..000000000000 --- a/apps/demos/Demos/Scheduler/Timelines/ReactJs/data.js +++ /dev/null @@ -1,435 +0,0 @@ -export const data = [ - { - text: 'Google AdWords Strategy', - ownerId: [2], - startDate: new Date('2021-02-01T16:00:00.000Z'), - endDate: new Date('2021-02-01T17:30:00.000Z'), - priority: 1, - }, - { - text: 'New Brochures', - ownerId: [1], - startDate: new Date('2021-02-01T18:30:00.000Z'), - endDate: new Date('2021-02-01T21:15:00.000Z'), - priority: 2, - }, - { - text: 'Brochure Design Review', - ownerId: [4], - startDate: new Date('2021-02-01T20:15:00.000Z'), - endDate: new Date('2021-02-01T23:15:00.000Z'), - priority: 1, - }, - { - text: 'Website Re-Design Plan', - ownerId: [3], - startDate: new Date('2021-02-01T23:45:00.000Z'), - endDate: new Date('2021-02-02T18:15:00.000Z'), - priority: 2, - }, - { - text: 'Rollout of New Website and Marketing Brochures', - ownerId: [1], - startDate: new Date('2021-02-02T15:15:00.000Z'), - endDate: new Date('2021-02-02T17:45:00.000Z'), - priority: 2, - }, - { - text: 'Update Sales Strategy Documents', - ownerId: [2], - startDate: new Date('2021-02-02T19:00:00.000Z'), - endDate: new Date('2021-02-02T20:45:00.000Z'), - priority: 1, - }, - { - text: 'Non-Compete Agreements', - ownerId: [4], - startDate: new Date('2021-02-03T16:15:00.000Z'), - endDate: new Date('2021-02-03T17:00:00.000Z'), - priority: 1, - }, - { - text: 'Approve Hiring of John Jeffers', - ownerId: [2], - startDate: new Date('2021-02-03T17:00:00.000Z'), - endDate: new Date('2021-02-03T18:15:00.000Z'), - priority: 2, - }, - { - text: 'Update NDA Agreement', - ownerId: [1], - startDate: new Date('2021-02-03T18:45:00.000Z'), - endDate: new Date('2021-02-03T20:45:00.000Z'), - priority: 2, - }, - { - text: 'Update Employee Files with New NDA', - ownerId: [2], - startDate: new Date('2021-02-03T21:00:00.000Z'), - endDate: new Date('2021-02-03T23:45:00.000Z'), - priority: 1, - }, - { - text: 'Submit Questions Regarding New NDA', - ownerId: [1], - startDate: new Date('2021-02-05T01:00:00.000Z'), - endDate: new Date('2021-02-04T16:30:00.000Z'), - priority: 1, - }, - { - text: 'Submit Signed NDA', - ownerId: [2], - startDate: new Date('2021-02-04T19:45:00.000Z'), - endDate: new Date('2021-02-04T21:00:00.000Z'), - priority: 1, - }, - { - text: 'Review Revenue Projections', - ownerId: [3], - startDate: new Date('2021-02-05T00:15:00.000Z'), - endDate: new Date('2021-02-04T15:00:00.000Z'), - priority: 2, - }, - { - text: 'Comment on Revenue Projections', - ownerId: [2], - startDate: new Date('2021-02-05T16:15:00.000Z'), - endDate: new Date('2021-02-05T18:15:00.000Z'), - priority: 1, - }, - { - text: 'Provide New Health Insurance Docs', - ownerId: [3], - startDate: new Date('2021-02-05T19:45:00.000Z'), - endDate: new Date('2021-02-05T21:15:00.000Z'), - priority: 2, - }, - { - text: 'Review Changes to Health Insurance Coverage', - ownerId: [2], - startDate: new Date('2021-02-05T21:15:00.000Z'), - endDate: new Date('2021-02-05T22:30:00.000Z'), - priority: 1, - }, - { - text: 'Review Training Course for any Omissions', - ownerId: [2], - startDate: new Date('2021-02-08T21:00:00.000Z'), - endDate: new Date('2021-02-09T19:00:00.000Z'), - priority: 2, - }, - { - text: 'Recall Rebate Form', - ownerId: [1], - startDate: new Date('2021-02-08T19:45:00.000Z'), - endDate: new Date('2021-02-08T20:15:00.000Z'), - priority: 1, - }, - { - text: 'Create Report on Customer Feedback', - ownerId: [4], - startDate: new Date('2021-02-09T22:15:00.000Z'), - endDate: new Date('2021-02-10T00:30:00.000Z'), - priority: 2, - }, - { - text: 'Review Customer Feedback Report', - ownerId: [2], - startDate: new Date('2021-02-09T23:15:00.000Z'), - endDate: new Date('2021-02-10T01:30:00.000Z'), - priority: 1, - }, - { - text: 'Customer Feedback Report Analysis', - ownerId: [3], - startDate: new Date('2021-02-10T16:30:00.000Z'), - endDate: new Date('2021-02-10T17:30:00.000Z'), - priority: 1, - }, - { - text: 'Prepare Shipping Cost Analysis Report', - ownerId: [4], - startDate: new Date('2021-02-10T19:30:00.000Z'), - endDate: new Date('2021-02-10T20:30:00.000Z'), - priority: 1, - }, - { - text: 'Provide Feedback on Shippers', - ownerId: [2], - startDate: new Date('2021-02-10T21:15:00.000Z'), - endDate: new Date('2021-02-10T23:00:00.000Z'), - priority: 2, - }, - { - text: 'Select Preferred Shipper', - ownerId: [1], - startDate: new Date('2021-02-11T00:30:00.000Z'), - endDate: new Date('2021-02-11T03:00:00.000Z'), - priority: 1, - }, - { - text: 'Complete Shipper Selection Form', - ownerId: [2], - startDate: new Date('2021-02-11T15:30:00.000Z'), - endDate: new Date('2021-02-11T17:00:00.000Z'), - priority: 2, - }, - { - text: 'Upgrade Server Hardware', - ownerId: [4], - startDate: new Date('2021-02-11T19:00:00.000Z'), - endDate: new Date('2021-02-11T21:15:00.000Z'), - priority: 1, - }, - { - text: 'Upgrade Personal Computers', - ownerId: [3], - startDate: new Date('2021-02-11T21:45:00.000Z'), - endDate: new Date('2021-02-11T23:30:00.000Z'), - priority: 1, - }, - { - text: 'Upgrade Apps to Windows RT or stay with WinForms', - ownerId: [1], - startDate: new Date('2021-02-12T17:30:00.000Z'), - endDate: new Date('2021-02-12T20:00:00.000Z'), - priority: 1, - }, - { - text: 'Estimate Time Required to Touch-Enable Apps', - ownerId: [1], - startDate: new Date('2021-02-12T21:45:00.000Z'), - endDate: new Date('2021-02-12T23:30:00.000Z'), - priority: 1, - }, - { - text: 'Report on Tranistion to Touch-Based Apps', - ownerId: [2], - startDate: new Date('2021-02-13T01:30:00.000Z'), - endDate: new Date('2021-02-13T02:00:00.000Z'), - priority: 1, - }, - { - text: 'Submit New Website Design', - ownerId: [2], - startDate: new Date('2021-02-15T15:00:00.000Z'), - endDate: new Date('2021-02-15T17:00:00.000Z'), - priority: 2, - }, - { - text: 'Create Icons for Website', - ownerId: [4], - startDate: new Date('2021-02-15T18:30:00.000Z'), - endDate: new Date('2021-02-15T20:15:00.000Z'), - priority: 1, - }, - { - text: 'Create New Product Pages', - ownerId: [1], - startDate: new Date('2021-02-16T16:45:00.000Z'), - endDate: new Date('2021-02-16T18:45:00.000Z'), - priority: 2, - }, - { - text: 'Approve Website Launch', - ownerId: [3], - startDate: new Date('2021-02-16T19:00:00.000Z'), - endDate: new Date('2021-02-16T22:15:00.000Z'), - priority: 1, - }, - { - text: 'Update Customer Shipping Profiles', - ownerId: [3], - startDate: new Date('2021-02-17T16:30:00.000Z'), - endDate: new Date('2021-02-17T18:00:00.000Z'), - priority: 1, - }, - { - text: 'Create New Shipping Return Labels', - ownerId: [4], - startDate: new Date('2021-02-17T19:45:00.000Z'), - endDate: new Date('2021-02-17T21:00:00.000Z'), - priority: 1, - }, - { - text: 'Get Design for Shipping Return Labels', - ownerId: [3], - startDate: new Date('2021-02-17T22:00:00.000Z'), - endDate: new Date('2021-02-17T23:30:00.000Z'), - priority: 1, - }, - { - text: 'PSD needed for Shipping Return Labels', - ownerId: [4], - startDate: new Date('2021-02-18T15:30:00.000Z'), - endDate: new Date('2021-02-18T16:15:00.000Z'), - priority: 2, - }, - { - text: 'Contact ISP and Discuss Payment Options', - ownerId: [1], - startDate: new Date('2021-02-18T18:30:00.000Z'), - endDate: new Date('2021-02-18T23:00:00.000Z'), - priority: 2, - }, - { - text: 'Prepare Year-End Support Summary Report', - ownerId: [2], - startDate: new Date('2021-02-19T00:00:00.000Z'), - endDate: new Date('2021-02-19T03:00:00.000Z'), - priority: 1, - }, - { - text: 'Review New Training Material', - ownerId: [3], - startDate: new Date('2021-02-19T15:00:00.000Z'), - endDate: new Date('2021-02-19T16:15:00.000Z'), - priority: 2, - }, - { - text: 'Distribute Training Material to Support Staff', - ownerId: [2], - startDate: new Date('2021-02-19T19:45:00.000Z'), - endDate: new Date('2021-02-19T21:00:00.000Z'), - priority: 1, - }, - { - text: 'Training Material Distribution Schedule', - ownerId: [2], - startDate: new Date('2021-02-19T21:15:00.000Z'), - endDate: new Date('2021-02-19T23:15:00.000Z'), - priority: 1, - }, - { - text: 'Approval on Converting to New HDMI Specification', - ownerId: [4], - startDate: new Date('2021-02-22T16:30:00.000Z'), - endDate: new Date('2021-02-22T17:15:00.000Z'), - priority: 2, - }, - { - text: 'Create New Spike for Automation Server', - ownerId: [3], - startDate: new Date('2021-02-22T17:00:00.000Z'), - endDate: new Date('2021-02-22T19:30:00.000Z'), - priority: 2, - }, - { - text: 'Code Review - New Automation Server', - ownerId: [1], - startDate: new Date('2021-02-22T20:00:00.000Z'), - endDate: new Date('2021-02-22T22:00:00.000Z'), - priority: 1, - }, - { - text: 'Confirm Availability for Sales Meeting', - ownerId: [1], - startDate: new Date('2021-02-23T17:15:00.000Z'), - endDate: new Date('2021-02-23T22:15:00.000Z'), - priority: 2, - }, - { - text: 'Reschedule Sales Team Meeting', - ownerId: [2], - startDate: new Date('2021-02-23T23:15:00.000Z'), - endDate: new Date('2021-02-24T01:00:00.000Z'), - priority: 2, - }, - { - text: 'Send 2 Remotes for Giveaways', - ownerId: [3], - startDate: new Date('2021-02-24T16:30:00.000Z'), - endDate: new Date('2021-02-24T18:45:00.000Z'), - priority: 1, - }, - { - text: 'Discuss Product Giveaways with Management', - ownerId: [1], - startDate: new Date('2021-02-24T19:15:00.000Z'), - endDate: new Date('2021-02-24T23:45:00.000Z'), - priority: 2, - }, - { - text: 'Replace Desktops on the 3rd Floor', - ownerId: [2], - startDate: new Date('2021-02-25T16:30:00.000Z'), - endDate: new Date('2021-02-25T17:45:00.000Z'), - priority: 1, - }, - { - text: 'Update Database with New Leads', - ownerId: [3], - startDate: new Date('2021-02-25T19:00:00.000Z'), - endDate: new Date('2021-02-25T21:15:00.000Z'), - priority: 2, - }, - { - text: 'Mail New Leads for Follow Up', - ownerId: [1], - startDate: new Date('2021-02-25T21:45:00.000Z'), - endDate: new Date('2021-02-25T22:30:00.000Z'), - priority: 2, - }, - { - text: 'Send Territory Sales Breakdown', - ownerId: [2], - startDate: new Date('2021-02-26T01:00:00.000Z'), - endDate: new Date('2021-02-26T03:00:00.000Z'), - priority: 1, - }, - { - text: 'Territory Sales Breakdown Report', - ownerId: [1], - startDate: new Date('2021-02-26T15:45:00.000Z'), - endDate: new Date('2021-02-26T16:45:00.000Z'), - priority: 1, - }, - { - text: 'Report on the State of Engineering Dept', - ownerId: [3], - startDate: new Date('2021-02-26T21:45:00.000Z'), - endDate: new Date('2021-02-26T22:30:00.000Z'), - priority: 2, - }, - { - text: 'Staff Productivity Report', - ownerId: [4], - startDate: new Date('2021-02-26T23:15:00.000Z'), - endDate: new Date('2021-02-27T02:30:00.000Z'), - priority: 2, - }, -]; -export const resourcesData = [ - { - text: 'Samantha Bright', - id: 1, - color: '#cb6bb2', - }, - { - text: 'John Heart', - id: 2, - color: '#56ca85', - }, - { - text: 'Todd Hoffman', - id: 3, - color: '#1e90ff', - }, - { - text: 'Sandra Johnson', - id: 4, - color: '#ff9747', - }, -]; -export const priorityData = [ - { - text: 'Low Priority', - id: 1, - color: '#1e90ff', - }, - { - text: 'High Priority', - id: 2, - color: '#ff9747', - }, -]; diff --git a/apps/demos/Demos/Scheduler/Timelines/ReactJs/index.html b/apps/demos/Demos/Scheduler/Timelines/ReactJs/index.html deleted file mode 100644 index d6d83f735a76..000000000000 --- a/apps/demos/Demos/Scheduler/Timelines/ReactJs/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/Timelines/ReactJs/index.js b/apps/demos/Demos/Scheduler/Timelines/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/Timelines/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/Toolbar/React/App.tsx b/apps/demos/Demos/Scheduler/Toolbar/React/App.tsx index 09c56670a294..521c2c9f4df9 100644 --- a/apps/demos/Demos/Scheduler/Toolbar/React/App.tsx +++ b/apps/demos/Demos/Scheduler/Toolbar/React/App.tsx @@ -1,10 +1,12 @@ import React, { useCallback, useMemo, useRef, useState } from 'react'; -import { Scheduler, Resource, Toolbar, Item, type SchedulerRef, type SchedulerTypes } from 'devextreme-react/scheduler'; -import { SelectBox, type SelectBoxTypes } from 'devextreme-react/select-box'; +import { Scheduler, Resource, Toolbar, Item } from 'devextreme-react/scheduler'; +import { SelectBox } from 'devextreme-react/select-box'; import { type DataSource } from 'devextreme-react/common/data'; +import { type SchedulerRef, type SchedulerTypes } from 'devextreme-react/scheduler'; +import { type SelectBoxTypes } from 'devextreme-react/select-box'; -import { assignees, schedulerDataSource, currentDate } from './data.ts'; +import { assignees, data, currentDate } from './data.ts'; const views: SchedulerTypes.ViewType[] = ['day', 'week', 'workWeek', 'month']; const selectBoxPlaceholder = 'Select Employee'; @@ -74,7 +76,7 @@ const App = () => { return ( ; export const assignees: Assignee[] = [ { diff --git a/apps/demos/Demos/Scheduler/Toolbar/ReactJs/App.js b/apps/demos/Demos/Scheduler/Toolbar/ReactJs/App.js deleted file mode 100644 index c84383ecdc75..000000000000 --- a/apps/demos/Demos/Scheduler/Toolbar/ReactJs/App.js +++ /dev/null @@ -1,126 +0,0 @@ -import React, { - useCallback, useMemo, useRef, useState, -} from 'react'; -import { - Scheduler, Resource, Toolbar, Item, -} from 'devextreme-react/scheduler'; -import { SelectBox } from 'devextreme-react/select-box'; -import { assignees, schedulerDataSource, currentDate } from './data.js'; - -const views = ['day', 'week', 'workWeek', 'month']; -const selectBoxPlaceholder = 'Select Employee'; -const inputAttr = { 'aria-label': selectBoxPlaceholder }; -const MS_IN_HOUR = 60 * 1000; -const App = () => { - const schedulerRef = useRef(null); - const [assigneesFilterValue, setAssigneesFilterValue] = useState(); - const onAssigneesFilterChange = useCallback((event) => { - const scheduler = schedulerRef.current?.instance?.(); - if (!scheduler) { - return; - } - const dataSource = scheduler.option('dataSource'); - const filter = event.value ? ['assigneeId', 'contains', event.value] : null; - dataSource.filter(filter); - scheduler.option('dataSource', dataSource); - setAssigneesFilterValue(event.value); - }, []); - const onAppointmentAdd = useCallback(() => { - const scheduler = schedulerRef.current?.instance?.(); - if (!scheduler) { - return; - } - const selected = scheduler.option('selectedCellData') ?? []; - if (selected.length) { - const firstSelected = selected[0]; - const lastSelected = selected.at(-1); - scheduler.showAppointmentPopup( - { - ...firstSelected.groups, - allDay: firstSelected.allDay, - startDate: new Date(firstSelected.startDateUTC), - endDate: new Date(lastSelected.endDateUTC), - }, - true, - ); - return; - } - const currentDate = scheduler.option('currentDate'); - const cellDuration = Number(scheduler.option('cellDuration')); - const cellDurationMs = cellDuration * MS_IN_HOUR; - const currentTime = new Date(currentDate).getTime(); - const roundTime = Math.round(currentTime / cellDurationMs) * cellDurationMs; - scheduler.showAppointmentPopup( - { - startDate: new Date(roundTime), - endDate: new Date(roundTime + cellDurationMs), - }, - true, - ); - }, []); - const toggleButtonOptions = useMemo( - () => ({ - icon: 'plus', - text: 'New Appointment', - stylingMode: 'outlined', - type: 'normal', - onClick() { - onAppointmentAdd(); - }, - }), - [onAppointmentAdd], - ); - return ( - - - - - - - - - - - - - ); -}; -export default App; diff --git a/apps/demos/Demos/Scheduler/Toolbar/ReactJs/data.js b/apps/demos/Demos/Scheduler/Toolbar/ReactJs/data.js deleted file mode 100644 index eff35ed3d659..000000000000 --- a/apps/demos/Demos/Scheduler/Toolbar/ReactJs/data.js +++ /dev/null @@ -1,126 +0,0 @@ -import { DataSource } from 'devextreme-react/common/data'; - -const addDays = (date, days) => new Date(new Date(date).setUTCDate(date.getUTCDate() + days)); -const now = new Date(new Date().setUTCHours(0, 0, 0, 0)); -const startOfTheWeek = addDays(now, -now.getUTCDay()); -export const currentDate = new Date(2025, 5, 10); -const currentStartOfTheWeek = addDays(currentDate, -currentDate.getUTCDay()); -const data = [ - { - text: 'Website Re-Design Plan', - assigneeId: [4], - startDate: new Date(addDays(startOfTheWeek, 1).setUTCHours(16, 30)), - endDate: new Date(addDays(startOfTheWeek, 1).setUTCHours(18, 30)), - }, - { - text: 'Book Flights to San Fran for Sales Trip', - assigneeId: [2], - startDate: new Date(addDays(startOfTheWeek, 2).setUTCHours(19)), - endDate: new Date(addDays(startOfTheWeek, 2).setUTCHours(20)), - allDay: true, - }, - { - text: 'Install New Router in Dev Room', - assigneeId: [1], - startDate: new Date(addDays(startOfTheWeek, 2).setUTCHours(21, 30)), - endDate: new Date(addDays(startOfTheWeek, 2).setUTCHours(22, 30)), - }, - { - text: 'Approve Personal Computer Upgrade Plan', - assigneeId: [3], - startDate: new Date(addDays(startOfTheWeek, 3).setUTCHours(17)), - endDate: new Date(addDays(startOfTheWeek, 3).setUTCHours(18)), - }, - { - text: 'Final Budget Review', - assigneeId: [1], - startDate: new Date(addDays(startOfTheWeek, 3).setUTCHours(19)), - endDate: new Date(addDays(startOfTheWeek, 3).setUTCHours(20, 35)), - }, - { - text: 'New Brochures', - assigneeId: [4], - startDate: new Date(addDays(startOfTheWeek, 3).setUTCHours(21, 30)), - endDate: new Date(addDays(startOfTheWeek, 3).setUTCHours(22, 45)), - }, - { - text: 'Install New Database', - assigneeId: [2], - startDate: new Date(addDays(startOfTheWeek, 4).setUTCHours(16, 45)), - endDate: new Date(addDays(startOfTheWeek, 4).setUTCHours(18, 15)), - }, - { - text: 'Approve New Online Marketing Strategy', - assigneeId: [4], - startDate: new Date(addDays(currentStartOfTheWeek, 1).setUTCHours(19)), - endDate: new Date(addDays(currentStartOfTheWeek, 1).setUTCHours(21)), - }, - { - text: 'Upgrade Personal Computers', - assigneeId: [2], - startDate: new Date(addDays(currentStartOfTheWeek, 1).setUTCHours(22, 15)), - endDate: new Date(addDays(currentStartOfTheWeek, 1).setUTCHours(23, 30)), - }, - { - text: 'Customer Workshop', - assigneeId: [3], - startDate: new Date(addDays(startOfTheWeek, 5).setUTCHours(18)), - endDate: new Date(addDays(startOfTheWeek, 5).setUTCHours(19)), - recurrenceRule: 'FREQ=WEEKLY;INTERVAL=1', - }, - { - text: 'Prepare 2021 Marketing Plan', - assigneeId: [1], - startDate: new Date(addDays(currentStartOfTheWeek, 2).setUTCHours(18)), - endDate: new Date(addDays(currentStartOfTheWeek, 2).setUTCHours(20, 30)), - }, - { - text: 'Brochure Design Review', - assigneeId: [4], - startDate: new Date(addDays(startOfTheWeek, 5).setUTCHours(21)), - endDate: new Date(addDays(startOfTheWeek, 5).setUTCHours(22, 30)), - }, - { - text: 'Create Icons for Website', - assigneeId: [3], - startDate: new Date(addDays(currentStartOfTheWeek, 3).setUTCHours(17)), - endDate: new Date(addDays(currentStartOfTheWeek, 3).setUTCHours(18, 30)), - }, - { - text: 'Upgrade Server Hardware', - assigneeId: [4], - startDate: new Date(addDays(currentStartOfTheWeek, 2).setUTCHours(16)), - endDate: new Date(addDays(currentStartOfTheWeek, 2).setUTCHours(17, 30)), - }, - { - text: 'Submit New Website Design', - assigneeId: [1], - startDate: new Date(addDays(currentStartOfTheWeek, 5).setUTCHours(23, 30)), - endDate: new Date(addDays(currentStartOfTheWeek, 6).setUTCHours(1)), - }, - { - text: 'Launch New Website', - assigneeId: [2], - startDate: new Date(addDays(currentStartOfTheWeek, 4).setUTCHours(19)), - endDate: new Date(addDays(currentStartOfTheWeek, 4).setUTCHours(21)), - }, -]; -export const schedulerDataSource = new DataSource(data); -export const assignees = [ - { - text: 'Samantha Bright', - id: 1, - }, - { - text: 'John Heart', - id: 2, - }, - { - text: 'Todd Hoffman', - id: 3, - }, - { - text: 'Sandra Johnson', - id: 4, - }, -]; diff --git a/apps/demos/Demos/Scheduler/Toolbar/ReactJs/description.md b/apps/demos/Demos/Scheduler/Toolbar/ReactJs/description.md deleted file mode 100644 index ba55950a43e0..000000000000 --- a/apps/demos/Demos/Scheduler/Toolbar/ReactJs/description.md +++ /dev/null @@ -1,20 +0,0 @@ -The DevExtreme Scheduler ships with a customizable toolbar UI element. You can populate the toolbar with predefined and custom items—in any display order. This demo adds the "today" predefined control and two DevExtreme components to the toolbar. - - -To customize the Scheduler toolbar in your DevExtreme-powered app, add items to the [toolbar](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/toolbar/).[items[]](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/toolbar/items/) array. DevExtreme Scheduler supports the following toolbar item types: - -- **Predefined Controls** - * "dateNavigator" - Displays a [ButtonGroup](/Documentation/Guide/UI_Components/ButtonGroup/Getting_Started_with_ButtonGroup/) component with next/previous buttons and a date interval button that invokes a dropdown calendar. Define [options](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/toolbar/items/#options).**items** to customize the control. You can add new buttons, and specify button availability/order. - * "viewSwitcher" - Switches between view types (day, week, month, and others). - * "today" - A "Today" button (navigates to the current date). - -- **DevExtreme Components** -You can configure a DevExtreme component within a toolbar item element. In this demo, we extended the toolbar with a [Button](/Documentation/Guide/UI_Components/Button/Overview/) and [SelectBox](/Documentation/Guide/UI_Components/SelectBox/Overview/). - -- **Custom Controls** -Specify **items[]**.[render](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/toolbar/items/#render) or [component](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/toolbar/items/#component) to implement custom controls. - -The default Scheduler toolbar displays "dateNavigator" and "viewSwitcher" predefined controls. diff --git a/apps/demos/Demos/Scheduler/Toolbar/ReactJs/index.html b/apps/demos/Demos/Scheduler/Toolbar/ReactJs/index.html deleted file mode 100644 index d6d83f735a76..000000000000 --- a/apps/demos/Demos/Scheduler/Toolbar/ReactJs/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/Toolbar/ReactJs/index.js b/apps/demos/Demos/Scheduler/Toolbar/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/Toolbar/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/React/data.ts b/apps/demos/Demos/Scheduler/VirtualScrolling/React/data.ts index 15b68fdc7ad4..e3cc1529719f 100644 --- a/apps/demos/Demos/Scheduler/VirtualScrolling/React/data.ts +++ b/apps/demos/Demos/Scheduler/VirtualScrolling/React/data.ts @@ -1,4 +1,4 @@ -import type { SchedulerTypes } from 'devextreme-react/scheduler'; +import { type SchedulerTypes } from 'devextreme-react/scheduler'; type Appointment = SchedulerTypes.Appointment & { humanId: number; }; diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/App.js b/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/App.js deleted file mode 100644 index 0a6406959e4c..000000000000 --- a/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/App.js +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import Scheduler, { Resource, View, Scrolling } from 'devextreme-react/scheduler'; -import { resources, generateAppointments } from './data.js'; - -const currentDate = new Date(2021, 1, 2); -const groups = ['humanId']; -const startDay = new Date(2021, 1, 1); -const endDay = new Date(2021, 1, 28); -const startDayHour = 8; -const endDayHour = 20; -const appointments = generateAppointments(startDay, endDay, startDayHour, endDayHour); -const App = () => ( - - - - - - - -); -export default App; diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/data.js b/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/data.js deleted file mode 100644 index 93160881a82b..000000000000 --- a/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/data.js +++ /dev/null @@ -1,256 +0,0 @@ -export const resources = [ - { - id: 0, - text: 'David Carter', - color: '#74d57b', - }, - { - id: 1, - text: 'Emma Lewis', - color: '#1db2f5', - }, - { - id: 2, - text: 'Noah Hill', - color: '#f5564a', - }, - { - id: 3, - text: 'William Bell', - color: '#97c95c', - }, - { - id: 4, - text: 'Jane Jones', - color: '#ffc720', - }, - { - id: 5, - text: 'Violet Young', - color: '#eb3573', - }, - { - id: 6, - text: 'Samuel Perry', - color: '#a63db8', - }, - { - id: 7, - text: 'Luther Murphy', - color: '#ffaa66', - }, - { - id: 8, - text: 'Craig Morris', - color: '#2dcdc4', - }, - { - id: 9, - text: 'Sandy Wood', - color: '#c34cb9', - }, - { - id: 10, - text: 'Susan Bennett', - color: '#3d44ec', - }, - { - id: 11, - text: 'Lilly Barnes', - color: '#4ddcca', - }, - { - id: 12, - text: 'Marcus Price', - color: '#2ec98d', - }, - { - id: 13, - text: 'David Stewart', - color: '#3ff6ca', - }, - { - id: 14, - text: 'Joseph Smith', - color: '#f665aa', - }, - { - id: 15, - text: 'Carter Wilson', - color: '#d1c974', - }, - { - id: 16, - text: 'Wyatt Lopez', - color: '#ff6741', - }, - { - id: 17, - text: 'John Long', - color: '#ee53dc', - }, - { - id: 18, - text: 'Jack Rivera', - color: '#795ac3', - }, - { - id: 19, - text: 'Victoria Adams', - color: '#ff7d8a', - }, - { - id: 20, - text: 'Madison Anderson', - color: '#4cd482', - }, - { - id: 21, - text: 'Luna Moore', - color: '#9d67cc', - }, - { - id: 22, - text: 'Michael Bailey', - color: '#5ab1ef', - }, - { - id: 23, - text: 'Jenny Powell', - color: '#68e18f', - }, - { - id: 24, - text: 'Daniel Peterson', - color: '#4dd155', - }, - { - id: 25, - text: 'Gabriel Gray', - color: '#ef9e44', - }, - { - id: 26, - text: 'Anthony Robinson', - color: '#45a5cc', - }, - { - id: 27, - text: 'Ellie Tomson', - color: '#a067bd', - }, - { - id: 28, - text: 'Natalie Adams', - color: '#3d44ec', - }, - { - id: 29, - text: 'Sofia Green', - color: '#4ddcca', - }, -]; -const appointmentsText = [ - 'Google AdWords Strategy', - 'New Brochures', - 'Brochure Design Review', - 'Website Re-Design Plan', - 'Rollout of New Website and Marketing Brochures', - 'Update Sales Strategy Documents', - 'Non-Compete Agreements', - 'Approve Hiring of John Jeffers', - 'Update NDA Agreement', - 'Update Employee Files with New NDA', - 'Submit Questions Regarding New NDA', - 'Submit Signed NDA', - 'Review Revenue Projections', - 'Comment on Revenue Projections', - 'Provide New Health Insurance Docs', - 'Review Changes to Health Insurance Coverage', - 'Review Training Course for any Ommissions', - 'Recall Rebate Form', - 'Create Report on Customer Feedback', - 'Review Customer Feedback Report', - 'Customer Feedback Report Analysis', - 'Prepare Shipping Cost Analysis Report', - 'Provide Feedback on Shippers', - 'Select Preferred Shipper', - 'Complete Shipper Selection Form', - 'Upgrade Server Hardware', - 'Upgrade Personal Computers', - 'Upgrade Apps to Windows RT or stay with WinForms', - 'Estimate Time Required to Touch-Enable Apps', - 'Report on Tranistion to Touch-Based Apps', - 'Submit New Website Design', - 'Create Icons for Website', - 'Create New Product Pages', - 'Approve Website Launch', - 'Update Customer Shipping Profiles', - 'Create New Shipping Return Labels', - 'Get Design for Shipping Return Labels', - 'PSD needed for Shipping Return Labels', - 'Contact ISP and Discuss Payment Options', - 'Prepare Year-End Support Summary Report', - 'Review New Training Material', - 'Distribute Training Material to Support Staff', - 'Training Material Distribution Schedule', - 'Approval on Converting to New HDMI Specification', - 'Create New Spike for Automation Server', - 'Code Review - New Automation Server', - 'Confirm Availability for Sales Meeting', - 'Reschedule Sales Team Meeting', - 'Send 2 Remotes for Giveaways', - 'Discuss Product Giveaways with Management', - 'Replace Desktops on the 3rd Floor', - 'Update Database with New Leads', - 'Mail New Leads for Follow Up', - 'Send Territory Sales Breakdown', - 'Territory Sales Breakdown Report', - 'Report on the State of Engineering Dept', - 'Staff Productivity Report', -]; -function getRandomDuration(durationState) { - const durationMin = Math.floor((durationState % 23) / 3 + 5) * 15; - return durationMin * 60 * 1000; -} -function getRandomText(textIndex) { - return appointmentsText[textIndex % appointmentsText.length]; -} -function filterAppointmentsByTime(appointments, startDayHour, endDayHour) { - const result = []; - for (let i = 0; i < appointments.length; i += 1) { - const { startDate } = appointments[i]; - const { endDate } = appointments[i]; - if ( - startDate.getDay() === endDate.getDay() && - startDate.getHours() >= startDayHour - 1 && - endDate.getHours() <= endDayHour - 1 - ) { - result.push(appointments[i]); - } - } - return result; -} -export function generateAppointments(startDay, endDay, startDayHour, endDayHour) { - const appointments = []; - let textIndex = 0; - let durationState = 1; - const durationIncrement = 19; - for (let i = 0; i < resources.length; i += 1) { - let startDate = startDay; - while (startDate.getTime() < endDay.getTime()) { - durationState += durationIncrement; - const endDate = new Date(startDate.getTime() + getRandomDuration(durationState)); - appointments.push({ - text: getRandomText(textIndex), - startDate, - endDate, - humanId: resources[i].id, - }); - textIndex += 1; - durationState += durationIncrement; - startDate = new Date(endDate.getTime() + getRandomDuration(durationState)); - } - } - return filterAppointmentsByTime(appointments, startDayHour, endDayHour); -} diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/index.html b/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/index.html deleted file mode 100644 index 2bc0e9f78ec1..000000000000 --- a/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/index.js b/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/index.js deleted file mode 100644 index 0195560dcf0e..000000000000 --- a/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('scheduler')); diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/styles.css b/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/styles.css deleted file mode 100644 index 0cd27251c611..000000000000 --- a/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/styles.css +++ /dev/null @@ -1,7 +0,0 @@ -#scheduler .dx-scheduler-cell-sizes-vertical { - height: 100px; -} - -#scheduler .dx-scheduler-cell-sizes-horizontal { - width: 150px; -} diff --git a/apps/demos/Demos/Scheduler/WebAPIService/React/App.tsx b/apps/demos/Demos/Scheduler/WebAPIService/React/App.tsx index 59adf85fc13b..3233fe8dce68 100644 --- a/apps/demos/Demos/Scheduler/WebAPIService/React/App.tsx +++ b/apps/demos/Demos/Scheduler/WebAPIService/React/App.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler'; +import Scheduler from 'devextreme-react/scheduler'; +import { type SchedulerTypes } from 'devextreme-react/scheduler'; import * as AspNetData from 'devextreme-aspnet-data-nojquery'; diff --git a/apps/demos/Demos/Scheduler/WebAPIService/ReactJs/App.js b/apps/demos/Demos/Scheduler/WebAPIService/ReactJs/App.js deleted file mode 100644 index 4df1e7c7b96c..000000000000 --- a/apps/demos/Demos/Scheduler/WebAPIService/ReactJs/App.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import Scheduler from 'devextreme-react/scheduler'; -import * as AspNetData from 'devextreme-aspnet-data-nojquery'; - -const url = 'https://js.devexpress.com/Demos/NetCore/api/SchedulerData'; -const dataSource = AspNetData.createStore({ - key: 'AppointmentId', - loadUrl: url, - insertUrl: url, - updateUrl: url, - deleteUrl: url, - onBeforeSend(_, ajaxOptions) { - ajaxOptions.xhrFields = { withCredentials: true }; - }, -}); -const currentDate = new Date(2021, 3, 27); -const views = ['day', 'workWeek', 'month']; -const App = () => ( - -); -export default App; diff --git a/apps/demos/Demos/Scheduler/WebAPIService/ReactJs/index.html b/apps/demos/Demos/Scheduler/WebAPIService/ReactJs/index.html deleted file mode 100644 index d6d83f735a76..000000000000 --- a/apps/demos/Demos/Scheduler/WebAPIService/ReactJs/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/WebAPIService/ReactJs/index.js b/apps/demos/Demos/Scheduler/WebAPIService/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/WebAPIService/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/WorkShifts/React/App.tsx b/apps/demos/Demos/Scheduler/WorkShifts/React/App.tsx index b30ff057e091..20fae93e2a42 100644 --- a/apps/demos/Demos/Scheduler/WorkShifts/React/App.tsx +++ b/apps/demos/Demos/Scheduler/WorkShifts/React/App.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; -import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler'; +import Scheduler from 'devextreme-react/scheduler'; +import { type SchedulerTypes } from 'devextreme-react/scheduler'; import RadioGroup from 'devextreme-react/radio-group'; import { data, shifts } from './data.ts'; diff --git a/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/App.js b/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/App.js deleted file mode 100644 index fa9ed84d5736..000000000000 --- a/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/App.js +++ /dev/null @@ -1,41 +0,0 @@ -import React, { useState } from 'react'; -import Scheduler from 'devextreme-react/scheduler'; -import RadioGroup from 'devextreme-react/radio-group'; -import { data, shifts } from './data.js'; - -const currentDate = new Date(2021, 2, 30); -const views = ['day', 'workWeek']; -const App = () => { - const [currentShift, setCurrentShift] = useState(shifts[0]); - return ( - <> -
-
-
Work Hours:
-
- -
-
-
-
- - - ); -}; -export default App; diff --git a/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/data.js b/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/data.js deleted file mode 100644 index 782a14a133a2..000000000000 --- a/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/data.js +++ /dev/null @@ -1,94 +0,0 @@ -export const shifts = [ - { - text: 'First shift', - offset: -120, - }, - { - text: 'Second shift', - offset: 360, - }, - { - text: 'Third shift', - offset: 840, - }, -]; -export const data = [ - { - text: 'Website Re-Design Plan', - startDate: '2021-03-29T16:00:00.000Z', - endDate: '2021-03-29T18:00:00.000Z', - }, - { - text: 'Approve Personal Computer Upgrade Plan', - startDate: '2021-03-31T01:30:00.000Z', - endDate: '2021-03-31T03:00:00.000Z', - }, - { - text: 'Final Budget Review', - startDate: '2021-03-30T16:30:00.000Z', - endDate: '2021-03-30T18:05:00.000Z', - }, - { - text: 'New Brochures', - startDate: '2021-04-01T23:30:00.000Z', - endDate: '2021-04-02T02:30:00.000Z', - }, - { - text: 'Approve New Online Marketing Strategy', - startDate: '2021-03-31T16:30:00.000Z', - endDate: '2021-03-31T18:30:00.000Z', - }, - { - text: 'Prepare 2021 Marketing Plan', - startDate: '2021-04-01T16:30:00.000Z', - endDate: '2021-04-01T18:00:00.000Z', - }, - { - text: 'Brochure Design Review', - startDate: '2021-04-02T17:30:00.000Z', - endDate: '2021-04-02T19:00:00.000Z', - }, - { - text: 'Create Icons for Website', - startDate: '2021-04-01T18:00:00.000Z', - endDate: '2021-04-01T19:30:00.000Z', - }, - { - text: 'Submit New Website Design', - startDate: '2021-04-02T09:30:00.000Z', - endDate: '2021-04-02T11:00:00.000Z', - }, - { - text: 'Launch New Website', - startDate: '2021-04-01T01:30:00.000Z', - endDate: '2021-04-01T03:00:00.000Z', - recurrenceRule: 'FREQ=WEEKLY;BYDAY=WE;INTERVAL=2', - }, - { - text: 'Install New Router in Dev Room', - startDate: '2021-03-29T08:00:00.000Z', - endDate: '2021-03-29T09:00:00.000Z', - }, - { - text: 'Upgrade Personal Computers', - startDate: '2021-03-30T01:00:00.000Z', - endDate: '2021-03-30T03:00:00.000Z', - }, - { - text: 'Install New Database', - startDate: '2021-03-31T08:30:00.000Z', - endDate: '2021-03-31T10:00:00.000Z', - }, - { - text: 'Update Customer Shipping Profiles', - startDate: '2021-04-01T09:30:00.000Z', - endDate: '2021-04-01T11:00:00.000Z', - recurrenceRule: 'FREQ=WEEKLY;BYDAY=TH', - }, - { - text: 'Upgrade Server Hardware', - startDate: '2021-03-30T08:30:00.000Z', - endDate: '2021-03-30T11:00:00.000Z', - recurrenceRule: 'FREQ=MONTHLY;BYMONTHDAY=30', - }, -]; diff --git a/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/index.html b/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/index.html deleted file mode 100644 index 8d812d7c36a1..000000000000 --- a/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/index.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - DevExtreme Demo - - - - - - - - - - - - -
-
-
- - diff --git a/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/index.js b/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/index.js deleted file mode 100644 index b853e0be8242..000000000000 --- a/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App.js'; - -ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/styles.css b/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/styles.css deleted file mode 100644 index 9895913b047b..000000000000 --- a/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/styles.css +++ /dev/null @@ -1,23 +0,0 @@ -.options { - background-color: rgba(191, 191, 191, 0.15); - margin-top: 20px; - display: flex; - align-items: flex-start; - height: 100%; -} - -.option { - padding: 16px; - display: flex; - align-items: center; -} - -.label, -.value { - display: inline-block; - vertical-align: middle; -} - -.label { - width: 100px; -} From ad42b538222b755fd27974bf4f0a797332979edc Mon Sep 17 00:00:00 2001 From: dmlvr Date: Wed, 7 Jan 2026 14:05:05 +0200 Subject: [PATCH 04/11] add reactjs demos for scheduler --- .../Scheduler/Adaptability/ReactJs/App.js | 42 + .../Scheduler/Adaptability/ReactJs/data.js | 71 + .../Scheduler/Adaptability/ReactJs/index.html | 44 + .../Scheduler/Adaptability/ReactJs/index.js | 5 + .../Scheduler/Adaptability/ReactJs/styles.css | 22 + .../Demos/Scheduler/Agenda/ReactJs/App.js | 38 + .../Demos/Scheduler/Agenda/ReactJs/data.js | 494 +++++++ .../Demos/Scheduler/Agenda/ReactJs/index.html | 39 + .../Demos/Scheduler/Agenda/ReactJs/index.js | 5 + .../Scheduler/AllDayPanelMode/ReactJs/App.js | 53 + .../Scheduler/AllDayPanelMode/ReactJs/data.js | 13 + .../AllDayPanelMode/ReactJs/index.html | 44 + .../AllDayPanelMode/ReactJs/index.js | 5 + .../AllDayPanelMode/ReactJs/styles.css | 23 + .../AppointmentCountPerCell/ReactJs/App.js | 40 + .../AppointmentCountPerCell/ReactJs/data.js | 185 +++ .../ReactJs/index.html | 39 + .../AppointmentCountPerCell/ReactJs/index.js | 5 + .../Demos/Scheduler/BasicViews/ReactJs/App.js | 18 + .../Scheduler/BasicViews/ReactJs/data.js | 84 ++ .../Scheduler/BasicViews/ReactJs/index.html | 39 + .../Scheduler/BasicViews/ReactJs/index.js | 5 + .../Scheduler/CellTemplates/ReactJs/App.js | 117 ++ .../CellTemplates/ReactJs/DataCell.js | 15 + .../CellTemplates/ReactJs/DataCellMonth.js | 15 + .../CellTemplates/ReactJs/DateCell.js | 13 + .../CellTemplates/ReactJs/TimeCell.js | 15 + .../Scheduler/CellTemplates/ReactJs/data.js | 74 + .../CellTemplates/ReactJs/index.html | 44 + .../Scheduler/CellTemplates/ReactJs/index.js | 5 + .../CellTemplates/ReactJs/styles.css | 79 + .../Scheduler/CellTemplates/ReactJs/utils.js | 56 + .../Scheduler/ContextMenu/ReactJs/App.js | 140 ++ .../ReactJs/AppointmentTemplate.js | 14 + .../Scheduler/ContextMenu/ReactJs/data.js | 86 ++ .../Scheduler/ContextMenu/ReactJs/index.html | 39 + .../Scheduler/ContextMenu/ReactJs/index.js | 5 + .../Scheduler/ContextMenu/ReactJs/styles.css | 21 + .../CurrentTimeIndicator/ReactJs/App.js | 101 ++ .../ReactJs/AppointmentTemplate.js | 19 + .../CurrentTimeIndicator/ReactJs/data.js | 62 + .../CurrentTimeIndicator/ReactJs/index.html | 44 + .../CurrentTimeIndicator/ReactJs/index.js | 5 + .../CurrentTimeIndicator/ReactJs/styles.css | 58 + .../CustomViewDuration/ReactJs/App.js | 36 + .../CustomViewDuration/ReactJs/data.js | 287 ++++ .../CustomViewDuration/ReactJs/index.html | 39 + .../CustomViewDuration/ReactJs/index.js | 5 + .../Scheduler/DragAndDrop/ReactJs/App.js | 91 ++ .../Scheduler/DragAndDrop/ReactJs/data.js | 66 + .../Scheduler/DragAndDrop/ReactJs/index.html | 44 + .../Scheduler/DragAndDrop/ReactJs/index.js | 5 + .../Scheduler/DragAndDrop/ReactJs/styles.css | 28 + .../Demos/Scheduler/Editing/ReactJs/App.js | 100 ++ .../Demos/Scheduler/Editing/ReactJs/data.js | 84 ++ .../Scheduler/Editing/ReactJs/index.html | 44 + .../Demos/Scheduler/Editing/ReactJs/index.js | 5 + .../Scheduler/Editing/ReactJs/styles.css | 21 + .../GoogleCalendarIntegration/ReactJs/App.js | 41 + .../ReactJs/index.html | 44 + .../ReactJs/index.js | 5 + .../ReactJs/styles.css | 13 + .../Scheduler/GroupByDate/ReactJs/App.js | 55 + .../Scheduler/GroupByDate/ReactJs/data.js | 183 +++ .../Scheduler/GroupByDate/ReactJs/index.html | 44 + .../Scheduler/GroupByDate/ReactJs/index.js | 5 + .../Scheduler/GroupByDate/ReactJs/styles.css | 24 + .../GroupingByResources/ReactJs/App.js | 41 + .../GroupingByResources/ReactJs/data.js | 182 +++ .../GroupingByResources/ReactJs/index.html | 44 + .../GroupingByResources/ReactJs/index.js | 5 + .../GroupingByResources/ReactJs/styles.css | 3 + .../ReactJs/App.js | 84 ++ .../ReactJs/data.js | 154 ++ .../ReactJs/index.html | 44 + .../ReactJs/index.js | 5 + .../ReactJs/styles.css | 15 + .../Demos/Scheduler/Overview/ReactJs/App.js | 35 + .../Scheduler/Overview/ReactJs/DataCell.js | 31 + .../Overview/ReactJs/ResourceCell.js | 39 + .../Demos/Scheduler/Overview/ReactJs/data.js | 98 ++ .../Scheduler/Overview/ReactJs/description.md | 4 + .../Scheduler/Overview/ReactJs/index.html | 44 + .../Demos/Scheduler/Overview/ReactJs/index.js | 5 + .../Scheduler/Overview/ReactJs/styles.css | 171 +++ .../RecurringAppointments/ReactJs/App.js | 25 + .../RecurringAppointments/ReactJs/data.js | 86 ++ .../RecurringAppointments/ReactJs/index.html | 39 + .../RecurringAppointments/ReactJs/index.js | 5 + .../Demos/Scheduler/Resources/ReactJs/App.js | 93 ++ .../Demos/Scheduler/Resources/ReactJs/data.js | 184 +++ .../Scheduler/Resources/ReactJs/index.html | 44 + .../Scheduler/Resources/ReactJs/index.js | 5 + .../Scheduler/Resources/ReactJs/styles.css | 15 + .../Scheduler/SignalRService/ReactJs/App.js | 84 ++ .../SignalRService/ReactJs/index.html | 45 + .../Scheduler/SignalRService/ReactJs/index.js | 5 + .../SignalRService/ReactJs/styles.css | 15 + .../Scheduler/SimpleArray/ReactJs/App.js | 18 + .../Scheduler/SimpleArray/ReactJs/data.js | 84 ++ .../Scheduler/SimpleArray/ReactJs/index.html | 39 + .../Scheduler/SimpleArray/ReactJs/index.js | 5 + .../Demos/Scheduler/Templates/ReactJs/App.js | 181 +++ .../Templates/ReactJs/Appointment.js | 35 + .../Templates/ReactJs/AppointmentTooltip.js | 27 + .../Templates/ReactJs/MovieInfoContainer.js | 54 + .../Demos/Scheduler/Templates/ReactJs/data.js | 1279 +++++++++++++++++ .../Templates/ReactJs/description.md | 14 + .../Scheduler/Templates/ReactJs/index.html | 44 + .../Scheduler/Templates/ReactJs/index.js | 5 + .../Scheduler/Templates/ReactJs/styles.css | 88 ++ .../Scheduler/TimeZonesSupport/ReactJs/App.js | 64 + .../TimeZonesSupport/ReactJs/data.js | 59 + .../TimeZonesSupport/ReactJs/index.html | 44 + .../TimeZonesSupport/ReactJs/index.js | 5 + .../TimeZonesSupport/ReactJs/styles.css | 13 + .../Demos/Scheduler/Timelines/ReactJs/App.js | 39 + .../Demos/Scheduler/Timelines/ReactJs/data.js | 435 ++++++ .../Scheduler/Timelines/ReactJs/index.html | 39 + .../Scheduler/Timelines/ReactJs/index.js | 5 + .../Demos/Scheduler/Toolbar/ReactJs/App.js | 126 ++ .../Demos/Scheduler/Toolbar/ReactJs/data.js | 123 ++ .../Scheduler/Toolbar/ReactJs/description.md | 20 + .../Scheduler/Toolbar/ReactJs/index.html | 39 + .../Demos/Scheduler/Toolbar/ReactJs/index.js | 5 + .../Scheduler/VirtualScrolling/ReactJs/App.js | 46 + .../VirtualScrolling/ReactJs/data.js | 256 ++++ .../VirtualScrolling/ReactJs/index.html | 44 + .../VirtualScrolling/ReactJs/index.js | 5 + .../VirtualScrolling/ReactJs/styles.css | 7 + .../Scheduler/WebAPIService/ReactJs/App.js | 36 + .../WebAPIService/ReactJs/index.html | 39 + .../Scheduler/WebAPIService/ReactJs/index.js | 5 + .../Demos/Scheduler/WorkShifts/ReactJs/App.js | 41 + .../Scheduler/WorkShifts/ReactJs/data.js | 94 ++ .../Scheduler/WorkShifts/ReactJs/index.html | 43 + .../Scheduler/WorkShifts/ReactJs/index.js | 5 + .../Scheduler/WorkShifts/ReactJs/styles.css | 23 + 138 files changed, 8791 insertions(+) create mode 100644 apps/demos/Demos/Scheduler/Adaptability/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/Adaptability/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/Adaptability/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/Adaptability/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/Adaptability/ReactJs/styles.css create mode 100644 apps/demos/Demos/Scheduler/Agenda/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/Agenda/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/Agenda/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/Agenda/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/styles.css create mode 100644 apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/BasicViews/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/BasicViews/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/BasicViews/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/BasicViews/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DataCell.js create mode 100644 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DataCellMonth.js create mode 100644 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DateCell.js create mode 100644 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/TimeCell.js create mode 100644 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/styles.css create mode 100644 apps/demos/Demos/Scheduler/CellTemplates/ReactJs/utils.js create mode 100644 apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/ContextMenu/ReactJs/AppointmentTemplate.js create mode 100644 apps/demos/Demos/Scheduler/ContextMenu/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/ContextMenu/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/ContextMenu/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css create mode 100644 apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/AppointmentTemplate.js create mode 100644 apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css create mode 100644 apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/styles.css create mode 100644 apps/demos/Demos/Scheduler/Editing/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/Editing/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/Editing/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/Editing/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/Editing/ReactJs/styles.css create mode 100644 apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/styles.css create mode 100644 apps/demos/Demos/Scheduler/GroupByDate/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/GroupByDate/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/GroupByDate/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/GroupByDate/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/GroupByDate/ReactJs/styles.css create mode 100644 apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/styles.css create mode 100644 apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/styles.css create mode 100644 apps/demos/Demos/Scheduler/Overview/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/Overview/ReactJs/DataCell.js create mode 100644 apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js create mode 100644 apps/demos/Demos/Scheduler/Overview/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/Overview/ReactJs/description.md create mode 100644 apps/demos/Demos/Scheduler/Overview/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/Overview/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css create mode 100644 apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/Resources/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/Resources/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/Resources/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/Resources/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/Resources/ReactJs/styles.css create mode 100644 apps/demos/Demos/Scheduler/SignalRService/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/SignalRService/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/SignalRService/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/SignalRService/ReactJs/styles.css create mode 100644 apps/demos/Demos/Scheduler/SimpleArray/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/SimpleArray/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/SimpleArray/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/SimpleArray/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/Templates/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/Templates/ReactJs/Appointment.js create mode 100644 apps/demos/Demos/Scheduler/Templates/ReactJs/AppointmentTooltip.js create mode 100644 apps/demos/Demos/Scheduler/Templates/ReactJs/MovieInfoContainer.js create mode 100644 apps/demos/Demos/Scheduler/Templates/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/Templates/ReactJs/description.md create mode 100644 apps/demos/Demos/Scheduler/Templates/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/Templates/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/Templates/ReactJs/styles.css create mode 100644 apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/styles.css create mode 100644 apps/demos/Demos/Scheduler/Timelines/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/Timelines/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/Timelines/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/Timelines/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/Toolbar/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/Toolbar/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/Toolbar/ReactJs/description.md create mode 100644 apps/demos/Demos/Scheduler/Toolbar/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/Toolbar/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/styles.css create mode 100644 apps/demos/Demos/Scheduler/WebAPIService/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/WebAPIService/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/WebAPIService/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/WorkShifts/ReactJs/App.js create mode 100644 apps/demos/Demos/Scheduler/WorkShifts/ReactJs/data.js create mode 100644 apps/demos/Demos/Scheduler/WorkShifts/ReactJs/index.html create mode 100644 apps/demos/Demos/Scheduler/WorkShifts/ReactJs/index.js create mode 100644 apps/demos/Demos/Scheduler/WorkShifts/ReactJs/styles.css diff --git a/apps/demos/Demos/Scheduler/Adaptability/ReactJs/App.js b/apps/demos/Demos/Scheduler/Adaptability/ReactJs/App.js new file mode 100644 index 000000000000..278d5cb0dfbf --- /dev/null +++ b/apps/demos/Demos/Scheduler/Adaptability/ReactJs/App.js @@ -0,0 +1,42 @@ +import React, { useCallback, useRef } from 'react'; +import Scheduler, { Resource } from 'devextreme-react/scheduler'; +import SpeedDialAction from 'devextreme-react/speed-dial-action'; +import { data, priorities } from './data.js'; + +const views = ['week', 'month']; +const cellDuration = 30; +const currentDate = new Date(2021, 2, 25); +const App = () => { + const schedulerRef = useRef(null); + const showAppointmentPopup = useCallback(() => { + schedulerRef.current?.instance().showAppointmentPopup(); + }, []); + return ( + <> + + + + + + ); +}; +export default App; diff --git a/apps/demos/Demos/Scheduler/Adaptability/ReactJs/data.js b/apps/demos/Demos/Scheduler/Adaptability/ReactJs/data.js new file mode 100644 index 000000000000..df6c50e558ab --- /dev/null +++ b/apps/demos/Demos/Scheduler/Adaptability/ReactJs/data.js @@ -0,0 +1,71 @@ +export const data = [ + { + text: 'Website Re-Design Plan', + startDate: new Date('2021-03-01T16:30:00.000Z'), + endDate: new Date('2021-03-01T18:30:00.000Z'), + recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,FR;WKST=TU;INTERVAL=2;COUNT=32', + }, + { + text: 'Book Flights to San Fran for Sales Trip', + startDate: new Date('2021-03-01T16:30:00.000Z'), + endDate: new Date('2021-03-01T18:30:00.000Z'), + recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,FR;INTERVAL=4;COUNT=32', + allDay: true, + priorityId: [1], + }, + { + text: 'Install New Router in Dev Room', + startDate: new Date('2021-03-01T16:30:00.000Z'), + endDate: new Date('2021-03-01T18:30:00.000Z'), + recurrenceRule: 'FREQ=WEEKLY;BYDAY=FR;INTERVAL=2;COUNT=32', + }, + { + text: 'Approve Personal Computer Upgrade Plan', + startDate: new Date('2021-02-10T17:00:00.000Z'), + endDate: new Date('2021-02-10T18:00:00.000Z'), + recurrenceRule: 'FREQ=WEEKLY;BYDAY=WE;INTERVAL=2;COUNT=32', + priorityId: [2], + }, + { + text: 'Final Budget Review', + startDate: new Date('2021-04-01T19:00:00.000Z'), + endDate: new Date('2021-04-01T20:35:00.000Z'), + }, + { + text: 'New Brochures', + startDate: new Date('2021-04-01T21:30:00.000Z'), + endDate: new Date('2021-04-01T22:45:00.000Z'), + }, + { + text: 'Install New Database', + startDate: new Date('2021-04-01T16:45:00.000Z'), + endDate: new Date('2021-04-01T18:15:00.000Z'), + }, + { + text: 'Approve New Online Marketing Strategy', + startDate: new Date('2021-04-01T19:00:00.000Z'), + endDate: new Date('2021-04-01T21:00:00.000Z'), + }, + { + text: 'Upgrade Personal Computers', + startDate: new Date('2021-04-01T22:15:00.000Z'), + endDate: new Date('2021-04-01T23:30:00.000Z'), + }, + { + text: 'Upgrade Personal Computers', + startDate: new Date('2021-04-02T22:15:00.000Z'), + endDate: new Date('2021-04-02T23:30:00.000Z'), + }, +]; +export const priorities = [ + { + text: 'High priority', + id: 1, + color: '#cc5c53', + }, + { + text: 'Low priority', + id: 2, + color: '#ff9747', + }, +]; diff --git a/apps/demos/Demos/Scheduler/Adaptability/ReactJs/index.html b/apps/demos/Demos/Scheduler/Adaptability/ReactJs/index.html new file mode 100644 index 000000000000..db31b0fd60c6 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Adaptability/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/Adaptability/ReactJs/index.js b/apps/demos/Demos/Scheduler/Adaptability/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Adaptability/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/Adaptability/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Adaptability/ReactJs/styles.css new file mode 100644 index 000000000000..cdc82e6e995c --- /dev/null +++ b/apps/demos/Demos/Scheduler/Adaptability/ReactJs/styles.css @@ -0,0 +1,22 @@ +@media only screen and (max-width: 370px) { + .dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-popup-bottom.dx-toolbar .dx-toolbar-items-container { + height: auto; + } + + .dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-toolbar-items-container .dx-toolbar-center { + display: flex; + flex-direction: column; + } + + .dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-button { + padding: 0; + } + + .dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-button .dx-button { + width: 200px; + } + + .dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-button:nth-child(1) { + margin-bottom: 12px; + } +} diff --git a/apps/demos/Demos/Scheduler/Agenda/ReactJs/App.js b/apps/demos/Demos/Scheduler/Agenda/ReactJs/App.js new file mode 100644 index 000000000000..3730b772b46a --- /dev/null +++ b/apps/demos/Demos/Scheduler/Agenda/ReactJs/App.js @@ -0,0 +1,38 @@ +import React from 'react'; +import Scheduler, { Resource } from 'devextreme-react/scheduler'; +import ArrayStore from 'devextreme/data/array_store'; +import { assignees, data, priorities } from './data.js'; + +const currentDate = new Date(2021, 4, 11); +const views = ['agenda']; +const store = new ArrayStore({ + key: 'id', + data, +}); +const App = () => ( + + + + +); +export default App; diff --git a/apps/demos/Demos/Scheduler/Agenda/ReactJs/data.js b/apps/demos/Demos/Scheduler/Agenda/ReactJs/data.js new file mode 100644 index 000000000000..7a79617e9fe2 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Agenda/ReactJs/data.js @@ -0,0 +1,494 @@ +export const assignees = [ + { + text: 'Samantha Bright', + id: 1, + color: '#727bd2', + }, + { + text: 'John Heart', + id: 2, + color: '#32c9ed', + }, + { + text: 'Todd Hoffman', + id: 3, + color: '#2a7ee4', + }, + { + text: 'Sandra Johnson', + id: 4, + color: '#7b49d3', + }, +]; +export const priorities = [ + { + text: 'High', + id: 1, + color: '#cc5c53', + }, + { + text: 'Low', + id: 2, + color: '#ff9747', + }, +]; +export const data = [ + { + id: 1, + text: 'Google AdWords Strategy', + startDate: new Date('2021-05-03T16:00:00.000Z'), + endDate: new Date('2021-05-03T17:30:00.000Z'), + assigneeId: [3], + priorityId: 1, + }, + { + id: 2, + text: 'New Brochures', + startDate: new Date('2021-05-03T18:30:00.000Z'), + endDate: new Date('2021-05-03T21:15:00.000Z'), + assigneeId: [1], + priorityId: 1, + }, + { + id: 3, + text: 'Brochure Design Review', + startDate: new Date('2021-05-03T20:15:00.000Z'), + endDate: new Date('2021-05-03T23:15:00.000Z'), + assigneeId: [2], + priorityId: 2, + }, + { + id: 4, + text: 'Website Re-Design Plan', + startDate: new Date('2021-05-03T23:45:00.000Z'), + endDate: new Date('2021-05-04T18:15:00.000Z'), + assigneeId: [3], + priorityId: 1, + }, + { + id: 5, + text: 'Rollout of New Website and Marketing Brochures', + startDate: new Date('2021-05-04T15:15:00.000Z'), + endDate: new Date('2021-05-04T17:45:00.000Z'), + assigneeId: [4], + priorityId: 2, + }, + { + id: 6, + text: 'Update Sales Strategy Documents', + startDate: new Date('2021-05-04T19:00:00.000Z'), + endDate: new Date('2021-05-04T20:45:00.000Z'), + assigneeId: [1], + priorityId: 2, + }, + { + id: 7, + text: 'Non-Compete Agreements', + startDate: new Date('2021-05-05T15:15:00.000Z'), + endDate: new Date('2021-05-05T16:00:00.000Z'), + assigneeId: [1], + priorityId: 1, + }, + { + id: 8, + text: 'Approve Hiring of John Jeffers', + startDate: new Date('2021-05-05T17:00:00.000Z'), + endDate: new Date('2021-05-05T18:15:00.000Z'), + assigneeId: [2], + priorityId: 2, + }, + { + id: 9, + text: 'Update NDA Agreement', + startDate: new Date('2021-05-05T18:45:00.000Z'), + endDate: new Date('2021-05-05T20:45:00.000Z'), + assigneeId: [3], + priorityId: 1, + }, + { + id: 10, + text: 'Update Employee Files with New NDA', + startDate: new Date('2021-05-05T21:00:00.000Z'), + endDate: new Date('2021-05-05T23:45:00.000Z'), + assigneeId: [4], + priorityId: 1, + }, + { + id: 11, + text: 'Submit Questions Regarding New NDA', + startDate: new Date('2021-05-07T01:00:00.000Z'), + endDate: new Date('2021-05-06T16:30:00.000Z'), + assigneeId: [1], + priorityId: 1, + }, + { + id: 12, + text: 'Submit Signed NDA', + startDate: new Date('2021-05-06T19:45:00.000Z'), + endDate: new Date('2021-05-06T21:00:00.000Z'), + assigneeId: [1], + priorityId: 2, + }, + { + id: 13, + text: 'Review Revenue Projections', + startDate: new Date('2021-05-07T00:15:00.000Z'), + endDate: new Date('2021-05-06T15:00:00.000Z'), + assigneeId: [3], + priorityId: 1, + }, + { + id: 14, + text: 'Comment on Revenue Projections', + startDate: new Date('2021-05-07T16:15:00.000Z'), + endDate: new Date('2021-05-07T18:15:00.000Z'), + assigneeId: [3], + priorityId: 2, + }, + { + id: 15, + text: 'Provide New Health Insurance Docs', + startDate: new Date('2021-05-07T19:45:00.000Z'), + endDate: new Date('2021-05-07T21:15:00.000Z'), + assigneeId: [3], + priorityId: 2, + }, + { + id: 16, + text: 'Review Changes to Health Insurance Coverage', + startDate: new Date('2021-05-07T21:15:00.000Z'), + endDate: new Date('2021-05-07T22:30:00.000Z'), + assigneeId: [3], + priorityId: 2, + }, + { + id: 17, + text: 'Review Training Course for any Omissions', + startDate: new Date('2021-05-10T21:00:00.000Z'), + endDate: new Date('2021-05-11T19:00:00.000Z'), + assigneeId: [1], + priorityId: 1, + }, + { + id: 18, + text: 'Recall Rebate Form', + startDate: new Date('2021-05-10T19:45:00.000Z'), + endDate: new Date('2021-05-10T20:15:00.000Z'), + assigneeId: [3], + priorityId: 1, + }, + { + id: 19, + text: 'Create Report on Customer Feedback', + startDate: new Date('2021-05-11T22:15:00.000Z'), + endDate: new Date('2021-05-12T00:30:00.000Z'), + assigneeId: [2], + priorityId: 2, + }, + { + id: 20, + text: 'Review Customer Feedback Report', + startDate: new Date('2021-05-11T23:15:00.000Z'), + endDate: new Date('2021-05-12T01:30:00.000Z'), + assigneeId: [2], + priorityId: 1, + }, + { + id: 21, + text: 'Customer Feedback Report Analysis', + startDate: new Date('2021-05-12T16:30:00.000Z'), + endDate: new Date('2021-05-12T17:30:00.000Z'), + recurrenceRule: 'FREQ=WEEKLY', + assigneeId: [4], + priorityId: 2, + }, + { + id: 22, + text: 'Prepare Shipping Cost Analysis Report', + startDate: new Date('2021-05-12T19:30:00.000Z'), + endDate: new Date('2021-05-12T20:30:00.000Z'), + assigneeId: [1], + priorityId: 1, + }, + { + id: 23, + text: 'Provide Feedback on Shippers', + startDate: new Date('2021-05-12T21:15:00.000Z'), + endDate: new Date('2021-05-12T23:00:00.000Z'), + assigneeId: [4], + priorityId: 2, + }, + { + id: 24, + text: 'Select Preferred Shipper', + startDate: new Date('2021-05-13T00:30:00.000Z'), + endDate: new Date('2021-05-13T03:00:00.000Z'), + assigneeId: [1], + priorityId: 2, + }, + { + id: 25, + text: 'Complete Shipper Selection Form', + startDate: new Date('2021-05-13T15:30:00.000Z'), + endDate: new Date('2021-05-13T17:00:00.000Z'), + assigneeId: [1], + priorityId: 2, + }, + { + id: 26, + text: 'Upgrade Server Hardware', + startDate: new Date('2021-05-13T19:00:00.000Z'), + endDate: new Date('2021-05-13T21:15:00.000Z'), + recurrenceRule: 'FREQ=WEEKLY', + assigneeId: [2], + priorityId: 1, + }, + { + id: 27, + text: 'Upgrade Personal Computers', + startDate: new Date('2021-05-13T21:45:00.000Z'), + endDate: new Date('2021-05-13T23:30:00.000Z'), + assigneeId: [1], + priorityId: 1, + }, + { + id: 28, + text: 'Upgrade Apps to Windows RT or stay with WinForms', + startDate: new Date('2021-05-14T17:30:00.000Z'), + endDate: new Date('2021-05-14T20:00:00.000Z'), + assigneeId: [3], + priorityId: 2, + }, + { + id: 29, + text: 'Estimate Time Required to Touch-Enable Apps', + startDate: new Date('2021-05-14T21:45:00.000Z'), + endDate: new Date('2021-05-14T23:30:00.000Z'), + assigneeId: [3], + priorityId: 1, + }, + { + id: 30, + text: 'Report on Tranistion to Touch-Based Apps', + startDate: new Date('2021-05-15T01:30:00.000Z'), + endDate: new Date('2021-05-15T02:00:00.000Z'), + assigneeId: [4], + priorityId: 1, + }, + { + id: 31, + text: 'Submit New Website Design', + startDate: new Date('2021-05-17T15:00:00.000Z'), + endDate: new Date('2021-05-17T17:00:00.000Z'), + assigneeId: [2], + priorityId: 2, + }, + { + id: 32, + text: 'Create Icons for Website', + startDate: new Date('2021-05-17T18:30:00.000Z'), + endDate: new Date('2021-05-17T20:15:00.000Z'), + assigneeId: [4], + priorityId: 2, + }, + { + id: 33, + text: 'Create New Product Pages', + startDate: new Date('2021-05-18T16:45:00.000Z'), + endDate: new Date('2021-05-18T18:45:00.000Z'), + assigneeId: [2], + priorityId: 1, + }, + { + id: 34, + text: 'Approve Website Launch', + startDate: new Date('2021-05-18T19:00:00.000Z'), + endDate: new Date('2021-05-18T22:15:00.000Z'), + assigneeId: [3], + priorityId: 2, + }, + { + id: 35, + text: 'Update Customer Shipping Profiles', + startDate: new Date('2021-05-19T16:30:00.000Z'), + endDate: new Date('2021-05-19T18:00:00.000Z'), + assigneeId: [1], + priorityId: 2, + }, + { + id: 36, + text: 'Create New Shipping Return Labels', + startDate: new Date('2021-05-19T19:45:00.000Z'), + endDate: new Date('2021-05-19T21:00:00.000Z'), + assigneeId: [3], + priorityId: 1, + }, + { + id: 37, + text: 'Get Design for Shipping Return Labels', + startDate: new Date('2021-05-19T22:00:00.000Z'), + endDate: new Date('2021-05-19T23:30:00.000Z'), + assigneeId: [2], + priorityId: 2, + }, + { + id: 38, + text: 'PSD needed for Shipping Return Labels', + startDate: new Date('2021-05-20T15:30:00.000Z'), + endDate: new Date('2021-05-20T16:15:00.000Z'), + assigneeId: [3], + priorityId: 1, + }, + { + id: 39, + text: 'Contact ISP and Discuss Payment Options', + startDate: new Date('2021-05-20T18:30:00.000Z'), + endDate: new Date('2021-05-20T23:00:00.000Z'), + assigneeId: [4], + priorityId: 1, + }, + { + id: 40, + text: 'Prepare Year-End Support Summary Report', + startDate: new Date('2021-05-21T00:00:00.000Z'), + endDate: new Date('2021-05-21T03:00:00.000Z'), + assigneeId: [1], + priorityId: 1, + }, + { + id: 41, + text: 'Review New Training Material', + startDate: new Date('2021-05-21T15:00:00.000Z'), + endDate: new Date('2021-05-21T16:15:00.000Z'), + assigneeId: [2], + priorityId: 2, + }, + { + id: 42, + text: 'Distribute Training Material to Support Staff', + startDate: new Date('2021-05-21T19:45:00.000Z'), + endDate: new Date('2021-05-21T21:00:00.000Z'), + assigneeId: [3], + priorityId: 1, + }, + { + id: 43, + text: 'Training Material Distribution Schedule', + startDate: new Date('2021-05-21T21:15:00.000Z'), + endDate: new Date('2021-05-21T23:15:00.000Z'), + assigneeId: [3], + priorityId: 2, + }, + { + id: 44, + text: 'Approval on Converting to New HDMI Specification', + startDate: new Date('2021-05-24T16:30:00.000Z'), + endDate: new Date('2021-05-24T17:15:00.000Z'), + assigneeId: [4], + priorityId: 2, + }, + { + id: 45, + text: 'Create New Spike for Automation Server', + startDate: new Date('2021-05-24T17:00:00.000Z'), + endDate: new Date('2021-05-24T19:30:00.000Z'), + assigneeId: [1], + priorityId: 1, + }, + { + id: 46, + text: 'Code Review - New Automation Server', + startDate: new Date('2021-05-24T20:00:00.000Z'), + endDate: new Date('2021-05-24T22:00:00.000Z'), + assigneeId: [3], + priorityId: 1, + }, + { + id: 47, + text: 'Confirm Availability for Sales Meeting', + startDate: new Date('2021-05-25T17:15:00.000Z'), + endDate: new Date('2021-05-25T22:15:00.000Z'), + assigneeId: [2], + priorityId: 2, + }, + { + id: 48, + text: 'Reschedule Sales Team Meeting', + startDate: new Date('2021-05-25T23:15:00.000Z'), + endDate: new Date('2021-05-26T01:00:00.000Z'), + assigneeId: [1], + priorityId: 1, + }, + { + id: 49, + text: 'Send 2 Remotes for Giveaways', + startDate: new Date('2021-05-26T16:30:00.000Z'), + endDate: new Date('2021-05-26T18:45:00.000Z'), + assigneeId: [3], + priorityId: 2, + }, + { + id: 50, + text: 'Discuss Product Giveaways with Management', + startDate: new Date('2021-05-26T19:15:00.000Z'), + endDate: new Date('2021-05-26T23:45:00.000Z'), + assigneeId: [4], + priorityId: 1, + }, + { + id: 51, + text: 'Replace Desktops on the 3rd Floor', + startDate: new Date('2021-05-27T16:30:00.000Z'), + endDate: new Date('2021-05-27T17:45:00.000Z'), + assigneeId: [2], + priorityId: 1, + }, + { + id: 52, + text: 'Update Database with New Leads', + startDate: new Date('2021-05-27T19:00:00.000Z'), + endDate: new Date('2021-05-27T21:15:00.000Z'), + assigneeId: [2], + priorityId: 2, + }, + { + id: 53, + text: 'Mail New Leads for Follow Up', + startDate: new Date('2021-05-27T21:45:00.000Z'), + endDate: new Date('2021-05-27T22:30:00.000Z'), + assigneeId: [1], + priorityId: 2, + }, + { + id: 54, + text: 'Send Territory Sales Breakdown', + startDate: new Date('2021-05-28T01:00:00.000Z'), + endDate: new Date('2021-05-28T03:00:00.000Z'), + assigneeId: [2], + priorityId: 2, + }, + { + id: 55, + text: 'Territory Sales Breakdown Report', + startDate: new Date('2021-05-28T15:45:00.000Z'), + endDate: new Date('2021-05-28T16:45:00.000Z'), + assigneeId: [3], + priorityId: 2, + }, + { + id: 56, + text: 'Report on the State of Engineering Dept', + startDate: new Date('2021-05-28T21:45:00.000Z'), + endDate: new Date('2021-05-28T22:30:00.000Z'), + assigneeId: [4], + priorityId: 1, + }, + { + id: 57, + text: 'Staff Productivity Report', + startDate: new Date('2021-05-28T23:15:00.000Z'), + endDate: new Date('2021-05-29T02:30:00.000Z'), + assigneeId: [1], + priorityId: 1, + }, +]; diff --git a/apps/demos/Demos/Scheduler/Agenda/ReactJs/index.html b/apps/demos/Demos/Scheduler/Agenda/ReactJs/index.html new file mode 100644 index 000000000000..d6d83f735a76 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Agenda/ReactJs/index.html @@ -0,0 +1,39 @@ + + + + DevExtreme Demo + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/Agenda/ReactJs/index.js b/apps/demos/Demos/Scheduler/Agenda/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Agenda/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/App.js b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/App.js new file mode 100644 index 000000000000..d34680fc970c --- /dev/null +++ b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/App.js @@ -0,0 +1,53 @@ +import React, { useCallback, useState } from 'react'; +import Scheduler from 'devextreme-react/scheduler'; +import RadioGroup from 'devextreme-react/radio-group'; +import { data } from './data.js'; + +const currentDate = new Date(2021, 2, 28); +const views = [ + { + type: 'day', + name: '4 Days', + intervalCount: 4, + }, + 'week', +]; +const allDayPanelItems = ['all', 'allDay', 'hidden']; +const App = () => { + const [allDayPanelMode, setAllDayPanelMode] = useState('allDay'); + const onChangeAllDayPanelMode = useCallback( + (e) => { + setAllDayPanelMode(e.value); + }, + [setAllDayPanelMode], + ); + return ( + <> + + +
+
+
All day panel mode
+
+ +
+
+
+ + ); +}; +export default App; diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/data.js b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/data.js new file mode 100644 index 000000000000..31d6a49a07aa --- /dev/null +++ b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/data.js @@ -0,0 +1,13 @@ +export const data = [ + { + text: 'Book Flights to San Fran for Sales Trip', + startDate: new Date('2021-03-28T17:00:00.000Z'), + endDate: new Date('2021-03-28T18:00:00.000Z'), + allDay: true, + }, + { + text: 'Customer Workshop', + startDate: new Date('2021-03-29T17:30:00.000Z'), + endDate: new Date('2021-04-03T19:00:00.000Z'), + }, +]; diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/index.html b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/index.html new file mode 100644 index 000000000000..db31b0fd60c6 --- /dev/null +++ b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/index.js b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/styles.css b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/styles.css new file mode 100644 index 000000000000..636ad495a9d8 --- /dev/null +++ b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/styles.css @@ -0,0 +1,23 @@ +.options { + background-color: rgba(191, 191, 191, 0.15); + margin-top: 20px; + display: flex; + align-items: flex-start; + height: 100%; +} + +.option { + padding: 25px 15px; + display: flex; + align-items: center; +} + +.label, +.value { + display: inline-block; + vertical-align: middle; +} + +.label { + width: 180px; +} diff --git a/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/App.js b/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/App.js new file mode 100644 index 000000000000..3f72947ea720 --- /dev/null +++ b/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/App.js @@ -0,0 +1,40 @@ +import React from 'react'; +import Scheduler, { Resource } from 'devextreme-react/scheduler'; +import { data, resourcesData } from './data.js'; + +const currentDate = new Date(2021, 2, 25); +const views = [ + { + type: 'month', + name: 'Auto Mode', + maxAppointmentsPerCell: 'auto', + }, + { + type: 'month', + name: 'Unlimited Mode', + maxAppointmentsPerCell: 'unlimited', + }, + { + type: 'month', + name: 'Numeric Mode', + maxAppointmentsPerCell: 2, + }, +]; +const App = () => ( + + + +); +export default App; diff --git a/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/data.js b/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/data.js new file mode 100644 index 000000000000..8ec75f185c75 --- /dev/null +++ b/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/data.js @@ -0,0 +1,185 @@ +export const data = [ + { + text: 'Google AdWords Strategy', + roomId: 1, + startDate: new Date('2021-03-05T16:00:00.000Z'), + endDate: new Date('2021-03-05T17:30:00.000Z'), + }, + { + text: 'New Brochures', + roomId: 5, + startDate: new Date('2021-03-05T18:30:00.000Z'), + endDate: new Date('2021-03-05T21:15:00.000Z'), + }, + { + text: 'Brochure Design Review', + roomId: 5, + startDate: new Date('2021-03-05T20:15:00.000Z'), + endDate: new Date('2021-03-05T23:15:00.000Z'), + }, + { + text: 'Website Re-Design Plan', + roomId: 5, + startDate: new Date('2021-03-05T23:45:00.000Z'), + endDate: new Date('2021-03-05T18:15:00.000Z'), + }, + { + text: 'Rollout of New Website and Marketing Brochures', + roomId: 2, + startDate: new Date('2021-03-09T15:15:00.000Z'), + endDate: new Date('2021-03-09T17:45:00.000Z'), + }, + { + text: 'Update Sales Strategy Documents', + roomId: 3, + startDate: new Date('2021-03-09T19:00:00.000Z'), + endDate: new Date('2021-03-09T20:45:00.000Z'), + }, + { + text: 'Non-Compete Agreements', + roomId: 3, + startDate: new Date('2021-03-09T15:15:00.000Z'), + endDate: new Date('2021-03-09T16:00:00.000Z'), + }, + { + text: 'Update NDA Agreement', + roomId: 1, + startDate: new Date('2021-03-10T18:45:00.000Z'), + endDate: new Date('2021-03-10T20:45:00.000Z'), + }, + { + text: 'Update Employee Files with New NDA', + roomId: 4, + startDate: new Date('2021-03-18T21:00:00.000Z'), + endDate: new Date('2021-03-18T23:45:00.000Z'), + }, + { + text: 'Submit Questions Regarding New NDA', + roomId: 4, + startDate: new Date('2021-03-18T15:00:00.000Z'), + endDate: new Date('2021-03-18T16:30:00.000Z'), + }, + { + text: 'Submit Signed NDA', + roomId: 4, + startDate: new Date('2021-03-18T19:45:00.000Z'), + endDate: new Date('2021-03-18T21:00:00.000Z'), + }, + { + text: 'Review Revenue Projections', + roomId: 4, + startDate: new Date('2021-03-26T00:15:00.000Z'), + endDate: new Date('2021-03-26T01:00:00.000Z'), + }, + { + text: 'Comment on Revenue Projections', + roomId: 1, + startDate: new Date('2021-03-22T16:15:00.000Z'), + endDate: new Date('2021-03-22T18:15:00.000Z'), + }, + { + text: 'Provide New Health Insurance Docs', + roomId: 4, + startDate: new Date('2021-03-22T19:45:00.000Z'), + endDate: new Date('2021-03-22T21:15:00.000Z'), + }, + { + text: 'Review Changes to Health Insurance Coverage', + roomId: 4, + startDate: new Date('2021-03-25T21:15:00.000Z'), + endDate: new Date('2021-03-25T22:30:00.000Z'), + }, + { + text: 'Review Training Course for any Omissions', + roomId: 4, + startDate: new Date('2021-03-22T21:00:00.000Z'), + endDate: new Date('2021-03-22T19:00:00.000Z'), + }, + { + text: 'Recall Rebate Form', + roomId: 2, + startDate: new Date('2021-03-23T19:45:00.000Z'), + endDate: new Date('2021-03-23T20:15:00.000Z'), + }, + { + text: 'Create Report on Customer Feedback', + roomId: 3, + startDate: new Date('2021-03-23T22:15:00.000Z'), + endDate: new Date('2021-03-24T00:30:00.000Z'), + }, + { + text: 'Review Customer Feedback Report', + roomId: 3, + startDate: new Date('2021-03-17T23:15:00.000Z'), + endDate: new Date('2021-03-18T01:30:00.000Z'), + }, + { + text: 'Customer Feedback Report Analysis', + roomId: 3, + startDate: new Date('2021-03-17T16:30:00.000Z'), + endDate: new Date('2021-03-17T17:30:00.000Z'), + }, + { + text: 'Prepare Shipping Cost Analysis Report', + roomId: 3, + startDate: new Date('2021-03-23T19:30:00.000Z'), + endDate: new Date('2021-03-23T20:30:00.000Z'), + }, + { + text: 'Provide Feedback on Shippers', + roomId: 3, + startDate: new Date('2021-03-23T21:15:00.000Z'), + endDate: new Date('2021-03-23T23:00:00.000Z'), + }, + { + text: 'Select Preferred Shipper', + roomId: 1, + startDate: new Date('2021-03-27T00:30:00.000Z'), + endDate: new Date('2021-03-27T03:00:00.000Z'), + }, + { + text: 'Complete Shipper Selection Form', + roomId: 5, + startDate: new Date('2021-03-25T15:30:00.000Z'), + endDate: new Date('2021-03-25T17:00:00.000Z'), + }, + { + text: 'Upgrade Server Hardware', + roomId: 5, + startDate: new Date('2021-03-26T19:00:00.000Z'), + endDate: new Date('2021-03-26T21:15:00.000Z'), + }, + { + text: 'Upgrade Personal Computers', + roomId: 5, + startDate: new Date('2021-03-26T21:45:00.000Z'), + endDate: new Date('2021-03-26T23:30:00.000Z'), + }, +]; +export const resourcesData = [ + { + text: 'Room 401', + id: 1, + color: '#bbd806', + }, + { + text: 'Room 402', + id: 2, + color: '#f34c8a', + }, + { + text: 'Room 403', + id: 3, + color: '#ae7fcc', + }, + { + text: 'Room 407', + id: 4, + color: '#ff8817', + }, + { + text: 'Room 409', + id: 5, + color: '#03bb92', + }, +]; diff --git a/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/index.html b/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/index.html new file mode 100644 index 000000000000..d6d83f735a76 --- /dev/null +++ b/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/index.html @@ -0,0 +1,39 @@ + + + + DevExtreme Demo + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/index.js b/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/AppointmentCountPerCell/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/BasicViews/ReactJs/App.js b/apps/demos/Demos/Scheduler/BasicViews/ReactJs/App.js new file mode 100644 index 000000000000..8f5c5208900c --- /dev/null +++ b/apps/demos/Demos/Scheduler/BasicViews/ReactJs/App.js @@ -0,0 +1,18 @@ +import React from 'react'; +import Scheduler from 'devextreme-react/scheduler'; +import { data } from './data.js'; + +const currentDate = new Date(2021, 3, 29); +const views = ['day', 'week', 'workWeek', 'month']; +const App = () => ( + +); +export default App; diff --git a/apps/demos/Demos/Scheduler/BasicViews/ReactJs/data.js b/apps/demos/Demos/Scheduler/BasicViews/ReactJs/data.js new file mode 100644 index 000000000000..1a0c9464f9f2 --- /dev/null +++ b/apps/demos/Demos/Scheduler/BasicViews/ReactJs/data.js @@ -0,0 +1,84 @@ +export const data = [ + { + text: 'Website Re-Design Plan', + startDate: new Date('2021-04-26T16:30:00.000Z'), + endDate: new Date('2021-04-26T18:30:00.000Z'), + }, + { + text: 'Book Flights to San Fran for Sales Trip', + startDate: new Date('2021-04-26T19:00:00.000Z'), + endDate: new Date('2021-04-26T20:00:00.000Z'), + allDay: true, + }, + { + text: 'Install New Router in Dev Room', + startDate: new Date('2021-04-26T21:30:00.000Z'), + endDate: new Date('2021-04-26T22:30:00.000Z'), + }, + { + text: 'Approve Personal Computer Upgrade Plan', + startDate: new Date('2021-04-27T17:00:00.000Z'), + endDate: new Date('2021-04-27T18:00:00.000Z'), + }, + { + text: 'Final Budget Review', + startDate: new Date('2021-04-27T19:00:00.000Z'), + endDate: new Date('2021-04-27T20:35:00.000Z'), + }, + { + text: 'New Brochures', + startDate: new Date('2021-04-27T21:30:00.000Z'), + endDate: new Date('2021-04-27T22:45:00.000Z'), + }, + { + text: 'Install New Database', + startDate: new Date('2021-04-28T16:45:00.000Z'), + endDate: new Date('2021-04-28T18:15:00.000Z'), + }, + { + text: 'Approve New Online Marketing Strategy', + startDate: new Date('2021-04-28T19:00:00.000Z'), + endDate: new Date('2021-04-28T21:00:00.000Z'), + }, + { + text: 'Upgrade Personal Computers', + startDate: new Date('2021-04-28T22:15:00.000Z'), + endDate: new Date('2021-04-28T23:30:00.000Z'), + }, + { + text: 'Customer Workshop', + startDate: new Date('2021-04-29T18:00:00.000Z'), + endDate: new Date('2021-04-29T19:00:00.000Z'), + allDay: true, + }, + { + text: 'Prepare 2021 Marketing Plan', + startDate: new Date('2021-04-29T18:00:00.000Z'), + endDate: new Date('2021-04-29T20:30:00.000Z'), + }, + { + text: 'Brochure Design Review', + startDate: new Date('2021-04-29T21:00:00.000Z'), + endDate: new Date('2021-04-29T22:30:00.000Z'), + }, + { + text: 'Create Icons for Website', + startDate: new Date('2021-04-30T17:00:00.000Z'), + endDate: new Date('2021-04-30T18:30:00.000Z'), + }, + { + text: 'Upgrade Server Hardware', + startDate: new Date('2021-04-30T21:30:00.000Z'), + endDate: new Date('2021-04-30T23:00:00.000Z'), + }, + { + text: 'Submit New Website Design', + startDate: new Date('2021-04-30T23:30:00.000Z'), + endDate: new Date('2021-05-01T01:00:00.000Z'), + }, + { + text: 'Launch New Website', + startDate: new Date('2021-04-30T19:20:00.000Z'), + endDate: new Date('2021-04-30T21:00:00.000Z'), + }, +]; diff --git a/apps/demos/Demos/Scheduler/BasicViews/ReactJs/index.html b/apps/demos/Demos/Scheduler/BasicViews/ReactJs/index.html new file mode 100644 index 000000000000..d6d83f735a76 --- /dev/null +++ b/apps/demos/Demos/Scheduler/BasicViews/ReactJs/index.html @@ -0,0 +1,39 @@ + + + + DevExtreme Demo + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/BasicViews/ReactJs/index.js b/apps/demos/Demos/Scheduler/BasicViews/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/BasicViews/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js new file mode 100644 index 000000000000..ea3a2a64bcc1 --- /dev/null +++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js @@ -0,0 +1,117 @@ +import React, { useCallback, useMemo, useState } from 'react'; +import Scheduler from 'devextreme-react/scheduler'; +import notify from 'devextreme/ui/notify'; +import { data, holidays } from './data.js'; +import Utils from './utils.js'; +import DataCell from './DataCell.js'; +import DataCellMonth from './DataCellMonth.js'; +import DateCell from './DateCell.js'; +import TimeCell from './TimeCell.js'; + +const currentDate = new Date(2021, 3, 27); +const views = ['workWeek', 'month']; +const ariaDescription = () => { + const disabledDates = holidays + .filter((date) => !Utils.isWeekend(date)) + .map((date) => + new Date(date).toLocaleDateString('en-US', { + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric', + }), + ); + if (disabledDates?.length === 1) { + return `${disabledDates} is a disabled date`; + } + if (disabledDates?.length > 1) { + return `${disabledDates.join(', ')} are disabled dates`; + } + return ''; +}; +const notifyDisableDate = () => { + notify( + 'Cannot create or move an appointment/event to disabled time/date regions.', + 'warning', + 1000, + ); +}; +const onContentReady = (e) => { + const element = e.component?.$element(); + element && typeof element.attr === 'function' && setComponentAria(element); +}; +const applyDisableDatesToDateEditors = (form) => { + const startDateEditor = form.getEditor('startDate'); + startDateEditor?.option('disabledDates', holidays); + const endDateEditor = form.getEditor('endDate'); + endDateEditor?.option('disabledDates', holidays); +}; +const onAppointmentFormOpening = (e) => { + if (e.appointmentData?.startDate) { + const startDate = new Date(e.appointmentData.startDate); + if (!Utils.isValidAppointmentDate(startDate)) { + e.cancel = true; + notifyDisableDate(); + } + applyDisableDatesToDateEditors(e.form); + } +}; +const onAppointmentAdding = (e) => { + const isValidAppointment = Utils.isValidAppointment(e.component, e.appointmentData); + if (!isValidAppointment) { + e.cancel = true; + notifyDisableDate(); + } +}; +const onAppointmentUpdating = (e) => { + const isValidAppointment = Utils.isValidAppointment(e.component, e.newData); + if (!isValidAppointment) { + e.cancel = true; + notifyDisableDate(); + } +}; +const setComponentAria = (element) => { + const prevAria = element?.attr('aria-label') || ''; + const description = ariaDescription(); + const nextAria = `${prevAria}${description ? ` ${description}` : ''}`; + element?.attr('aria-label', nextAria); +}; +const App = () => { + const [currentView, setCurrentView] = useState(views[0]); + const DataCellComponent = useMemo( + () => (currentView === 'month' ? DataCellMonth : DataCell), + [currentView], + ); + const onCurrentViewChange = useCallback((value) => setCurrentView(value), [setCurrentView]); + const renderDateCell = useCallback( + (itemData) => ( + + ), + [currentView], + ); + return ( + + ); +}; +export default App; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DataCell.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DataCell.js new file mode 100644 index 000000000000..2248bcd8b470 --- /dev/null +++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DataCell.js @@ -0,0 +1,15 @@ +import React from 'react'; +import Utils from './utils.js'; + +const DataCell = (props) => { + const { startDate } = props.data; + const isDinner = Utils.isDinner(startDate); + let cssClasses = props.className || ''; + if (Utils.isDisableDate(startDate)) { + cssClasses += ' disable-date'; + } else if (isDinner) { + cssClasses += ' dinner'; + } + return
{props.children}
; +}; +export default DataCell; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DataCellMonth.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DataCellMonth.js new file mode 100644 index 000000000000..f42d0005e662 --- /dev/null +++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DataCellMonth.js @@ -0,0 +1,15 @@ +import React from 'react'; +import DataCell from './DataCell.js'; + +const DataCellMonth = (props) => { + const { startDate } = props.data; + return ( + + {startDate.getDate()} + + ); +}; +export default DataCellMonth; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DateCell.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DateCell.js new file mode 100644 index 000000000000..2b0f372d0119 --- /dev/null +++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/DateCell.js @@ -0,0 +1,13 @@ +import React from 'react'; +import Utils from './utils.js'; + +const DateCell = (props) => { + const { currentView, date, text } = props.itemData; + const isDisabled = currentView === 'month' ? Utils.isWeekend(date) : Utils.isDisableDate(date); + return ( +
+
{text}
+
+ ); +}; +export default DateCell; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/TimeCell.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/TimeCell.js new file mode 100644 index 000000000000..497799ec5498 --- /dev/null +++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/TimeCell.js @@ -0,0 +1,15 @@ +import React from 'react'; +import Utils from './utils.js'; + +const TimeCell = (props) => { + const { date, text } = props.data; + const isDinner = Utils.isDinner(date); + const hasCoffeeCupIcon = Utils.hasCoffeeCupIcon(date); + return ( +
+ {text} + {hasCoffeeCupIcon &&
} +
+ ); +}; +export default TimeCell; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/data.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/data.js new file mode 100644 index 000000000000..17c1046e6fc9 --- /dev/null +++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/data.js @@ -0,0 +1,74 @@ +export const dinnerTime = { from: 12, to: 13 }; +export const holidays = [new Date(2021, 3, 29), new Date(2021, 5, 6)]; +export const data = [ + { + text: 'Website Re-Design Plan', + startDate: new Date(2021, 3, 26, 9, 30), + endDate: new Date(2021, 3, 26, 11, 30), + }, + { + text: 'Install New Router in Dev Room', + startDate: new Date(2021, 3, 26, 13), + endDate: new Date(2021, 3, 26, 14), + }, + { + text: 'Approve Personal Computer Upgrade Plan', + startDate: new Date(2021, 3, 27, 10), + endDate: new Date(2021, 3, 27, 11), + }, + { + text: 'Final Budget Review', + startDate: new Date(2021, 3, 27, 13, 30), + endDate: new Date(2021, 3, 27, 15), + }, + { + text: 'New Brochures', + startDate: new Date(2021, 3, 26, 15), + endDate: new Date(2021, 3, 26, 16, 15), + }, + { + text: 'Install New Database', + startDate: new Date(2021, 3, 28, 9, 45), + endDate: new Date(2021, 3, 28, 12), + }, + { + text: 'Approve New Online Marketing Strategy', + startDate: new Date(2021, 3, 28, 14, 30), + endDate: new Date(2021, 3, 28, 16, 30), + }, + { + text: 'Upgrade Personal Computers', + startDate: new Date(2021, 3, 27, 15, 30), + endDate: new Date(2021, 3, 27, 16, 45), + }, + { + text: 'Prepare 2021 Marketing Plan', + startDate: new Date(2021, 4, 3, 13), + endDate: new Date(2021, 4, 3, 15), + }, + { + text: 'Brochure Design Review', + startDate: new Date(2021, 4, 4, 15, 30), + endDate: new Date(2021, 4, 5), + }, + { + text: 'Create Icons for Website', + startDate: new Date(2021, 3, 30, 10), + endDate: new Date(2021, 3, 30, 12), + }, + { + text: 'Upgrade Server Hardware', + startDate: new Date(2021, 3, 30, 16, 30), + endDate: new Date(2021, 3, 30, 18), + }, + { + text: 'Submit New Website Design', + startDate: new Date(2021, 4, 5, 10), + endDate: new Date(2021, 4, 5, 11, 30), + }, + { + text: 'Launch New Website', + startDate: new Date(2021, 3, 30, 14, 30), + endDate: new Date(2021, 3, 30, 16, 10), + }, +]; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/index.html b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/index.html new file mode 100644 index 000000000000..db31b0fd60c6 --- /dev/null +++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/index.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/styles.css b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/styles.css new file mode 100644 index 000000000000..c88932fa0839 --- /dev/null +++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/styles.css @@ -0,0 +1,79 @@ +@-moz-document url-prefix() { + .dx-scheduler-work-space-month .dx-scheduler-date-table-cell { + position: relative; + } + + .dx-scheduler-work-space-month .dx-scheduler-date-table-cell .disable-date { + position: absolute; + width: 100%; + height: 100%; + } +} + +.disable-date, +.dinner { + height: 100%; + width: 100%; +} + +.disable-date { + background-image: + repeating-linear-gradient( + 135deg, + rgba(247, 234, 224, 1), + rgba(247, 234, 224, 1) 4px, + transparent 4px, + transparent 9px + ); + color: rgba(178, 74, 0, 1); +} + +.dx-scheduler-header-panel-cell .disable-date { + display: flex; + flex-direction: column; + justify-content: center; +} + +.dx-theme-fluent .dx-scheduler-header-panel-cell .disable-date, +.dx-theme-material .dx-scheduler-header-panel-cell .disable-date { + flex-direction: row; + align-items: flex-end; + justify-content: initial; +} + +.dinner { + background: #FBF1EB; +} + +.dx-scheduler-time-panel-cell .dinner { + color: #C25100; + font-weight: 400; + background: transparent; +} + +.dx-draggable { + cursor: auto; +} + +td.dx-scheduler-time-panel-cell .dinner .cafe { + height: 200%; + width: 100%; + left: 50%; + mask: url('data:image/svg+xml;utf8,'); + mask-repeat: no-repeat; + -webkit-mask-position-y: 50%; + -webkit-mask-position-x: 100%; + margin-top: -4px; + background-color: #C25100; +} + +.dx-scheduler-date-table-cell { + padding: 0; + opacity: 1; +} + +@media all and (-ms-high-contrast: none) { + td.dx-scheduler-time-panel-cell .dinner .cafe { + background-color: transparent; + } +} diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/utils.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/utils.js new file mode 100644 index 000000000000..74d5884f577a --- /dev/null +++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/utils.js @@ -0,0 +1,56 @@ +import { dinnerTime, holidays } from './data.js'; + +export default class Utils { + static isHoliday(date) { + const localeDate = date.toLocaleDateString(); + return holidays.filter((holiday) => holiday.toLocaleDateString() === localeDate).length > 0; + } + + static isWeekend(date) { + const day = date.getDay(); + return day === 0 || day === 6; + } + + static isDisableDate(date) { + return Utils.isHoliday(date) || Utils.isWeekend(date); + } + + static isDinner(date) { + const hours = date.getHours(); + return hours >= dinnerTime.from && hours < dinnerTime.to; + } + + static hasCoffeeCupIcon(date) { + const hours = date.getHours(); + const minutes = date.getMinutes(); + return hours === dinnerTime.from && minutes === 0; + } + + static isValidAppointment(component, appointmentData) { + const startDate = appointmentData.startDate ? new Date(appointmentData.startDate) : new Date(); + const endDate = appointmentData.endDate ? new Date(appointmentData.endDate) : new Date(); + const cellDuration = Number(component.option('cellDuration')); + return Utils.isValidAppointmentInterval(startDate, endDate, cellDuration); + } + + static isValidAppointmentInterval(startDate, endDate, cellDuration) { + const edgeEndDate = new Date(endDate.getTime() - 1); + if (!Utils.isValidAppointmentDate(edgeEndDate)) { + return false; + } + const durationInMs = cellDuration * 60 * 1000; + const date = startDate; + while (date <= endDate) { + if (!Utils.isValidAppointmentDate(date)) { + return false; + } + const newDateTime = date.getTime() + durationInMs - 1; + date.setTime(newDateTime); + } + return true; + } + + static isValidAppointmentDate(date) { + return !Utils.isHoliday(date) && !Utils.isDinner(date) && !Utils.isWeekend(date); + } +} diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js new file mode 100644 index 000000000000..2052f22053ec --- /dev/null +++ b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/App.js @@ -0,0 +1,140 @@ +import React, { useCallback, useRef, useState } from 'react'; +import { Scheduler, Resource } from 'devextreme-react/scheduler'; +import { ContextMenu } from 'devextreme-react/context-menu'; +import AppointmentMenuTemplate from './AppointmentTemplate.js'; +import { data, resourcesData } from './data.js'; + +const views = ['day', 'month']; +const appointmentClassName = '.dx-scheduler-appointment'; +const cellClassName = '.dx-scheduler-date-table-cell'; +const onContextMenuItemClick = (e) => { + e.itemData?.onItemClick?.(e); +}; +const App = () => { + const schedulerRef = useRef(null); + const [currentDate, setCurrentDate] = useState(new Date(2020, 10, 25)); + const [contextMenuItems, setContextMenuItems] = useState([]); + const [target, setTarget] = useState(appointmentClassName); + const [disabled, setDisabled] = useState(true); + const [groups, setGroups] = useState(undefined); + const [crossScrollingEnabled, setCrossScrollingEnabled] = useState(false); + const onAppointmentContextMenu = useCallback((event) => { + const { appointmentData, targetedAppointmentData } = event; + const scheduler = schedulerRef.current?.instance(); + const resourceItems = resourcesData.map((item) => ({ + ...item, + onItemClick: (e) => + scheduler?.updateAppointment(appointmentData, { + ...appointmentData, + ...{ roomId: [e.itemData?.id] }, + }), + })); + setTarget(appointmentClassName); + setDisabled(false); + setContextMenuItems([ + { + text: 'Open', + onItemClick: () => scheduler?.showAppointmentPopup(appointmentData), + }, + { + text: 'Delete', + onItemClick: () => scheduler?.deleteAppointment(appointmentData), + }, + { + text: 'Repeat Weekly', + beginGroup: true, + onItemClick: () => + scheduler?.updateAppointment(appointmentData, { + startDate: targetedAppointmentData?.startDate, + recurrenceRule: 'FREQ=WEEKLY', + }), + }, + { + text: 'Set Room', + beginGroup: true, + disabled: true, + }, + ...resourceItems, + ]); + }, []); + const onCellContextMenu = useCallback( + (e) => { + const scheduler = schedulerRef.current?.instance(); + setTarget(cellClassName); + setDisabled(false); + setContextMenuItems([ + { + text: 'New Appointment', + onItemClick: () => + scheduler?.showAppointmentPopup({ startDate: e.cellData.startDateUTC }, true), + }, + { + text: 'New Recurring Appointment', + onItemClick: () => + scheduler?.showAppointmentPopup( + { + startDate: e.cellData.startDateUTC, + recurrenceRule: 'FREQ=DAILY', + }, + true, + ), + }, + { + text: 'Group by Room/Ungroup', + beginGroup: true, + onItemClick: () => { + if (groups) { + setCrossScrollingEnabled(false); + setGroups(undefined); + } else { + setCrossScrollingEnabled(true); + setGroups(['roomId']); + } + }, + }, + { + text: 'Go to Today', + onItemClick: () => { + setCurrentDate(new Date()); + }, + }, + ]); + }, + [groups], + ); + return ( + <> + + + + + + ); +}; +export default App; diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/AppointmentTemplate.js b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/AppointmentTemplate.js new file mode 100644 index 000000000000..ff6707af3299 --- /dev/null +++ b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/AppointmentTemplate.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const AppointmentMenuTemplate = (props) => ( +
+ {props.data.color && ( +
+ )} + {props.data.text} +
+); +export default AppointmentMenuTemplate; diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/data.js b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/data.js new file mode 100644 index 000000000000..cd88de29c3e4 --- /dev/null +++ b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/data.js @@ -0,0 +1,86 @@ +export const data = [ + { + text: 'Watercolor Landscape', + roomId: [1], + startDate: new Date('2020-11-01T17:30:00.000Z'), + endDate: new Date('2020-11-01T19:00:00.000Z'), + recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TH;COUNT=10', + }, + { + text: 'Oil Painting for Beginners', + roomId: [2], + startDate: new Date('2020-11-01T17:30:00.000Z'), + endDate: new Date('2020-11-01T19:00:00.000Z'), + recurrenceRule: 'FREQ=WEEKLY;BYDAY=SU,WE;COUNT=10', + }, + { + text: 'Testing', + roomId: [3], + startDate: new Date('2020-11-01T20:00:00.000Z'), + endDate: new Date('2020-11-01T21:00:00.000Z'), + recurrenceRule: 'FREQ=WEEKLY;BYDAY=SU;WKST=TU;INTERVAL=2;COUNT=2', + }, + { + text: 'Meeting of Instructors', + roomId: [4], + startDate: new Date('2020-11-01T17:00:00.000Z'), + endDate: new Date('2020-11-01T17:15:00.000Z'), + recurrenceRule: 'FREQ=DAILY;BYDAY=TU;UNTIL=20201203', + }, + { + text: 'Recruiting students', + roomId: [5], + startDate: new Date('2020-10-24T18:00:00.000Z'), + endDate: new Date('2020-10-24T19:00:00.000Z'), + recurrenceRule: 'FREQ=YEARLY;BYWEEKNO=50;WKST=SU', + recurrenceException: '20201212T190000Z', + }, + { + text: 'Final exams', + roomId: [3], + startDate: new Date('2020-10-24T20:00:00.000Z'), + endDate: new Date('2020-10-24T21:35:00.000Z'), + recurrenceRule: 'FREQ=YEARLY;BYWEEKNO=51;BYDAY=WE,TH', + }, + { + text: 'Monthly Planning', + roomId: [4], + startDate: new Date('2020-11-24T22:30:00.000Z'), + endDate: new Date('2020-11-24T23:45:00.000Z'), + recurrenceRule: 'FREQ=MONTHLY;BYMONTHDAY=28;COUNT=1', + }, + { + text: 'Open Day', + roomId: [5], + startDate: new Date('2020-11-01T17:30:00.000Z'), + endDate: new Date('2020-11-01T21:00:00.000Z'), + recurrenceRule: 'FREQ=YEARLY;BYYEARDAY=333', + }, +]; +export const resourcesData = [ + { + text: 'Room 101', + id: 1, + color: '#bbd806', + }, + { + text: 'Room 102', + id: 2, + color: '#f34c8a', + }, + { + text: 'Room 103', + id: 3, + color: '#ae7fcc', + }, + { + text: 'Meeting room', + id: 4, + color: '#ff8817', + }, + { + text: 'Conference hall', + id: 5, + color: '#03bb92', + }, +]; diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/index.html b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/index.html new file mode 100644 index 000000000000..d6d83f735a76 --- /dev/null +++ b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/index.html @@ -0,0 +1,39 @@ + + + + DevExtreme Demo + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/index.js b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css new file mode 100644 index 000000000000..7d52d89364e2 --- /dev/null +++ b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css @@ -0,0 +1,21 @@ +.dx-menu-item-content span { + margin-right: 5px; +} + +.dx-menu-item-has-submenu .dx-icon-spinright { + position: absolute; + top: 7px; + right: 2px; +} + +.item-badge { + text-align: center; + float: left; + margin-right: 12px; + color: white; + width: 18px; + height: 18px; + font-size: 19.5px; + border-radius: 18px; + margin-top: 2px; +} diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/App.js b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/App.js new file mode 100644 index 000000000000..a81524b173e8 --- /dev/null +++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/App.js @@ -0,0 +1,101 @@ +import React, { useCallback, useState } from 'react'; +import Scheduler, { Resource } from 'devextreme-react/scheduler'; +import { Switch } from 'devextreme-react/switch'; +import { NumberBox } from 'devextreme-react/number-box'; +import { data, moviesData } from './data.js'; +import AppointmentTemplate from './AppointmentTemplate.js'; + +const currentDate = new Date(); +const views = ['week', 'timelineWeek']; +const intervalLabel = { 'aria-label': 'Interval' }; +const onContentReady = (e) => { + e.component.scrollTo(new Date()); +}; +const onAppointmentClick = (e) => { + e.cancel = true; +}; +const onAppointmentDblClick = (e) => { + e.cancel = true; +}; +const App = () => { + const [showCurrentTimeIndicator, setShowCurrentTimeIndicator] = useState(true); + const [shadeUntilCurrentTime, setShadeUntilCurrentTime] = useState(true); + const [updateInterval, setUpdateInterval] = useState(10); + const onShowCurrentTimeIndicatorChanged = useCallback((e) => { + setShowCurrentTimeIndicator(e.value); + }, []); + const onShadeUntilCurrentTimeChanged = useCallback((e) => { + setShadeUntilCurrentTime(e.value); + }, []); + const onUpdateIntervalChanged = useCallback((e) => { + setUpdateInterval(e.value); + }, []); + return ( + <> + + + +
+
+
+
Current time indicator
{' '} +
+ +
+
+
+
Shading until current time
{' '} +
+ +
+
+
{' '} +
+
+
Update position in
{' '} +
+ +
+
+
+
+ + ); +}; +export default App; diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/AppointmentTemplate.js b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/AppointmentTemplate.js new file mode 100644 index 000000000000..4a6ade362935 --- /dev/null +++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/AppointmentTemplate.js @@ -0,0 +1,19 @@ +import React from 'react'; +import { query as Query } from 'devextreme-react/common/data'; +import { moviesData } from './data.js'; + +const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0]; +const AppointmentTemplate = (props) => { + const { appointmentData } = props.data; + const movieInfo = getMovieById(appointmentData.movieId) || {}; + return ( +
+ {`${movieInfo.text} +
{movieInfo.text}
+
+ ); +}; +export default AppointmentTemplate; diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/data.js b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/data.js new file mode 100644 index 000000000000..d0e709e54612 --- /dev/null +++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/data.js @@ -0,0 +1,62 @@ +export const today = new Date(); +today.setHours(0, 0, 0, 0); +today.setDate(today.getDate() - today.getDay() + 3); +export const data = [ + { + movieId: 1, + startDate: new Date(today.getTime() - 113.5 * 3600000), + endDate: new Date(today.getTime() - 111.5 * 3600000), + recurrenceRule: 'FREQ=HOURLY;INTERVAL=15;COUNT=15', + }, + { + movieId: 2, + startDate: new Date(today.getTime() - 110.5 * 3600000), + endDate: new Date(today.getTime() - 108.5 * 3600000), + recurrenceRule: 'FREQ=HOURLY;INTERVAL=15;COUNT=15', + }, + { + movieId: 3, + startDate: new Date(today.getTime() - 106.5 * 3600000), + endDate: new Date(today.getTime() - 104.5 * 3600000), + recurrenceRule: 'FREQ=HOURLY;INTERVAL=15;COUNT=15', + }, + { + movieId: 4, + startDate: new Date(today.getTime() - 104 * 3600000), + endDate: new Date(today.getTime() - 102 * 3600000), + recurrenceRule: 'FREQ=HOURLY;INTERVAL=15;COUNT=15', + }, + { + movieId: 5, + startDate: new Date(today.getTime() - 101 * 3600000), + endDate: new Date(today.getTime() - 99 * 3600000), + recurrenceRule: 'FREQ=HOURLY;INTERVAL=15;COUNT=15', + }, +]; +export const moviesData = [ + { + id: 1, + text: 'His Girl Friday', + image: '../../../../images/movies/HisGirlFriday.jpg', + }, + { + id: 2, + text: 'Royal Wedding', + image: '../../../../images/movies/RoyalWedding.jpg', + }, + { + id: 3, + text: 'A Star Is Born', + image: '../../../../images/movies/AStartIsBorn.jpg', + }, + { + id: 4, + text: 'The Screaming Skull', + image: '../../../../images/movies/ScreamingSkull.jpg', + }, + { + id: 5, + text: "It's a Wonderful Life", + image: '../../../../images/movies/ItsAWonderfulLife.jpg', + }, +]; diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/index.html b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/index.html new file mode 100644 index 000000000000..db31b0fd60c6 --- /dev/null +++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/index.js b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css new file mode 100644 index 000000000000..e3d73f429139 --- /dev/null +++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css @@ -0,0 +1,58 @@ +.dx-scheduler-appointment { + color: #000; + font-weight: 500; + background-color: #e4e4e4; +} + +.dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content { + padding: 5px 0 5px 7px; +} + +.options { + background-color: rgba(191, 191, 191, 0.15); + margin-top: 20px; + display: flex; + align-items: flex-start; +} + +.column { + width: 40%; + display: inline-block; + margin: 15px 3%; + text-align: left; + vertical-align: top; +} + +.option { + padding: 5px 0; + display: flex; + align-items: center; +} + +.label, +.value { + display: inline-block; + vertical-align: middle; +} + +.label { + width: 180px; +} + +.value { + width: 30%; +} + +.movie img { + height: 70px; +} + +.movie-text { + font-size: 90%; + white-space: normal; +} + +#allow-shading, +#show-indicator { + height: 36px; +} diff --git a/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/App.js b/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/App.js new file mode 100644 index 000000000000..8b4166619943 --- /dev/null +++ b/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/App.js @@ -0,0 +1,36 @@ +import React from 'react'; +import Scheduler from 'devextreme-react/scheduler'; +import { data } from './data.js'; + +const currentDate = new Date(2021, 3, 5); +const views = [ + { + name: '3 Days', + type: 'day', + intervalCount: 3, + startDate: new Date(2021, 3, 4), + }, + { + name: '2 Work Weeks', + type: 'workWeek', + intervalCount: 2, + startDate: new Date(2021, 2, 4), + }, + { + name: '2 Months', + type: 'month', + intervalCount: 2, + }, +]; +const App = () => ( + +); +export default App; diff --git a/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/data.js b/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/data.js new file mode 100644 index 000000000000..3cd19970e582 --- /dev/null +++ b/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/data.js @@ -0,0 +1,287 @@ +export const data = [ + { + text: 'Google AdWords Strategy', + startDate: new Date('2021-04-05T16:00:00.000Z'), + endDate: new Date('2021-04-05T17:30:00.000Z'), + }, + { + text: 'New Brochures', + startDate: new Date('2021-04-05T18:30:00.000Z'), + endDate: new Date('2021-04-05T21:15:00.000Z'), + }, + { + text: 'Brochure Design Review', + startDate: new Date('2021-05-04T17:15:00.000Z'), + endDate: new Date('2021-05-04T19:15:00.000Z'), + }, + { + text: 'Website Re-Design Plan', + startDate: new Date('2021-04-05T23:45:00.000Z'), + endDate: new Date('2021-04-07T00:15:00.000Z'), + }, + { + text: 'Rollout of New Website and Marketing Brochures', + startDate: new Date('2021-04-06T15:15:00.000Z'), + endDate: new Date('2021-04-06T17:45:00.000Z'), + }, + { + text: 'Update Sales Strategy Documents', + startDate: new Date('2021-05-05T16:00:00.000Z'), + endDate: new Date('2021-05-05T17:45:00.000Z'), + }, + { + text: 'Non-Compete Agreements', + startDate: new Date('2021-04-07T15:15:00.000Z'), + endDate: new Date('2021-04-07T16:00:00.000Z'), + }, + { + text: 'Approve Hiring of John Jeffers', + startDate: new Date('2021-04-07T17:00:00.000Z'), + endDate: new Date('2021-04-07T18:15:00.000Z'), + }, + { + text: 'Update NDA Agreement', + startDate: new Date('2021-05-05T16:45:00.000Z'), + endDate: new Date('2021-05-05T18:45:00.000Z'), + }, + { + text: 'Update Employee Files with New NDA', + startDate: new Date('2021-05-05T19:00:00.000Z'), + endDate: new Date('2021-05-05T21:45:00.000Z'), + }, + { + text: 'Submit Questions Regarding New NDA', + startDate: new Date('2021-04-09T01:00:00.000Z'), + endDate: new Date('2021-04-08T16:30:00.000Z'), + }, + { + text: 'Submit Signed NDA', + startDate: new Date('2021-05-09T16:45:00.000Z'), + endDate: new Date('2021-05-09T18:00:00.000Z'), + }, + { + text: 'Review Revenue Projections', + startDate: new Date('2021-04-09T00:15:00.000Z'), + endDate: new Date('2021-04-08T15:00:00.000Z'), + }, + { + text: 'Comment on Revenue Projections', + startDate: new Date('2021-04-09T16:15:00.000Z'), + endDate: new Date('2021-04-09T18:15:00.000Z'), + }, + { + text: 'Provide New Health Insurance Docs', + startDate: new Date('2021-05-10T16:15:00.000Z'), + endDate: new Date('2021-05-10T17:45:00.000Z'), + }, + { + text: 'Review Changes to Health Insurance Coverage', + startDate: new Date('2021-05-10T17:50:00.000Z'), + endDate: new Date('2021-05-10T19:30:00.000Z'), + }, + { + text: 'Review Training Course for any Omissions', + startDate: new Date('2021-04-12T21:00:00.000Z'), + endDate: new Date('2021-04-13T21:00:00.000Z'), + }, + { + text: 'Recall Rebate Form', + startDate: new Date('2021-05-11T17:00:00.000Z'), + endDate: new Date('2021-05-11T18:15:00.000Z'), + }, + { + text: 'Create Report on Customer Feedback', + startDate: new Date('2021-04-13T22:15:00.000Z'), + endDate: new Date('2021-04-14T00:30:00.000Z'), + }, + { + text: 'Review Customer Feedback Report', + startDate: new Date('2021-04-13T23:15:00.000Z'), + endDate: new Date('2021-04-14T01:30:00.000Z'), + }, + { + text: 'Customer Feedback Report Analysis', + startDate: new Date('2021-04-14T16:30:00.000Z'), + endDate: new Date('2021-04-14T17:30:00.000Z'), + }, + { + text: 'Prepare Shipping Cost Analysis Report', + startDate: new Date('2021-05-12T18:30:00.000Z'), + endDate: new Date('2021-05-12T19:30:00.000Z'), + }, + { + text: 'Provide Feedback on Shippers', + startDate: new Date('2021-05-13T17:15:00.000Z'), + endDate: new Date('2021-05-13T19:00:00.000Z'), + }, + { + text: 'Select Preferred Shipper', + startDate: new Date('2021-05-13T19:30:00.000Z'), + endDate: new Date('2021-05-13T21:00:00.000Z'), + }, + { + text: 'Complete Shipper Selection Form', + startDate: new Date('2021-05-16T15:30:00.000Z'), + endDate: new Date('2021-05-16T17:00:00.000Z'), + }, + { + text: 'Upgrade Server Hardware', + startDate: new Date('2021-04-15T19:00:00.000Z'), + endDate: new Date('2021-04-15T21:15:00.000Z'), + }, + { + text: 'Upgrade Personal Computers', + startDate: new Date('2021-04-15T21:45:00.000Z'), + endDate: new Date('2021-04-15T23:30:00.000Z'), + }, + { + text: 'Upgrade Apps to Windows RT or stay with WinForms', + startDate: new Date('2021-04-16T17:30:00.000Z'), + endDate: new Date('2021-04-16T20:00:00.000Z'), + }, + { + text: 'Estimate Time Required to Touch-Enable Apps', + startDate: new Date('2021-05-17T16:45:00.000Z'), + endDate: new Date('2021-05-17T18:00:00.000Z'), + }, + { + text: 'Report on Tranistion to Touch-Based Apps', + startDate: new Date('2021-05-18T18:30:00.000Z'), + endDate: new Date('2021-05-18T19:30:00.000Z'), + }, + { + text: 'Submit New Website Design', + startDate: new Date('2021-04-19T15:00:00.000Z'), + endDate: new Date('2021-04-19T17:00:00.000Z'), + }, + { + text: 'Create Icons for Website', + startDate: new Date('2021-05-19T18:30:00.000Z'), + endDate: new Date('2021-05-19T20:15:00.000Z'), + }, + { + text: 'Create New Product Pages', + startDate: new Date('2021-04-20T16:45:00.000Z'), + endDate: new Date('2021-04-20T18:45:00.000Z'), + }, + { + text: 'Approve Website Launch', + startDate: new Date('2021-05-20T19:00:00.000Z'), + endDate: new Date('2021-05-20T22:15:00.000Z'), + }, + { + text: 'Update Customer Shipping Profiles', + startDate: new Date('2021-04-21T16:30:00.000Z'), + endDate: new Date('2021-04-21T18:00:00.000Z'), + }, + { + text: 'Create New Shipping Return Labels', + startDate: new Date('2021-04-21T19:45:00.000Z'), + endDate: new Date('2021-04-21T21:00:00.000Z'), + }, + { + text: 'Get Design for Shipping Return Labels', + startDate: new Date('2021-04-21T22:00:00.000Z'), + endDate: new Date('2021-04-21T23:30:00.000Z'), + }, + { + text: 'PSD needed for Shipping Return Labels', + startDate: new Date('2021-04-22T15:30:00.000Z'), + endDate: new Date('2021-04-22T16:15:00.000Z'), + }, + { + text: 'Contact ISP and Discuss Payment Options', + startDate: new Date('2021-05-23T18:30:00.000Z'), + endDate: new Date('2021-05-23T23:00:00.000Z'), + }, + { + text: 'Prepare Year-End Support Summary Report', + startDate: new Date('2021-05-23T17:00:00.000Z'), + endDate: new Date('2021-05-23T19:00:00.000Z'), + }, + { + text: 'Review New Training Material', + startDate: new Date('2021-04-26T15:00:00.000Z'), + endDate: new Date('2021-04-26T16:15:00.000Z'), + }, + { + text: 'Distribute Training Material to Support Staff', + startDate: new Date('2021-04-23T19:45:00.000Z'), + endDate: new Date('2021-04-23T21:00:00.000Z'), + }, + { + text: 'Training Material Distribution Schedule', + startDate: new Date('2021-05-24T21:15:00.000Z'), + endDate: new Date('2021-05-24T23:15:00.000Z'), + }, + { + text: 'Approval on Converting to New HDMI Specification', + startDate: new Date('2021-05-03T16:30:00.000Z'), + endDate: new Date('2021-05-03T17:15:00.000Z'), + }, + { + text: 'Create New Spike for Automation Server', + startDate: new Date('2021-05-25T17:00:00.000Z'), + endDate: new Date('2021-05-25T19:30:00.000Z'), + }, + { + text: 'Code Review - New Automation Server', + startDate: new Date('2021-05-25T20:00:00.000Z'), + endDate: new Date('2021-05-25T22:00:00.000Z'), + }, + { + text: 'Confirm Availability for Sales Meeting', + startDate: new Date('2021-04-27T17:15:00.000Z'), + endDate: new Date('2021-04-27T22:15:00.000Z'), + }, + { + text: 'Reschedule Sales Team Meeting', + startDate: new Date('2021-04-28T23:15:00.000Z'), + endDate: new Date('2021-04-29T01:00:00.000Z'), + }, + { + text: 'Send 2 Remotes for Giveaways', + startDate: new Date('2021-05-26T16:30:00.000Z'), + endDate: new Date('2021-05-26T18:45:00.000Z'), + }, + { + text: 'Discuss Product Giveaways with Management', + startDate: new Date('2021-05-27T19:15:00.000Z'), + endDate: new Date('2021-05-27T23:45:00.000Z'), + }, + { + text: 'Replace Desktops on the 3rd Floor', + startDate: new Date('2021-04-29T16:30:00.000Z'), + endDate: new Date('2021-04-29T17:45:00.000Z'), + }, + { + text: 'Update Database with New Leads', + startDate: new Date('2021-05-30T19:00:00.000Z'), + endDate: new Date('2021-05-30T21:15:00.000Z'), + }, + { + text: 'Mail New Leads for Follow Up', + startDate: new Date('2021-05-31T21:45:00.000Z'), + endDate: new Date('2021-05-31T22:30:00.000Z'), + }, + { + text: 'Send Territory Sales Breakdown', + startDate: new Date('2021-04-30T01:00:00.000Z'), + endDate: new Date('2021-04-30T03:00:00.000Z'), + }, + { + text: 'Territory Sales Breakdown Report', + startDate: new Date('2021-04-30T15:45:00.000Z'), + endDate: new Date('2021-04-30T16:45:00.000Z'), + }, + { + text: 'Report on the State of Engineering Dept', + startDate: new Date('2021-04-30T21:45:00.000Z'), + endDate: new Date('2021-04-30T22:30:00.000Z'), + }, + { + text: 'Staff Productivity Report', + startDate: new Date('2021-05-31T23:15:00.000Z'), + endDate: new Date('2021-06-01T02:30:00.000Z'), + }, +]; diff --git a/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/index.html b/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/index.html new file mode 100644 index 000000000000..d6d83f735a76 --- /dev/null +++ b/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/index.html @@ -0,0 +1,39 @@ + + + + DevExtreme Demo + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/index.js b/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/CustomViewDuration/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/App.js b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/App.js new file mode 100644 index 000000000000..70fcdccdb2f6 --- /dev/null +++ b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/App.js @@ -0,0 +1,91 @@ +import React, { useCallback, useState } from 'react'; +import Scheduler, { AppointmentDragging } from 'devextreme-react/scheduler'; +import Draggable from 'devextreme-react/draggable'; +import ScrollView from 'devextreme-react/scroll-view'; +import { appointments as defaultAppointments, tasks as defaultTasks } from './data.js'; + +const currentDate = new Date(2021, 3, 26); +const views = [{ type: 'day', intervalCount: 3 }]; +const draggingGroupName = 'appointmentsGroup'; +const onListDragStart = (e) => { + e.cancel = true; +}; +const onItemDragStart = (e) => { + e.itemData = e.fromData; +}; +const onItemDragEnd = (e) => { + if (e.toData) { + e.cancel = true; + } +}; +const App = () => { + const [state, setState] = useState({ + tasks: defaultTasks, + appointments: defaultAppointments, + }); + const onAppointmentRemove = useCallback((e) => { + setState((currentState) => { + const { appointments, tasks } = currentState; + const index = appointments.indexOf(e.itemData); + if (index >= 0) { + tasks.push(e.itemData); + appointments.splice(index, 1); + } + return { appointments: [...appointments], tasks: [...tasks] }; + }); + }, []); + const onAppointmentAdd = useCallback((e) => { + setState((currentState) => { + const { appointments, tasks } = currentState; + const index = tasks.indexOf(e.fromData); + if (index >= 0) { + tasks.splice(index, 1); + appointments.push(e.itemData); + } + return { appointments: [...appointments], tasks: [...tasks] }; + }); + }, []); + return ( + <> + + + {state.tasks.map((task) => ( + + {task.text} + + ))} + + + + + + + ); +}; +export default App; diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/data.js b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/data.js new file mode 100644 index 000000000000..49676e864634 --- /dev/null +++ b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/data.js @@ -0,0 +1,66 @@ +export const tasks = [ + { + text: 'New Brochures', + }, + { + text: 'Brochure Design Review', + }, + { + text: 'Upgrade Personal Computers', + }, + { + text: 'Install New Router in Dev Room', + }, + { + text: 'Upgrade Server Hardware', + }, + { + text: 'Install New Database', + }, + { + text: 'Website Re-Design Plan', + }, + { + text: 'Create Icons for Website', + }, + { + text: 'Submit New Website Design', + }, + { + text: 'Launch New Website', + }, +]; +export const appointments = [ + { + text: 'Book Flights to San Fran for Sales Trip', + startDate: new Date('2021-04-26T19:00:00.000Z'), + endDate: new Date('2021-04-26T20:00:00.000Z'), + allDay: true, + }, + { + text: 'Approve Personal Computer Upgrade Plan', + startDate: new Date('2021-04-27T17:00:00.000Z'), + endDate: new Date('2021-04-27T18:00:00.000Z'), + }, + { + text: 'Final Budget Review', + startDate: new Date('2021-04-27T19:00:00.000Z'), + endDate: new Date('2021-04-27T20:35:00.000Z'), + }, + { + text: 'Approve New Online Marketing Strategy', + startDate: new Date('2021-04-28T19:00:00.000Z'), + endDate: new Date('2021-04-28T21:00:00.000Z'), + }, + { + text: 'Customer Workshop', + startDate: new Date('2021-04-29T18:00:00.000Z'), + endDate: new Date('2021-04-29T19:00:00.000Z'), + allDay: true, + }, + { + text: 'Prepare 2021 Marketing Plan', + startDate: new Date('2021-04-29T18:00:00.000Z'), + endDate: new Date('2021-04-29T20:30:00.000Z'), + }, +]; diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/index.html b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/index.html new file mode 100644 index 000000000000..db31b0fd60c6 --- /dev/null +++ b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/index.js b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/styles.css b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/styles.css new file mode 100644 index 000000000000..3b710d6f4094 --- /dev/null +++ b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/styles.css @@ -0,0 +1,28 @@ +#scroll, +#list { + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 240px; +} + +.item { + color: var(--dx-color-text); + background-color: var(--dx-component-color-bg); + box-sizing: border-box; + padding: 10px 20px; + margin-bottom: 10px; +} + +#scheduler { + margin-left: 270px; +} + +.dx-draggable-source { + opacity: 0.5; +} + +.dx-draggable-dragging > * { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2); +} diff --git a/apps/demos/Demos/Scheduler/Editing/ReactJs/App.js b/apps/demos/Demos/Scheduler/Editing/ReactJs/App.js new file mode 100644 index 000000000000..9920f6750be7 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Editing/ReactJs/App.js @@ -0,0 +1,100 @@ +import React, { useCallback, useState } from 'react'; +import Scheduler, { Editing } from 'devextreme-react/scheduler'; +import { CheckBox } from 'devextreme-react/check-box'; +import notify from 'devextreme/ui/notify'; +import { data } from './data.js'; + +const currentDate = new Date(2021, 3, 29); +const views = ['day', 'week']; +const showToast = (event, value, type) => { + notify(`${event} "${value}" task`, type, 800); +}; +const showAddedToast = (e) => { + showToast('Added', e.appointmentData.text ?? '', 'success'); +}; +const showUpdatedToast = (e) => { + showToast('Updated', e.appointmentData.text ?? '', 'info'); +}; +const showDeletedToast = (e) => { + showToast('Deleted', e.appointmentData.text ?? '', 'warning'); +}; +const App = () => { + const [allowAdding, setAllowAdding] = useState(true); + const [allowDeleting, setAllowDeleting] = useState(true); + const [allowResizing, setAllowResizing] = useState(true); + const [allowDragging, setAllowDragging] = useState(true); + const [allowUpdating, setAllowUpdating] = useState(true); + const onAllowAddingChanged = useCallback((e) => setAllowAdding(e.value), []); + const onAllowDeletingChanged = useCallback((e) => setAllowDeleting(e.value), []); + const onAllowResizingChanged = useCallback((e) => setAllowResizing(e.value), []); + const onAllowDraggingChanged = useCallback((e) => setAllowDragging(e.value), []); + const onAllowUpdatingChanged = useCallback((e) => setAllowUpdating(e.value), []); + return ( + <> + + + +
+
Options
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + ); +}; +export default App; diff --git a/apps/demos/Demos/Scheduler/Editing/ReactJs/data.js b/apps/demos/Demos/Scheduler/Editing/ReactJs/data.js new file mode 100644 index 000000000000..1a0c9464f9f2 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Editing/ReactJs/data.js @@ -0,0 +1,84 @@ +export const data = [ + { + text: 'Website Re-Design Plan', + startDate: new Date('2021-04-26T16:30:00.000Z'), + endDate: new Date('2021-04-26T18:30:00.000Z'), + }, + { + text: 'Book Flights to San Fran for Sales Trip', + startDate: new Date('2021-04-26T19:00:00.000Z'), + endDate: new Date('2021-04-26T20:00:00.000Z'), + allDay: true, + }, + { + text: 'Install New Router in Dev Room', + startDate: new Date('2021-04-26T21:30:00.000Z'), + endDate: new Date('2021-04-26T22:30:00.000Z'), + }, + { + text: 'Approve Personal Computer Upgrade Plan', + startDate: new Date('2021-04-27T17:00:00.000Z'), + endDate: new Date('2021-04-27T18:00:00.000Z'), + }, + { + text: 'Final Budget Review', + startDate: new Date('2021-04-27T19:00:00.000Z'), + endDate: new Date('2021-04-27T20:35:00.000Z'), + }, + { + text: 'New Brochures', + startDate: new Date('2021-04-27T21:30:00.000Z'), + endDate: new Date('2021-04-27T22:45:00.000Z'), + }, + { + text: 'Install New Database', + startDate: new Date('2021-04-28T16:45:00.000Z'), + endDate: new Date('2021-04-28T18:15:00.000Z'), + }, + { + text: 'Approve New Online Marketing Strategy', + startDate: new Date('2021-04-28T19:00:00.000Z'), + endDate: new Date('2021-04-28T21:00:00.000Z'), + }, + { + text: 'Upgrade Personal Computers', + startDate: new Date('2021-04-28T22:15:00.000Z'), + endDate: new Date('2021-04-28T23:30:00.000Z'), + }, + { + text: 'Customer Workshop', + startDate: new Date('2021-04-29T18:00:00.000Z'), + endDate: new Date('2021-04-29T19:00:00.000Z'), + allDay: true, + }, + { + text: 'Prepare 2021 Marketing Plan', + startDate: new Date('2021-04-29T18:00:00.000Z'), + endDate: new Date('2021-04-29T20:30:00.000Z'), + }, + { + text: 'Brochure Design Review', + startDate: new Date('2021-04-29T21:00:00.000Z'), + endDate: new Date('2021-04-29T22:30:00.000Z'), + }, + { + text: 'Create Icons for Website', + startDate: new Date('2021-04-30T17:00:00.000Z'), + endDate: new Date('2021-04-30T18:30:00.000Z'), + }, + { + text: 'Upgrade Server Hardware', + startDate: new Date('2021-04-30T21:30:00.000Z'), + endDate: new Date('2021-04-30T23:00:00.000Z'), + }, + { + text: 'Submit New Website Design', + startDate: new Date('2021-04-30T23:30:00.000Z'), + endDate: new Date('2021-05-01T01:00:00.000Z'), + }, + { + text: 'Launch New Website', + startDate: new Date('2021-04-30T19:20:00.000Z'), + endDate: new Date('2021-04-30T21:00:00.000Z'), + }, +]; diff --git a/apps/demos/Demos/Scheduler/Editing/ReactJs/index.html b/apps/demos/Demos/Scheduler/Editing/ReactJs/index.html new file mode 100644 index 000000000000..db31b0fd60c6 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Editing/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/Editing/ReactJs/index.js b/apps/demos/Demos/Scheduler/Editing/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Editing/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/Editing/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Editing/ReactJs/styles.css new file mode 100644 index 000000000000..5e279be151fd --- /dev/null +++ b/apps/demos/Demos/Scheduler/Editing/ReactJs/styles.css @@ -0,0 +1,21 @@ +.options { + padding: 20px; + background-color: rgba(191, 191, 191, 0.15); + margin-top: 20px; +} + +.caption { + font-size: 18px; + font-weight: 500; +} + +.option { + margin-top: 10px; + display: inline-block; + width: 19%; +} + +.options-container { + display: flex; + align-items: center; +} diff --git a/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/App.js b/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/App.js new file mode 100644 index 000000000000..8f8b36ead4d3 --- /dev/null +++ b/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/App.js @@ -0,0 +1,41 @@ +import 'whatwg-fetch'; +import React from 'react'; +import Scheduler from 'devextreme-react/scheduler'; +import { CustomStore } from 'devextreme-react/common/data'; + +const getData = async (_, requestOptions) => { + const GOOGLE_CALENDAR_URL = 'https://www.googleapis.com/calendar/v3/calendars/'; + const CALENDAR_ID = 'f7jnetm22dsjc3npc2lu3buvu4@group.calendar.google.com'; + const PUBLIC_KEY = 'AIzaSyBnNAISIUKe6xdhq1_rjor2rxoI3UlMY7k'; + const dataUrl = [GOOGLE_CALENDAR_URL, CALENDAR_ID, '/events?key=', PUBLIC_KEY].join(''); + const response = await fetch(dataUrl, requestOptions); + const data = await response.json(); + return data.items; +}; +const dataSource = new CustomStore({ + load: (options) => getData(options, { showDeleted: false }), +}); +const currentDate = new Date(2017, 4, 25); +const views = ['day', 'workWeek', 'month']; +const App = () => ( + <> +
+

Tasks for Employees (USA Office)

+
+ + +); +export default App; diff --git a/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/index.html b/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/index.html new file mode 100644 index 000000000000..db31b0fd60c6 --- /dev/null +++ b/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/index.js b/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/styles.css b/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/styles.css new file mode 100644 index 000000000000..cf2b52780a4d --- /dev/null +++ b/apps/demos/Demos/Scheduler/GoogleCalendarIntegration/ReactJs/styles.css @@ -0,0 +1,13 @@ +.long-title h3 { + font-family: + "Segoe UI Light", + "Helvetica Neue Light", + "Segoe UI", + "Helvetica Neue", + "Trebuchet MS", + Verdana; + font-weight: 200; + font-size: 28px; + text-align: center; + margin-bottom: 20px; +} diff --git a/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/App.js b/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/App.js new file mode 100644 index 000000000000..79c4f855bf3d --- /dev/null +++ b/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/App.js @@ -0,0 +1,55 @@ +import React, { useCallback, useState } from 'react'; +import Switch from 'devextreme-react/switch'; +import Scheduler, { Resource, View } from 'devextreme-react/scheduler'; +import { data, priorityData } from './data.js'; + +const currentDate = new Date(2021, 3, 21); +const groups = ['priorityId']; +const App = () => { + const [groupByDate, setGroupByDate] = useState(true); + const onGroupByDateChanged = useCallback((args) => { + setGroupByDate(args.value); + }, []); + return ( +
+ + + + + +
+
Group by Date First
+
+ +
+
+
+ ); +}; +export default App; diff --git a/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/data.js b/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/data.js new file mode 100644 index 000000000000..4ea52e5c503e --- /dev/null +++ b/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/data.js @@ -0,0 +1,183 @@ +export const data = [ + { + text: 'Website Re-Design Plan', + priorityId: 2, + startDate: new Date('2021-04-19T16:30:00.000Z'), + endDate: new Date('2021-04-19T18:30:00.000Z'), + }, + { + text: 'Book Flights to San Fran for Sales Trip', + priorityId: 1, + startDate: new Date('2021-04-22T17:00:00.000Z'), + endDate: new Date('2021-04-22T19:00:00.000Z'), + }, + { + text: 'Install New Router in Dev Room', + priorityId: 1, + startDate: new Date('2021-04-18T20:00:00.000Z'), + endDate: new Date('2021-04-18T22:30:00.000Z'), + }, + { + text: 'Approve Personal Computer Upgrade Plan', + priorityId: 2, + startDate: new Date('2021-04-20T17:00:00.000Z'), + endDate: new Date('2021-04-20T18:00:00.000Z'), + }, + { + text: 'Final Budget Review', + priorityId: 2, + startDate: new Date('2021-04-20T19:00:00.000Z'), + endDate: new Date('2021-04-20T20:35:00.000Z'), + }, + { + text: 'New Brochures', + priorityId: 2, + startDate: new Date('2021-04-19T20:00:00.000Z'), + endDate: new Date('2021-04-19T22:15:00.000Z'), + }, + { + text: 'Install New Database', + priorityId: 2, + startDate: new Date('2021-04-11T16:00:00.000Z'), + endDate: new Date('2021-04-13T19:15:00.000Z'), + }, + { + text: 'Approve New Online Marketing Strategy', + priorityId: 2, + startDate: new Date('2021-04-21T19:00:00.000Z'), + endDate: new Date('2021-04-21T21:00:00.000Z'), + }, + { + text: 'Upgrade Personal Computers', + priorityId: 1, + startDate: new Date('2021-04-11T16:00:00.000Z'), + endDate: new Date('2021-04-11T18:30:00.000Z'), + recurrenceRule: 'FREQ=DAILY;COUNT=4', + }, + { + text: 'Prepare 2021 Marketing Plan', + priorityId: 2, + startDate: new Date('2021-04-22T18:00:00.000Z'), + endDate: new Date('2021-04-22T20:30:00.000Z'), + }, + { + text: 'Brochure Design Review', + priorityId: 1, + startDate: new Date('2021-04-21T18:00:00.000Z'), + endDate: new Date('2021-04-21T20:30:00.000Z'), + }, + { + text: 'Create Icons for Website', + priorityId: 2, + startDate: new Date('2021-04-23T17:00:00.000Z'), + endDate: new Date('2021-04-23T18:30:00.000Z'), + }, + { + text: 'Upgrade Server Hardware', + priorityId: 1, + startDate: new Date('2021-04-05T16:00:00.000Z'), + endDate: new Date('2021-04-08T22:00:00.000Z'), + }, + { + text: 'Submit New Website Design', + priorityId: 2, + startDate: new Date('2021-04-23T23:30:00.000Z'), + endDate: new Date('2021-04-24T01:00:00.000Z'), + }, + { + text: 'Launch New Website', + priorityId: 2, + startDate: new Date('2021-04-24T19:20:00.000Z'), + endDate: new Date('2021-04-24T21:00:00.000Z'), + }, + { + text: 'Google AdWords Strategy', + priorityId: 1, + startDate: new Date('2021-04-26T16:00:00.000Z'), + endDate: new Date('2021-04-26T19:00:00.000Z'), + }, + { + text: 'Rollout of New Website and Marketing Brochures', + priorityId: 1, + startDate: new Date('2021-04-26T20:00:00.000Z'), + endDate: new Date('2021-04-26T22:30:00.000Z'), + }, + { + text: 'Non-Compete Agreements', + priorityId: 2, + startDate: new Date('2021-04-27T20:00:00.000Z'), + endDate: new Date('2021-04-27T22:45:00.000Z'), + }, + { + text: 'Approve Hiring of John Jeffers', + priorityId: 2, + startDate: new Date('2021-04-27T16:00:00.000Z'), + endDate: new Date('2021-04-27T19:00:00.000Z'), + }, + { + text: 'Update NDA Agreement', + priorityId: 1, + startDate: new Date('2021-04-27T18:00:00.000Z'), + endDate: new Date('2021-04-27T21:15:00.000Z'), + }, + { + text: 'Update Employee Files with New NDA', + priorityId: 1, + startDate: new Date('2021-04-30T16:00:00.000Z'), + endDate: new Date('2021-04-30T18:45:00.000Z'), + }, + { + text: 'Submit Questions Regarding New NDA', + priorityId: 1, + startDate: new Date('2021-04-28T17:00:00.000Z'), + endDate: new Date('2021-04-28T18:30:00.000Z'), + }, + { + text: 'Submit Signed NDA', + priorityId: 1, + startDate: new Date('2021-04-28T20:00:00.000Z'), + endDate: new Date('2021-04-28T22:00:00.000Z'), + }, + { + text: 'Review Revenue Projections', + priorityId: 2, + startDate: new Date('2021-04-28T18:00:00.000Z'), + endDate: new Date('2021-04-28T21:00:00.000Z'), + }, + { + text: 'Comment on Revenue Projections', + priorityId: 2, + startDate: new Date('2021-04-26T17:00:00.000Z'), + endDate: new Date('2021-04-26T20:00:00.000Z'), + }, + { + text: 'Provide New Health Insurance Docs', + priorityId: 2, + startDate: new Date('2021-04-30T19:00:00.000Z'), + endDate: new Date('2021-04-30T22:00:00.000Z'), + }, + { + text: 'Review Changes to Health Insurance Coverage', + priorityId: 2, + startDate: new Date('2021-04-29T16:00:00.000Z'), + endDate: new Date('2021-04-29T20:00:00.000Z'), + }, + { + text: 'Review Training Course for any Omissions', + priorityId: 1, + startDate: new Date('2021-04-29T18:00:00.000Z'), + endDate: new Date('2021-04-29T21:00:00.000Z'), + }, +]; +export const priorityData = [ + { + text: 'Low Priority', + id: 1, + color: '#1e90ff', + }, + { + text: 'High Priority', + id: 2, + color: '#ff9747', + }, +]; diff --git a/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/index.html b/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/index.html new file mode 100644 index 000000000000..db31b0fd60c6 --- /dev/null +++ b/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/index.js b/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/styles.css b/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/styles.css new file mode 100644 index 000000000000..0f39434b0913 --- /dev/null +++ b/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/styles.css @@ -0,0 +1,24 @@ +#scheduler { + display: flex; + flex-direction: column; +} + +.options { + padding: 20px; + background-color: rgba(191, 191, 191, 0.15); + margin-top: 20px; +} + +.caption { + font-size: 18px; + font-weight: 500; +} + +.option { + margin-top: 10px; + display: inline-block; +} + +.dx-scheduler-work-space-group-by-date .dx-scheduler-group-header-content { + font-size: 11px; +} diff --git a/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/App.js b/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/App.js new file mode 100644 index 000000000000..81d245978d1f --- /dev/null +++ b/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/App.js @@ -0,0 +1,41 @@ +import React from 'react'; +import Scheduler, { Resource, View } from 'devextreme-react/scheduler'; +import { data, priorityData } from './data.js'; + +const currentDate = new Date(2021, 3, 21); +const groups = ['priorityId']; +const App = () => ( + + + + + +); +export default App; diff --git a/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/data.js b/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/data.js new file mode 100644 index 000000000000..adeef6c16445 --- /dev/null +++ b/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/data.js @@ -0,0 +1,182 @@ +export const data = [ + { + text: 'Website Re-Design Plan', + priorityId: 2, + startDate: new Date('2021-04-19T16:30:00.000Z'), + endDate: new Date('2021-04-19T18:30:00.000Z'), + }, + { + text: 'Book Flights to San Fran for Sales Trip', + priorityId: 1, + startDate: new Date('2021-04-22T17:00:00.000Z'), + endDate: new Date('2021-04-22T19:00:00.000Z'), + }, + { + text: 'Install New Router in Dev Room', + priorityId: 1, + startDate: new Date('2021-04-19T20:00:00.000Z'), + endDate: new Date('2021-04-19T22:30:00.000Z'), + }, + { + text: 'Approve Personal Computer Upgrade Plan', + priorityId: 2, + startDate: new Date('2021-04-20T17:00:00.000Z'), + endDate: new Date('2021-04-20T18:00:00.000Z'), + }, + { + text: 'Final Budget Review', + priorityId: 2, + startDate: new Date('2021-04-20T19:00:00.000Z'), + endDate: new Date('2021-04-20T20:35:00.000Z'), + }, + { + text: 'New Brochures', + priorityId: 2, + startDate: new Date('2021-04-19T20:00:00.000Z'), + endDate: new Date('2021-04-19T22:15:00.000Z'), + }, + { + text: 'Install New Database', + priorityId: 1, + startDate: new Date('2021-04-20T16:00:00.000Z'), + endDate: new Date('2021-04-20T19:15:00.000Z'), + }, + { + text: 'Approve New Online Marketing Strategy', + priorityId: 2, + startDate: new Date('2021-04-21T19:00:00.000Z'), + endDate: new Date('2021-04-21T21:00:00.000Z'), + }, + { + text: 'Upgrade Personal Computers', + priorityId: 1, + startDate: new Date('2021-04-19T16:00:00.000Z'), + endDate: new Date('2021-04-19T18:30:00.000Z'), + }, + { + text: 'Prepare 2021 Marketing Plan', + priorityId: 2, + startDate: new Date('2021-04-22T18:00:00.000Z'), + endDate: new Date('2021-04-22T20:30:00.000Z'), + }, + { + text: 'Brochure Design Review', + priorityId: 1, + startDate: new Date('2021-04-21T18:00:00.000Z'), + endDate: new Date('2021-04-21T20:30:00.000Z'), + }, + { + text: 'Create Icons for Website', + priorityId: 2, + startDate: new Date('2021-04-23T17:00:00.000Z'), + endDate: new Date('2021-04-23T18:30:00.000Z'), + }, + { + text: 'Upgrade Server Hardware', + priorityId: 1, + startDate: new Date('2021-04-23T16:00:00.000Z'), + endDate: new Date('2021-04-23T22:00:00.000Z'), + }, + { + text: 'Submit New Website Design', + priorityId: 2, + startDate: new Date('2021-04-23T23:30:00.000Z'), + endDate: new Date('2021-04-24T01:00:00.000Z'), + }, + { + text: 'Launch New Website', + priorityId: 2, + startDate: new Date('2021-04-23T19:20:00.000Z'), + endDate: new Date('2021-04-23T21:00:00.000Z'), + }, + { + text: 'Google AdWords Strategy', + priorityId: 1, + startDate: new Date('2021-04-26T16:00:00.000Z'), + endDate: new Date('2021-04-26T19:00:00.000Z'), + }, + { + text: 'Rollout of New Website and Marketing Brochures', + priorityId: 1, + startDate: new Date('2021-04-26T20:00:00.000Z'), + endDate: new Date('2021-04-26T22:30:00.000Z'), + }, + { + text: 'Non-Compete Agreements', + priorityId: 2, + startDate: new Date('2021-04-27T20:00:00.000Z'), + endDate: new Date('2021-04-27T22:45:00.000Z'), + }, + { + text: 'Approve Hiring of John Jeffers', + priorityId: 2, + startDate: new Date('2021-04-27T16:00:00.000Z'), + endDate: new Date('2021-04-27T19:00:00.000Z'), + }, + { + text: 'Update NDA Agreement', + priorityId: 1, + startDate: new Date('2021-04-27T18:00:00.000Z'), + endDate: new Date('2021-04-27T21:15:00.000Z'), + }, + { + text: 'Update Employee Files with New NDA', + priorityId: 1, + startDate: new Date('2021-04-30T16:00:00.000Z'), + endDate: new Date('2021-04-30T18:45:00.000Z'), + }, + { + text: 'Submit Questions Regarding New NDA', + priorityId: 1, + startDate: new Date('2021-04-28T17:00:00.000Z'), + endDate: new Date('2021-04-28T18:30:00.000Z'), + }, + { + text: 'Submit Signed NDA', + priorityId: 1, + startDate: new Date('2021-04-28T20:00:00.000Z'), + endDate: new Date('2021-04-28T22:00:00.000Z'), + }, + { + text: 'Review Revenue Projections', + priorityId: 2, + startDate: new Date('2021-04-28T18:00:00.000Z'), + endDate: new Date('2021-04-28T21:00:00.000Z'), + }, + { + text: 'Comment on Revenue Projections', + priorityId: 2, + startDate: new Date('2021-04-26T17:00:00.000Z'), + endDate: new Date('2021-04-26T20:00:00.000Z'), + }, + { + text: 'Provide New Health Insurance Docs', + priorityId: 2, + startDate: new Date('2021-04-30T19:00:00.000Z'), + endDate: new Date('2021-04-30T22:00:00.000Z'), + }, + { + text: 'Review Changes to Health Insurance Coverage', + priorityId: 2, + startDate: new Date('2021-04-29T16:00:00.000Z'), + endDate: new Date('2021-04-29T20:00:00.000Z'), + }, + { + text: 'Review Training Course for any Omissions', + priorityId: 1, + startDate: new Date('2021-04-29T18:00:00.000Z'), + endDate: new Date('2021-04-29T21:00:00.000Z'), + }, +]; +export const priorityData = [ + { + text: 'Low Priority', + id: 1, + color: '#1e90ff', + }, + { + text: 'High Priority', + id: 2, + color: '#ff9747', + }, +]; diff --git a/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/index.html b/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/index.html new file mode 100644 index 000000000000..db31b0fd60c6 --- /dev/null +++ b/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/index.js b/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/styles.css b/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/styles.css new file mode 100644 index 000000000000..d1fbf48b9b7e --- /dev/null +++ b/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/styles.css @@ -0,0 +1,3 @@ +.dx-scheduler-cell-sizes-horizontal { + width: 100px; +} diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/App.js b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/App.js new file mode 100644 index 000000000000..1b6cf72dcde0 --- /dev/null +++ b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/App.js @@ -0,0 +1,84 @@ +import React from 'react'; +import Scheduler, { + Resource, + View, + Editing, + Form as SchedulerForm, + Item, +} from 'devextreme-react/scheduler'; +import { data, priorityData, typeData } from './data.js'; + +const currentDate = new Date(2021, 3, 27); +const dayOfWeekNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; +const typeGroups = ['typeId']; +const priorityGroups = ['priorityId']; +const DateCell = ({ data: cellData }) => ( + <> +
{dayOfWeekNames[cellData.date.getDay()]}
+
{cellData.date.getDate()}
+ +); +const App = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + +); +export default App; diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/data.js b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/data.js new file mode 100644 index 000000000000..b87a362118c9 --- /dev/null +++ b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/data.js @@ -0,0 +1,154 @@ +export const data = [ + { + text: 'Walking a dog', + priorityId: 1, + typeId: 1, + startDate: new Date('2021-04-26T15:00:00.000Z'), + endDate: new Date('2021-04-26T15:30:00.000Z'), + recurrenceRule: 'FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR;UNTIL=20210502', + }, + { + text: 'Website Re-Design Plan', + priorityId: 2, + typeId: 2, + startDate: new Date('2021-04-26T16:00:00.000Z'), + endDate: new Date('2021-04-26T18:30:00.000Z'), + }, + { + text: 'Book Flights to San Fran for Sales Trip', + priorityId: 2, + typeId: 2, + startDate: new Date('2021-04-26T19:00:00.000Z'), + endDate: new Date('2021-04-26T20:00:00.000Z'), + }, + { + text: 'Install New Router in Dev Room', + priorityId: 1, + typeId: 2, + startDate: new Date('2021-04-26T21:30:00.000Z'), + endDate: new Date('2021-04-26T22:30:00.000Z'), + }, + { + text: 'Go Grocery Shopping', + priorityId: 1, + typeId: 1, + startDate: new Date('2021-04-27T01:30:00.000Z'), + endDate: new Date('2021-04-27T02:30:00.000Z'), + recurrenceRule: 'FREQ=DAILY;BYDAY=MO,WE,FR;UNTIL=20210502', + }, + { + text: 'Approve Personal Computer Upgrade Plan', + priorityId: 2, + typeId: 2, + startDate: new Date('2021-04-27T17:00:00.000Z'), + endDate: new Date('2021-04-27T18:00:00.000Z'), + }, + { + text: 'Final Budget Review', + priorityId: 2, + typeId: 2, + startDate: new Date('2021-04-27T19:00:00.000Z'), + endDate: new Date('2021-04-27T20:35:00.000Z'), + }, + { + text: 'New Brochures', + priorityId: 2, + typeId: 2, + startDate: new Date('2021-04-27T21:30:00.000Z'), + endDate: new Date('2021-04-27T22:45:00.000Z'), + }, + { + text: 'Install New Database', + priorityId: 1, + typeId: 2, + startDate: new Date('2021-04-28T16:45:00.000Z'), + endDate: new Date('2021-04-28T18:15:00.000Z'), + }, + { + text: 'Approve New Online Marketing Strategy', + priorityId: 2, + typeId: 2, + startDate: new Date('2021-04-28T19:00:00.000Z'), + endDate: new Date('2021-04-28T21:00:00.000Z'), + }, + { + text: 'Upgrade Personal Computers', + priorityId: 1, + typeId: 2, + startDate: new Date('2021-04-28T22:15:00.000Z'), + endDate: new Date('2021-04-28T23:30:00.000Z'), + }, + { + text: 'Prepare 2021 Marketing Plan', + priorityId: 2, + typeId: 2, + startDate: new Date('2021-04-29T18:00:00.000Z'), + endDate: new Date('2021-04-29T20:30:00.000Z'), + }, + { + text: 'Brochure Design Review', + priorityId: 1, + typeId: 2, + startDate: new Date('2021-04-29T21:00:00.000Z'), + endDate: new Date('2021-04-29T22:30:00.000Z'), + }, + { + text: 'Create Icons for Website', + priorityId: 2, + typeId: 2, + startDate: new Date('2021-04-30T17:00:00.000Z'), + endDate: new Date('2021-04-30T18:30:00.000Z'), + }, + { + text: 'Upgrade Server Hardware', + priorityId: 1, + typeId: 2, + startDate: new Date('2021-04-30T21:30:00.000Z'), + endDate: new Date('2021-04-30T23:00:00.000Z'), + }, + { + text: 'Submit New Website Design', + priorityId: 2, + typeId: 2, + startDate: new Date('2021-04-30T23:30:00.000Z'), + endDate: new Date('2021-05-01T01:00:00.000Z'), + }, + { + text: 'Launch New Website', + priorityId: 2, + typeId: 2, + startDate: new Date('2021-04-30T19:20:00.000Z'), + endDate: new Date('2021-04-30T21:00:00.000Z'), + }, + { + text: 'Visiting a Doctor', + priorityId: 2, + typeId: 1, + startDate: new Date('2021-05-01T17:00:00.000Z'), + endDate: new Date('2021-05-01T20:30:00.000Z'), + }, +]; +export const priorityData = [ + { + text: 'Low Priority', + id: 1, + color: '#fcb65e', + }, + { + text: 'High Priority', + id: 2, + color: '#e18e92', + }, +]; +export const typeData = [ + { + text: 'Home', + id: 1, + color: '#b6d623', + }, + { + text: 'Work', + id: 2, + color: '#679ec5', + }, +]; diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/index.html b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/index.html new file mode 100644 index 000000000000..db31b0fd60c6 --- /dev/null +++ b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/index.js b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/styles.css b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/styles.css new file mode 100644 index 000000000000..ee431ebd03bf --- /dev/null +++ b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/styles.css @@ -0,0 +1,15 @@ +.dx-scheduler-work-space-week .dx-scheduler-header-panel-cell, +.dx-scheduler-work-space-work-week .dx-scheduler-header-panel-cell { + text-align: center; + vertical-align: middle; +} + +.dx-scheduler-work-space .dx-scheduler-header-panel-cell .name { + font-size: 13px; + line-height: 15px; +} + +.dx-scheduler-work-space .dx-scheduler-header-panel-cell .number { + font-size: 15px; + line-height: 15px; +} diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/App.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/App.js new file mode 100644 index 000000000000..9c9fce34b864 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/App.js @@ -0,0 +1,35 @@ +import React from 'react'; +import Scheduler, { Resource } from 'devextreme-react/scheduler'; +import { employees, data } from './data.js'; +import DataCell from './DataCell.js'; +import ResourceCell from './ResourceCell.js'; + +const currentDate = new Date(2021, 5, 2, 11, 30); +const groups = ['employeeID']; +const views = ['month']; +const App = () => ( + + + +); +export default App; diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/DataCell.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/DataCell.js new file mode 100644 index 000000000000..1cce0d508039 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/DataCell.js @@ -0,0 +1,31 @@ +import React from 'react'; + +const isWeekEnd = (date) => { + const day = date.getDay(); + return day === 0 || day === 6; +}; +const getCurrentTraining = (date, employeeID) => { + const result = (date + employeeID) % 3; + const currentTraining = `training-background-${result}`; + return currentTraining; +}; +const DataCell = (props) => { + const { + data: { + startDate, + groups: { employeeID }, + text, + }, + } = props; + const dayClasses = ['day-cell', getCurrentTraining(startDate.getDate(), employeeID)]; + const employeeClasses = [`employee-${employeeID}`, 'dx-template-wrapper']; + if (isWeekEnd(startDate)) { + employeeClasses.push(`employee-weekend-${employeeID}`); + } + return ( +
+
{text}
+
+ ); +}; +export default DataCell; diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js new file mode 100644 index 000000000000..6f080eb30b8a --- /dev/null +++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js @@ -0,0 +1,39 @@ +import React from 'react'; + +const ResourceCell = (props) => { + const { + data: { + color, + text, + data: { avatar, age, discipline }, + }, + } = props; + return ( +
+
+

{text}

+
+
+ {`${text} +
+
+ Age: {age} +
+ {discipline} +
+
+ ); +}; +export default ResourceCell; diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js new file mode 100644 index 000000000000..2ae3c1170144 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js @@ -0,0 +1,98 @@ +export const data = [ + { + text: 'Helen', + employeeID: 2, + startDate: new Date('2021-06-01T16:30:00.000Z'), + endDate: new Date('2021-06-01T18:30:00.000Z'), + }, + { + text: 'Helen', + employeeID: 2, + startDate: new Date('2021-06-10T16:30:00.000Z'), + endDate: new Date('2021-06-11T18:30:00.000Z'), + }, + { + text: 'Alex', + employeeID: 1, + startDate: new Date('2021-06-02T16:30:00.000Z'), + endDate: new Date('2021-06-02T18:30:00.000Z'), + }, + { + text: 'Alex', + employeeID: 1, + startDate: new Date('2021-06-11T19:00:00.000Z'), + endDate: new Date('2021-06-11T20:00:00.000Z'), + }, + { + text: 'Alex', + employeeID: 2, + startDate: new Date('2021-06-16T16:30:00.000Z'), + endDate: new Date('2021-06-16T18:30:00.000Z'), + }, + { + text: 'Stan', + employeeID: 1, + startDate: new Date('2021-06-07T16:30:00.000Z'), + endDate: new Date('2021-06-07T18:30:00.000Z'), + }, + { + text: 'Stan', + employeeID: 1, + startDate: new Date('2021-06-28T16:30:00.000Z'), + endDate: new Date('2021-06-28T18:30:00.000Z'), + }, + { + text: 'Stan', + employeeID: 1, + startDate: new Date('2021-06-30T16:30:00.000Z'), + endDate: new Date('2021-06-30T18:30:00.000Z'), + }, + { + text: 'Rachel', + employeeID: 2, + startDate: new Date('2021-06-04T16:30:00.000Z'), + endDate: new Date('2021-06-04T18:30:00.000Z'), + }, + { + text: 'Rachel', + employeeID: 2, + startDate: new Date('2021-06-07T16:30:00.000Z'), + endDate: new Date('2021-06-07T18:30:00.000Z'), + }, + { + text: 'Rachel', + employeeID: 1, + startDate: new Date('2021-06-21T16:30:00.000Z'), + endDate: new Date('2021-06-21T18:30:00.000Z'), + }, + { + text: 'Kelly', + employeeID: 2, + startDate: new Date('2021-06-15T16:30:00.000Z'), + endDate: new Date('2021-06-15T18:30:00.000Z'), + }, + { + text: 'Kelly', + employeeID: 2, + startDate: new Date('2021-06-29T16:30:00.000Z'), + endDate: new Date('2021-06-29T18:30:00.000Z'), + }, +]; +export const employees = [ + { + text: 'John Heart', + id: 1, + color: 'var(--background-color-1)', + avatar: '../../../../images/employees/19.png', + age: 27, + discipline: 'ABS, Fitball, StepFit', + }, + { + text: 'Greta Sims', + id: 2, + color: 'var(--background-color-2)', + avatar: '../../../../images/employees/31.png', + age: 25, + discipline: 'ABS, Fitball, StepFit', + }, +]; diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/description.md b/apps/demos/Demos/Scheduler/Overview/ReactJs/description.md new file mode 100644 index 000000000000..5bc9cd563916 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/description.md @@ -0,0 +1,4 @@ +DevExtreme React Scheduler is a UI component for scheduling. It implements all the features necessary for its purpose: flexible data binding, easy appointment editing, multiple calendar views, time zones support, and more. [Learn more about DevExtreme React components](/Documentation/Guide/React_Components/DevExtreme_React_Components/). + +To get started with the DevExtreme Scheduler component, refer to the following tutorial for step-by-step instructions: [Getting Started with Scheduler](/Documentation/Guide/UI_Components/Scheduler/Getting_Started_with_Scheduler/). + \ No newline at end of file diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/index.html b/apps/demos/Demos/Scheduler/Overview/ReactJs/index.html new file mode 100644 index 000000000000..db31b0fd60c6 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/index.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css new file mode 100644 index 000000000000..97f1dab526a7 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css @@ -0,0 +1,171 @@ +.dx-scheduler-group-header, +.dx-scheduler-date-table-cell { + position: relative; +} + +.dx-scheduler-group-header-content { + padding-left: 8px; +} + +.dx-color-scheme-light, +.dx-color-scheme-carmine, +.dx-color-scheme-softblue, +.dx-color-scheme-blue-light, +.dx-color-scheme-saas-light, +.dx-color-scheme-lime-light, +.dx-color-scheme-orange-light, +.dx-color-scheme-purple-light, +.dx-color-scheme-teal-light { + --text-color-1: rgba(0, 0, 0, .6); + --text-color-2: rgba(255, 255, 255, 1); + --disabled-color: rgba(0, 0, 0, 0.38); + --background-color-1: rgba(50, 134, 56, 1); + --background-color-2: rgba(194, 81, 0, 1); +} + +.dx-color-scheme-dark, +.dx-color-scheme-darkviolet, +.dx-color-scheme-darkmoon, +.dx-color-scheme-blue-dark, +.dx-color-scheme-saas-dark, +.dx-color-scheme-lime-dark, +.dx-color-scheme-orange-dark, +.dx-color-scheme-purple-dark, +.dx-color-scheme-teal-dark { + --text-color-1: rgba(255, 255, 255, 1); + --text-color-2: rgba(54, 54, 64, 1); + --disabled-color: rgba(255, 255, 255, 0.38); + --background-color-1: rgba(159, 213, 161, 1); + --background-color-2: rgba(255, 181, 127, 1); + +} + +.dx-scheduler-header .dx-toolbar .dx-button, +.dx-scheduler-header .dx-toolbar .dx-button .dx-icon { + color: var(--text-color-1); +} + +.dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell { + opacity: 1; + color: var(--disabled-color) !important; +} + +.dx-scheduler-work-space-month .dx-scheduler-date-table-cell { + color: var(--text-color-1); +} + +.dx-scheduler-work-space-month .dx-scheduler-appointment, +.dx-scheduler-work-space-month .dx-scheduler-appointment.dx-state-focused { + color: var(--text-color-2); + line-height: 22px; +} + +.dx-scheduler-work-space-month .dx-scheduler-appointment .dx-scheduler-appointment-content { + padding-top: 0; +} + +.dx-scheduler-date-table-cell .dx-template-wrapper { + position: absolute; + height: 100%; + width: 100%; + padding-right: 6px; +} + +.avatar { + width: 124px; + float: left; + overflow: hidden; + position: relative; + height: 124px; + border: 1px solid rgba(0, 0, 0, 0.24); + border-radius: 50%; + background-color: rgba(255, 255, 255, 1); +} + +.avatar img { + position: relative; + width: 126px; + height: 130px; + object-fit: contain; +} + +.avatar[title="John Heart"] img { + top: 5px; + left: 3px; +} + +.avatar[title="Greta Sims"] img { + top: 5px; + left: -7px; +} + +.name { + position: absolute; + bottom: 0; + left: 0; + width: 100%; +} + +.name h2 { + color: var(--text-color-2); + font-size: 28px; + text-align: left; + padding: 0 0 0 170px; + margin: 0; + height: 40px; + line-height: 40px; +} + +.info { + width: auto; + text-align: left; + height: 100%; + font-size: 14px; + line-height: 20px; + font-weight: normal; + padding: 25px 20px 25px 40px; + color: #707070; +} + +.dx-color-scheme-contrast .info { + color: #fff; +} + +.day-cell { + width: 100%; + height: 100%; + background-position: center center; + background-repeat: no-repeat; +} + +.dx-scheduler-appointment { + color: rgba(255, 255, 255, 1); +} + +.employee-1 { + background-color: rgba(55, 126, 58, 0.08); +} + +.employee-2 { + background-color: rgba(194, 81, 0, 0.08); +} + +.employee-weekend-1 { + background-color: rgba(55, 126, 58, 0.12); +} + +.employee-weekend-2 { + background-color: rgba(194, 81, 0, 0.12); +} + +.training-background-0 { + background-image: url("../../../../images/Scheduler/Overview/icon-abs.png"); +} + +.training-background-1 { + background-image: url("../../../../images/Scheduler/Overview/icon-step.png"); +} + +.training-background-2 { + background-image: url("../../../../images/Scheduler/Overview/icon-fitball.png"); +} diff --git a/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/App.js b/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/App.js new file mode 100644 index 000000000000..2728afe6fe6b --- /dev/null +++ b/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/App.js @@ -0,0 +1,25 @@ +import React from 'react'; +import Scheduler, { Resource } from 'devextreme-react/scheduler'; +import { data, resourcesData } from './data.js'; + +const currentDate = new Date(2020, 10, 25); +const views = ['day', 'week', 'month']; +const App = () => ( + + + +); +export default App; diff --git a/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/data.js b/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/data.js new file mode 100644 index 000000000000..cd88de29c3e4 --- /dev/null +++ b/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/data.js @@ -0,0 +1,86 @@ +export const data = [ + { + text: 'Watercolor Landscape', + roomId: [1], + startDate: new Date('2020-11-01T17:30:00.000Z'), + endDate: new Date('2020-11-01T19:00:00.000Z'), + recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TH;COUNT=10', + }, + { + text: 'Oil Painting for Beginners', + roomId: [2], + startDate: new Date('2020-11-01T17:30:00.000Z'), + endDate: new Date('2020-11-01T19:00:00.000Z'), + recurrenceRule: 'FREQ=WEEKLY;BYDAY=SU,WE;COUNT=10', + }, + { + text: 'Testing', + roomId: [3], + startDate: new Date('2020-11-01T20:00:00.000Z'), + endDate: new Date('2020-11-01T21:00:00.000Z'), + recurrenceRule: 'FREQ=WEEKLY;BYDAY=SU;WKST=TU;INTERVAL=2;COUNT=2', + }, + { + text: 'Meeting of Instructors', + roomId: [4], + startDate: new Date('2020-11-01T17:00:00.000Z'), + endDate: new Date('2020-11-01T17:15:00.000Z'), + recurrenceRule: 'FREQ=DAILY;BYDAY=TU;UNTIL=20201203', + }, + { + text: 'Recruiting students', + roomId: [5], + startDate: new Date('2020-10-24T18:00:00.000Z'), + endDate: new Date('2020-10-24T19:00:00.000Z'), + recurrenceRule: 'FREQ=YEARLY;BYWEEKNO=50;WKST=SU', + recurrenceException: '20201212T190000Z', + }, + { + text: 'Final exams', + roomId: [3], + startDate: new Date('2020-10-24T20:00:00.000Z'), + endDate: new Date('2020-10-24T21:35:00.000Z'), + recurrenceRule: 'FREQ=YEARLY;BYWEEKNO=51;BYDAY=WE,TH', + }, + { + text: 'Monthly Planning', + roomId: [4], + startDate: new Date('2020-11-24T22:30:00.000Z'), + endDate: new Date('2020-11-24T23:45:00.000Z'), + recurrenceRule: 'FREQ=MONTHLY;BYMONTHDAY=28;COUNT=1', + }, + { + text: 'Open Day', + roomId: [5], + startDate: new Date('2020-11-01T17:30:00.000Z'), + endDate: new Date('2020-11-01T21:00:00.000Z'), + recurrenceRule: 'FREQ=YEARLY;BYYEARDAY=333', + }, +]; +export const resourcesData = [ + { + text: 'Room 101', + id: 1, + color: '#bbd806', + }, + { + text: 'Room 102', + id: 2, + color: '#f34c8a', + }, + { + text: 'Room 103', + id: 3, + color: '#ae7fcc', + }, + { + text: 'Meeting room', + id: 4, + color: '#ff8817', + }, + { + text: 'Conference hall', + id: 5, + color: '#03bb92', + }, +]; diff --git a/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/index.html b/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/index.html new file mode 100644 index 000000000000..d6d83f735a76 --- /dev/null +++ b/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/index.html @@ -0,0 +1,39 @@ + + + + DevExtreme Demo + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/index.js b/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/RecurringAppointments/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/Resources/ReactJs/App.js b/apps/demos/Demos/Scheduler/Resources/ReactJs/App.js new file mode 100644 index 000000000000..c680aff016ef --- /dev/null +++ b/apps/demos/Demos/Scheduler/Resources/ReactJs/App.js @@ -0,0 +1,93 @@ +import React, { useCallback, useState } from 'react'; +import Scheduler, { + Resource, + Editing, + Form as SchedulerForm, + Item, +} from 'devextreme-react/scheduler'; +import RadioGroup from 'devextreme-react/radio-group'; +import { + data, assignees, rooms, priorities, resourcesList, +} from './data.js'; + +const currentDate = new Date(2021, 3, 27); +const views = ['workWeek']; +const App = () => { + const [currentResource, setCurrentResource] = useState(resourcesList[0]); + const onRadioGroupValueChanged = useCallback((e) => { + setCurrentResource(e.value); + }, []); + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + +
+
Use colors of:
+
+ +
+
+ + ); +}; +export default App; diff --git a/apps/demos/Demos/Scheduler/Resources/ReactJs/data.js b/apps/demos/Demos/Scheduler/Resources/ReactJs/data.js new file mode 100644 index 000000000000..ea10053c8016 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Resources/ReactJs/data.js @@ -0,0 +1,184 @@ +export const resourcesList = ['Assignee', 'Room', 'Priority']; +export const data = [ + { + text: 'Website Re-Design Plan', + assigneeId: [4], + roomId: 1, + priorityId: 2, + startDate: new Date('2021-04-26T16:30:00.000Z'), + endDate: new Date('2021-04-26T18:30:00.000Z'), + }, + { + text: 'Book Flights to San Fran for Sales Trip', + assigneeId: [2], + roomId: 2, + priorityId: 1, + startDate: new Date('2021-04-26T19:00:00.000Z'), + endDate: new Date('2021-04-26T20:00:00.000Z'), + allDay: true, + }, + { + text: 'Install New Router in Dev Room', + assigneeId: [1], + roomId: 1, + priorityId: 2, + startDate: new Date('2021-04-26T21:30:00.000Z'), + endDate: new Date('2021-04-26T22:30:00.000Z'), + }, + { + text: 'Approve Personal Computer Upgrade Plan', + assigneeId: [3], + roomId: 2, + priorityId: 2, + startDate: new Date('2021-04-27T17:00:00.000Z'), + endDate: new Date('2021-04-27T18:00:00.000Z'), + }, + { + text: 'Final Budget Review', + assigneeId: [1], + roomId: 1, + priorityId: 1, + startDate: new Date('2021-04-27T19:00:00.000Z'), + endDate: new Date('2021-04-27T20:35:00.000Z'), + }, + { + text: 'New Brochures', + assigneeId: [4], + roomId: 3, + priorityId: 2, + startDate: new Date('2021-04-27T21:30:00.000Z'), + endDate: new Date('2021-04-27T22:45:00.000Z'), + }, + { + text: 'Install New Database', + assigneeId: [2], + roomId: 3, + priorityId: 1, + startDate: new Date('2021-04-28T16:45:00.000Z'), + endDate: new Date('2021-04-28T18:15:00.000Z'), + }, + { + text: 'Approve New Online Marketing Strategy', + assigneeId: [4], + roomId: 2, + priorityId: 1, + startDate: new Date('2021-04-28T19:00:00.000Z'), + endDate: new Date('2021-04-28T21:00:00.000Z'), + }, + { + text: 'Upgrade Personal Computers', + assigneeId: [2], + roomId: 2, + priorityId: 2, + startDate: new Date('2021-04-28T22:15:00.000Z'), + endDate: new Date('2021-04-28T23:30:00.000Z'), + }, + { + text: 'Customer Workshop', + assigneeId: [3], + roomId: 3, + priorityId: 1, + startDate: new Date('2021-04-29T18:00:00.000Z'), + endDate: new Date('2021-04-29T19:00:00.000Z'), + allDay: true, + }, + { + text: 'Prepare 2021 Marketing Plan', + assigneeId: [1], + roomId: 1, + priorityId: 2, + startDate: new Date('2021-04-29T18:00:00.000Z'), + endDate: new Date('2021-04-29T20:30:00.000Z'), + }, + { + text: 'Brochure Design Review', + assigneeId: [4], + roomId: 1, + priorityId: 1, + startDate: new Date('2021-04-29T21:00:00.000Z'), + endDate: new Date('2021-04-29T22:30:00.000Z'), + }, + { + text: 'Create Icons for Website', + assigneeId: [3], + roomId: 3, + priorityId: 1, + startDate: new Date('2021-04-30T17:00:00.000Z'), + endDate: new Date('2021-04-30T18:30:00.000Z'), + }, + { + text: 'Upgrade Server Hardware', + assigneeId: [4], + roomId: 2, + priorityId: 2, + startDate: new Date('2021-04-30T21:30:00.000Z'), + endDate: new Date('2021-04-30T23:00:00.000Z'), + }, + { + text: 'Submit New Website Design', + assigneeId: [1], + roomId: 1, + priorityId: 2, + startDate: new Date('2021-04-30T23:30:00.000Z'), + endDate: new Date('2021-05-01T01:00:00.000Z'), + }, + { + text: 'Launch New Website', + assigneeId: [2], + roomId: 3, + priorityId: 1, + startDate: new Date('2021-04-30T19:20:00.000Z'), + endDate: new Date('2021-04-30T21:00:00.000Z'), + }, +]; +export const assignees = [ + { + text: 'Samantha Bright', + id: 1, + color: '#727bd2', + }, + { + text: 'John Heart', + id: 2, + color: '#32c9ed', + }, + { + text: 'Todd Hoffman', + id: 3, + color: '#2a7ee4', + }, + { + text: 'Sandra Johnson', + id: 4, + color: '#7b49d3', + }, +]; +export const rooms = [ + { + text: 'Room 1', + id: 1, + color: '#00af2c', + }, + { + text: 'Room 2', + id: 2, + color: '#56ca85', + }, + { + text: 'Room 3', + id: 3, + color: '#8ecd3c', + }, +]; +export const priorities = [ + { + text: 'High', + id: 1, + color: '#cc5c53', + }, + { + text: 'Low', + id: 2, + color: '#ff9747', + }, +]; diff --git a/apps/demos/Demos/Scheduler/Resources/ReactJs/index.html b/apps/demos/Demos/Scheduler/Resources/ReactJs/index.html new file mode 100644 index 000000000000..db31b0fd60c6 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Resources/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/Resources/ReactJs/index.js b/apps/demos/Demos/Scheduler/Resources/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Resources/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/Resources/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Resources/ReactJs/styles.css new file mode 100644 index 000000000000..1fe9c38fdd0f --- /dev/null +++ b/apps/demos/Demos/Scheduler/Resources/ReactJs/styles.css @@ -0,0 +1,15 @@ +.options { + padding: 20px; + background-color: rgba(191, 191, 191, 0.15); + margin-top: 20px; +} + +.caption { + font-size: 18px; + font-weight: 500; +} + +.option { + margin-top: 10px; + display: inline-block; +} diff --git a/apps/demos/Demos/Scheduler/SignalRService/ReactJs/App.js b/apps/demos/Demos/Scheduler/SignalRService/ReactJs/App.js new file mode 100644 index 000000000000..c55f006fa192 --- /dev/null +++ b/apps/demos/Demos/Scheduler/SignalRService/ReactJs/App.js @@ -0,0 +1,84 @@ +import React from 'react'; +import Scheduler from 'devextreme-react/scheduler'; +import * as AspNetData from 'devextreme-aspnet-data-nojquery'; +import { HubConnectionBuilder, HttpTransportType } from '@aspnet/signalr'; + +const BASE_PATH = 'https://js.devexpress.com/Demos/NetCore/'; +const url = `${BASE_PATH}api/SchedulerSignalR`; +const createStore = () => + AspNetData.createStore({ + key: 'AppointmentId', + loadUrl: url, + insertUrl: url, + updateUrl: url, + deleteUrl: url, + onBeforeSend(method, ajaxOptions) { + ajaxOptions.xhrFields = { withCredentials: true }; + }, + }); +const store1 = createStore(); +const store2 = createStore(); +const currentDate = new Date(2021, 3, 27); +const views = ['day', 'workWeek']; +const connection = new HubConnectionBuilder() + .withUrl(`${BASE_PATH}schedulerSignalRHub`, { + skipNegotiation: true, + transport: HttpTransportType.WebSockets, + }) + .build(); +connection.start().then(() => { + connection.on('update', (key, data) => { + store1.push([{ type: 'update', key, data }]); + store2.push([{ type: 'update', key, data }]); + }); + connection.on('insert', (data) => { + store1.push([{ type: 'insert', data }]); + store2.push([{ type: 'insert', data }]); + }); + connection.on('remove', (key) => { + store1.push([{ type: 'remove', key }]); + store2.push([{ type: 'remove', key }]); + }); +}); +const App = () => ( +
+
+ +
+
+ +
+
+); +export default App; diff --git a/apps/demos/Demos/Scheduler/SignalRService/ReactJs/index.html b/apps/demos/Demos/Scheduler/SignalRService/ReactJs/index.html new file mode 100644 index 000000000000..4828e70dfadb --- /dev/null +++ b/apps/demos/Demos/Scheduler/SignalRService/ReactJs/index.html @@ -0,0 +1,45 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/SignalRService/ReactJs/index.js b/apps/demos/Demos/Scheduler/SignalRService/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/SignalRService/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/SignalRService/ReactJs/styles.css b/apps/demos/Demos/Scheduler/SignalRService/ReactJs/styles.css new file mode 100644 index 000000000000..b57f7f9ea5d6 --- /dev/null +++ b/apps/demos/Demos/Scheduler/SignalRService/ReactJs/styles.css @@ -0,0 +1,15 @@ +.schedulers { + display: flex; +} + +.column-1 { + padding-right: 5px; +} + +.column-2 { + padding-left: 5px; +} + +.dx-scheduler-small .dx-scheduler-view-switcher.dx-tabs { + display: table; +} diff --git a/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/App.js b/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/App.js new file mode 100644 index 000000000000..ada8b158b8e6 --- /dev/null +++ b/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/App.js @@ -0,0 +1,18 @@ +import React from 'react'; +import Scheduler from 'devextreme-react/scheduler'; +import { data } from './data.js'; + +const currentDate = new Date(2021, 2, 28); +const views = ['week', 'month']; +const App = () => ( + +); +export default App; diff --git a/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/data.js b/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/data.js new file mode 100644 index 000000000000..8f9ddd64cd66 --- /dev/null +++ b/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/data.js @@ -0,0 +1,84 @@ +export const data = [ + { + text: 'Website Re-Design Plan', + startDate: new Date('2021-03-29T16:30:00.000Z'), + endDate: new Date('2021-03-29T18:30:00.000Z'), + }, + { + text: 'Book Flights to San Fran for Sales Trip', + startDate: new Date('2021-03-29T19:00:00.000Z'), + endDate: new Date('2021-03-29T20:00:00.000Z'), + allDay: true, + }, + { + text: 'Install New Router in Dev Room', + startDate: new Date('2021-03-29T21:30:00.000Z'), + endDate: new Date('2021-03-29T22:30:00.000Z'), + }, + { + text: 'Approve Personal Computer Upgrade Plan', + startDate: new Date('2021-03-30T17:00:00.000Z'), + endDate: new Date('2021-03-30T18:00:00.000Z'), + }, + { + text: 'Final Budget Review', + startDate: new Date('2021-03-30T19:00:00.000Z'), + endDate: new Date('2021-03-30T20:35:00.000Z'), + }, + { + text: 'New Brochures', + startDate: new Date('2021-03-30T21:30:00.000Z'), + endDate: new Date('2021-03-30T22:45:00.000Z'), + }, + { + text: 'Install New Database', + startDate: new Date('2021-03-31T16:45:00.000Z'), + endDate: new Date('2021-03-31T18:15:00.000Z'), + }, + { + text: 'Approve New Online Marketing Strategy', + startDate: new Date('2021-03-31T19:00:00.000Z'), + endDate: new Date('2021-03-31T21:00:00.000Z'), + }, + { + text: 'Upgrade Personal Computers', + startDate: new Date('2021-03-31T22:15:00.000Z'), + endDate: new Date('2021-03-31T23:30:00.000Z'), + }, + { + text: 'Customer Workshop', + startDate: new Date('2021-04-01T18:00:00.000Z'), + endDate: new Date('2021-04-01T19:00:00.000Z'), + allDay: true, + }, + { + text: 'Prepare 2021 Marketing Plan', + startDate: new Date('2021-04-01T18:00:00.000Z'), + endDate: new Date('2021-04-01T20:30:00.000Z'), + }, + { + text: 'Brochure Design Review', + startDate: new Date('2021-04-01T21:00:00.000Z'), + endDate: new Date('2021-04-01T22:30:00.000Z'), + }, + { + text: 'Create Icons for Website', + startDate: new Date('2021-04-02T17:00:00.000Z'), + endDate: new Date('2021-04-02T18:30:00.000Z'), + }, + { + text: 'Upgrade Server Hardware', + startDate: new Date('2021-04-02T21:30:00.000Z'), + endDate: new Date('2021-04-02T23:00:00.000Z'), + }, + { + text: 'Submit New Website Design', + startDate: new Date('2021-04-02T23:30:00.000Z'), + endDate: new Date('2021-04-03T01:00:00.000Z'), + }, + { + text: 'Launch New Website', + startDate: new Date('2021-04-02T19:20:00.000Z'), + endDate: new Date('2021-04-02T21:00:00.000Z'), + }, +]; diff --git a/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/index.html b/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/index.html new file mode 100644 index 000000000000..d6d83f735a76 --- /dev/null +++ b/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/index.html @@ -0,0 +1,39 @@ + + + + DevExtreme Demo + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/index.js b/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/SimpleArray/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/App.js b/apps/demos/Demos/Scheduler/Templates/ReactJs/App.js new file mode 100644 index 000000000000..bc24053b74da --- /dev/null +++ b/apps/demos/Demos/Scheduler/Templates/ReactJs/App.js @@ -0,0 +1,181 @@ +import React, { useCallback, useMemo, useRef } from 'react'; +import Scheduler, { + Editing, + Resource, + Form as SchedulerForm, + Item, + Label, +} from 'devextreme-react/scheduler'; +import { query } from 'devextreme-react/common/data'; +import Appointment from './Appointment.js'; +import AppointmentTooltip from './AppointmentTooltip.js'; +import MovieInfoContainer from './MovieInfoContainer.js'; +import { data, moviesData, theatreData } from './data.js'; + +const currentDate = new Date(2025, 3, 27); +const views = ['day', 'week', 'timelineDay']; +const groups = ['theatreId']; +const getMovieById = (id) => + id ? query(moviesData).filter(['id', '=', id]).toArray()[0] ?? null : null; +const getEditorStylingMode = () => { + const isMaterialOrFluent = document.querySelector('.dx-theme-fluent, .dx-theme-material'); + return isMaterialOrFluent ? 'filled' : 'outlined'; +}; +const priceDisplayExpr = (value) => `$${value}`; +const colCountByScreen = { xs: 2 }; +const App = () => { + const formInstanceRef = useRef(null); + const onPopupOptionChanged = useCallback((e) => { + if (e.fullName === 'toolbarItems' && e.value) { + e.value.forEach((item, index) => { + if (item.shortcut === 'done' || item.shortcut === 'cancel') { + e.component.option(`toolbarItems[${index}].toolbar`, 'bottom'); + } + }); + } + }, []); + const popupOptions = useMemo( + () => ({ + maxWidth: 440, + onOptionChanged: onPopupOptionChanged, + }), + [onPopupOptionChanged], + ); + const updateEndDate = useCallback((movie) => { + const form = formInstanceRef.current; + const formData = form?.option('formData'); + const { startDate } = formData; + if (startDate) { + const newEndDate = new Date(startDate.getTime() + 60 * 1000 * movie.duration); + form?.updateData('endDate', newEndDate); + } + }, []); + const onFormInitialized = useCallback( + (e) => { + const form = e.component; + form && (formInstanceRef.current = form); + form?.on('fieldDataChanged', (fieldEvent) => { + if (fieldEvent.dataField === 'startDate') { + const currentFormData = form?.option('formData'); + const movie = getMovieById(currentFormData.movieId); + if (movie) { + updateEndDate(movie); + } + } + }); + }, + [updateEndDate], + ); + const onMovieValueChanged = useCallback( + (e) => { + const form = formInstanceRef.current; + const movie = getMovieById(e.value); + if (movie) { + form?.updateData('director', movie.director); + updateEndDate(movie); + } + }, + [updateEndDate], + ); + const movieInfoContainerRender = useCallback( + () => , + [], + ); + const onCustomEditorContentReady = useCallback((e) => { + e.component.option('stylingMode', getEditorStylingMode()); + }, []); + const movieEditorOptions = useMemo( + () => ({ + items: moviesData, + displayExpr: 'text', + valueExpr: 'id', + stylingMode: getEditorStylingMode(), + onValueChanged: onMovieValueChanged, + onContentReady: onCustomEditorContentReady, + }), + [onMovieValueChanged, onCustomEditorContentReady], + ); + const priceEditorOptions = useMemo( + () => ({ + items: [5, 10, 15, 20], + displayExpr: priceDisplayExpr, + stylingMode: getEditorStylingMode(), + onContentReady: onCustomEditorContentReady, + }), + [onCustomEditorContentReady], + ); + return ( + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; +export default App; diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/Appointment.js b/apps/demos/Demos/Scheduler/Templates/ReactJs/Appointment.js new file mode 100644 index 000000000000..924b55367367 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Templates/ReactJs/Appointment.js @@ -0,0 +1,35 @@ +import React, { useMemo } from 'react'; +import { query as Query } from 'devextreme-react/common/data'; +import { formatDate } from 'devextreme-react/common/core/localization'; +import { moviesData } from './data.js'; + +const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0]; +const Appointment = (props) => { + const { targetedAppointmentData } = props.data; + const { + movieId, price, displayStartDate, displayEndDate, + } = targetedAppointmentData; + const movieData = useMemo(() => getMovieById(movieId), [movieId]); + return ( +
+
+ {movieData.text} +
+
+
{movieData.text}
+
+ Ticket Price: ${price} +
+
+ {formatDate(displayStartDate, 'shortTime')} + {' - '} + {formatDate(displayEndDate, 'shortTime')} +
+
+
+ ); +}; +export default Appointment; diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/AppointmentTooltip.js b/apps/demos/Demos/Scheduler/Templates/ReactJs/AppointmentTooltip.js new file mode 100644 index 000000000000..9d38e81296d3 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Templates/ReactJs/AppointmentTooltip.js @@ -0,0 +1,27 @@ +import React, { useMemo } from 'react'; +import { query as Query } from 'devextreme-react/common/data'; +import { moviesData } from './data.js'; + +const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0]; +const AppointmentTooltip = ({ data }) => { + const { movieId } = data.appointmentData; + const movieData = useMemo(() => getMovieById(movieId), [movieId]); + return ( +
+
+ {movieData.text} +
+
+
+ {movieData.text} ({movieData.year}) +
+
Director: {movieData.director}
+
Duration: {movieData.duration} minutes
+
+
+ ); +}; +export default AppointmentTooltip; diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/MovieInfoContainer.js b/apps/demos/Demos/Scheduler/Templates/ReactJs/MovieInfoContainer.js new file mode 100644 index 000000000000..fff4c39573fc --- /dev/null +++ b/apps/demos/Demos/Scheduler/Templates/ReactJs/MovieInfoContainer.js @@ -0,0 +1,54 @@ +import React, { useState, useEffect } from 'react'; +import { query } from 'devextreme-react/common/data'; +import { moviesData } from './data.js'; + +const getMovieById = (id) => + id ? query(moviesData).filter(['id', '=', id]).toArray()[0] ?? null : null; +const MovieInfoContainer = ({ formInstanceRef }) => { + const [movie, setMovie] = useState(null); + useEffect(() => { + const form = formInstanceRef.current; + const formData = form?.option('formData'); + const currentMovie = getMovieById(formData.movieId); + setMovie(currentMovie); + const handleFieldDataChanged = (e) => { + if (e.dataField === 'movieId') { + const updatedMovie = getMovieById(e.value); + setMovie(updatedMovie); + } + }; + form?.on('fieldDataChanged', handleFieldDataChanged); + return () => { + form?.off('fieldDataChanged', handleFieldDataChanged); + }; + }, [formInstanceRef]); + return ( +
+ {movie ? ( +
+
+ {movie.text} +
+
+
+ {movie.text} ({movie.year}) +
+
Director: {movie.director}
+
Duration: {movie.duration} minutes
+
+
+ ) : ( +
+
+
+
Select a movie
+
+
+ )} +
+ ); +}; +export default MovieInfoContainer; diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/data.js b/apps/demos/Demos/Scheduler/Templates/ReactJs/data.js new file mode 100644 index 000000000000..678c9317db61 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Templates/ReactJs/data.js @@ -0,0 +1,1279 @@ +export const moviesData = [ + { + id: 1, + text: 'His Girl Friday', + director: 'Howard Hawks', + year: 1940, + image: '../../../../images/movies/HisGirlFriday.jpg', + duration: 92, + color: '#9FD89F', + }, + { + id: 2, + text: 'Royal Wedding', + director: 'Stanley Donen', + year: 1951, + image: '../../../../images/movies/RoyalWedding.jpg', + duration: 93, + color: '#F1BBBC', + }, + { + id: 3, + text: 'A Star Is Born', + director: 'William A. Wellman', + year: 1937, + image: '../../../../images/movies/AStartIsBorn.jpg', + duration: 111, + color: '#F9E2AE', + }, + { + id: 4, + text: 'The Screaming Skull', + director: 'Alex Nicol', + year: 1958, + image: '../../../../images/movies/ScreamingSkull.jpg', + duration: 68, + color: '#EDBBE7', + }, + { + id: 5, + text: "It's a Wonderful Life", + director: 'Frank Capra', + year: 1946, + image: '../../../../images/movies/ItsAWonderfulLife.jpg', + duration: 130, + color: '#B4D6FA', + }, + { + id: 6, + text: 'City Lights', + director: 'Charlie Chaplin', + year: 1931, + image: '../../../../images/movies/CityLights.jpg', + duration: 87, + color: '#C6B1DE', + }, +]; +export const theatreData = [ + { + text: 'Cinema Hall 1', + id: 0, + }, + { + text: 'Cinema Hall 2', + id: 1, + }, +]; +export const data = [ + { + theatreId: 0, + movieId: 3, + price: 10, + startDate: new Date('2025-04-26T16:10:00.000Z'), + endDate: new Date('2025-04-26T18:01:00.000Z'), + }, + { + theatreId: 0, + movieId: 1, + price: 5, + startDate: new Date('2025-04-26T18:30:00.000Z'), + endDate: new Date('2025-04-26T20:02:00.000Z'), + }, + { + theatreId: 0, + movieId: 3, + price: 15, + startDate: new Date('2025-04-26T20:30:00.000Z'), + endDate: new Date('2025-04-26T22:21:00.000Z'), + }, + { + theatreId: 0, + movieId: 4, + price: 5, + startDate: new Date('2025-04-26T23:00:00.000Z'), + endDate: new Date('2025-04-27T00:08:00.000Z'), + }, + { + theatreId: 0, + movieId: 2, + price: 10, + startDate: new Date('2025-04-27T00:30:00.000Z'), + endDate: new Date('2025-04-27T02:03:00.000Z'), + }, + { + theatreId: 0, + movieId: 1, + price: 10, + startDate: new Date('2025-04-27T02:30:00.000Z'), + endDate: new Date('2025-04-27T04:02:00.000Z'), + }, + { + theatreId: 0, + movieId: 2, + price: 10, + startDate: new Date('2025-04-27T04:20:00.000Z'), + endDate: new Date('2025-04-27T05:53:00.000Z'), + }, + { + theatreId: 0, + movieId: 5, + price: 10, + startDate: new Date('2025-04-27T16:10:00.000Z'), + endDate: new Date('2025-04-27T18:20:00.000Z'), + }, + { + theatreId: 0, + movieId: 2, + price: 5, + startDate: new Date('2025-04-27T19:00:00.000Z'), + endDate: new Date('2025-04-27T20:33:00.000Z'), + }, + { + theatreId: 0, + movieId: 3, + price: 5, + startDate: new Date('2025-04-27T21:00:00.000Z'), + endDate: new Date('2025-04-27T22:51:00.000Z'), + }, + { + theatreId: 0, + movieId: 4, + price: 5, + startDate: new Date('2025-04-27T23:20:00.000Z'), + endDate: new Date('2025-04-28T00:28:00.000Z'), + }, + { + theatreId: 0, + movieId: 1, + price: 10, + startDate: new Date('2025-04-28T01:00:00.000Z'), + endDate: new Date('2025-04-28T02:32:00.000Z'), + }, + { + theatreId: 0, + movieId: 2, + price: 15, + startDate: new Date('2025-04-28T03:00:00.000Z'), + endDate: new Date('2025-04-28T04:33:00.000Z'), + }, + { + theatreId: 0, + movieId: 4, + price: 5, + startDate: new Date('2025-04-28T04:50:00.000Z'), + endDate: new Date('2025-04-28T05:58:00.000Z'), + }, + { + theatreId: 0, + movieId: 1, + price: 5, + startDate: new Date('2025-04-28T16:00:00.000Z'), + endDate: new Date('2025-04-28T17:32:00.000Z'), + }, + { + theatreId: 0, + movieId: 2, + price: 5, + startDate: new Date('2025-04-28T18:00:00.000Z'), + endDate: new Date('2025-04-28T19:33:00.000Z'), + }, + { + theatreId: 0, + movieId: 3, + price: 10, + startDate: new Date('2025-04-28T20:20:00.000Z'), + endDate: new Date('2025-04-28T22:11:00.000Z'), + }, + { + theatreId: 0, + movieId: 5, + price: 15, + startDate: new Date('2025-04-28T22:45:00.000Z'), + endDate: new Date('2025-04-29T00:55:00.000Z'), + }, + { + theatreId: 0, + movieId: 4, + price: 10, + startDate: new Date('2025-04-29T01:20:00.000Z'), + endDate: new Date('2025-04-29T02:28:00.000Z'), + }, + { + theatreId: 0, + movieId: 5, + price: 20, + startDate: new Date('2025-04-29T03:00:00.000Z'), + endDate: new Date('2025-04-29T05:10:00.000Z'), + }, + { + theatreId: 0, + movieId: 1, + price: 5, + startDate: new Date('2025-04-29T16:00:00.000Z'), + endDate: new Date('2025-04-29T17:32:00.000Z'), + }, + { + theatreId: 0, + movieId: 2, + price: 5, + startDate: new Date('2025-04-29T18:00:00.000Z'), + endDate: new Date('2025-04-29T19:33:00.000Z'), + }, + { + theatreId: 0, + movieId: 3, + price: 10, + startDate: new Date('2025-04-29T20:20:00.000Z'), + endDate: new Date('2025-04-29T22:11:00.000Z'), + }, + { + theatreId: 0, + movieId: 5, + price: 10, + startDate: new Date('2025-04-29T22:45:00.000Z'), + endDate: new Date('2025-04-30T00:55:00.000Z'), + }, + { + theatreId: 0, + movieId: 4, + price: 5, + startDate: new Date('2025-04-30T01:20:00.000Z'), + endDate: new Date('2025-04-30T02:28:00.000Z'), + }, + { + theatreId: 0, + movieId: 5, + price: 15, + startDate: new Date('2025-04-30T03:00:00.000Z'), + endDate: new Date('2025-04-30T05:10:00.000Z'), + }, + { + theatreId: 0, + movieId: 2, + price: 5, + startDate: new Date('2025-04-30T16:30:00.000Z'), + endDate: new Date('2025-04-30T18:03:00.000Z'), + }, + { + theatreId: 0, + movieId: 1, + price: 5, + startDate: new Date('2025-04-30T18:30:00.000Z'), + endDate: new Date('2025-04-30T20:02:00.000Z'), + }, + { + theatreId: 0, + movieId: 3, + price: 5, + startDate: new Date('2025-04-30T20:30:00.000Z'), + endDate: new Date('2025-04-30T22:21:00.000Z'), + }, + { + theatreId: 0, + movieId: 5, + price: 10, + startDate: new Date('2025-04-30T23:00:00.000Z'), + endDate: new Date('2025-05-01T01:10:00.000Z'), + }, + { + theatreId: 0, + movieId: 4, + price: 5, + startDate: new Date('2025-05-01T01:30:00.000Z'), + endDate: new Date('2025-05-01T02:38:00.000Z'), + }, + { + theatreId: 0, + movieId: 3, + price: 15, + startDate: new Date('2025-05-01T03:20:00.000Z'), + endDate: new Date('2025-05-01T05:11:00.000Z'), + }, + { + theatreId: 0, + movieId: 2, + price: 5, + startDate: new Date('2025-05-01T16:30:00.000Z'), + endDate: new Date('2025-05-01T18:03:00.000Z'), + }, + { + theatreId: 0, + movieId: 1, + price: 10, + startDate: new Date('2025-05-01T18:30:00.000Z'), + endDate: new Date('2025-05-01T20:02:00.000Z'), + }, + { + theatreId: 0, + movieId: 3, + price: 10, + startDate: new Date('2025-05-01T20:30:00.000Z'), + endDate: new Date('2025-05-01T22:21:00.000Z'), + }, + { + theatreId: 0, + movieId: 5, + price: 10, + startDate: new Date('2025-05-01T23:00:00.000Z'), + endDate: new Date('2025-05-02T01:10:00.000Z'), + }, + { + theatreId: 0, + movieId: 4, + price: 10, + startDate: new Date('2025-05-02T01:30:00.000Z'), + endDate: new Date('2025-05-02T02:38:00.000Z'), + }, + { + theatreId: 0, + movieId: 3, + price: 10, + startDate: new Date('2025-05-02T03:20:00.000Z'), + endDate: new Date('2025-05-02T05:11:00.000Z'), + }, + { + theatreId: 0, + movieId: 2, + price: 5, + startDate: new Date('2025-05-02T16:30:00.000Z'), + endDate: new Date('2025-05-02T18:03:00.000Z'), + }, + { + theatreId: 0, + movieId: 1, + price: 5, + startDate: new Date('2025-05-02T18:30:00.000Z'), + endDate: new Date('2025-05-02T20:02:00.000Z'), + }, + { + theatreId: 0, + movieId: 3, + price: 10, + startDate: new Date('2025-05-02T20:30:00.000Z'), + endDate: new Date('2025-05-02T22:21:00.000Z'), + }, + { + theatreId: 0, + movieId: 5, + price: 15, + startDate: new Date('2025-05-02T23:00:00.000Z'), + endDate: new Date('2025-05-03T01:10:00.000Z'), + }, + { + theatreId: 0, + movieId: 4, + price: 10, + startDate: new Date('2025-05-03T01:30:00.000Z'), + endDate: new Date('2025-05-03T02:38:00.000Z'), + }, + { + theatreId: 0, + movieId: 3, + price: 15, + startDate: new Date('2025-05-03T03:20:00.000Z'), + endDate: new Date('2025-05-03T05:11:00.000Z'), + }, + { + theatreId: 0, + movieId: 2, + price: 5, + startDate: new Date('2025-05-03T16:30:00.000Z'), + endDate: new Date('2025-05-03T18:03:00.000Z'), + }, + { + theatreId: 0, + movieId: 6, + price: 15, + startDate: new Date('2025-05-03T18:30:00.000Z'), + endDate: new Date('2025-05-03T19:57:00.000Z'), + }, + { + theatreId: 0, + movieId: 3, + price: 10, + startDate: new Date('2025-05-03T20:20:00.000Z'), + endDate: new Date('2025-05-03T22:11:00.000Z'), + }, + { + theatreId: 0, + movieId: 1, + price: 5, + startDate: new Date('2025-05-03T23:00:00.000Z'), + endDate: new Date('2025-05-04T00:32:00.000Z'), + }, + { + theatreId: 0, + movieId: 2, + price: 10, + startDate: new Date('2025-05-04T01:00:00.000Z'), + endDate: new Date('2025-05-04T02:33:00.000Z'), + }, + { + theatreId: 0, + movieId: 6, + price: 20, + startDate: new Date('2025-05-04T03:00:00.000Z'), + endDate: new Date('2025-05-04T04:27:00.000Z'), + }, + { + theatreId: 0, + movieId: 4, + price: 15, + startDate: new Date('2025-05-04T04:50:00.000Z'), + endDate: new Date('2025-05-04T05:58:00.000Z'), + }, + { + theatreId: 0, + movieId: 1, + price: 5, + startDate: new Date('2025-05-04T16:30:00.000Z'), + endDate: new Date('2025-05-04T18:02:00.000Z'), + }, + { + theatreId: 0, + movieId: 2, + price: 5, + startDate: new Date('2025-05-04T18:30:00.000Z'), + endDate: new Date('2025-05-04T20:03:00.000Z'), + }, + { + theatreId: 0, + movieId: 3, + price: 10, + startDate: new Date('2025-05-04T20:30:00.000Z'), + endDate: new Date('2025-05-04T22:21:00.000Z'), + }, + { + theatreId: 0, + movieId: 3, + price: 10, + startDate: new Date('2025-05-04T22:30:00.000Z'), + endDate: new Date('2025-05-05T00:21:00.000Z'), + }, + { + theatreId: 0, + movieId: 6, + price: 15, + startDate: new Date('2025-05-05T00:30:00.000Z'), + endDate: new Date('2025-05-05T01:57:00.000Z'), + }, + { + theatreId: 0, + movieId: 5, + price: 15, + startDate: new Date('2025-05-05T03:00:00.000Z'), + endDate: new Date('2025-05-05T05:10:00.000Z'), + }, + { + theatreId: 0, + movieId: 1, + price: 5, + startDate: new Date('2025-05-05T16:00:00.000Z'), + endDate: new Date('2025-05-05T17:32:00.000Z'), + }, + { + theatreId: 0, + movieId: 2, + price: 5, + startDate: new Date('2025-05-05T18:00:00.000Z'), + endDate: new Date('2025-05-05T19:33:00.000Z'), + }, + { + theatreId: 0, + movieId: 3, + price: 10, + startDate: new Date('2025-05-05T20:00:00.000Z'), + endDate: new Date('2025-05-05T21:51:00.000Z'), + }, + { + theatreId: 0, + movieId: 3, + price: 10, + startDate: new Date('2025-05-05T22:30:00.000Z'), + endDate: new Date('2025-05-06T00:21:00.000Z'), + }, + { + theatreId: 0, + movieId: 6, + price: 15, + startDate: new Date('2025-05-06T00:30:00.000Z'), + endDate: new Date('2025-05-06T01:57:00.000Z'), + }, + { + theatreId: 0, + movieId: 5, + price: 15, + startDate: new Date('2025-05-06T03:00:00.000Z'), + endDate: new Date('2025-05-06T05:10:00.000Z'), + }, + { + theatreId: 0, + movieId: 1, + price: 5, + startDate: new Date('2025-05-06T16:00:00.000Z'), + endDate: new Date('2025-05-06T17:32:00.000Z'), + }, + { + theatreId: 0, + movieId: 2, + price: 5, + startDate: new Date('2025-05-06T18:00:00.000Z'), + endDate: new Date('2025-05-06T19:33:00.000Z'), + }, + { + theatreId: 0, + movieId: 3, + price: 10, + startDate: new Date('2025-05-06T20:00:00.000Z'), + endDate: new Date('2025-05-06T21:51:00.000Z'), + }, + { + theatreId: 0, + movieId: 3, + price: 10, + startDate: new Date('2025-05-06T22:30:00.000Z'), + endDate: new Date('2025-05-07T00:21:00.000Z'), + }, + { + theatreId: 0, + movieId: 6, + price: 15, + startDate: new Date('2025-05-07T00:30:00.000Z'), + endDate: new Date('2025-05-07T01:57:00.000Z'), + }, + { + theatreId: 0, + movieId: 5, + price: 15, + startDate: new Date('2025-05-07T03:00:00.000Z'), + endDate: new Date('2025-05-07T05:10:00.000Z'), + }, + { + theatreId: 0, + movieId: 2, + price: 5, + startDate: new Date('2025-05-07T16:00:00.000Z'), + endDate: new Date('2025-05-07T17:33:00.000Z'), + }, + { + theatreId: 0, + movieId: 1, + price: 5, + startDate: new Date('2025-05-07T18:00:00.000Z'), + endDate: new Date('2025-05-07T19:32:00.000Z'), + }, + { + theatreId: 0, + movieId: 3, + price: 10, + startDate: new Date('2025-05-07T20:00:00.000Z'), + endDate: new Date('2025-05-07T21:51:00.000Z'), + }, + { + theatreId: 0, + movieId: 5, + price: 10, + startDate: new Date('2025-05-07T22:30:00.000Z'), + endDate: new Date('2025-05-08T00:40:00.000Z'), + }, + { + theatreId: 0, + movieId: 6, + price: 15, + startDate: new Date('2025-05-08T01:00:00.000Z'), + endDate: new Date('2025-05-08T02:27:00.000Z'), + }, + { + theatreId: 0, + movieId: 1, + price: 15, + startDate: new Date('2025-05-08T03:00:00.000Z'), + endDate: new Date('2025-05-08T04:32:00.000Z'), + }, + { + theatreId: 0, + movieId: 2, + price: 5, + startDate: new Date('2025-05-08T16:00:00.000Z'), + endDate: new Date('2025-05-08T17:33:00.000Z'), + }, + { + theatreId: 0, + movieId: 1, + price: 5, + startDate: new Date('2025-05-08T18:00:00.000Z'), + endDate: new Date('2025-05-08T19:32:00.000Z'), + }, + { + theatreId: 0, + movieId: 3, + price: 10, + startDate: new Date('2025-05-08T20:00:00.000Z'), + endDate: new Date('2025-05-08T21:51:00.000Z'), + }, + { + theatreId: 0, + movieId: 5, + price: 10, + startDate: new Date('2025-05-08T22:30:00.000Z'), + endDate: new Date('2025-05-09T00:40:00.000Z'), + }, + { + theatreId: 0, + movieId: 6, + price: 15, + startDate: new Date('2025-05-09T01:00:00.000Z'), + endDate: new Date('2025-05-09T02:27:00.000Z'), + }, + { + theatreId: 0, + movieId: 1, + price: 15, + startDate: new Date('2025-05-09T03:00:00.000Z'), + endDate: new Date('2025-05-09T04:32:00.000Z'), + }, + { + theatreId: 0, + movieId: 2, + price: 5, + startDate: new Date('2025-05-09T16:00:00.000Z'), + endDate: new Date('2025-05-09T17:33:00.000Z'), + }, + { + theatreId: 0, + movieId: 1, + price: 5, + startDate: new Date('2025-05-09T18:00:00.000Z'), + endDate: new Date('2025-05-09T19:32:00.000Z'), + }, + { + theatreId: 0, + movieId: 3, + price: 10, + startDate: new Date('2025-05-09T20:00:00.000Z'), + endDate: new Date('2025-05-09T21:51:00.000Z'), + }, + { + theatreId: 0, + movieId: 5, + price: 10, + startDate: new Date('2025-05-09T22:30:00.000Z'), + endDate: new Date('2025-05-10T00:40:00.000Z'), + }, + { + theatreId: 0, + movieId: 6, + price: 15, + startDate: new Date('2025-05-10T01:00:00.000Z'), + endDate: new Date('2025-05-10T02:27:00.000Z'), + }, + { + theatreId: 0, + movieId: 1, + price: 15, + startDate: new Date('2025-05-10T03:00:00.000Z'), + endDate: new Date('2025-05-10T04:32:00.000Z'), + }, + { + theatreId: 1, + movieId: 3, + price: 10, + startDate: new Date('2025-04-26T16:10:00.000Z'), + endDate: new Date('2025-04-26T18:01:00.000Z'), + }, + { + theatreId: 1, + movieId: 1, + price: 5, + startDate: new Date('2025-04-26T19:00:00.000Z'), + endDate: new Date('2025-04-26T20:32:00.000Z'), + }, + { + theatreId: 1, + movieId: 3, + price: 15, + startDate: new Date('2025-04-26T21:00:00.000Z'), + endDate: new Date('2025-04-26T22:51:00.000Z'), + }, + { + theatreId: 1, + movieId: 4, + price: 5, + startDate: new Date('2025-04-26T23:10:00.000Z'), + endDate: new Date('2025-04-27T00:18:00.000Z'), + }, + { + theatreId: 1, + movieId: 2, + price: 10, + startDate: new Date('2025-04-27T00:30:00.000Z'), + endDate: new Date('2025-04-27T02:03:00.000Z'), + }, + { + theatreId: 1, + movieId: 1, + price: 10, + startDate: new Date('2025-04-27T02:30:00.000Z'), + endDate: new Date('2025-04-27T04:02:00.000Z'), + }, + { + theatreId: 1, + movieId: 2, + price: 10, + startDate: new Date('2025-04-27T04:20:00.000Z'), + endDate: new Date('2025-04-27T05:53:00.000Z'), + }, + { + theatreId: 1, + movieId: 1, + price: 5, + startDate: new Date('2025-04-27T16:30:00.000Z'), + endDate: new Date('2025-04-27T18:02:00.000Z'), + }, + { + theatreId: 1, + movieId: 2, + price: 5, + startDate: new Date('2025-04-27T18:30:00.000Z'), + endDate: new Date('2025-04-27T20:03:00.000Z'), + }, + { + theatreId: 1, + movieId: 5, + price: 15, + startDate: new Date('2025-04-27T20:30:00.000Z'), + endDate: new Date('2025-04-27T22:40:00.000Z'), + }, + { + theatreId: 1, + movieId: 4, + price: 5, + startDate: new Date('2025-04-27T23:00:00.000Z'), + endDate: new Date('2025-04-28T00:08:00.000Z'), + }, + { + theatreId: 1, + movieId: 1, + price: 10, + startDate: new Date('2025-04-28T00:30:00.000Z'), + endDate: new Date('2025-04-28T02:02:00.000Z'), + }, + { + theatreId: 1, + movieId: 2, + price: 15, + startDate: new Date('2025-04-28T02:40:00.000Z'), + endDate: new Date('2025-04-28T04:13:00.000Z'), + }, + { + theatreId: 1, + movieId: 4, + price: 5, + startDate: new Date('2025-04-28T04:40:00.000Z'), + endDate: new Date('2025-04-28T05:48:00.000Z'), + }, + { + theatreId: 1, + movieId: 1, + price: 5, + startDate: new Date('2025-04-28T16:30:00.000Z'), + endDate: new Date('2025-04-28T18:02:00.000Z'), + }, + { + theatreId: 1, + movieId: 2, + price: 5, + startDate: new Date('2025-04-28T18:30:00.000Z'), + endDate: new Date('2025-04-28T20:03:00.000Z'), + }, + { + theatreId: 1, + movieId: 5, + price: 10, + startDate: new Date('2025-04-28T20:30:00.000Z'), + endDate: new Date('2025-04-28T22:41:00.000Z'), + }, + { + theatreId: 1, + movieId: 5, + price: 15, + startDate: new Date('2025-04-28T23:00:00.000Z'), + endDate: new Date('2025-04-29T01:10:00.000Z'), + }, + { + theatreId: 1, + movieId: 4, + price: 10, + startDate: new Date('2025-04-29T01:30:00.000Z'), + endDate: new Date('2025-04-29T02:38:00.000Z'), + }, + { + theatreId: 1, + movieId: 5, + price: 20, + startDate: new Date('2025-04-29T03:20:00.000Z'), + endDate: new Date('2025-04-29T05:30:00.000Z'), + }, + { + theatreId: 1, + movieId: 1, + price: 5, + startDate: new Date('2025-04-29T16:30:00.000Z'), + endDate: new Date('2025-04-29T18:02:00.000Z'), + }, + { + theatreId: 1, + movieId: 2, + price: 5, + startDate: new Date('2025-04-29T18:30:00.000Z'), + endDate: new Date('2025-04-29T20:03:00.000Z'), + }, + { + theatreId: 1, + movieId: 5, + price: 10, + startDate: new Date('2025-04-29T20:30:00.000Z'), + endDate: new Date('2025-04-29T22:41:00.000Z'), + }, + { + theatreId: 1, + movieId: 5, + price: 10, + startDate: new Date('2025-04-29T23:00:00.000Z'), + endDate: new Date('2025-04-30T01:10:00.000Z'), + }, + { + theatreId: 1, + movieId: 4, + price: 5, + startDate: new Date('2025-04-30T01:30:00.000Z'), + endDate: new Date('2025-04-30T02:38:00.000Z'), + }, + { + theatreId: 1, + movieId: 5, + price: 15, + startDate: new Date('2025-04-30T03:20:00.000Z'), + endDate: new Date('2025-04-30T05:30:00.000Z'), + }, + { + theatreId: 1, + movieId: 2, + price: 5, + startDate: new Date('2025-04-30T16:10:00.000Z'), + endDate: new Date('2025-04-30T17:43:00.000Z'), + }, + { + theatreId: 1, + movieId: 1, + price: 5, + startDate: new Date('2025-04-30T18:00:00.000Z'), + endDate: new Date('2025-04-30T19:32:00.000Z'), + }, + { + theatreId: 1, + movieId: 3, + price: 5, + startDate: new Date('2025-04-30T20:10:00.000Z'), + endDate: new Date('2025-04-30T22:01:00.000Z'), + }, + { + theatreId: 1, + movieId: 5, + price: 10, + startDate: new Date('2025-04-30T22:40:00.000Z'), + endDate: new Date('2025-05-01T00:50:00.000Z'), + }, + { + theatreId: 1, + movieId: 4, + price: 5, + startDate: new Date('2025-05-01T01:20:00.000Z'), + endDate: new Date('2025-05-01T02:28:00.000Z'), + }, + { + theatreId: 1, + movieId: 3, + price: 15, + startDate: new Date('2025-05-01T03:20:00.000Z'), + endDate: new Date('2025-05-01T05:11:00.000Z'), + }, + { + theatreId: 1, + movieId: 2, + price: 5, + startDate: new Date('2025-05-01T17:00:00.000Z'), + endDate: new Date('2025-05-01T18:33:00.000Z'), + }, + { + theatreId: 1, + movieId: 1, + price: 10, + startDate: new Date('2025-05-01T19:00:00.000Z'), + endDate: new Date('2025-05-01T20:32:00.000Z'), + }, + { + theatreId: 1, + movieId: 3, + price: 10, + startDate: new Date('2025-05-01T21:00:00.000Z'), + endDate: new Date('2025-05-01T22:51:00.000Z'), + }, + { + theatreId: 1, + movieId: 5, + price: 10, + startDate: new Date('2025-05-01T23:30:00.000Z'), + endDate: new Date('2025-05-02T01:40:00.000Z'), + }, + { + theatreId: 1, + movieId: 4, + price: 10, + startDate: new Date('2025-05-02T02:00:00.000Z'), + endDate: new Date('2025-05-02T03:08:00.000Z'), + }, + { + theatreId: 1, + movieId: 5, + price: 20, + startDate: new Date('2025-05-02T03:30:00.000Z'), + endDate: new Date('2025-05-02T05:50:00.000Z'), + }, + { + theatreId: 1, + movieId: 2, + price: 5, + startDate: new Date('2025-05-02T17:00:00.000Z'), + endDate: new Date('2025-05-02T18:33:00.000Z'), + }, + { + theatreId: 1, + movieId: 1, + price: 5, + startDate: new Date('2025-05-02T19:00:00.000Z'), + endDate: new Date('2025-05-02T20:32:00.000Z'), + }, + { + theatreId: 1, + movieId: 3, + price: 10, + startDate: new Date('2025-05-02T21:00:00.000Z'), + endDate: new Date('2025-05-02T22:51:00.000Z'), + }, + { + theatreId: 1, + movieId: 5, + price: 15, + startDate: new Date('2025-05-02T23:30:00.000Z'), + endDate: new Date('2025-05-03T01:40:00.000Z'), + }, + { + theatreId: 1, + movieId: 4, + price: 10, + startDate: new Date('2025-05-03T02:00:00.000Z'), + endDate: new Date('2025-05-03T03:08:00.000Z'), + }, + { + theatreId: 1, + movieId: 5, + price: 15, + startDate: new Date('2025-05-03T03:30:00.000Z'), + endDate: new Date('2025-05-03T05:50:00.000Z'), + }, + { + theatreId: 1, + movieId: 2, + price: 5, + startDate: new Date('2025-05-03T17:00:00.000Z'), + endDate: new Date('2025-05-03T18:33:00.000Z'), + }, + { + theatreId: 1, + movieId: 6, + price: 15, + startDate: new Date('2025-05-03T19:00:00.000Z'), + endDate: new Date('2025-05-03T20:27:00.000Z'), + }, + { + theatreId: 1, + movieId: 3, + price: 10, + startDate: new Date('2025-05-03T21:00:00.000Z'), + endDate: new Date('2025-05-03T22:51:00.000Z'), + }, + { + theatreId: 1, + movieId: 1, + price: 10, + startDate: new Date('2025-05-03T23:30:00.000Z'), + endDate: new Date('2025-05-04T01:02:00.000Z'), + }, + { + theatreId: 1, + movieId: 5, + price: 15, + startDate: new Date('2025-05-04T01:30:00.000Z'), + endDate: new Date('2025-05-04T03:40:00.000Z'), + }, + { + theatreId: 1, + movieId: 6, + price: 20, + startDate: new Date('2025-05-04T04:00:00.000Z'), + endDate: new Date('2025-05-04T05:27:00.000Z'), + }, + { + theatreId: 1, + movieId: 1, + price: 5, + startDate: new Date('2025-05-04T16:30:00.000Z'), + endDate: new Date('2025-05-04T18:02:00.000Z'), + }, + { + theatreId: 1, + movieId: 6, + price: 5, + startDate: new Date('2025-05-04T19:00:00.000Z'), + endDate: new Date('2025-05-04T20:27:00.000Z'), + }, + { + theatreId: 1, + movieId: 3, + price: 10, + startDate: new Date('2025-05-04T21:00:00.000Z'), + endDate: new Date('2025-05-04T22:51:00.000Z'), + }, + { + theatreId: 1, + movieId: 3, + price: 10, + startDate: new Date('2025-05-04T23:30:00.000Z'), + endDate: new Date('2025-05-05T01:21:00.000Z'), + }, + { + theatreId: 1, + movieId: 6, + price: 15, + startDate: new Date('2025-05-05T01:30:00.000Z'), + endDate: new Date('2025-05-05T02:57:00.000Z'), + }, + { + theatreId: 1, + movieId: 2, + price: 15, + startDate: new Date('2025-05-05T03:30:00.000Z'), + endDate: new Date('2025-05-05T05:03:00.000Z'), + }, + { + theatreId: 1, + movieId: 1, + price: 5, + startDate: new Date('2025-05-05T16:30:00.000Z'), + endDate: new Date('2025-05-05T18:02:00.000Z'), + }, + { + theatreId: 1, + movieId: 6, + price: 5, + startDate: new Date('2025-05-05T19:00:00.000Z'), + endDate: new Date('2025-05-05T20:27:00.000Z'), + }, + { + theatreId: 1, + movieId: 3, + price: 10, + startDate: new Date('2025-05-05T21:00:00.000Z'), + endDate: new Date('2025-05-05T22:51:00.000Z'), + }, + { + theatreId: 1, + movieId: 2, + price: 10, + startDate: new Date('2025-05-05T23:30:00.000Z'), + endDate: new Date('2025-05-06T01:03:00.000Z'), + }, + { + theatreId: 1, + movieId: 6, + price: 15, + startDate: new Date('2025-05-06T01:30:00.000Z'), + endDate: new Date('2025-05-06T02:57:00.000Z'), + }, + { + theatreId: 1, + movieId: 2, + price: 15, + startDate: new Date('2025-05-06T03:30:00.000Z'), + endDate: new Date('2025-05-06T05:03:00.000Z'), + }, + { + theatreId: 1, + movieId: 1, + price: 5, + startDate: new Date('2025-05-06T16:30:00.000Z'), + endDate: new Date('2025-05-06T18:02:00.000Z'), + }, + { + theatreId: 1, + movieId: 2, + price: 5, + startDate: new Date('2025-05-06T18:30:00.000Z'), + endDate: new Date('2025-05-06T20:03:00.000Z'), + }, + { + theatreId: 1, + movieId: 6, + price: 10, + startDate: new Date('2025-05-06T21:00:00.000Z'), + endDate: new Date('2025-05-06T22:27:00.000Z'), + }, + { + theatreId: 1, + movieId: 3, + price: 10, + startDate: new Date('2025-05-06T23:00:00.000Z'), + endDate: new Date('2025-05-07T00:51:00.000Z'), + }, + { + theatreId: 1, + movieId: 6, + price: 15, + startDate: new Date('2025-05-07T01:10:00.000Z'), + endDate: new Date('2025-05-07T02:37:00.000Z'), + }, + { + theatreId: 1, + movieId: 5, + price: 20, + startDate: new Date('2025-05-07T03:30:00.000Z'), + endDate: new Date('2025-05-07T05:40:00.000Z'), + }, + { + theatreId: 1, + movieId: 2, + price: 5, + startDate: new Date('2025-05-07T16:30:00.000Z'), + endDate: new Date('2025-05-07T18:02:00.000Z'), + }, + { + theatreId: 1, + movieId: 1, + price: 5, + startDate: new Date('2025-05-07T18:30:00.000Z'), + endDate: new Date('2025-05-07T20:02:00.000Z'), + }, + { + theatreId: 1, + movieId: 6, + price: 10, + startDate: new Date('2025-05-07T21:00:00.000Z'), + endDate: new Date('2025-05-07T22:27:00.000Z'), + }, + { + theatreId: 1, + movieId: 5, + price: 10, + startDate: new Date('2025-05-07T23:00:00.000Z'), + endDate: new Date('2025-05-08T00:51:00.000Z'), + }, + { + theatreId: 1, + movieId: 6, + price: 15, + startDate: new Date('2025-05-08T01:10:00.000Z'), + endDate: new Date('2025-05-08T02:37:00.000Z'), + }, + { + theatreId: 1, + movieId: 5, + price: 15, + startDate: new Date('2025-05-08T03:20:00.000Z'), + endDate: new Date('2025-05-08T05:30:00.000Z'), + }, + { + theatreId: 1, + movieId: 2, + price: 5, + startDate: new Date('2025-05-08T16:30:00.000Z'), + endDate: new Date('2025-05-08T18:02:00.000Z'), + }, + { + theatreId: 1, + movieId: 1, + price: 5, + startDate: new Date('2025-05-08T18:30:00.000Z'), + endDate: new Date('2025-05-08T20:02:00.000Z'), + }, + { + theatreId: 1, + movieId: 3, + price: 10, + startDate: new Date('2025-05-08T20:30:00.000Z'), + endDate: new Date('2025-05-08T22:21:00.000Z'), + }, + { + theatreId: 1, + movieId: 5, + price: 10, + startDate: new Date('2025-05-08T23:00:00.000Z'), + endDate: new Date('2025-05-09T01:10:00.000Z'), + }, + { + theatreId: 1, + movieId: 6, + price: 15, + startDate: new Date('2025-05-09T01:30:00.000Z'), + endDate: new Date('2025-05-09T02:57:00.000Z'), + }, + { + theatreId: 1, + movieId: 2, + price: 15, + startDate: new Date('2025-05-09T03:30:00.000Z'), + endDate: new Date('2025-05-09T05:03:00.000Z'), + }, + { + theatreId: 1, + movieId: 2, + price: 5, + startDate: new Date('2025-05-09T16:30:00.000Z'), + endDate: new Date('2025-05-09T18:03:00.000Z'), + }, + { + theatreId: 1, + movieId: 1, + price: 5, + startDate: new Date('2025-05-09T18:30:00.000Z'), + endDate: new Date('2025-05-09T20:02:00.000Z'), + }, + { + theatreId: 1, + movieId: 3, + price: 10, + startDate: new Date('2025-05-09T20:30:00.000Z'), + endDate: new Date('2025-05-09T22:21:00.000Z'), + }, + { + theatreId: 1, + movieId: 5, + price: 10, + startDate: new Date('2025-05-09T23:00:00.000Z'), + endDate: new Date('2025-05-10T01:10:00.000Z'), + }, + { + theatreId: 1, + movieId: 6, + price: 15, + startDate: new Date('2025-05-10T01:30:00.000Z'), + endDate: new Date('2025-05-10T02:57:00.000Z'), + }, + { + theatreId: 1, + movieId: 1, + price: 15, + startDate: new Date('2025-05-10T03:30:00.000Z'), + endDate: new Date('2025-05-10T05:02:00.000Z'), + }, +]; diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/description.md b/apps/demos/Demos/Scheduler/Templates/ReactJs/description.md new file mode 100644 index 000000000000..fbd05e77b108 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Templates/ReactJs/description.md @@ -0,0 +1,14 @@ +You can double-click a DevExtreme Scheduler appointment or an empty cell to activate our built in edit form. Our Scheduler allows you to customize the form as needs dictate (rearrange items, create custom fields, and specify popup settings). + +The form includes two groups: `mainGroup` (general information) and `recurrenceGroup` (recurrence settings). Scheduler displays `mainGroup` first and switches to `recurrenceGroup` when users change the "Repeat" drop-down. Configure **editing**.[form](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/editing/form/) to customize form layout and **editing**.[popup](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/editing/popup/) to customize the dialog window. This demo configures these objects to add custom fields (**movieId** and **price**) to the edit form. + +For additional information, refer to the following help topic: [Appointment Edit Form](/Documentation/Guide/UI_Components/Scheduler/Appointment/Appointment_Edit_Form/). + + +You can customize the following DevExtreme Scheduler elements using custom templates (globally and for individual views): + +* Appointment rectangle: [appointmentRender](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentRender)/[appointmentComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentComponent) / **views[]**.[appointmentRender](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentRender)/**views[]**.[appointmentComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentComponent) + +* Tooltip: [appointmentTooltipRender](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentTooltipRender)/[appointmentTooltipComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentTooltipComponent) / **views[]**.[appointmentTooltipRender](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentTooltipRender)/**views[]**.[appointmentTooltipComponent](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentTooltipComponent). + +[note] Image Source: **Wikimedia Commons** \ No newline at end of file diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/index.html b/apps/demos/Demos/Scheduler/Templates/ReactJs/index.html new file mode 100644 index 000000000000..c767f7b4dac7 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Templates/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + +
+

DXCinema Show Times

+
+
+ + diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/index.js b/apps/demos/Demos/Scheduler/Templates/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Templates/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Templates/ReactJs/styles.css new file mode 100644 index 000000000000..754b4e4f8522 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Templates/ReactJs/styles.css @@ -0,0 +1,88 @@ +.dx-scheduler-work-space-week .dx-scheduler-date-table { + width: 3500px; +} + +.dx-scheduler-timeline-day .dx-scheduler-date-table { + width: 3500px; +} + +.dx-tooltip-wrapper .dx-overlay-content .dx-popup-content { + padding: 12px; +} + +.movie-preview-image { + max-height: 80px; + max-width: 80px; + min-height: 60px; + min-width: 60px; + border-radius: 2px; + overflow: hidden; +} + +.movie-preview-image img { + width: 100%; + position: relative; + top: -25%; + pointer-events: none; +} + +.movie-preview { + display: flex; + gap: 8px; + max-height: 100%; + white-space: normal; +} + +.movie-preview>.movie-details { + font-size: 12px; + color: #242424; +} + +.movie-preview>.movie-details>.title { + font-weight: 600; + font-size: 14px; + margin-bottom: 4px; +} + +.movie-info-container { + border-radius: 8px; + padding-bottom: 8px; +} + +.movie-info { + display: flex; + gap: 12px; +} + +.dx-theme-material .movie-info { + gap: 16px; +} + +.movie-info .movie-preview-image { + border: 1px solid var(--dx-color-border); +} + +.movie-info .movie-details { + text-align: left; +} + +.movie-info .movie-details>.title { + font-weight: 600; + font-size: 14px; + margin-bottom: 8px; +} + +.dx-scheduler-form-end-date-group.dx-field-item { + padding-bottom: 12px; +} + +.long-title h3 { + font-weight: 200; + font-size: 28px; + text-align: center; + margin-bottom: 20px; +} + +.dx-scheduler-appointment::before { + opacity: 0.26 !important; +} diff --git a/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/App.js b/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/App.js new file mode 100644 index 000000000000..92b45c7c02dc --- /dev/null +++ b/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/App.js @@ -0,0 +1,64 @@ +import React, { useCallback, useState } from 'react'; +import Scheduler, { Editing } from 'devextreme-react/scheduler'; +import SelectBox from 'devextreme-react/select-box'; +import * as timeZoneUtils from 'devextreme/time_zone_utils'; +import { data, locations } from './data.js'; + +const timeZoneLabel = { 'aria-label': 'Time zone' }; +const currentDate = new Date(2021, 3, 27); +const views = ['workWeek']; +const getTimeZones = (date) => timeZoneUtils.getTimeZones(date, locations); +const defaultTimeZones = getTimeZones(currentDate); +const onAppointmentFormOpening = (e) => { + const { form } = e; + const startDateTimezoneEditor = form.getEditor('startDateTimeZone'); + const endDateTimezoneEditor = form.getEditor('endDateTimeZone'); + const startDateDataSource = startDateTimezoneEditor?.option('dataSource'); + const endDateDataSource = endDateTimezoneEditor?.option('dataSource'); + startDateDataSource.filter(['id', 'contains', 'Europe']); + endDateDataSource.filter(['id', 'contains', 'Europe']); + startDateDataSource.load(); + endDateDataSource.load(); +}; +const App = () => { + const [currentTimeZone, setCurrentTimeZone] = useState(defaultTimeZones[0].id); + const [timeZones, setTimeZones] = useState(defaultTimeZones); + const onValueChanged = useCallback((e) => { + setCurrentTimeZone(e.value); + }, []); + const onOptionChanged = useCallback((e) => { + if (e.name === 'currentDate') { + setTimeZones(getTimeZones(e.value)); + } + }, []); + return ( + <> +
+ Office Time Zone + +
+ + + + + ); +}; +export default App; diff --git a/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/data.js b/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/data.js new file mode 100644 index 000000000000..d2d702f05023 --- /dev/null +++ b/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/data.js @@ -0,0 +1,59 @@ +export const data = [ + { + text: 'Stand-up meeting', + startDate: '2021-04-26T15:30:00.000Z', + endDate: '2021-04-26T15:45:00.000Z', + recurrenceRule: 'FREQ=DAILY', + }, + { + text: 'Book Flights to San Fran for Sales Trip', + startDate: '2021-04-28T18:00:00.000Z', + endDate: '2021-04-28T19:00:00.000Z', + }, + { + text: 'New Brochures', + startDate: '2021-04-30T18:30:00.000Z', + endDate: '2021-04-30T18:45:00.000Z', + }, + { + text: 'Website Re-Design Plan', + startDate: '2021-04-27T12:30:00.000Z', + endDate: '2021-04-27T13:30:00.000Z', + }, + { + text: 'Book Flights to San Fran for Sales Trip', + startDate: '2021-04-28T16:00:00.000Z', + endDate: '2021-04-28T15:00:00.000Z', + }, + { + text: 'Prepare 2021 Marketing Plan', + startDate: '2021-04-26T07:00:00.000Z', + endDate: '2021-04-26T09:30:00.000Z', + }, + { + text: 'Launch New Website', + startDate: '2021-04-28T08:00:00.000Z', + endDate: '2021-04-28T10:00:00.000Z', + }, + { + text: 'Submit New Website Design', + startDate: '2021-04-29T09:30:00.000Z', + endDate: '2021-04-29T11:00:00.000Z', + }, + { + text: 'Upgrade Server Hardware', + startDate: '2021-04-30T06:30:00.000Z', + endDate: '2021-04-30T08:00:00.000Z', + }, + { + text: 'Approve New Online Marketing Strategy', + startDate: '2021-04-30T11:00:00.000Z', + endDate: '2021-04-30T12:30:00.000Z', + }, + { + text: 'Final Budget Review', + startDate: '2021-04-27T09:00:00.000Z', + endDate: '2021-04-27T10:35:00.000Z', + }, +]; +export const locations = ['Europe/London', 'Europe/Berlin', 'Europe/Helsinki']; diff --git a/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/index.html b/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/index.html new file mode 100644 index 000000000000..db31b0fd60c6 --- /dev/null +++ b/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/index.js b/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/styles.css b/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/styles.css new file mode 100644 index 000000000000..5cfb426f0cb9 --- /dev/null +++ b/apps/demos/Demos/Scheduler/TimeZonesSupport/ReactJs/styles.css @@ -0,0 +1,13 @@ +.option { + display: flex; +} + +.option > span { + display: flex; + align-items: center; + margin-right: 10px; +} + +.dx-scheduler { + margin-top: 20px; +} diff --git a/apps/demos/Demos/Scheduler/Timelines/ReactJs/App.js b/apps/demos/Demos/Scheduler/Timelines/ReactJs/App.js new file mode 100644 index 000000000000..e3d601cfdf95 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Timelines/ReactJs/App.js @@ -0,0 +1,39 @@ +import React from 'react'; +import Scheduler, { Resource } from 'devextreme-react/scheduler'; +import { data, resourcesData, priorityData } from './data.js'; + +const currentDate = new Date(2021, 1, 2); +const views = ['timelineDay', 'timelineWeek', 'timelineWorkWeek', 'timelineMonth']; +const groups = ['priority']; +const App = () => ( + + + + +); +export default App; diff --git a/apps/demos/Demos/Scheduler/Timelines/ReactJs/data.js b/apps/demos/Demos/Scheduler/Timelines/ReactJs/data.js new file mode 100644 index 000000000000..bd1e617a45f6 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Timelines/ReactJs/data.js @@ -0,0 +1,435 @@ +export const data = [ + { + text: 'Google AdWords Strategy', + ownerId: [2], + startDate: new Date('2021-02-01T16:00:00.000Z'), + endDate: new Date('2021-02-01T17:30:00.000Z'), + priority: 1, + }, + { + text: 'New Brochures', + ownerId: [1], + startDate: new Date('2021-02-01T18:30:00.000Z'), + endDate: new Date('2021-02-01T21:15:00.000Z'), + priority: 2, + }, + { + text: 'Brochure Design Review', + ownerId: [4], + startDate: new Date('2021-02-01T20:15:00.000Z'), + endDate: new Date('2021-02-01T23:15:00.000Z'), + priority: 1, + }, + { + text: 'Website Re-Design Plan', + ownerId: [3], + startDate: new Date('2021-02-01T23:45:00.000Z'), + endDate: new Date('2021-02-02T18:15:00.000Z'), + priority: 2, + }, + { + text: 'Rollout of New Website and Marketing Brochures', + ownerId: [1], + startDate: new Date('2021-02-02T15:15:00.000Z'), + endDate: new Date('2021-02-02T17:45:00.000Z'), + priority: 2, + }, + { + text: 'Update Sales Strategy Documents', + ownerId: [2], + startDate: new Date('2021-02-02T19:00:00.000Z'), + endDate: new Date('2021-02-02T20:45:00.000Z'), + priority: 1, + }, + { + text: 'Non-Compete Agreements', + ownerId: [4], + startDate: new Date('2021-02-03T16:15:00.000Z'), + endDate: new Date('2021-02-03T17:00:00.000Z'), + priority: 1, + }, + { + text: 'Approve Hiring of John Jeffers', + ownerId: [2], + startDate: new Date('2021-02-03T17:00:00.000Z'), + endDate: new Date('2021-02-03T18:15:00.000Z'), + priority: 2, + }, + { + text: 'Update NDA Agreement', + ownerId: [1], + startDate: new Date('2021-02-03T18:45:00.000Z'), + endDate: new Date('2021-02-03T20:45:00.000Z'), + priority: 2, + }, + { + text: 'Update Employee Files with New NDA', + ownerId: [2], + startDate: new Date('2021-02-03T21:00:00.000Z'), + endDate: new Date('2021-02-03T23:45:00.000Z'), + priority: 1, + }, + { + text: 'Submit Questions Regarding New NDA', + ownerId: [1], + startDate: new Date('2021-02-05T01:00:00.000Z'), + endDate: new Date('2021-02-04T16:30:00.000Z'), + priority: 1, + }, + { + text: 'Submit Signed NDA', + ownerId: [2], + startDate: new Date('2021-02-04T19:45:00.000Z'), + endDate: new Date('2021-02-04T21:00:00.000Z'), + priority: 1, + }, + { + text: 'Review Revenue Projections', + ownerId: [3], + startDate: new Date('2021-02-05T00:15:00.000Z'), + endDate: new Date('2021-02-04T15:00:00.000Z'), + priority: 2, + }, + { + text: 'Comment on Revenue Projections', + ownerId: [2], + startDate: new Date('2021-02-05T16:15:00.000Z'), + endDate: new Date('2021-02-05T18:15:00.000Z'), + priority: 1, + }, + { + text: 'Provide New Health Insurance Docs', + ownerId: [3], + startDate: new Date('2021-02-05T19:45:00.000Z'), + endDate: new Date('2021-02-05T21:15:00.000Z'), + priority: 2, + }, + { + text: 'Review Changes to Health Insurance Coverage', + ownerId: [2], + startDate: new Date('2021-02-05T21:15:00.000Z'), + endDate: new Date('2021-02-05T22:30:00.000Z'), + priority: 1, + }, + { + text: 'Review Training Course for any Omissions', + ownerId: [2], + startDate: new Date('2021-02-08T21:00:00.000Z'), + endDate: new Date('2021-02-09T19:00:00.000Z'), + priority: 2, + }, + { + text: 'Recall Rebate Form', + ownerId: [1], + startDate: new Date('2021-02-08T19:45:00.000Z'), + endDate: new Date('2021-02-08T20:15:00.000Z'), + priority: 1, + }, + { + text: 'Create Report on Customer Feedback', + ownerId: [4], + startDate: new Date('2021-02-09T22:15:00.000Z'), + endDate: new Date('2021-02-10T00:30:00.000Z'), + priority: 2, + }, + { + text: 'Review Customer Feedback Report', + ownerId: [2], + startDate: new Date('2021-02-09T23:15:00.000Z'), + endDate: new Date('2021-02-10T01:30:00.000Z'), + priority: 1, + }, + { + text: 'Customer Feedback Report Analysis', + ownerId: [3], + startDate: new Date('2021-02-10T16:30:00.000Z'), + endDate: new Date('2021-02-10T17:30:00.000Z'), + priority: 1, + }, + { + text: 'Prepare Shipping Cost Analysis Report', + ownerId: [4], + startDate: new Date('2021-02-10T19:30:00.000Z'), + endDate: new Date('2021-02-10T20:30:00.000Z'), + priority: 1, + }, + { + text: 'Provide Feedback on Shippers', + ownerId: [2], + startDate: new Date('2021-02-10T21:15:00.000Z'), + endDate: new Date('2021-02-10T23:00:00.000Z'), + priority: 2, + }, + { + text: 'Select Preferred Shipper', + ownerId: [1], + startDate: new Date('2021-02-11T00:30:00.000Z'), + endDate: new Date('2021-02-11T03:00:00.000Z'), + priority: 1, + }, + { + text: 'Complete Shipper Selection Form', + ownerId: [2], + startDate: new Date('2021-02-11T15:30:00.000Z'), + endDate: new Date('2021-02-11T17:00:00.000Z'), + priority: 2, + }, + { + text: 'Upgrade Server Hardware', + ownerId: [4], + startDate: new Date('2021-02-11T19:00:00.000Z'), + endDate: new Date('2021-02-11T21:15:00.000Z'), + priority: 1, + }, + { + text: 'Upgrade Personal Computers', + ownerId: [3], + startDate: new Date('2021-02-11T21:45:00.000Z'), + endDate: new Date('2021-02-11T23:30:00.000Z'), + priority: 1, + }, + { + text: 'Upgrade Apps to Windows RT or stay with WinForms', + ownerId: [1], + startDate: new Date('2021-02-12T17:30:00.000Z'), + endDate: new Date('2021-02-12T20:00:00.000Z'), + priority: 1, + }, + { + text: 'Estimate Time Required to Touch-Enable Apps', + ownerId: [1], + startDate: new Date('2021-02-12T21:45:00.000Z'), + endDate: new Date('2021-02-12T23:30:00.000Z'), + priority: 1, + }, + { + text: 'Report on Tranistion to Touch-Based Apps', + ownerId: [2], + startDate: new Date('2021-02-13T01:30:00.000Z'), + endDate: new Date('2021-02-13T02:00:00.000Z'), + priority: 1, + }, + { + text: 'Submit New Website Design', + ownerId: [2], + startDate: new Date('2021-02-15T15:00:00.000Z'), + endDate: new Date('2021-02-15T17:00:00.000Z'), + priority: 2, + }, + { + text: 'Create Icons for Website', + ownerId: [4], + startDate: new Date('2021-02-15T18:30:00.000Z'), + endDate: new Date('2021-02-15T20:15:00.000Z'), + priority: 1, + }, + { + text: 'Create New Product Pages', + ownerId: [1], + startDate: new Date('2021-02-16T16:45:00.000Z'), + endDate: new Date('2021-02-16T18:45:00.000Z'), + priority: 2, + }, + { + text: 'Approve Website Launch', + ownerId: [3], + startDate: new Date('2021-02-16T19:00:00.000Z'), + endDate: new Date('2021-02-16T22:15:00.000Z'), + priority: 1, + }, + { + text: 'Update Customer Shipping Profiles', + ownerId: [3], + startDate: new Date('2021-02-17T16:30:00.000Z'), + endDate: new Date('2021-02-17T18:00:00.000Z'), + priority: 1, + }, + { + text: 'Create New Shipping Return Labels', + ownerId: [4], + startDate: new Date('2021-02-17T19:45:00.000Z'), + endDate: new Date('2021-02-17T21:00:00.000Z'), + priority: 1, + }, + { + text: 'Get Design for Shipping Return Labels', + ownerId: [3], + startDate: new Date('2021-02-17T22:00:00.000Z'), + endDate: new Date('2021-02-17T23:30:00.000Z'), + priority: 1, + }, + { + text: 'PSD needed for Shipping Return Labels', + ownerId: [4], + startDate: new Date('2021-02-18T15:30:00.000Z'), + endDate: new Date('2021-02-18T16:15:00.000Z'), + priority: 2, + }, + { + text: 'Contact ISP and Discuss Payment Options', + ownerId: [1], + startDate: new Date('2021-02-18T18:30:00.000Z'), + endDate: new Date('2021-02-18T23:00:00.000Z'), + priority: 2, + }, + { + text: 'Prepare Year-End Support Summary Report', + ownerId: [2], + startDate: new Date('2021-02-19T00:00:00.000Z'), + endDate: new Date('2021-02-19T03:00:00.000Z'), + priority: 1, + }, + { + text: 'Review New Training Material', + ownerId: [3], + startDate: new Date('2021-02-19T15:00:00.000Z'), + endDate: new Date('2021-02-19T16:15:00.000Z'), + priority: 2, + }, + { + text: 'Distribute Training Material to Support Staff', + ownerId: [2], + startDate: new Date('2021-02-19T19:45:00.000Z'), + endDate: new Date('2021-02-19T21:00:00.000Z'), + priority: 1, + }, + { + text: 'Training Material Distribution Schedule', + ownerId: [2], + startDate: new Date('2021-02-19T21:15:00.000Z'), + endDate: new Date('2021-02-19T23:15:00.000Z'), + priority: 1, + }, + { + text: 'Approval on Converting to New HDMI Specification', + ownerId: [4], + startDate: new Date('2021-02-22T16:30:00.000Z'), + endDate: new Date('2021-02-22T17:15:00.000Z'), + priority: 2, + }, + { + text: 'Create New Spike for Automation Server', + ownerId: [3], + startDate: new Date('2021-02-22T17:00:00.000Z'), + endDate: new Date('2021-02-22T19:30:00.000Z'), + priority: 2, + }, + { + text: 'Code Review - New Automation Server', + ownerId: [1], + startDate: new Date('2021-02-22T20:00:00.000Z'), + endDate: new Date('2021-02-22T22:00:00.000Z'), + priority: 1, + }, + { + text: 'Confirm Availability for Sales Meeting', + ownerId: [1], + startDate: new Date('2021-02-23T17:15:00.000Z'), + endDate: new Date('2021-02-23T22:15:00.000Z'), + priority: 2, + }, + { + text: 'Reschedule Sales Team Meeting', + ownerId: [2], + startDate: new Date('2021-02-23T23:15:00.000Z'), + endDate: new Date('2021-02-24T01:00:00.000Z'), + priority: 2, + }, + { + text: 'Send 2 Remotes for Giveaways', + ownerId: [3], + startDate: new Date('2021-02-24T16:30:00.000Z'), + endDate: new Date('2021-02-24T18:45:00.000Z'), + priority: 1, + }, + { + text: 'Discuss Product Giveaways with Management', + ownerId: [1], + startDate: new Date('2021-02-24T19:15:00.000Z'), + endDate: new Date('2021-02-24T23:45:00.000Z'), + priority: 2, + }, + { + text: 'Replace Desktops on the 3rd Floor', + ownerId: [2], + startDate: new Date('2021-02-25T16:30:00.000Z'), + endDate: new Date('2021-02-25T17:45:00.000Z'), + priority: 1, + }, + { + text: 'Update Database with New Leads', + ownerId: [3], + startDate: new Date('2021-02-25T19:00:00.000Z'), + endDate: new Date('2021-02-25T21:15:00.000Z'), + priority: 2, + }, + { + text: 'Mail New Leads for Follow Up', + ownerId: [1], + startDate: new Date('2021-02-25T21:45:00.000Z'), + endDate: new Date('2021-02-25T22:30:00.000Z'), + priority: 2, + }, + { + text: 'Send Territory Sales Breakdown', + ownerId: [2], + startDate: new Date('2021-02-26T01:00:00.000Z'), + endDate: new Date('2021-02-26T03:00:00.000Z'), + priority: 1, + }, + { + text: 'Territory Sales Breakdown Report', + ownerId: [1], + startDate: new Date('2021-02-26T15:45:00.000Z'), + endDate: new Date('2021-02-26T16:45:00.000Z'), + priority: 1, + }, + { + text: 'Report on the State of Engineering Dept', + ownerId: [3], + startDate: new Date('2021-02-26T21:45:00.000Z'), + endDate: new Date('2021-02-26T22:30:00.000Z'), + priority: 2, + }, + { + text: 'Staff Productivity Report', + ownerId: [4], + startDate: new Date('2021-02-26T23:15:00.000Z'), + endDate: new Date('2021-02-27T02:30:00.000Z'), + priority: 2, + }, +]; +export const resourcesData = [ + { + text: 'Samantha Bright', + id: 1, + color: '#cb6bb2', + }, + { + text: 'John Heart', + id: 2, + color: '#56ca85', + }, + { + text: 'Todd Hoffman', + id: 3, + color: '#1e90ff', + }, + { + text: 'Sandra Johnson', + id: 4, + color: '#ff9747', + }, +]; +export const priorityData = [ + { + text: 'Low Priority', + id: 1, + color: '#1e90ff', + }, + { + text: 'High Priority', + id: 2, + color: '#ff9747', + }, +]; diff --git a/apps/demos/Demos/Scheduler/Timelines/ReactJs/index.html b/apps/demos/Demos/Scheduler/Timelines/ReactJs/index.html new file mode 100644 index 000000000000..d6d83f735a76 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Timelines/ReactJs/index.html @@ -0,0 +1,39 @@ + + + + DevExtreme Demo + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/Timelines/ReactJs/index.js b/apps/demos/Demos/Scheduler/Timelines/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Timelines/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/Toolbar/ReactJs/App.js b/apps/demos/Demos/Scheduler/Toolbar/ReactJs/App.js new file mode 100644 index 000000000000..e189d0934201 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Toolbar/ReactJs/App.js @@ -0,0 +1,126 @@ +import React, { + useCallback, useMemo, useRef, useState, +} from 'react'; +import { + Scheduler, Resource, Toolbar, Item, +} from 'devextreme-react/scheduler'; +import { SelectBox } from 'devextreme-react/select-box'; +import { assignees, data, currentDate } from './data.js'; + +const views = ['day', 'week', 'workWeek', 'month']; +const selectBoxPlaceholder = 'Select Employee'; +const inputAttr = { 'aria-label': selectBoxPlaceholder }; +const MS_IN_HOUR = 60 * 1000; +const App = () => { + const schedulerRef = useRef(null); + const [assigneesFilterValue, setAssigneesFilterValue] = useState(); + const onAssigneesFilterChange = useCallback((event) => { + const scheduler = schedulerRef.current?.instance?.(); + if (!scheduler) { + return; + } + const dataSource = scheduler.option('dataSource'); + const filter = event.value ? ['assigneeId', 'contains', event.value] : null; + dataSource.filter(filter); + scheduler.option('dataSource', dataSource); + setAssigneesFilterValue(event.value); + }, []); + const onAppointmentAdd = useCallback(() => { + const scheduler = schedulerRef.current?.instance?.(); + if (!scheduler) { + return; + } + const selected = scheduler.option('selectedCellData') ?? []; + if (selected.length) { + const firstSelected = selected[0]; + const lastSelected = selected.at(-1); + scheduler.showAppointmentPopup( + { + ...firstSelected.groups, + allDay: firstSelected.allDay, + startDate: new Date(firstSelected.startDateUTC), + endDate: new Date(lastSelected.endDateUTC), + }, + true, + ); + return; + } + const currentDate = scheduler.option('currentDate'); + const cellDuration = Number(scheduler.option('cellDuration')); + const cellDurationMs = cellDuration * MS_IN_HOUR; + const currentTime = new Date(currentDate).getTime(); + const roundTime = Math.round(currentTime / cellDurationMs) * cellDurationMs; + scheduler.showAppointmentPopup( + { + startDate: new Date(roundTime), + endDate: new Date(roundTime + cellDurationMs), + }, + true, + ); + }, []); + const toggleButtonOptions = useMemo( + () => ({ + icon: 'plus', + text: 'New Appointment', + stylingMode: 'outlined', + type: 'normal', + onClick() { + onAppointmentAdd(); + }, + }), + [onAppointmentAdd], + ); + return ( + + + + + + + + + + + + + ); +}; +export default App; diff --git a/apps/demos/Demos/Scheduler/Toolbar/ReactJs/data.js b/apps/demos/Demos/Scheduler/Toolbar/ReactJs/data.js new file mode 100644 index 000000000000..091778f36aaa --- /dev/null +++ b/apps/demos/Demos/Scheduler/Toolbar/ReactJs/data.js @@ -0,0 +1,123 @@ +const addDays = (date, days) => new Date(new Date(date).setUTCDate(date.getUTCDate() + days)); +const now = new Date(new Date().setUTCHours(0, 0, 0, 0)); +const startOfTheWeek = addDays(now, -now.getUTCDay()); +export const currentDate = new Date(2025, 5, 10); +const currentStartOfTheWeek = addDays(currentDate, -currentDate.getUTCDay()); +export const data = [ + { + text: 'Website Re-Design Plan', + assigneeId: [4], + startDate: new Date(addDays(startOfTheWeek, 1).setUTCHours(16, 30)), + endDate: new Date(addDays(startOfTheWeek, 1).setUTCHours(18, 30)), + }, + { + text: 'Book Flights to San Fran for Sales Trip', + assigneeId: [2], + startDate: new Date(addDays(startOfTheWeek, 2).setUTCHours(19)), + endDate: new Date(addDays(startOfTheWeek, 2).setUTCHours(20)), + allDay: true, + }, + { + text: 'Install New Router in Dev Room', + assigneeId: [1], + startDate: new Date(addDays(startOfTheWeek, 2).setUTCHours(21, 30)), + endDate: new Date(addDays(startOfTheWeek, 2).setUTCHours(22, 30)), + }, + { + text: 'Approve Personal Computer Upgrade Plan', + assigneeId: [3], + startDate: new Date(addDays(startOfTheWeek, 3).setUTCHours(17)), + endDate: new Date(addDays(startOfTheWeek, 3).setUTCHours(18)), + }, + { + text: 'Final Budget Review', + assigneeId: [1], + startDate: new Date(addDays(startOfTheWeek, 3).setUTCHours(19)), + endDate: new Date(addDays(startOfTheWeek, 3).setUTCHours(20, 35)), + }, + { + text: 'New Brochures', + assigneeId: [4], + startDate: new Date(addDays(startOfTheWeek, 3).setUTCHours(21, 30)), + endDate: new Date(addDays(startOfTheWeek, 3).setUTCHours(22, 45)), + }, + { + text: 'Install New Database', + assigneeId: [2], + startDate: new Date(addDays(startOfTheWeek, 4).setUTCHours(16, 45)), + endDate: new Date(addDays(startOfTheWeek, 4).setUTCHours(18, 15)), + }, + { + text: 'Approve New Online Marketing Strategy', + assigneeId: [4], + startDate: new Date(addDays(currentStartOfTheWeek, 1).setUTCHours(19)), + endDate: new Date(addDays(currentStartOfTheWeek, 1).setUTCHours(21)), + }, + { + text: 'Upgrade Personal Computers', + assigneeId: [2], + startDate: new Date(addDays(currentStartOfTheWeek, 1).setUTCHours(22, 15)), + endDate: new Date(addDays(currentStartOfTheWeek, 1).setUTCHours(23, 30)), + }, + { + text: 'Customer Workshop', + assigneeId: [3], + startDate: new Date(addDays(startOfTheWeek, 5).setUTCHours(18)), + endDate: new Date(addDays(startOfTheWeek, 5).setUTCHours(19)), + recurrenceRule: 'FREQ=WEEKLY;INTERVAL=1', + }, + { + text: 'Prepare 2021 Marketing Plan', + assigneeId: [1], + startDate: new Date(addDays(currentStartOfTheWeek, 2).setUTCHours(18)), + endDate: new Date(addDays(currentStartOfTheWeek, 2).setUTCHours(20, 30)), + }, + { + text: 'Brochure Design Review', + assigneeId: [4], + startDate: new Date(addDays(startOfTheWeek, 5).setUTCHours(21)), + endDate: new Date(addDays(startOfTheWeek, 5).setUTCHours(22, 30)), + }, + { + text: 'Create Icons for Website', + assigneeId: [3], + startDate: new Date(addDays(currentStartOfTheWeek, 3).setUTCHours(17)), + endDate: new Date(addDays(currentStartOfTheWeek, 3).setUTCHours(18, 30)), + }, + { + text: 'Upgrade Server Hardware', + assigneeId: [4], + startDate: new Date(addDays(currentStartOfTheWeek, 2).setUTCHours(16)), + endDate: new Date(addDays(currentStartOfTheWeek, 2).setUTCHours(17, 30)), + }, + { + text: 'Submit New Website Design', + assigneeId: [1], + startDate: new Date(addDays(currentStartOfTheWeek, 5).setUTCHours(23, 30)), + endDate: new Date(addDays(currentStartOfTheWeek, 6).setUTCHours(1)), + }, + { + text: 'Launch New Website', + assigneeId: [2], + startDate: new Date(addDays(currentStartOfTheWeek, 4).setUTCHours(19)), + endDate: new Date(addDays(currentStartOfTheWeek, 4).setUTCHours(21)), + }, +]; +export const assignees = [ + { + text: 'Samantha Bright', + id: 1, + }, + { + text: 'John Heart', + id: 2, + }, + { + text: 'Todd Hoffman', + id: 3, + }, + { + text: 'Sandra Johnson', + id: 4, + }, +]; diff --git a/apps/demos/Demos/Scheduler/Toolbar/ReactJs/description.md b/apps/demos/Demos/Scheduler/Toolbar/ReactJs/description.md new file mode 100644 index 000000000000..ba55950a43e0 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Toolbar/ReactJs/description.md @@ -0,0 +1,20 @@ +The DevExtreme Scheduler ships with a customizable toolbar UI element. You can populate the toolbar with predefined and custom items—in any display order. This demo adds the "today" predefined control and two DevExtreme components to the toolbar. + + +To customize the Scheduler toolbar in your DevExtreme-powered app, add items to the [toolbar](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/toolbar/).[items[]](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/toolbar/items/) array. DevExtreme Scheduler supports the following toolbar item types: + +- **Predefined Controls** + * "dateNavigator" + Displays a [ButtonGroup](/Documentation/Guide/UI_Components/ButtonGroup/Getting_Started_with_ButtonGroup/) component with next/previous buttons and a date interval button that invokes a dropdown calendar. Define [options](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/toolbar/items/#options).**items** to customize the control. You can add new buttons, and specify button availability/order. + * "viewSwitcher" + Switches between view types (day, week, month, and others). + * "today" + A "Today" button (navigates to the current date). + +- **DevExtreme Components** +You can configure a DevExtreme component within a toolbar item element. In this demo, we extended the toolbar with a [Button](/Documentation/Guide/UI_Components/Button/Overview/) and [SelectBox](/Documentation/Guide/UI_Components/SelectBox/Overview/). + +- **Custom Controls** +Specify **items[]**.[render](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/toolbar/items/#render) or [component](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/toolbar/items/#component) to implement custom controls. + +The default Scheduler toolbar displays "dateNavigator" and "viewSwitcher" predefined controls. diff --git a/apps/demos/Demos/Scheduler/Toolbar/ReactJs/index.html b/apps/demos/Demos/Scheduler/Toolbar/ReactJs/index.html new file mode 100644 index 000000000000..d6d83f735a76 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Toolbar/ReactJs/index.html @@ -0,0 +1,39 @@ + + + + DevExtreme Demo + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/Toolbar/ReactJs/index.js b/apps/demos/Demos/Scheduler/Toolbar/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/Toolbar/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/App.js b/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/App.js new file mode 100644 index 000000000000..0a6406959e4c --- /dev/null +++ b/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/App.js @@ -0,0 +1,46 @@ +import React from 'react'; +import Scheduler, { Resource, View, Scrolling } from 'devextreme-react/scheduler'; +import { resources, generateAppointments } from './data.js'; + +const currentDate = new Date(2021, 1, 2); +const groups = ['humanId']; +const startDay = new Date(2021, 1, 1); +const endDay = new Date(2021, 1, 28); +const startDayHour = 8; +const endDayHour = 20; +const appointments = generateAppointments(startDay, endDay, startDayHour, endDayHour); +const App = () => ( + + + + + + + +); +export default App; diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/data.js b/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/data.js new file mode 100644 index 000000000000..93160881a82b --- /dev/null +++ b/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/data.js @@ -0,0 +1,256 @@ +export const resources = [ + { + id: 0, + text: 'David Carter', + color: '#74d57b', + }, + { + id: 1, + text: 'Emma Lewis', + color: '#1db2f5', + }, + { + id: 2, + text: 'Noah Hill', + color: '#f5564a', + }, + { + id: 3, + text: 'William Bell', + color: '#97c95c', + }, + { + id: 4, + text: 'Jane Jones', + color: '#ffc720', + }, + { + id: 5, + text: 'Violet Young', + color: '#eb3573', + }, + { + id: 6, + text: 'Samuel Perry', + color: '#a63db8', + }, + { + id: 7, + text: 'Luther Murphy', + color: '#ffaa66', + }, + { + id: 8, + text: 'Craig Morris', + color: '#2dcdc4', + }, + { + id: 9, + text: 'Sandy Wood', + color: '#c34cb9', + }, + { + id: 10, + text: 'Susan Bennett', + color: '#3d44ec', + }, + { + id: 11, + text: 'Lilly Barnes', + color: '#4ddcca', + }, + { + id: 12, + text: 'Marcus Price', + color: '#2ec98d', + }, + { + id: 13, + text: 'David Stewart', + color: '#3ff6ca', + }, + { + id: 14, + text: 'Joseph Smith', + color: '#f665aa', + }, + { + id: 15, + text: 'Carter Wilson', + color: '#d1c974', + }, + { + id: 16, + text: 'Wyatt Lopez', + color: '#ff6741', + }, + { + id: 17, + text: 'John Long', + color: '#ee53dc', + }, + { + id: 18, + text: 'Jack Rivera', + color: '#795ac3', + }, + { + id: 19, + text: 'Victoria Adams', + color: '#ff7d8a', + }, + { + id: 20, + text: 'Madison Anderson', + color: '#4cd482', + }, + { + id: 21, + text: 'Luna Moore', + color: '#9d67cc', + }, + { + id: 22, + text: 'Michael Bailey', + color: '#5ab1ef', + }, + { + id: 23, + text: 'Jenny Powell', + color: '#68e18f', + }, + { + id: 24, + text: 'Daniel Peterson', + color: '#4dd155', + }, + { + id: 25, + text: 'Gabriel Gray', + color: '#ef9e44', + }, + { + id: 26, + text: 'Anthony Robinson', + color: '#45a5cc', + }, + { + id: 27, + text: 'Ellie Tomson', + color: '#a067bd', + }, + { + id: 28, + text: 'Natalie Adams', + color: '#3d44ec', + }, + { + id: 29, + text: 'Sofia Green', + color: '#4ddcca', + }, +]; +const appointmentsText = [ + 'Google AdWords Strategy', + 'New Brochures', + 'Brochure Design Review', + 'Website Re-Design Plan', + 'Rollout of New Website and Marketing Brochures', + 'Update Sales Strategy Documents', + 'Non-Compete Agreements', + 'Approve Hiring of John Jeffers', + 'Update NDA Agreement', + 'Update Employee Files with New NDA', + 'Submit Questions Regarding New NDA', + 'Submit Signed NDA', + 'Review Revenue Projections', + 'Comment on Revenue Projections', + 'Provide New Health Insurance Docs', + 'Review Changes to Health Insurance Coverage', + 'Review Training Course for any Ommissions', + 'Recall Rebate Form', + 'Create Report on Customer Feedback', + 'Review Customer Feedback Report', + 'Customer Feedback Report Analysis', + 'Prepare Shipping Cost Analysis Report', + 'Provide Feedback on Shippers', + 'Select Preferred Shipper', + 'Complete Shipper Selection Form', + 'Upgrade Server Hardware', + 'Upgrade Personal Computers', + 'Upgrade Apps to Windows RT or stay with WinForms', + 'Estimate Time Required to Touch-Enable Apps', + 'Report on Tranistion to Touch-Based Apps', + 'Submit New Website Design', + 'Create Icons for Website', + 'Create New Product Pages', + 'Approve Website Launch', + 'Update Customer Shipping Profiles', + 'Create New Shipping Return Labels', + 'Get Design for Shipping Return Labels', + 'PSD needed for Shipping Return Labels', + 'Contact ISP and Discuss Payment Options', + 'Prepare Year-End Support Summary Report', + 'Review New Training Material', + 'Distribute Training Material to Support Staff', + 'Training Material Distribution Schedule', + 'Approval on Converting to New HDMI Specification', + 'Create New Spike for Automation Server', + 'Code Review - New Automation Server', + 'Confirm Availability for Sales Meeting', + 'Reschedule Sales Team Meeting', + 'Send 2 Remotes for Giveaways', + 'Discuss Product Giveaways with Management', + 'Replace Desktops on the 3rd Floor', + 'Update Database with New Leads', + 'Mail New Leads for Follow Up', + 'Send Territory Sales Breakdown', + 'Territory Sales Breakdown Report', + 'Report on the State of Engineering Dept', + 'Staff Productivity Report', +]; +function getRandomDuration(durationState) { + const durationMin = Math.floor((durationState % 23) / 3 + 5) * 15; + return durationMin * 60 * 1000; +} +function getRandomText(textIndex) { + return appointmentsText[textIndex % appointmentsText.length]; +} +function filterAppointmentsByTime(appointments, startDayHour, endDayHour) { + const result = []; + for (let i = 0; i < appointments.length; i += 1) { + const { startDate } = appointments[i]; + const { endDate } = appointments[i]; + if ( + startDate.getDay() === endDate.getDay() && + startDate.getHours() >= startDayHour - 1 && + endDate.getHours() <= endDayHour - 1 + ) { + result.push(appointments[i]); + } + } + return result; +} +export function generateAppointments(startDay, endDay, startDayHour, endDayHour) { + const appointments = []; + let textIndex = 0; + let durationState = 1; + const durationIncrement = 19; + for (let i = 0; i < resources.length; i += 1) { + let startDate = startDay; + while (startDate.getTime() < endDay.getTime()) { + durationState += durationIncrement; + const endDate = new Date(startDate.getTime() + getRandomDuration(durationState)); + appointments.push({ + text: getRandomText(textIndex), + startDate, + endDate, + humanId: resources[i].id, + }); + textIndex += 1; + durationState += durationIncrement; + startDate = new Date(endDate.getTime() + getRandomDuration(durationState)); + } + } + return filterAppointmentsByTime(appointments, startDayHour, endDayHour); +} diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/index.html b/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/index.html new file mode 100644 index 000000000000..2bc0e9f78ec1 --- /dev/null +++ b/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/index.js b/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/index.js new file mode 100644 index 000000000000..0195560dcf0e --- /dev/null +++ b/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('scheduler')); diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/styles.css b/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/styles.css new file mode 100644 index 000000000000..0cd27251c611 --- /dev/null +++ b/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/styles.css @@ -0,0 +1,7 @@ +#scheduler .dx-scheduler-cell-sizes-vertical { + height: 100px; +} + +#scheduler .dx-scheduler-cell-sizes-horizontal { + width: 150px; +} diff --git a/apps/demos/Demos/Scheduler/WebAPIService/ReactJs/App.js b/apps/demos/Demos/Scheduler/WebAPIService/ReactJs/App.js new file mode 100644 index 000000000000..4df1e7c7b96c --- /dev/null +++ b/apps/demos/Demos/Scheduler/WebAPIService/ReactJs/App.js @@ -0,0 +1,36 @@ +import React from 'react'; +import Scheduler from 'devextreme-react/scheduler'; +import * as AspNetData from 'devextreme-aspnet-data-nojquery'; + +const url = 'https://js.devexpress.com/Demos/NetCore/api/SchedulerData'; +const dataSource = AspNetData.createStore({ + key: 'AppointmentId', + loadUrl: url, + insertUrl: url, + updateUrl: url, + deleteUrl: url, + onBeforeSend(_, ajaxOptions) { + ajaxOptions.xhrFields = { withCredentials: true }; + }, +}); +const currentDate = new Date(2021, 3, 27); +const views = ['day', 'workWeek', 'month']; +const App = () => ( + +); +export default App; diff --git a/apps/demos/Demos/Scheduler/WebAPIService/ReactJs/index.html b/apps/demos/Demos/Scheduler/WebAPIService/ReactJs/index.html new file mode 100644 index 000000000000..d6d83f735a76 --- /dev/null +++ b/apps/demos/Demos/Scheduler/WebAPIService/ReactJs/index.html @@ -0,0 +1,39 @@ + + + + DevExtreme Demo + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/WebAPIService/ReactJs/index.js b/apps/demos/Demos/Scheduler/WebAPIService/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/WebAPIService/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/App.js b/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/App.js new file mode 100644 index 000000000000..fa9ed84d5736 --- /dev/null +++ b/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/App.js @@ -0,0 +1,41 @@ +import React, { useState } from 'react'; +import Scheduler from 'devextreme-react/scheduler'; +import RadioGroup from 'devextreme-react/radio-group'; +import { data, shifts } from './data.js'; + +const currentDate = new Date(2021, 2, 30); +const views = ['day', 'workWeek']; +const App = () => { + const [currentShift, setCurrentShift] = useState(shifts[0]); + return ( + <> +
+
+
Work Hours:
+
+ +
+
+
+
+ + + ); +}; +export default App; diff --git a/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/data.js b/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/data.js new file mode 100644 index 000000000000..782a14a133a2 --- /dev/null +++ b/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/data.js @@ -0,0 +1,94 @@ +export const shifts = [ + { + text: 'First shift', + offset: -120, + }, + { + text: 'Second shift', + offset: 360, + }, + { + text: 'Third shift', + offset: 840, + }, +]; +export const data = [ + { + text: 'Website Re-Design Plan', + startDate: '2021-03-29T16:00:00.000Z', + endDate: '2021-03-29T18:00:00.000Z', + }, + { + text: 'Approve Personal Computer Upgrade Plan', + startDate: '2021-03-31T01:30:00.000Z', + endDate: '2021-03-31T03:00:00.000Z', + }, + { + text: 'Final Budget Review', + startDate: '2021-03-30T16:30:00.000Z', + endDate: '2021-03-30T18:05:00.000Z', + }, + { + text: 'New Brochures', + startDate: '2021-04-01T23:30:00.000Z', + endDate: '2021-04-02T02:30:00.000Z', + }, + { + text: 'Approve New Online Marketing Strategy', + startDate: '2021-03-31T16:30:00.000Z', + endDate: '2021-03-31T18:30:00.000Z', + }, + { + text: 'Prepare 2021 Marketing Plan', + startDate: '2021-04-01T16:30:00.000Z', + endDate: '2021-04-01T18:00:00.000Z', + }, + { + text: 'Brochure Design Review', + startDate: '2021-04-02T17:30:00.000Z', + endDate: '2021-04-02T19:00:00.000Z', + }, + { + text: 'Create Icons for Website', + startDate: '2021-04-01T18:00:00.000Z', + endDate: '2021-04-01T19:30:00.000Z', + }, + { + text: 'Submit New Website Design', + startDate: '2021-04-02T09:30:00.000Z', + endDate: '2021-04-02T11:00:00.000Z', + }, + { + text: 'Launch New Website', + startDate: '2021-04-01T01:30:00.000Z', + endDate: '2021-04-01T03:00:00.000Z', + recurrenceRule: 'FREQ=WEEKLY;BYDAY=WE;INTERVAL=2', + }, + { + text: 'Install New Router in Dev Room', + startDate: '2021-03-29T08:00:00.000Z', + endDate: '2021-03-29T09:00:00.000Z', + }, + { + text: 'Upgrade Personal Computers', + startDate: '2021-03-30T01:00:00.000Z', + endDate: '2021-03-30T03:00:00.000Z', + }, + { + text: 'Install New Database', + startDate: '2021-03-31T08:30:00.000Z', + endDate: '2021-03-31T10:00:00.000Z', + }, + { + text: 'Update Customer Shipping Profiles', + startDate: '2021-04-01T09:30:00.000Z', + endDate: '2021-04-01T11:00:00.000Z', + recurrenceRule: 'FREQ=WEEKLY;BYDAY=TH', + }, + { + text: 'Upgrade Server Hardware', + startDate: '2021-03-30T08:30:00.000Z', + endDate: '2021-03-30T11:00:00.000Z', + recurrenceRule: 'FREQ=MONTHLY;BYMONTHDAY=30', + }, +]; diff --git a/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/index.html b/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/index.html new file mode 100644 index 000000000000..8d812d7c36a1 --- /dev/null +++ b/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/index.html @@ -0,0 +1,43 @@ + + + + DevExtreme Demo + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/index.js b/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/styles.css b/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/styles.css new file mode 100644 index 000000000000..9895913b047b --- /dev/null +++ b/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/styles.css @@ -0,0 +1,23 @@ +.options { + background-color: rgba(191, 191, 191, 0.15); + margin-top: 20px; + display: flex; + align-items: flex-start; + height: 100%; +} + +.option { + padding: 16px; + display: flex; + align-items: center; +} + +.label, +.value { + display: inline-block; + vertical-align: middle; +} + +.label { + width: 100px; +} From 1f6dbc6d3278f1abb7939f6ef4527e2ae1e3701b Mon Sep 17 00:00:00 2001 From: dmlvr Date: Wed, 7 Jan 2026 15:32:06 +0200 Subject: [PATCH 05/11] move 'type' keyword outside the curly braces --- .../Demos/Pagination/Overview/React/EmployeeCard.tsx | 2 +- .../Pagination/Overview/React/EmployeesGallery.tsx | 2 +- .../Demos/Scheduler/AllDayPanelMode/React/App.tsx | 4 ++-- .../Scheduler/AppointmentCountPerCell/React/App.tsx | 2 +- apps/demos/Demos/Scheduler/BasicViews/React/App.tsx | 2 +- .../Demos/Scheduler/CellTemplates/React/DateCell.tsx | 2 +- .../demos/Demos/Scheduler/CellTemplates/Vue/utils.ts | 2 +- .../Scheduler/ContextMenu/Angular/app/app.service.ts | 2 +- .../demos/Demos/Scheduler/ContextMenu/React/types.ts | 4 ++-- .../Scheduler/CurrentTimeIndicator/React/App.tsx | 6 +++--- .../CurrentTimeIndicator/Vue/AppointmentTemplate.vue | 2 +- .../Demos/Scheduler/CustomViewDuration/React/App.tsx | 2 +- .../GoogleCalendarIntegration/React/App.tsx | 4 ++-- apps/demos/Demos/Scheduler/GroupByDate/React/App.tsx | 2 +- apps/demos/Demos/Scheduler/Overview/React/App.tsx | 2 +- .../Scheduler/RecurringAppointments/React/App.tsx | 2 +- apps/demos/Demos/Scheduler/Resources/React/App.tsx | 2 +- .../Demos/Scheduler/SignalRService/React/App.tsx | 2 +- apps/demos/Demos/Scheduler/SimpleArray/React/App.tsx | 2 +- apps/demos/Demos/Scheduler/SimpleArray/React/data.ts | 2 +- apps/demos/Demos/Scheduler/Templates/React/App.tsx | 12 ++++++------ .../Demos/Scheduler/Templates/React/Appointment.tsx | 2 +- .../Scheduler/Templates/React/AppointmentTooltip.tsx | 2 +- .../Scheduler/Templates/React/MovieInfoContainer.tsx | 2 +- apps/demos/Demos/Scheduler/Templates/Vue/App.vue | 6 +++--- .../Demos/Scheduler/TimeZonesSupport/React/App.tsx | 4 ++-- apps/demos/Demos/Scheduler/Toolbar/React/App.tsx | 6 +++--- apps/demos/Demos/Scheduler/Toolbar/React/data.ts | 2 +- apps/demos/Demos/Scheduler/Toolbar/Vue/App.vue | 2 +- apps/demos/Demos/Scheduler/Toolbar/Vue/data.ts | 2 +- .../Demos/Scheduler/VirtualScrolling/React/data.ts | 2 +- .../Demos/Scheduler/WebAPIService/React/App.tsx | 2 +- apps/demos/Demos/Scheduler/WorkShifts/React/App.tsx | 2 +- 33 files changed, 48 insertions(+), 48 deletions(-) diff --git a/apps/demos/Demos/Pagination/Overview/React/EmployeeCard.tsx b/apps/demos/Demos/Pagination/Overview/React/EmployeeCard.tsx index a6fc350c3732..be9d07419c7f 100644 --- a/apps/demos/Demos/Pagination/Overview/React/EmployeeCard.tsx +++ b/apps/demos/Demos/Pagination/Overview/React/EmployeeCard.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { type Employee } from './data'; +import type { Employee } from './data'; interface EmployeeCardProps { employee: Employee; diff --git a/apps/demos/Demos/Pagination/Overview/React/EmployeesGallery.tsx b/apps/demos/Demos/Pagination/Overview/React/EmployeesGallery.tsx index a229dad01487..2c0a94a5dc4d 100644 --- a/apps/demos/Demos/Pagination/Overview/React/EmployeesGallery.tsx +++ b/apps/demos/Demos/Pagination/Overview/React/EmployeesGallery.tsx @@ -1,6 +1,6 @@ import React from 'react'; import EmployeeCard from './EmployeeCard.tsx'; -import { type Employee } from './data'; +import type { Employee } from './data'; interface EmployeeGalleryProps { employees: Employee[]; diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/React/App.tsx b/apps/demos/Demos/Scheduler/AllDayPanelMode/React/App.tsx index fae486290000..73a8bc7ba217 100644 --- a/apps/demos/Demos/Scheduler/AllDayPanelMode/React/App.tsx +++ b/apps/demos/Demos/Scheduler/AllDayPanelMode/React/App.tsx @@ -1,8 +1,8 @@ import React, { useCallback, useState } from 'react'; import Scheduler from 'devextreme-react/scheduler'; import RadioGroup from 'devextreme-react/radio-group'; -import { type SchedulerTypes } from 'devextreme-react/scheduler'; -import { type RadioGroupTypes } from 'devextreme-react/radio-group'; +import type { SchedulerTypes } from 'devextreme-react/scheduler'; +import type { RadioGroupTypes } from 'devextreme-react/radio-group'; import { data } from './data.ts'; const currentDate = new Date(2021, 2, 28); diff --git a/apps/demos/Demos/Scheduler/AppointmentCountPerCell/React/App.tsx b/apps/demos/Demos/Scheduler/AppointmentCountPerCell/React/App.tsx index 2552ad8ae779..f378a4cd0a9a 100644 --- a/apps/demos/Demos/Scheduler/AppointmentCountPerCell/React/App.tsx +++ b/apps/demos/Demos/Scheduler/AppointmentCountPerCell/React/App.tsx @@ -1,6 +1,6 @@ import React from 'react'; import Scheduler, { Resource } from 'devextreme-react/scheduler'; -import { type SchedulerTypes } from 'devextreme-react/scheduler'; +import type { SchedulerTypes } from 'devextreme-react/scheduler'; import { data, resourcesData } from './data.ts'; diff --git a/apps/demos/Demos/Scheduler/BasicViews/React/App.tsx b/apps/demos/Demos/Scheduler/BasicViews/React/App.tsx index bcb0cecddf91..1f3901e45b8b 100644 --- a/apps/demos/Demos/Scheduler/BasicViews/React/App.tsx +++ b/apps/demos/Demos/Scheduler/BasicViews/React/App.tsx @@ -1,7 +1,7 @@ import React from 'react'; import Scheduler from 'devextreme-react/scheduler'; -import { type SchedulerTypes } from 'devextreme-react/scheduler'; +import type { SchedulerTypes } from 'devextreme-react/scheduler'; import { data } from './data.ts'; diff --git a/apps/demos/Demos/Scheduler/CellTemplates/React/DateCell.tsx b/apps/demos/Demos/Scheduler/CellTemplates/React/DateCell.tsx index 686bd1e69574..4e98d0558221 100644 --- a/apps/demos/Demos/Scheduler/CellTemplates/React/DateCell.tsx +++ b/apps/demos/Demos/Scheduler/CellTemplates/React/DateCell.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { type SchedulerTypes } from 'devextreme-react/scheduler'; +import type { SchedulerTypes } from 'devextreme-react/scheduler'; import Utils from './utils.ts'; interface DateCellProps { diff --git a/apps/demos/Demos/Scheduler/CellTemplates/Vue/utils.ts b/apps/demos/Demos/Scheduler/CellTemplates/Vue/utils.ts index 721f6defa428..5b8e95fea8d0 100644 --- a/apps/demos/Demos/Scheduler/CellTemplates/Vue/utils.ts +++ b/apps/demos/Demos/Scheduler/CellTemplates/Vue/utils.ts @@ -1,4 +1,4 @@ -import { type DxScheduler } from 'devextreme-vue'; +import type { DxScheduler } from 'devextreme-vue'; import { dinnerTime, holidays } from './data.ts'; export default class Utils { diff --git a/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.service.ts b/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.service.ts index 3f48e91e2aa2..58ab97226925 100644 --- a/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.service.ts +++ b/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { type DxContextMenuTypes } from 'devextreme-angular/ui/context-menu'; +import type { DxContextMenuTypes } from 'devextreme-angular/ui/context-menu'; export interface Appointment { text: string; diff --git a/apps/demos/Demos/Scheduler/ContextMenu/React/types.ts b/apps/demos/Demos/Scheduler/ContextMenu/React/types.ts index c73a675d54a8..854fba22f8c6 100644 --- a/apps/demos/Demos/Scheduler/ContextMenu/React/types.ts +++ b/apps/demos/Demos/Scheduler/ContextMenu/React/types.ts @@ -1,5 +1,5 @@ -import { type SchedulerTypes } from 'devextreme-react/scheduler'; -import { type ContextMenuTypes } from 'devextreme-react/context-menu'; +import type { SchedulerTypes } from 'devextreme-react/scheduler'; +import type { ContextMenuTypes } from 'devextreme-react/context-menu'; export type Appointment = SchedulerTypes.Appointment & { roomId: number[] }; diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/App.tsx b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/App.tsx index c55d76f96ae6..2cdbdb986692 100644 --- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/App.tsx +++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/App.tsx @@ -2,9 +2,9 @@ import React, { useCallback, useState } from 'react'; import Scheduler, { Resource } from 'devextreme-react/scheduler'; import { Switch } from 'devextreme-react/switch'; import { NumberBox } from 'devextreme-react/number-box'; -import { type SchedulerTypes } from 'devextreme-react/scheduler'; -import { type SwitchTypes } from 'devextreme-react/switch'; -import { type NumberBoxTypes } from 'devextreme-react/number-box'; +import type { SchedulerTypes } from 'devextreme-react/scheduler'; +import type { SwitchTypes } from 'devextreme-react/switch'; +import type { NumberBoxTypes } from 'devextreme-react/number-box'; import { data, moviesData } from './data.ts'; import AppointmentTemplate from './AppointmentTemplate.tsx'; diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/AppointmentTemplate.vue b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/AppointmentTemplate.vue index 9c2e165e47a1..b2939d9766f1 100644 --- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/AppointmentTemplate.vue +++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/AppointmentTemplate.vue @@ -10,7 +10,7 @@