Scheduler - Hide days in week/month: write demo

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

@@ -0,0 +1,55 @@
+.hidden-days-demo {
+  display: flex;
+  gap: 20px;
+}
+
+.scheduler-container {
+  flex: 1;
+  min-width: 0;
+}
+
+.options {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: 220px;
+  box-sizing: border-box;
+  padding: 20px;
+  background-color: rgba(191, 191, 191, 0.15);
+  gap: 12px;
+}
+
+.caption {
+  font-weight: 500;
+  font-size: 18px;
+}
+
+.option {
+  display: flex;
+  flex-direction: column;
+}
+
+.validation-message {
+  display: none;
+  margin-top: 8px;
+  padding: 10px 12px;
+  background: #fdf3f4;
+  border-left: 3px solid #c50f1f;
+  border-radius: 4px;
+  color: #c50f1f;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+::ng-deep .hidden-days-demo.is-invalid .validation-message {
+  display: block;
+}
+
+::ng-deep .hidden-days-demo.is-invalid .option .dx-checkbox-icon {
+  border-color: #c50f1f;
+}
+
+::ng-deep .hidden-days-demo.is-invalid .dx-scheduler-work-space {
+  opacity: 0.4;
+  pointer-events: none;
+}

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

@@ -0,0 +1,32 @@
+<div class="hidden-days-demo" [class.is-invalid]="isInvalid">
+  <div class="scheduler-container">
+    <dx-scheduler
+      [dataSource]="dataSource"
+      [views]="['week', 'workWeek', 'month', 'timelineWeek', 'agenda']"
+      [hiddenWeekDays]="hiddenWeekDays"
+      currentView="week"
+      [currentDate]="currentDate"
+      timeZone="America/Los_Angeles"
+      [startDayHour]="9"
+      [height]="730"
+    >
+    </dx-scheduler>
+  </div>
+
+  <div class="options">
+    <div class="caption">Visible Week Days</div>
+    @for (day of dayLabels; track day.index) {
+    <div class="option">
+      <dx-check-box
+        [text]="day.label"
+        [value]="day.visible"
+        (onValueChanged)="onDayToggled($event, day.index)"
+      >
+      </dx-check-box>
+    </div>
+    }
+    <div class="validation-message">
+      {{ validationMessage }}
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,80 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { DxSchedulerModule, DxSchedulerTypes } from 'devextreme-angular/ui/scheduler';
+import { DxCheckBoxModule, DxCheckBoxTypes } from 'devextreme-angular/ui/check-box';
+import { ArrayStore } from 'devextreme-angular/common/data';
+import { DataService } from './app.service';
+
+if (!/localhost/.test(document.location.host)) {
+  enableProdMode();
+}
+
+let modulePrefix = '';
+// @ts-ignore
+if (window && window.config?.packageConfigPaths) {
+  modulePrefix = '/app';
+}
+
+interface DayLabel {
+  index: DxSchedulerTypes.DayOfWeek;
+  label: string;
+  visible: boolean;
+}
+
+@Component({
+  selector: 'demo-app',
+  templateUrl: `.${modulePrefix}/app.component.html`,
+  styleUrls: [`.${modulePrefix}/app.component.css`],
+  providers: [DataService],
+  imports: [
+    DxSchedulerModule,
+    DxCheckBoxModule,
+  ],
+})
+export class AppComponent {
+  dataSource: ArrayStore;
+
+  currentDate = new Date(2021, 3, 26);
+
+  validationMessage = 'The hiddenWeekDays option cannot hide all days of the week. At least one day must remain visible.';
+
+  dayLabels: DayLabel[] = [
+    { index: 0, label: 'Sunday', visible: true },
+    { index: 1, label: 'Monday', visible: true },
+    { index: 2, label: 'Tuesday', visible: true },
+    { index: 3, label: 'Wednesday', visible: false },
+    { index: 4, label: 'Thursday', visible: true },
+    { index: 5, label: 'Friday', visible: false },
+    { index: 6, label: 'Saturday', visible: true },
+  ];
+
+  hiddenWeekDays: DxSchedulerTypes.DayOfWeek[] = [];
+
+  isInvalid = false;
+
+  constructor(dataService: DataService) {
+    this.dataSource = new ArrayStore({
+      key: 'id',
+      data: dataService.getAppointments(),
+    });
+    this.hiddenWeekDays = this.computeHiddenWeekDays();
+  }
+
+  onDayToggled(e: DxCheckBoxTypes.ValueChangedEvent, dayIndex: number): void {
+    this.dayLabels[dayIndex].visible = e.value;
+    this.isInvalid = this.dayLabels.every((d) => !d.visible);
+    this.hiddenWeekDays = this.computeHiddenWeekDays();
+  }
+
+  private computeHiddenWeekDays(): DxSchedulerTypes.DayOfWeek[] {
+    return this.dayLabels
+      .filter((d) => !d.visible)
+      .map((d) => d.index);
+  }
+}
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
+  ],
+});

apps/demos/Demos/Scheduler/HiddenDays/Angular/app/app.service.ts

