dxScheduler - add Work Shift demo (#2988)

* Create client-side templates

* Add jQuery demo tempalte

* Create react demo template

* Add angular demo template

* Add etalon

* Create vue approach

* Fix linter warn

* Fix linter errors

* Generate reactjs version

* Fix linter error

* Fix lint errors

* Fix errors in markup

JSDemos/Demos/Scheduler/WorkShifts/Angular/app/app.component.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;
+}

JSDemos/Demos/Scheduler/WorkShifts/Angular/app/app.component.html

@@ -0,0 +1,27 @@
+<div class="options">
+  <div class="option">
+    <div class="label">Work Hours</div>
+    <div class="value">
+      <dx-radio-group
+        [items]="shifts"
+        [value]="shifts[0]"
+        layout="horizontal"
+        (onValueChanged)="onShiftChanged($event)"
+      >
+      </dx-radio-group>
+    </div>
+  </div>
+</div>
+<br />
+<dx-scheduler
+  timeZone="America/Los_Angeles"
+  [dataSource]="appointments"
+  [views]="['day', 'week']"
+  currentView="week"
+  [currentDate]="currentDate"
+  [startDayHour]="0"
+  [endDayHour]="8"
+  [height]="600"
+  [showAllDayPanel]="false"
+>
+</dx-scheduler>

JSDemos/Demos/Scheduler/WorkShifts/Angular/app/app.component.ts

@@ -0,0 +1,48 @@
+import { NgModule, Component, enableProdMode } from '@angular/core';
+import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { DxSchedulerModule, DxRadioGroupModule } from 'devextreme-angular';
+import { Service, Appointment, Shift } from './app.service';
+
+if (!/localhost/.test(document.location.host)) {
+  enableProdMode();
+}
+
+@Component({
+  selector: 'demo-app',
+  templateUrl: 'app/app.component.html',
+  styleUrls: ['app/app.component.css'],
+  providers: [Service],
+})
+export class AppComponent {
+  appointments: Appointment[];
+
+  shifts: Shift[];
+
+  currentDate: Date = new Date(2021, 2, 30);
+
+  offset = 0;
+
+  constructor(service: Service) {
+    this.appointments = service.getAppointments();
+    this.shifts = service.getShifts();
+  }
+
+  onShiftChanged = (e) => {
+    // TODO this.offset = e.value;
+  };
+}
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    BrowserTransferStateModule,
+    DxSchedulerModule,
+    DxRadioGroupModule,
+  ],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule { }
+
+platformBrowserDynamic().bootstrapModule(AppModule);

JSDemos/Demos/Scheduler/WorkShifts/Angular/app/app.service.ts

@@ -0,0 +1,100 @@
+import { Injectable } from '@angular/core';
+
+export type Shift = {
+  text: string;
+  offset: number;
+};
+
+export type Appointment = {
+  text: string,
+  startDate: string,
+  endDate: string,
+  recurrenceRule?: string,
+};
+
+export const shifts: Shift[] = [{
+  text: 'First shift',
+  offset: 0,
+}, {
+  text: 'Second shift',
+  offset: 480,
+}, {
+  text: 'Third shift',
+  offset: 960,
+}];
+
+export const appointments: Appointment[] = [{
+  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-31T02: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-01T17:30: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-01T02:30: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',
+}];
+
+@Injectable()
+export class Service {
+  getShifts() {
+    return shifts;
+  }
+
+  getAppointments() {
+    return appointments;
+  }
+}

JSDemos/Demos/Scheduler/WorkShifts/Angular/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>DevExtreme Demo</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="../../../../../node_modules/devextreme/dist/css/dx.light.css" />
+
+    <script src="../../../../../node_modules/core-js/client/shim.min.js"></script>
+    <script src="../../../../../node_modules/zone.js/dist/zone.js"></script>
+    <script src="../../../../../node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="../../../../../node_modules/systemjs/dist/system.js"></script>
+
+    <script src="config.js"></script>
+    <script>
+      System.import("app").catch(console.error.bind(console));
+    </script>
+  </head>
+
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <demo-app>Loading...</demo-app>
+    </div>
+  </body>
+</html>

JSDemos/Demos/Scheduler/WorkShifts/React/App.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import Scheduler, { SchedulerTypes } from 'devextreme-react/scheduler';
+import RadioGroup, { RadioGroupTypes } from 'devextreme-react/radio-group';
+
+import { data, shifts } from './data.ts';
+
+const currentDate = new Date(2021, 2, 30);
+const views: SchedulerTypes.ViewType[] = ['day', 'week'];
+
+const App = () => {
+  // eslint-disable-next-line no-unused-vars
+  const [offset, setOffset] = React.useState(0);
+  const onShiftChanged = React.useCallback((e: RadioGroupTypes.ValueChangedEvent) => { setOffset(e.value); }, []);
+
+  return <React.Fragment>
+    <div className="options">
+      <div className="option">
+        <div className="label">Work Hours</div>
+        <div className="value">
+          <RadioGroup
+            defaultValue={shifts[0]}
+            items={shifts}
+            layout= 'horizontal'
+            onValueChanged={onShiftChanged}
+          />
+        </div>
+      </div>
+    </div>
+    <br />
+    <Scheduler
+      timeZone= 'America/Los_Angeles'
+      dataSource={data}
+      views={views}
+      defaultCurrentView='week'
+      currentDate={currentDate}
+      startDayHour= {0}
+      endDayHour= {8}
+      // offset={offset}
+      height={600}
+      showAllDayPanel={false}
+    />
+  </React.Fragment>;
+};
+
+export default App;

JSDemos/Demos/Scheduler/WorkShifts/React/data.ts

@@ -0,0 +1,82 @@
+import { SchedulerTypes } from 'devextreme-react/scheduler';
+
+type Shift = {
+  text: string;
+  offset: number;
+};
+
+export const shifts: Shift[] = [{
+  text: 'First shift',
+  offset: 0,
+}, {
+  text: 'Second shift',
+  offset: 480,
+}, {
+  text: 'Third shift',
+  offset: 960,
+}];
+
+export const data: SchedulerTypes.Appointment[] = [{
+  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-31T02: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-01T17:30: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-01T02:30: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',
+}];

JSDemos/Demos/Scheduler/WorkShifts/React/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>DevExtreme Demo</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="../../../../../node_modules/devextreme-dist/css/dx.light.css" />
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+    <script src="../../../../../node_modules/core-js/client/shim.min.js"></script>
+    <script src="../../../../../node_modules/systemjs/dist/system.js"></script>
+    <script type="text/javascript" src="config.js"></script>
+    <script type="text/javascript">
+      System.import("./index.tsx");
+    </script>
+  </head>
+
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <div id="app"></div>
+    </div>
+  </body>
+</html>

JSDemos/Demos/Scheduler/WorkShifts/React/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './App.tsx';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('app'),
+);