Scheduler Demos - Update Customization/Templates demo for Anglar/Vue #31738

aleksei-semikozov · 2025-11-17T14:12:29Z

No description provided.

Copilot

Pull Request Overview

This PR rewrites the Scheduler Templates demo for Angular and Vue frameworks, updating the visual design and form configuration patterns. The changes include modernized appointment and tooltip templates with improved styling, a refactored form editing configuration that moves from event-based to declarative configuration, and updated color schemes for movie resources.

Key changes:

Refactored appointment form handling from onAppointmentFormOpening event handler to declarative editing.form configuration
Updated appointment and tooltip templates with new CSS classes and flexbox-based layouts
Changed movie resource colors from vibrant to softer pastel tones

Reviewed Changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 14 comments.

Show a summary per file

File	Description
apps/demos/Demos/Scheduler/Templates/Vue/styles.css	Added new CSS rules for movie preview layouts and form styling; includes width rules for scheduler views
apps/demos/Demos/Scheduler/Templates/Vue/data.ts	Updated movie resource colors to pastel palette; improved string escaping
apps/demos/Demos/Scheduler/Templates/Vue/AppointmentTooltipTemplate.vue	Updated template structure to use flexbox-based movie info layout with preview image
apps/demos/Demos/Scheduler/Templates/Vue/AppointmentTemplate.vue	Rewrote appointment display to include movie preview image and improved layout structure
apps/demos/Demos/Scheduler/Templates/Vue/App.vue	Major refactoring to use declarative form configuration with custom movie info template and inline HTML generation
apps/demos/Demos/Scheduler/Templates/Angular/app/app.service.ts	Updated movie resource colors to match Vue implementation
apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.ts	Refactored from event-based form handling to declarative form configuration with custom templates
apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.html	Updated templates to use new movie preview layout with flexbox structure
apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.css	Added new CSS rules for movie preview layouts and form styling to match Vue implementation

Comments suppressed due to low confidence (2)

apps/demos/Demos/Scheduler/Templates/Vue/AppointmentTemplate.vue:61

These scoped styles reference .movie-tooltip class which doesn't exist in this component's template. The template uses .movie-preview and .movie-details classes instead. These unused styles should be removed to avoid confusion and maintain code cleanliness.

  .movie-tooltip .movie-info {
    display: inline-block;
    margin-left: 10px;
    vertical-align: top;
    text-align: left;
  }

  .movie-tooltip img {
    height: 80px;
    margin-bottom: 10px;
  }

  .movie-tooltip .movie-title {
    font-size: 1.5em;
    line-height: 40px;
  }

apps/demos/Demos/Scheduler/Templates/Vue/AppointmentTooltipTemplate.vue:20

The scoped styles in this file (lines 40-106 in the full file) include classes like .appointment-content, .appointment-badge, .appointment-dates, .appointment-text, and .delete-appointment that don't correspond to any classes used in this component's template. The template only uses .movie-info, .movie-preview-image, and .movie-details classes. These unused styles should be removed to avoid confusion and maintain code cleanliness.

<template>
  <div class="movie-info">
    <div class="movie-preview-image">
      <img
        :src="movieData.image"
        :alt="movieData.text"
      >
    </div>
    <div class="movie-details">
      <div class="title">
        {{ movieData.text }} ({{ movieData.year }})
      </div>
      <div>
        Director: {{ movieData.director }}
      </div>
      <div>
        Duration: {{ movieData.duration }} minutes
      </div>
    </div>
  </div>

apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.ts

apps/demos/Demos/Scheduler/Templates/Vue/styles.css

apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.ts

apps/demos/Demos/Scheduler/Templates/Vue/App.vue

apps/demos/Demos/Scheduler/Templates/Vue/AppointmentTemplate.vue

apps/demos/Demos/Scheduler/Templates/Vue/App.vue

apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.ts

apps/demos/Demos/Scheduler/Templates/Vue/App.vue

Copilot

Pull Request Overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 13 comments.

apps/demos/Demos/Scheduler/Templates/Vue/App.vue

apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.ts

apps/demos/Demos/Scheduler/Templates/Vue/App.vue

apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.ts

apps/demos/Demos/Scheduler/Templates/Vue/App.vue

apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.ts

Copilot

Pull Request Overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 5 comments.

