DevExtreme v23.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Increased View Duration

Documentation

This demo illustrates displaying several days, weeks, months instead of only one on a view. The view’s intervalCount specifies how many times the default view interval (a day, a week, a month) is repeated on the timetable, and the startDate defines the date from which to start counting this interval.

Backend API
import React from 'react'; import Scheduler, { SchedulerTypes } from 'devextreme-react/scheduler'; import { data } from './data.ts'; const currentDate = new Date(2021, 3, 5); const views: SchedulerTypes.Properties['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 = () => ( <Scheduler timeZone="America/Los_Angeles" dataSource={data} views={views} defaultCurrentView="day" defaultCurrentDate={currentDate} startDayHour={8} height={580} /> ); export default App;
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 = () => ( <Scheduler timeZone="America/Los_Angeles" dataSource={data} views={views} defaultCurrentView="day" defaultCurrentDate={currentDate} startDayHour={8} height={580} /> ); export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );
import { SchedulerTypes } from 'devextreme-react/scheduler'; export const data: SchedulerTypes.Appointment[] = [{ 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'), }];
window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, jsx: 'react', }, meta: { 'react': { 'esModule': true, }, 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.8.1/prop-types.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@23.2.5/cjs', 'devextreme-react': 'npm:devextreme-react@23.2.5/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.6.4/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.51/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.4/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/localization/messages': { format: 'json', defaultExtension: '', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.12/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
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'), }, ];
<!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="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>