feat(react-scheduler): add a capability to set Scheduler's height (#2043

)
DevExpress · May 24, 2019 · 6c140a5 · 6c140a5
1 parent bde0299
commit 6c140a5
Show file tree

Hide file tree

Showing 46 changed files with 119 additions and 38 deletions.
diff --git a/...-react-scheduler-demos/src/demo-sources/scheduler-all-day-panel/material-ui/week-view.jsx b/...-react-scheduler-demos/src/demo-sources/scheduler-all-day-panel/material-ui/week-view.jsx
@@ -27,6 +27,7 @@ export default class Demo extends React.PureComponent {
       <Paper>
         <Scheduler
           data={data}
+          height={660}
         >
           <ViewState
             defaultCurrentDate={currentDate}

diff --git a/...ges/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/basic-setup.jsx b/...ges/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/basic-setup.jsx
@@ -9,8 +9,8 @@ import {
 
 const currentDate = '2018-11-01';
 const schedulerData = [
-  { startDate: '2018-11-01 10:00', endDate: '2018-11-01 11:00', title: 'Meeting' },
-  { startDate: '2018-11-01 12:30', endDate: '2018-11-01 14:30', title: 'Go to a gym' },
+  { startDate: '2018-11-01T09:45', endDate: '2018-11-01T11:00', title: 'Meeting' },
+  { startDate: '2018-11-01T12:00', endDate: '2018-11-01T13:30', title: 'Go to a gym' },
 ];
 
 export default () => (
@@ -23,7 +23,7 @@ export default () => (
       />
       <DayView
         startDayHour={9}
-        endDayHour={16}
+        endDayHour={14}
       />
       <Appointments />
     </Scheduler>

diff --git a/...dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/custom-template.jsx b/...dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/custom-template.jsx
@@ -76,6 +76,7 @@ export default class Demo extends React.PureComponent {
       <Paper>
         <Scheduler
           data={data}
+          height={660}
         >
           <ViewState />
           <WeekView

diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/day.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/day.jsx
@@ -25,8 +25,8 @@ export default class Demo extends React.PureComponent {
           data={data}
         >
           <DayView
-            startDayHour={9}
-            endDayHour={19}
+            startDayHour={8}
+            endDayHour={13}
           />
           <Appointments />
         </Scheduler>

diff --git a/...dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/simple-template.jsx b/...dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/simple-template.jsx
@@ -40,6 +40,7 @@ export default class Demo extends React.PureComponent {
       <Paper>
         <Scheduler
           data={data}
+          height={660}
         >
           <ViewState
             currentDate={currentDate}

diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/week.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/week.jsx
@@ -23,6 +23,7 @@ export default class Demo extends React.PureComponent {
       <Paper>
         <Scheduler
           data={data}
+          height={660}
         >
           <WeekView
             startDayHour={9}

diff --git a/...eact-scheduler-demos/src/demo-sources/scheduler-date-navigator/material-ui/controlled.jsx b/...eact-scheduler-demos/src/demo-sources/scheduler-date-navigator/material-ui/controlled.jsx
@@ -29,6 +29,7 @@ export default class Demo extends React.PureComponent {
       <Paper>
         <Scheduler
           data={data}
+          height={660}
         >
           <ViewState
             currentDate={currentDate}

diff --git a/...es/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/controlled.jsx b/...es/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/controlled.jsx
@@ -67,6 +67,7 @@ export default class Demo extends React.PureComponent {
       <Paper>
         <Scheduler
           data={data}
+          height={660}
         >
           <ViewState
             currentDate={currentDate}

diff --git a/...ct-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/delete-confirmation.jsx b/...ct-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/delete-confirmation.jsx
@@ -101,6 +101,7 @@ export default class Demo extends React.PureComponent {
       <Paper>
         <Scheduler
           data={data}
+          height={660}
         >
           <ViewState
             currentDate={currentDate}

diff --git a/...ges/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/drag-drop.jsx b/...ges/dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/drag-drop.jsx
@@ -56,6 +56,7 @@ export default class Demo extends React.PureComponent {
       <Paper>
         <Scheduler
           data={data}
+          height={660}
         >
           <ViewState
             defaultCurrentDate={currentDate}

diff --git a/.../dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/uncontrolled.jsx b/.../dx-react-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/uncontrolled.jsx
@@ -47,6 +47,7 @@ export default class Demo extends React.PureComponent {
       <Paper>
         <Scheduler
           data={data}
+          height={660}
         >
           <ViewState
             currentDate={currentDate}

diff --git a/...r-demos/src/demo-sources/scheduler-featured-appearance-customization/material-ui/demo.jsx b/...r-demos/src/demo-sources/scheduler-featured-appearance-customization/material-ui/demo.jsx
@@ -262,7 +262,10 @@ export default class Demo extends React.PureComponent {
 
     return (
       <Paper>
-        <Scheduler data={filterTasks(data, currentPriority)}>
+        <Scheduler
+          data={filterTasks(data, currentPriority)}
+          height={660}
+        >
           <ViewState
             currentDate={currentDate}
             currentViewName={currentViewName}

diff --git a/...dx-react-scheduler-demos/src/demo-sources/scheduler-featured-editing/material-ui/demo.jsx b/...dx-react-scheduler-demos/src/demo-sources/scheduler-featured-editing/material-ui/demo.jsx
@@ -368,6 +368,7 @@ class Demo extends React.PureComponent {
       <Paper>
         <Scheduler
           data={data}
+          height={660}
         >
           <ViewState
             currentDate={currentDate}

diff --git a/...eact-scheduler-demos/src/demo-sources/scheduler-featured-remote-data/material-ui/demo.jsx b/...eact-scheduler-demos/src/demo-sources/scheduler-featured-remote-data/material-ui/demo.jsx
@@ -117,15 +117,22 @@ export default class Demo extends React.PureComponent {
       <Paper>
         <Scheduler
           data={formattedData}
+          height={660}
         >
           <ViewState
             currentDate={currentDate}
             currentViewName={currentViewName}
             onCurrentViewNameChange={this.currentViewNameChange}
             onCurrentDateChange={this.currentDateChange}
           />
-          <DayView startDayHour={8} />
-          <WeekView startDayHour={8} />
+          <DayView
+            startDayHour={9}
+            endDayHour={18}
+          />
+          <WeekView
+            startDayHour={9}
+            endDayHour={18}
+          />
           <Appointments />
           <Toolbar
             {...loading ? { rootComponent: ToolbarWithLoading } : null}

diff --git a/...scheduler-demos/src/demo-sources/scheduler-localization/material-ui/custom-formatting.jsx b/...scheduler-demos/src/demo-sources/scheduler-localization/material-ui/custom-formatting.jsx
@@ -41,6 +41,7 @@ export default class Demo extends React.PureComponent {
         <Scheduler
           data={data}
           locale={locale}
+          height={660}
         >
           <ViewState
             defaultCurrentDate={currentDate}

diff --git a/...s/dx-react-scheduler-demos/src/demo-sources/scheduler-localization/material-ui/locale.jsx b/...s/dx-react-scheduler-demos/src/demo-sources/scheduler-localization/material-ui/locale.jsx
@@ -86,6 +86,7 @@ export default class Demo extends React.PureComponent {
           <Scheduler
             data={data}
             locale={locale}
+            height={660}
           >
             <ViewState
               defaultCurrentDate={currentDate}

diff --git a/...ages/dx-react-scheduler-demos/src/demo-sources/scheduler-recurrence/material-ui/basic.jsx b/...ages/dx-react-scheduler-demos/src/demo-sources/scheduler-recurrence/material-ui/basic.jsx
@@ -26,8 +26,8 @@ const appointments = [{
   exDate: '20180627T091100Z',
 }, {
   title: 'Install New Router in Dev Room',
-  startDate: new Date(2018, 5, 25, 14, 30),
-  endDate: new Date(2018, 5, 25, 15, 35),
+  startDate: new Date(2018, 5, 25, 13, 30),
+  endDate: new Date(2018, 5, 25, 14, 35),
   id: 2,
   rRule: 'FREQ=DAILY;COUNT=5',
 }];
@@ -53,7 +53,7 @@ export default class Demo extends React.PureComponent {
           />
           <WeekView
             startDayHour={9}
-            endDayHour={19}
+            endDayHour={15}
           />
           <MonthView />
           <Appointments />

diff --git a/...es/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/controlled.jsx b/...es/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/controlled.jsx
@@ -96,6 +96,7 @@ export default class Demo extends React.PureComponent {
       <Paper>
         <Scheduler
           data={data}
+          height={660}
         >
           <WeekView
             startDayHour={9}

diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/custom.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/custom.jsx
@@ -83,6 +83,7 @@ export default class Demo extends React.PureComponent {
       <Paper>
         <Scheduler
           data={data}
+          height={660}
         >
           <WeekView
             startDayHour={9}

diff --git a/.../dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/uncontrolled.jsx b/.../dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/uncontrolled.jsx
@@ -24,6 +24,7 @@ export default class Demo extends React.PureComponent {
       <Paper>
         <Scheduler
           data={data}
+          height={660}
         >
           <WeekView
             startDayHour={9}

diff --git a/...react-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/controlled.jsx b/...react-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/controlled.jsx
@@ -9,7 +9,6 @@ import {
   ViewSwitcher,
   MonthView,
   DayView,
-  AllDayPanel,
 } from '@devexpress/dx-react-scheduler-material-ui';
 
 import { appointments } from '../../../demo-data/month-appointments';
@@ -34,6 +33,7 @@ export default class Demo extends React.PureComponent {
       <Paper>
         <Scheduler
           data={data}
+          height={660}
         >
           <ViewState
             defaultCurrentDate="2018-07-25"
@@ -54,8 +54,6 @@ export default class Demo extends React.PureComponent {
           <MonthView />
           <DayView />
 
-          <AllDayPanel />
-
           <Toolbar />
           <ViewSwitcher />
           <Appointments />

diff --git a/...scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/external-control.jsx b/...scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/external-control.jsx
@@ -57,6 +57,7 @@ export default class Demo extends React.PureComponent {
         <Paper>
           <Scheduler
             data={data}
+            height={660}
           >
             <ViewState
               defaultCurrentDate="2018-07-25"

diff --git a/...act-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/uncontrolled.jsx b/...act-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/uncontrolled.jsx
@@ -28,6 +28,7 @@ export default class Demo extends React.PureComponent {
       <Paper>
         <Scheduler
           data={data}
+          height={660}
         >
           <ViewState
             defaultCurrentDate="2018-07-25"

diff --git a/packages/dx-react-scheduler-material-ui/api/dx-react-scheduler-material-ui.api.md b/packages/dx-react-scheduler-material-ui/api/dx-react-scheduler-material-ui.api.md
@@ -441,6 +441,7 @@ export const Scheduler: React.ComponentType<SchedulerProps> & {
 // @public (undocumented)
 export interface SchedulerProps {
   data?: Array<AppointmentModel>;
+  height?: number | `auto`;
   locale?: string | Array<string>;
   rootComponent?: React.ComponentType<Scheduler_2.RootProps>;
 }

diff --git a/packages/dx-react-scheduler-material-ui/src/templates/layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/layout.jsx
@@ -1,16 +1,13 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { ContainerBase } from './common/container';
 
-export const Root = ({ children, ...restProps }) => (
-  <div {...restProps}>
-    {children}
-  </div>
-);
-
-Root.propTypes = {
-  children: PropTypes.node,
+const styles = {
+  container: {
+    WebkitOverflowScrolling: 'touch',
+    // NOTE: fix sticky positioning in Safari
+    width: '100%',
+    height: '100%',
+  },
 };
 
-Root.defaultProps = {
-  children: undefined,
-};
+export const Root = withStyles(styles, { name: 'Root' })(ContainerBase);
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/layouts/horizontal-view-layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/layouts/horizontal-view-layout.jsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
+import { AUTO_HEIGHT } from '@devexpress/dx-scheduler-core';
 import RootRef from '@material-ui/core/RootRef';
 import Grid from '@material-ui/core/Grid';
 import { withStyles } from '@material-ui/core/styles';
 
 const styles = theme => ({
   container: {
     overflowY: 'auto',
-    height: 700,
   },
   stickyHeader: {
     top: 0,
@@ -30,15 +30,18 @@ export class HorizontalViewLayoutBase extends React.PureComponent {
       classes,
       layoutRef,
       layoutHeaderRef,
+      height,
     } = this.props;
 
+    const containerStyle = height === AUTO_HEIGHT ? { height: '100%' } : { height: `${height}px` };
     return (
       <RootRef rootRef={layoutRef}>
         <Grid
           className={classes.container}
           container
           direction="column"
           wrap="nowrap"
+          style={containerStyle}
         >
           <RootRef rootRef={layoutHeaderRef}>
             <Grid
@@ -66,6 +69,7 @@ HorizontalViewLayoutBase.propTypes = {
   classes: PropTypes.object.isRequired,
   layoutRef: PropTypes.object.isRequired,
   layoutHeaderRef: PropTypes.object.isRequired,
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 };
 
 export const HorizontalViewLayout = withStyles(styles, { name: 'HorizontalViewLayout' })(HorizontalViewLayoutBase);
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.jsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
+import { AUTO_HEIGHT } from '@devexpress/dx-scheduler-core';
 import Grid from '@material-ui/core/Grid';
 import RootRef from '@material-ui/core/RootRef';
 import { withStyles } from '@material-ui/core/styles';
 
 const styles = theme => ({
   container: {
     overflowY: 'auto',
-    height: 700,
   },
   stickyHeader: {
     top: 0,
@@ -32,13 +32,18 @@ export class VerticalViewLayoutBase extends React.PureComponent {
       classes,
       layoutRef,
       layoutHeaderRef,
+      height,
     } = this.props;
 
+    const containerStyle = height === AUTO_HEIGHT ? { height: '100%' } : { height: `${height}px` };
     return (
       <RootRef rootRef={layoutRef}>
         <Grid
           container
           className={classes.container}
+          direction="column"
+          wrap="nowrap"
+          style={containerStyle}
         >
           <RootRef rootRef={layoutHeaderRef}>
             <Grid
@@ -79,6 +84,7 @@ VerticalViewLayoutBase.propTypes = {
   classes: PropTypes.object.isRequired,
   layoutRef: PropTypes.object.isRequired,
   layoutHeaderRef: PropTypes.object.isRequired,
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 };
 
 export const VerticalViewLayout = withStyles(styles, { name: 'VerticalViewLayout' })(VerticalViewLayoutBase);
diff --git a/packages/dx-react-scheduler/api/dx-react-scheduler.api.md b/packages/dx-react-scheduler/api/dx-react-scheduler.api.md
@@ -438,6 +438,7 @@ export namespace MonthView {
   // (undocumented)
   export interface LayoutProps {
     dayScaleComponent: React.ComponentType<MonthView.DayScaleLayoutProps>;
+    height: number | 'auto';
     // (undocumented)
     layoutHeaderRef: React.RefObject<HTMLElement>;
     layoutRef: React.RefObject<HTMLElement>;
@@ -484,6 +485,7 @@ export type SchedulerDateTime = Date | number | string;
 // @public (undocumented)
 export interface SchedulerProps {
   data: AppointmentModel[];
+  height: number | 'auto';
   locale: string | string[];
   rootComponent: React.ComponentType<Scheduler.RootProps>;
 }
@@ -543,6 +545,7 @@ export namespace VerticalView {
   export interface LayoutProps {
     dayScaleComponent: React.ComponentType<VerticalView.DayScaleLayoutProps>;
     dayScaleEmptyCellComponent: React.ComponentType<VerticalView.DayScaleEmptyCellProps>;
+    height: number | 'auto';
     // (undocumented)
     layoutHeaderRef: React.RefObject<HTMLElement>;
     // (undocumented)