apps/demos/Demos/Scheduler/Templates/Vue/styles.css

apps/demos/Demos/Scheduler/Templates/Vue/App.vue

apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.ts

apps/demos/Demos/Scheduler/Templates/Vue/App.vue

Copilot

Pull Request Overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

Comments suppressed due to low confidence (1)

apps/demos/Demos/Scheduler/Templates/Vue/AppointmentTemplate.vue:61

These scoped styles reference .movie-tooltip classes that don't exist in the template (the template uses .movie-preview instead). These appear to be leftover styles from the old implementation that should have been removed along with the old template code. Consider removing these unused styles to avoid confusion.

  .movie-tooltip .movie-info {
    display: inline-block;
    margin-left: 10px;
    vertical-align: top;
    text-align: left;
  }

  .movie-tooltip img {
    height: 80px;
    margin-bottom: 10px;
  }

  .movie-tooltip .movie-title {
    font-size: 1.5em;
    line-height: 40px;
  }

Copilot · 2025-11-21T10:05:47Z

apps/demos/Demos/Scheduler/Templates/Vue/AppointmentTooltipTemplate.vue

@@ -1,10 +1,16 @@
 <template>


The template references movieData which is computed from getMovieById, but this function (lines 32-36, not shown in diff) has an incorrect type signature (resourceId: string should be number) and incorrect filter syntax. This could cause runtime issues when comparing the numeric id field with the parameter.

apps/demos/Demos/Scheduler/Templates/Vue/App.vue

apps/demos/Demos/Scheduler/Templates/Vue/styles.css

Copilot

Pull request overview

Copilot reviewed 22 out of 22 changed files in this pull request and generated 12 comments.

Comments suppressed due to low confidence (1)

apps/demos/Demos/Scheduler/Templates/Vue/AppointmentTooltipTemplate.vue:20

Inconsistent filter syntax across Vue components. In App.vue (line 136), the filter uses three parameters: .filter(['id', '=', resourceId]), while in AppointmentTemplate.vue and AppointmentTooltipTemplate.vue, it uses two parameters: .filter(['id', resourceId]). Although both may work, this inconsistency makes the codebase harder to maintain. Consider standardizing on one approach across all Vue components.

<template>
  <div class="movie-info">
    <div class="movie-preview-image">
      <img
        :src="movieData.image"
        :alt="movieData.text"
      >
    </div>
    <div class="movie-details">
      <div class="title">
        {{ movieData.text }} ({{ movieData.year }})
      </div>
      <div>
        Director: {{ movieData.director }}
      </div>
      <div>
        Duration: {{ movieData.duration }} minutes
      </div>
    </div>
  </div>

Copilot · 2025-12-03T16:28:04Z

apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.html

+
+      <dxi-scheduler-item
+        name="endDateGroup"
+        [disabled]="true"


The disabled attribute is used here on a scheduler item, which may be an undocumented feature (similar to React implementations which use @ts-expect-error). This could break in future versions of DevExtreme. Consider verifying if this is an officially supported feature and document its usage, or find a documented alternative approach.

Suggested change

[disabled]="true"

[editorOptions]="{ disabled: true }"

Copilot · 2025-12-03T16:28:04Z

apps/demos/Demos/Scheduler/Templates/Vue/styles.css