@@ -0,0 +1,121 @@
+import { Injectable } from '@angular/core';
+
+export class Appointment {
+  id: number;
+
+  text: string;
+
+  startDate: Date;
+
+  endDate: Date;
+
+  allDay?: boolean;
+}
+
+const appointments: Appointment[] = [
+  {
+    id: 1,
+    text: 'Website Re-Design Plan',
+    startDate: new Date('2021-04-26T16:30:00.000Z'),
+    endDate: new Date('2021-04-26T18:30:00.000Z'),
+  },
+  {
+    id: 2,
+    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,
+  },
+  {
+    id: 3,
+    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'),
+  },
+  {
+    id: 4,
+    text: 'Approve Personal Computer Upgrade Plan',
+    startDate: new Date('2021-04-27T17:00:00.000Z'),
+    endDate: new Date('2021-04-27T18:00:00.000Z'),
+  },
+  {
+    id: 5,
+    text: 'Final Budget Review',
+    startDate: new Date('2021-04-27T19:00:00.000Z'),
+    endDate: new Date('2021-04-27T20:35:00.000Z'),
+  },
+  {
+    id: 6,
+    text: 'New Brochures',
+    startDate: new Date('2021-04-27T21:30:00.000Z'),
+    endDate: new Date('2021-04-27T22:45:00.000Z'),
+  },
+  {
+    id: 7,
+    text: 'Install New Database',
+    startDate: new Date('2021-04-28T16:45:00.000Z'),
+    endDate: new Date('2021-04-28T18:15:00.000Z'),
+  },
+  {
+    id: 8,
+    text: 'Approve New Online Marketing Strategy',
+    startDate: new Date('2021-04-28T19:00:00.000Z'),
+    endDate: new Date('2021-04-28T21:00:00.000Z'),
+  },
+  {
+    id: 9,
+    text: 'Upgrade Personal Computers',
+    startDate: new Date('2021-04-28T22:15:00.000Z'),
+    endDate: new Date('2021-04-28T23:30:00.000Z'),
+  },
+  {
+    id: 10,
+    text: 'Customer Workshop',
+    startDate: new Date('2021-04-29T18:00:00.000Z'),
+    endDate: new Date('2021-04-29T19:00:00.000Z'),
+    allDay: true,
+  },
+  {
+    id: 11,
+    text: 'Prepare 2021 Marketing Plan',
+    startDate: new Date('2021-04-29T18:00:00.000Z'),
+    endDate: new Date('2021-04-29T20:30:00.000Z'),
+  },
+  {
+    id: 12,
+    text: 'Brochure Design Review',
+    startDate: new Date('2021-04-29T21:00:00.000Z'),
+    endDate: new Date('2021-04-29T22:30:00.000Z'),
+  },
+  {
+    id: 13,
+    text: 'Create Icons for Website',
+    startDate: new Date('2021-04-30T17:00:00.000Z'),
+    endDate: new Date('2021-04-30T18:30:00.000Z'),
+  },
+  {
+    id: 14,
+    text: 'Upgrade Server Hardware',
+    startDate: new Date('2021-04-30T21:30:00.000Z'),
+    endDate: new Date('2021-04-30T23:00:00.000Z'),
+  },
+  {
+    id: 15,
+    text: 'Submit New Website Design',
+    startDate: new Date('2021-04-30T23:30:00.000Z'),
+    endDate: new Date('2021-05-01T01:00:00.000Z'),
+  },
+  {
+    id: 16,
+    text: 'Launch New Website',
+    startDate: new Date('2021-04-30T19:20:00.000Z'),
+    endDate: new Date('2021-04-30T21:00:00.000Z'),
+  },
+];
+
+@Injectable()
+export class DataService {
+  getAppointments(): Appointment[] {
+    return appointments;
+  }
+}

apps/demos/Demos/Scheduler/HiddenDays/Angular/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+  <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=5.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/bundles/zone.umd.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>

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

@@ -0,0 +1,69 @@
+import React, { useCallback, useMemo, useState } from 'react';
+
+import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler';
+import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box';
+import { ArrayStore } from 'devextreme-react/common/data';
+import { data } from './data.ts';
+
+const dataSource = new ArrayStore({
+  key: 'id',
+  data,
+});
+
+const allDays: SchedulerTypes.DayOfWeek[] = [0, 1, 2, 3, 4, 5, 6];
+const dayLabels = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const defaultVisible: SchedulerTypes.DayOfWeek[] = [0, 1, 2, 4, 6];
+const views: SchedulerTypes.Properties['views'] = ['week', 'workWeek', 'month', 'timelineWeek', 'agenda'];
+const currentDate = new Date(2021, 3, 26);
+const VALIDATION_MESSAGE = 'The hiddenWeekDays option cannot hide all days of the week. At least one day must remain visible.';
+
+const App = () => {
+  const [visibleDays, setVisibleDays] = useState<SchedulerTypes.DayOfWeek[]>(defaultVisible);
+
+  const isInvalid = visibleDays.length === 0;
+
+  const hiddenWeekDays = useMemo(
+    () => allDays.filter((d) => !visibleDays.includes(d)),
+    [visibleDays],
+  );
+
+  const onDayToggle = useCallback((dayIndex: SchedulerTypes.DayOfWeek, e: CheckBoxTypes.ValueChangedEvent) => {
+    setVisibleDays((prev) => (e.value
+      ? [...prev, dayIndex]
+      : prev.filter((d) => d !== dayIndex)));
+  }, []);
+
+  return (
+    <div className={`hidden-days-demo${isInvalid ? ' is-invalid' : ''}`}>
+      <div className="scheduler-container">
+        <Scheduler
+          timeZone="America/Los_Angeles"
+          dataSource={dataSource}
+          views={views}
+          hiddenWeekDays={hiddenWeekDays}
+          defaultCurrentView="week"
+          defaultCurrentDate={currentDate}
+          startDayHour={9}
+          height={730}
+        />
+      </div>
+      <div className="options">
+        <div className="caption">Visible Week Days</div>
+        {dayLabels.map((label, idx) => (
+          <div className="option" key={label}>
+            <CheckBox
+              text={label}
+              value={visibleDays.includes(idx as SchedulerTypes.DayOfWeek)}
+              onValueChanged={(e) => onDayToggle(idx as SchedulerTypes.DayOfWeek, e)}
+            />
+          </div>
+        ))}
+        <div className="validation-message">
+          {VALIDATION_MESSAGE}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default App;