+.dx-scheduler-appointment::before {
+  opacity: 0.26 !important;


The use of !important is a code smell that indicates specificity issues in CSS. Using !important makes styles harder to override and maintain. Consider increasing selector specificity instead (e.g., using a more specific selector chain) to avoid needing !important.

Suggested change

.dx-scheduler-appointment::before {

opacity: 0.26 !important;

.dx-scheduler-work-space-week .dx-scheduler-appointment::before,

.dx-scheduler-timeline-day .dx-scheduler-appointment::before {

opacity: 0.26;

Copilot · 2025-12-03T16:28:05Z

apps/demos/Demos/Scheduler/Templates/React/styles.css

+.dx-scheduler-appointment::before {
+  opacity: 0.26 !important;


The use of !important is a code smell that indicates specificity issues in CSS. Using !important makes styles harder to override and maintain. Consider increasing selector specificity instead (e.g., using a more specific selector chain) to avoid needing !important.

Suggested change

.dx-scheduler-appointment::before {

opacity: 0.26 !important;

.dx-scheduler-work-space .dx-scheduler-appointment::before {

opacity: 0.26;

apps/demos/Demos/Scheduler/Templates/Vue/App.vue

apps/demos/Demos/Scheduler/Templates/React/App.tsx

apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.css

Copilot · 2025-12-03T16:28:07Z

apps/demos/Demos/Scheduler/Templates/Vue/App.vue

+  DxForm as DxSchedulerForm,
+  type DxSchedulerTypes,
+} from 'devextreme-vue/scheduler';
+import DxForm, { DxItem, type DxFormTypes } from 'devextreme-vue/form';


Unused import: DxForm is imported but never used in this component. The form instance type is referenced using DxForm['instance'] on line 132, but this could use the direct import from 'devextreme/ui/form' instead (as done in the React/Angular implementations). Consider removing this import or using it consistently.

Copilot · 2025-12-03T16:28:07Z

apps/demos/Demos/Scheduler/Templates/Vue/App.vue

+};
+
+const onFormInitialized = (e: DxFormTypes.InitializedEvent): void => {
+  const form = e.component!;


The non-null assertion operator (!) is used on e.component, but there's no guarantee that e.component is non-null. If e.component is null or undefined, this will cause a runtime error. The React and Angular implementations don't use this assertion. Consider adding a null check or removing the assertion if the component is guaranteed to exist.

Suggested change

const form = e.component!;

const form = e.component;

if (!form) {

return;

}

apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.ts

apps/demos/Demos/Scheduler/Templates/React/App.tsx

Copilot

Pull request overview

Copilot reviewed 22 out of 22 changed files in this pull request and generated 21 comments.

Copilot · 2025-12-03T17:27:57Z

apps/demos/Demos/Scheduler/Templates/React/App.tsx

+      <Editing
+        allowAdding={false}
+        popup={{
+          maxWidth: 440,


The property name maxWidth is used here, but in the Vue implementation and Angular implementation, width is used. This inconsistency could lead to different popup behaviors across framework implementations. Consider using width consistently to ensure uniform appearance.

Suggested change

maxWidth: 440,

width: 440,

Copilot · 2025-12-03T17:27:58Z

apps/demos/Demos/Scheduler/Templates/Vue/MovieInfoContainer.vue

+      v-else
+      class="movie-info"
+    >
+      <div class="movie-preview-image"/>


The empty movie-preview-image div in the "no movie selected" state should include an aria-label or other accessible indicator to inform screen reader users that this is a placeholder image area.

Suggested change

<div class="movie-preview-image"/>

<div class="movie-preview-image" aria-label="Movie preview image placeholder"/>

Copilot · 2025-12-03T17:27:58Z

apps/demos/Demos/Scheduler/Templates/Vue/App.vue

+  const isMaterialOrFluent = document.querySelector('.dx-theme-fluent, .dx-theme-material');
+  return isMaterialOrFluent ? 'filled' : 'outlined';
+};
+


The getEditorStylingMode function is called directly in the template binding, which means it will be executed on every render. This can impact performance. Consider computing this value once during initialization or memoizing it, especially since theme detection is unlikely to change during component lifecycle.

Suggested change

// Compute once during setup

const editorStylingMode = getEditorStylingMode();

Copilot · 2025-12-03T17:27:59Z

apps/demos/Demos/Scheduler/Templates/ReactJs/AppointmentTooltip.js

 import { query as Query } from 'devextreme-react/common/data';
 import { moviesData } from './data.js';

 const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0];


The getMovieById function has incorrect filter syntax. It should use ['id', '=', id] instead of ['id', id] to match the query filter API and be consistent with other implementations.

Suggested change

const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0];

const getMovieById = (id) => Query(moviesData).filter(['id', '=', id]).toArray()[0];

Copilot · 2025-12-03T17:27:59Z

apps/demos/Demos/Scheduler/Templates/React/MovieInfoContainer.tsx

+  formInstanceRef: React.RefObject<dxForm | null>;
+};
+
+const getMovieById = (id: number) => query(moviesData).filter(['id', id]).toArray()[0];


The getMovieById function has incorrect filter syntax. It should use ['id', '=', id] instead of ['id', id] to match the query filter API and be consistent with other implementations (Vue at line 136, Angular at line 63).

Suggested change

const getMovieById = (id: number) => query(moviesData).filter(['id', id]).toArray()[0];

const getMovieById = (id: number) => query(moviesData).filter(['id', '=', id]).toArray()[0];

Copilot · 2025-12-03T17:28:04Z

apps/demos/Demos/Scheduler/Templates/ReactJs/App.js

+const updateEndDate = (form, movie) => {
+  const formData = form.option('formData');
+  const { startDate } = formData;
+  if (startDate && movie?.duration) {
+    const newEndDate = new Date(startDate.getTime() + 60 * 1000 * movie.duration);
+    form.updateData('endDate', newEndDate);
+  }


The updateEndDate function doesn't check if formData exists before accessing startDate. While the outer checks for startDate exist, adding a null check for formData would make the code more robust and prevent potential runtime errors.

Copilot · 2025-12-03T17:28:04Z

apps/demos/Demos/Scheduler/Templates/React/App.tsx

+const updateEndDate = (form: dxForm, movie: MovieResource): void => {
+  const formData = form.option('formData');
+  const { startDate } = formData;
+  if (startDate && movie?.duration) {
+    const newEndDate = new Date(startDate.getTime() + 60 * 1000 * movie.duration);
+    form.updateData('endDate', newEndDate);
+  }


The updateEndDate function doesn't check if formData exists before accessing startDate. While the outer checks for startDate exist, adding a null check for formData would make the code more robust and prevent potential runtime errors.

Copilot · 2025-12-03T17:28:05Z

apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.html

+    </ng-container>
+    <ng-template #noMovieSelected>
+      <div class="movie-info">
+        <div class="movie-preview-image"></div>


The empty movie-preview-image div in the "no movie selected" state should include an aria-label or other accessible indicator to inform screen reader users that this is a placeholder image area.

Suggested change

<div class="movie-preview-image"></div>

<div class="movie-preview-image" aria-label="Movie image placeholder"></div>

Copilot · 2025-12-03T17:28:05Z

apps/demos/Demos/Scheduler/Templates/ReactJs/App.js

+                items: moviesData,
+                displayExpr: 'text',
+                valueExpr: 'id',
+                stylingMode: getEditorStylingMode(),


The getEditorStylingMode function is called directly in the editorOptions, which means it will be executed on every render. Consider memoizing this value using useMemo since theme detection is unlikely to change during component lifecycle.

Copilot · 2025-12-03T17:28:05Z

apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.html

+            {{
+              (model.targetedAppointmentData.displayStartDate
+                | date : "shortTime") +
+                " - " +
+                (model.targetedAppointmentData.displayEndDate
+                  | date : "shortTime")
+            }}


The date formatting expression is split across multiple lines in a complex way. Consider extracting this formatting logic to a method in the component for better readability and maintainability.

Suggested change

{{

(model.targetedAppointmentData.displayStartDate

| date : "shortTime") +

" - " +

(model.targetedAppointmentData.displayEndDate

| date : "shortTime")

}}

{{ formatAppointmentTime(model.targetedAppointmentData) }}

Copilot

Pull request overview

Copilot reviewed 22 out of 22 changed files in this pull request and generated 19 comments.

apps/demos/Demos/Scheduler/Templates/React/MovieInfoContainer.tsx

apps/demos/Demos/Scheduler/Templates/ReactJs/App.js

apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.ts

apps/demos/Demos/Scheduler/Templates/ReactJs/App.js

apps/demos/Demos/Scheduler/Templates/React/App.tsx

apps/demos/Demos/Scheduler/Templates/ReactJs/App.js

apps/demos/Demos/Scheduler/Templates/ReactJs/MovieInfoContainer.js

Copilot

Pull request overview

Copilot reviewed 22 out of 22 changed files in this pull request and generated 9 comments.

Copilot · 2025-12-03T19:05:47Z

apps/demos/Demos/Scheduler/Templates/Vue/App.vue

+      <DxEditing
+        :allow-adding="false"
+        :popup="{
+          maxWidth: 440,


Inconsistent popup width property across frameworks. Vue uses width: 440 while React (line 116 in React/App.tsx), ReactJs (line 95 in ReactJs/App.js), and Angular (line 34 in Angular/app.component.html) all use maxWidth: 440. This should be maxWidth to be consistent with other implementations and to match the popup configuration pattern used in the rest of the codebase.

Copilot · 2025-12-03T19:05:47Z

apps/demos/Demos/Scheduler/Templates/Vue/App.vue

+            />
+          </DxItem>
+
+          <DxItem name="startDateGroup"/>


Missing itemType="group" attribute. React (line 153 in React/App.tsx), ReactJs (line 137 in ReactJs/App.js), and Angular (line 79 in Angular/app.component.html) all specify itemType="group" for startDateGroup. Vue should include item-type="group" for consistency.

Suggested change

<DxItem name="startDateGroup"/>

<DxItem name="startDateGroup" item-type="group"/>

Copilot · 2025-12-03T19:05:48Z

apps/demos/Demos/Scheduler/Templates/Vue/App.vue

+
+          <DxItem
+            :disabled="true"
+            name="endDateGroup"


Missing item-type="group" attribute. React (line 155 in React/App.tsx), ReactJs (line 143 in ReactJs/App.js), and Angular (line 82 in Angular/app.component.html) all specify itemType="group" for endDateGroup. Vue should include item-type="group" for consistency.

Suggested change

name="endDateGroup"

name="endDateGroup"

item-type="group"

Copilot · 2025-12-03T19:05:48Z

apps/demos/Demos/Scheduler/Templates/ReactJs/MovieInfoContainer.js

+import { query } from 'devextreme-react/common/data';
+import { moviesData } from './data.js';
+
+const getMovieById = (id) => query(moviesData).filter(['id', id]).toArray()[0];


Inconsistent query filter syntax. This uses filter(['id', id]) while Vue (line 136 in Vue/App.vue) and Angular (line 63 in Angular/app.component.ts) use filter(['id', '=', id]) with an explicit equality operator. For consistency and clarity, consider using the explicit 3-parameter form: filter(['id', '=', id])

Suggested change

const getMovieById = (id) => query(moviesData).filter(['id', id]).toArray()[0];

const getMovieById = (id) => query(moviesData).filter(['id', '=', id]).toArray()[0];

Copilot · 2025-12-03T19:05:48Z

apps/demos/Demos/Scheduler/Templates/ReactJs/AppointmentTooltip.js

 import { query as Query } from 'devextreme-react/common/data';
 import { moviesData } from './data.js';

 const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0];


Inconsistent query filter syntax. This uses filter(['id', id]) while Vue (line 136 in Vue/App.vue) and Angular (line 63 in Angular/app.component.ts) use filter(['id', '=', id]) with an explicit equality operator. For consistency and clarity, consider using the explicit 3-parameter form: filter(['id', '=', id])

Suggested change

const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0];

const getMovieById = (id) => Query(moviesData).filter(['id', '=', id]).toArray()[0];

Copilot · 2025-12-03T19:05:49Z

apps/demos/Demos/Scheduler/Templates/React/AppointmentTooltip.tsx

 import { moviesData } from './data.ts';

-const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0];
+const getMovieById = (id: number) => Query(moviesData).filter(['id', id]).toArray()[0];


Inconsistent query filter syntax. This uses filter(['id', id]) while Vue (line 136 in Vue/App.vue) and Angular (line 63 in Angular/app.component.ts) use filter(['id', '=', id]) with an explicit equality operator. For consistency and clarity, consider using the explicit 3-parameter form: filter(['id', '=', id])

Suggested change

const getMovieById = (id: number) => Query(moviesData).filter(['id', id]).toArray()[0];

const getMovieById = (id: number) => Query(moviesData).filter(['id', '=', id]).toArray()[0];

Copilot · 2025-12-03T19:05:49Z

apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.ts

+    const formData = form.option('formData');
+    if (formData?.movieId) {
+      const movie = this.getMovieById(formData.movieId);
+      this.currentSelectedMovie = movie;


Potential type mismatch. currentSelectedMovie is typed as MovieData | null (line 55), but getMovieById returns MovieData | undefined (line 63). The assignment on line 116 should handle the undefined case explicitly. Consider changing the type to MovieData | null | undefined or converting undefined to null explicitly: this.currentSelectedMovie = movie ?? null;

Copilot · 2025-12-03T19:05:50Z

apps/demos/Demos/Scheduler/Templates/ReactJs/App.js

-      },
-    },
-  ]);
+const getMovieById = (id) => query(moviesData).filter(['id', id]).toArray()[0];


Inconsistent query filter syntax. This uses filter(['id', id]) while Vue (line 136 in Vue/App.vue) and Angular (line 63 in Angular/app.component.ts) use filter(['id', '=', id]) with an explicit equality operator. For consistency and clarity, consider using the explicit 3-parameter form: filter(['id', '=', id])

Suggested change

const getMovieById = (id) => query(moviesData).filter(['id', id]).toArray()[0];

const getMovieById = (id) => query(moviesData).filter(['id', '=', id]).toArray()[0];

Copilot · 2025-12-03T19:05:50Z

apps/demos/Demos/Scheduler/Templates/ReactJs/Appointment.js

 import { formatDate } from 'devextreme-react/common/core/localization';
 import { moviesData } from './data.js';

 const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0];


Inconsistent query filter syntax. This uses filter(['id', id]) while Vue (line 136 in Vue/App.vue) and Angular (line 63 in Angular/app.component.ts) use filter(['id', '=', id]) with an explicit equality operator. For consistency and clarity, consider using the explicit 3-parameter form: filter(['id', '=', id])

Suggested change

const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0];

const getMovieById = (id) => Query(moviesData).filter(['id', '=', id]).toArray()[0];

sjbur · 2025-12-01T14:12:25Z

apps/demos/Demos/Scheduler/Templates/Vue/App.vue

 import { type DxSelectBoxTypes } from 'devextreme-vue/select-box';
-import { type DxDateBoxTypes } from 'devextreme-vue/date-box';
-import { query as Query } from 'devextreme-vue/common/data';
+import query from 'devextreme/data/query';


Don't you have here a ts error "Cannot find module 'devextreme/data/query' or its corresponding type declarations.ts-plugin(2307)" ?

I was able to solve it with "import { query } from 'devextreme-vue/common/data';"

aleksei-semikozov self-assigned this Nov 17, 2025

aleksei-semikozov requested a review from a team as a code owner November 17, 2025 14:12

Copilot AI review requested due to automatic review settings November 17, 2025 14:12

aleksei-semikozov added the 25_2 label Nov 17, 2025

Copilot started reviewing on behalf of aleksei-semikozov November 17, 2025 14:13 View session

Copilot finished reviewing on behalf of aleksei-semikozov November 17, 2025 14:17

Copilot AI reviewed Nov 17, 2025

View reviewed changes

aleksei-semikozov force-pushed the rewrite-scheduler-demo branch from 7292ab8 to e9d5aeb Compare November 19, 2025 11:46

Copilot AI review requested due to automatic review settings November 19, 2025 13:13

aleksei-semikozov force-pushed the rewrite-scheduler-demo branch from e9d5aeb to debe74d Compare November 19, 2025 13:13

Copilot started reviewing on behalf of aleksei-semikozov November 19, 2025 13:14 View session

Copilot finished reviewing on behalf of aleksei-semikozov November 19, 2025 13:16

Copilot AI reviewed Nov 19, 2025

View reviewed changes

aleksei-semikozov force-pushed the rewrite-scheduler-demo branch from debe74d to 95bb151 Compare November 19, 2025 15:35

Copilot AI review requested due to automatic review settings November 19, 2025 18:55

Copilot started reviewing on behalf of aleksei-semikozov November 19, 2025 18:56 View session

Copilot finished reviewing on behalf of aleksei-semikozov November 19, 2025 18:58

Copilot AI reviewed Nov 19, 2025

View reviewed changes

aleksei-semikozov force-pushed the rewrite-scheduler-demo branch from d158fc6 to e8faee1 Compare November 20, 2025 19:42

Copilot AI review requested due to automatic review settings November 21, 2025 09:55

aleksei-semikozov force-pushed the rewrite-scheduler-demo branch from e8faee1 to 55e2197 Compare November 21, 2025 09:55

Copilot started reviewing on behalf of aleksei-semikozov November 21, 2025 09:55 View session

Copilot finished reviewing on behalf of aleksei-semikozov November 21, 2025 09:59

Copilot AI reviewed Nov 21, 2025

View reviewed changes

aleksei-semikozov force-pushed the rewrite-scheduler-demo branch from 55e2197 to 164112a Compare November 21, 2025 10:43

Copilot AI review requested due to automatic review settings December 1, 2025 07:27

aleksei-semikozov force-pushed the rewrite-scheduler-demo branch 2 times, most recently from b059adb to 560b312 Compare December 1, 2025 07:28

Copilot started reviewing on behalf of aleksei-semikozov December 1, 2025 07:28 View session

Copilot finished reviewing on behalf of aleksei-semikozov December 1, 2025 07:31

Fix

50f4758

Copilot AI review requested due to automatic review settings December 3, 2025 16:14

Copilot started reviewing on behalf of aleksei-semikozov December 3, 2025 16:15 View session

Copilot finished reviewing on behalf of aleksei-semikozov December 3, 2025 16:22

Fix

e729424

Copilot AI reviewed Dec 3, 2025

View reviewed changes

Rename MoviewInfoForm -> MovieInfoContainer in React demo

35b99ce

aleksei-semikozov changed the title ~~Rewrite Customization/Templates demo(Angular/Vue)~~ Rewrite Customization/Templates demo Dec 3, 2025

Reconvert js

2eb6a47

Copilot AI review requested due to automatic review settings December 3, 2025 17:14

Copilot started reviewing on behalf of aleksei-semikozov December 3, 2025 17:15 View session

Copilot finished reviewing on behalf of aleksei-semikozov December 3, 2025 17:22

Copilot AI reviewed Dec 3, 2025

View reviewed changes

aleksei-semikozov added 2 commits December 3, 2025 14:52

Fix typescript error

3bec681

Regenerate js

cf18cd4

Copilot AI review requested due to automatic review settings December 3, 2025 18:09

Copilot started reviewing on behalf of aleksei-semikozov December 3, 2025 18:09 View session

Copilot finished reviewing on behalf of aleksei-semikozov December 3, 2025 18:18

Copilot AI reviewed Dec 3, 2025

View reviewed changes

aleksei-semikozov added 2 commits December 3, 2025 15:36

Fix after review

e498141

Merge branch '25_2' into rewrite-scheduler-demo

66b9c0e

Copilot AI review requested due to automatic review settings December 3, 2025 18:53

Copilot started reviewing on behalf of aleksei-semikozov December 3, 2025 18:54 View session

aleksei-semikozov added 2 commits December 3, 2025 15:57

Fix width -> maxWidth for Vue

647f698

Rename movie container render

7f48c5a

Copilot finished reviewing on behalf of aleksei-semikozov December 3, 2025 19:03

Copilot AI reviewed Dec 3, 2025

View reviewed changes

sjbur approved these changes Dec 3, 2025

View reviewed changes

aleksei-semikozov merged commit 303b065 into DevExpress:25_2 Dec 3, 2025
115 of 116 checks passed

Tucchhaa changed the title ~~Rewrite Customization/Templates demo~~ Scheduler Demos - Update Customization/Templates demo for Anglar/Vue Dec 4, 2025

		.dx-scheduler-appointment::before {
		opacity: 0.26 !important;

-.dx-scheduler-appointment::before {
-  opacity: 0.26 !important;
+.dx-scheduler-work-space-week .dx-scheduler-appointment::before,
+.dx-scheduler-timeline-day .dx-scheduler-appointment::before {
+  opacity: 0.26;

-  const form = e.component!;
+  const form = e.component;
+  if (!form) {
+    return;
+  }

	<div class="movie-preview-image"/>
	<div class="movie-preview-image" aria-label="Movie preview image placeholder"/>



	// Compute once during setup
	const editorStylingMode = getEditorStylingMode();

	const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0];
	const getMovieById = (id) => Query(moviesData).filter(['id', '=', id]).toArray()[0];

	const getMovieById = (id: number) => query(moviesData).filter(['id', id]).toArray()[0];
	const getMovieById = (id: number) => query(moviesData).filter(['id', '=', id]).toArray()[0];

	<div class="movie-preview-image"></div>
	<div class="movie-preview-image" aria-label="Movie image placeholder"></div>

	<DxItem name="startDateGroup"/>
	<DxItem name="startDateGroup" item-type="group"/>

Scheduler Demos - Update Customization/Templates demo for Anglar/Vue #31738

Scheduler Demos - Update Customization/Templates demo for Anglar/Vue #31738

Uh oh!

Conversation

aleksei-semikozov commented Nov 17, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview