Backend API
import React, { useCallback, useState } from 'react';
import Scheduler, {
Resource,
type SchedulerTypes,
} from 'devextreme-react/scheduler';
import SelectBox from 'devextreme-react/select-box';
import type { SelectBoxTypes } from 'devextreme-react/select-box';
import { data, resourcesData, priorityData } from './data.ts';
const currentDate = new Date(2021, 1, 2);
const views: SchedulerTypes.ViewType[] = ['timelineDay', 'timelineWeek', 'timelineWorkWeek', 'timelineMonth'];
const groups = ['priority'];
const snapToCellsModeItems: SchedulerTypes.SnapToCellsMode[] = ['auto', 'always', 'never'];
const App = () => {
const [snapToCellsMode, setSnapToCellsMode] = useState<SchedulerTypes.SnapToCellsMode>('always');
const onSnapToCellsModeChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
setSnapToCellsMode(e.value);
}, []);
return (
<>
<Scheduler
timeZone="America/Los_Angeles"
dataSource={data}
views={views}
defaultCurrentView="timelineMonth"
defaultCurrentDate={currentDate}
height={580}
groups={groups}
cellDuration={60}
firstDayOfWeek={0}
startDayHour={8}
endDayHour={20}
snapToCellsMode={snapToCellsMode}
>
<Resource
fieldExpr="ownerId"
allowMultiple={true}
dataSource={resourcesData}
label="Owner"
useColorAsDefault={true}
icon="user"
/>
<Resource
fieldExpr="priority"
allowMultiple={false}
dataSource={priorityData}
label="Priority"
icon="tags"
/>
</Scheduler>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<span>Snap to Grid:</span>
<SelectBox
items={snapToCellsModeItems}
value={snapToCellsMode}
onValueChanged={onSnapToCellsModeChanged}
/>
</div>
</div>
</>
);
};
export default App;
import React, { useCallback, useState } from 'react';
import Scheduler, { Resource } from 'devextreme-react/scheduler';
import SelectBox from 'devextreme-react/select-box';
import { data, resourcesData, priorityData } from './data.js';
const currentDate = new Date(2021, 1, 2);
const views = ['timelineDay', 'timelineWeek', 'timelineWorkWeek', 'timelineMonth'];
const groups = ['priority'];
const snapToCellsModeItems = ['auto', 'always', 'never'];
const App = () => {
const [snapToCellsMode, setSnapToCellsMode] = useState('always');
const onSnapToCellsModeChanged = useCallback((e) => {
setSnapToCellsMode(e.value);
}, []);
return (
<>
<Scheduler
timeZone="America/Los_Angeles"
dataSource={data}
views={views}
defaultCurrentView="timelineMonth"
defaultCurrentDate={currentDate}
height={580}
groups={groups}
cellDuration={60}
firstDayOfWeek={0}
startDayHour={8}
endDayHour={20}
snapToCellsMode={snapToCellsMode}
>
<Resource
fieldExpr="ownerId"
allowMultiple={true}
dataSource={resourcesData}
label="Owner"
useColorAsDefault={true}
icon="user"
/>
<Resource
fieldExpr="priority"
allowMultiple={false}
dataSource={priorityData}
label="Priority"
icon="tags"
/>
</Scheduler>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<span>Snap to Grid:</span>
<SelectBox
items={snapToCellsModeItems}
value={snapToCellsMode}
onValueChanged={onSnapToCellsModeChanged}
/>
</div>
</div>
</>
);
};
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
import type { SchedulerTypes } from 'devextreme-react/scheduler';
type Appointment = SchedulerTypes.Appointment & { ownerId: number[], priority: number };
type Resource = {
text: string;
id: number;
color: string;
};
export const data: Appointment[] = [{
text: 'Google AdWords Strategy',
ownerId: [2],
startDate: new Date('2021-02-01T16:00:00.000Z'),
endDate: new Date('2021-02-01T17:30:00.000Z'),
priority: 1,
}, {
text: 'New Brochures',
ownerId: [1],
startDate: new Date('2021-02-01T18:30:00.000Z'),
endDate: new Date('2021-02-01T21:15:00.000Z'),
priority: 2,
}, {
text: 'Brochure Design Review',
ownerId: [4],
startDate: new Date('2021-02-01T20:15:00.000Z'),
endDate: new Date('2021-02-01T23:15:00.000Z'),
priority: 1,
}, {
text: 'Website Re-Design Plan',
ownerId: [3],
startDate: new Date('2021-02-01T23:45:00.000Z'),
endDate: new Date('2021-02-02T18:15:00.000Z'),
priority: 2,
}, {
text: 'Rollout of New Website and Marketing Brochures',
ownerId: [1],
startDate: new Date('2021-02-02T15:15:00.000Z'),
endDate: new Date('2021-02-02T17:45:00.000Z'),
priority: 2,
}, {
text: 'Update Sales Strategy Documents',
ownerId: [2],
startDate: new Date('2021-02-02T19:00:00.000Z'),
endDate: new Date('2021-02-02T20:45:00.000Z'),
priority: 1,
}, {
text: 'Non-Compete Agreements',
ownerId: [4],
startDate: new Date('2021-02-03T16:15:00.000Z'),
endDate: new Date('2021-02-03T17:00:00.000Z'),
priority: 1,
}, {
text: 'Approve Hiring of John Jeffers',
ownerId: [2],
startDate: new Date('2021-02-03T17:00:00.000Z'),
endDate: new Date('2021-02-03T18:15:00.000Z'),
priority: 2,
}, {
text: 'Update NDA Agreement',
ownerId: [1],
startDate: new Date('2021-02-03T18:45:00.000Z'),
endDate: new Date('2021-02-03T20:45:00.000Z'),
priority: 2,
}, {
text: 'Update Employee Files with New NDA',
ownerId: [2],
startDate: new Date('2021-02-03T21:00:00.000Z'),
endDate: new Date('2021-02-03T23:45:00.000Z'),
priority: 1,
}, {
text: 'Submit Questions Regarding New NDA',
ownerId: [1],
startDate: new Date('2021-02-05T01:00:00.000Z'),
endDate: new Date('2021-02-04T16:30:00.000Z'),
priority: 1,
}, {
text: 'Submit Signed NDA',
ownerId: [2],
startDate: new Date('2021-02-04T19:45:00.000Z'),
endDate: new Date('2021-02-04T21:00:00.000Z'),
priority: 1,
}, {
text: 'Review Revenue Projections',
ownerId: [3],
startDate: new Date('2021-02-05T00:15:00.000Z'),
endDate: new Date('2021-02-04T15:00:00.000Z'),
priority: 2,
}, {
text: 'Comment on Revenue Projections',
ownerId: [2],
startDate: new Date('2021-02-05T16:15:00.000Z'),
endDate: new Date('2021-02-05T18:15:00.000Z'),
priority: 1,
}, {
text: 'Provide New Health Insurance Docs',
ownerId: [3],
startDate: new Date('2021-02-05T19:45:00.000Z'),
endDate: new Date('2021-02-05T21:15:00.000Z'),
priority: 2,
}, {
text: 'Review Changes to Health Insurance Coverage',
ownerId: [2],
startDate: new Date('2021-02-05T21:15:00.000Z'),
endDate: new Date('2021-02-05T22:30:00.000Z'),
priority: 1,
}, {
text: 'Review Training Course for any Omissions',
ownerId: [2],
startDate: new Date('2021-02-08T21:00:00.000Z'),
endDate: new Date('2021-02-09T19:00:00.000Z'),
priority: 2,
}, {
text: 'Recall Rebate Form',
ownerId: [1],
startDate: new Date('2021-02-08T19:45:00.000Z'),
endDate: new Date('2021-02-08T20:15:00.000Z'),
priority: 1,
}, {
text: 'Create Report on Customer Feedback',
ownerId: [4],
startDate: new Date('2021-02-09T22:15:00.000Z'),
endDate: new Date('2021-02-10T00:30:00.000Z'),
priority: 2,
}, {
text: 'Review Customer Feedback Report',
ownerId: [2],
startDate: new Date('2021-02-09T23:15:00.000Z'),
endDate: new Date('2021-02-10T01:30:00.000Z'),
priority: 1,
}, {
text: 'Customer Feedback Report Analysis',
ownerId: [3],
startDate: new Date('2021-02-10T16:30:00.000Z'),
endDate: new Date('2021-02-10T17:30:00.000Z'),
priority: 1,
}, {
text: 'Prepare Shipping Cost Analysis Report',
ownerId: [4],
startDate: new Date('2021-02-10T19:30:00.000Z'),
endDate: new Date('2021-02-10T20:30:00.000Z'),
priority: 1,
}, {
text: 'Provide Feedback on Shippers',
ownerId: [2],
startDate: new Date('2021-02-10T21:15:00.000Z'),
endDate: new Date('2021-02-10T23:00:00.000Z'),
priority: 2,
}, {
text: 'Select Preferred Shipper',
ownerId: [1],
startDate: new Date('2021-02-11T00:30:00.000Z'),
endDate: new Date('2021-02-11T03:00:00.000Z'),
priority: 1,
}, {
text: 'Complete Shipper Selection Form',
ownerId: [2],
startDate: new Date('2021-02-11T15:30:00.000Z'),
endDate: new Date('2021-02-11T17:00:00.000Z'),
priority: 2,
}, {
text: 'Upgrade Server Hardware',
ownerId: [4],
startDate: new Date('2021-02-11T19:00:00.000Z'),
endDate: new Date('2021-02-11T21:15:00.000Z'),
priority: 1,
}, {
text: 'Upgrade Personal Computers',
ownerId: [3],
startDate: new Date('2021-02-11T21:45:00.000Z'),
endDate: new Date('2021-02-11T23:30:00.000Z'),
priority: 1,
}, {
text: 'Upgrade Apps to Windows RT or stay with WinForms',
ownerId: [1],
startDate: new Date('2021-02-12T17:30:00.000Z'),
endDate: new Date('2021-02-12T20:00:00.000Z'),
priority: 1,
}, {
text: 'Estimate Time Required to Touch-Enable Apps',
ownerId: [1],
startDate: new Date('2021-02-12T21:45:00.000Z'),
endDate: new Date('2021-02-12T23:30:00.000Z'),
priority: 1,
}, {
text: 'Report on Tranistion to Touch-Based Apps',
ownerId: [2],
startDate: new Date('2021-02-13T01:30:00.000Z'),
endDate: new Date('2021-02-13T02:00:00.000Z'),
priority: 1,
}, {
text: 'Submit New Website Design',
ownerId: [2],
startDate: new Date('2021-02-15T15:00:00.000Z'),
endDate: new Date('2021-02-15T17:00:00.000Z'),
priority: 2,
}, {
text: 'Create Icons for Website',
ownerId: [4],
startDate: new Date('2021-02-15T18:30:00.000Z'),
endDate: new Date('2021-02-15T20:15:00.000Z'),
priority: 1,
}, {
text: 'Create New Product Pages',
ownerId: [1],
startDate: new Date('2021-02-16T16:45:00.000Z'),
endDate: new Date('2021-02-16T18:45:00.000Z'),
priority: 2,
}, {
text: 'Approve Website Launch',
ownerId: [3],
startDate: new Date('2021-02-16T19:00:00.000Z'),
endDate: new Date('2021-02-16T22:15:00.000Z'),
priority: 1,
}, {
text: 'Update Customer Shipping Profiles',
ownerId: [3],
startDate: new Date('2021-02-17T16:30:00.000Z'),
endDate: new Date('2021-02-17T18:00:00.000Z'),
priority: 1,
}, {
text: 'Create New Shipping Return Labels',
ownerId: [4],
startDate: new Date('2021-02-17T19:45:00.000Z'),
endDate: new Date('2021-02-17T21:00:00.000Z'),
priority: 1,
}, {
text: 'Get Design for Shipping Return Labels',
ownerId: [3],
startDate: new Date('2021-02-17T22:00:00.000Z'),
endDate: new Date('2021-02-17T23:30:00.000Z'),
priority: 1,
}, {
text: 'PSD needed for Shipping Return Labels',
ownerId: [4],
startDate: new Date('2021-02-18T15:30:00.000Z'),
endDate: new Date('2021-02-18T16:15:00.000Z'),
priority: 2,
}, {
text: 'Contact ISP and Discuss Payment Options',
ownerId: [1],
startDate: new Date('2021-02-18T18:30:00.000Z'),
endDate: new Date('2021-02-18T23:00:00.000Z'),
priority: 2,
}, {
text: 'Prepare Year-End Support Summary Report',
ownerId: [2],
startDate: new Date('2021-02-19T00:00:00.000Z'),
endDate: new Date('2021-02-19T03:00:00.000Z'),
priority: 1,
}, {
text: 'Review New Training Material',
ownerId: [3],
startDate: new Date('2021-02-19T15:00:00.000Z'),
endDate: new Date('2021-02-19T16:15:00.000Z'),
priority: 2,
}, {
text: 'Distribute Training Material to Support Staff',
ownerId: [2],
startDate: new Date('2021-02-19T19:45:00.000Z'),
endDate: new Date('2021-02-19T21:00:00.000Z'),
priority: 1,
}, {
text: 'Training Material Distribution Schedule',
ownerId: [2],
startDate: new Date('2021-02-19T21:15:00.000Z'),
endDate: new Date('2021-02-19T23:15:00.000Z'),
priority: 1,
}, {
text: 'Approval on Converting to New HDMI Specification',
ownerId: [4],
startDate: new Date('2021-02-22T16:30:00.000Z'),
endDate: new Date('2021-02-22T17:15:00.000Z'),
priority: 2,
}, {
text: 'Create New Spike for Automation Server',
ownerId: [3],
startDate: new Date('2021-02-22T17:00:00.000Z'),
endDate: new Date('2021-02-22T19:30:00.000Z'),
priority: 2,
}, {
text: 'Code Review - New Automation Server',
ownerId: [1],
startDate: new Date('2021-02-22T20:00:00.000Z'),
endDate: new Date('2021-02-22T22:00:00.000Z'),
priority: 1,
}, {
text: 'Confirm Availability for Sales Meeting',
ownerId: [1],
startDate: new Date('2021-02-23T17:15:00.000Z'),
endDate: new Date('2021-02-23T22:15:00.000Z'),
priority: 2,
}, {
text: 'Reschedule Sales Team Meeting',
ownerId: [2],
startDate: new Date('2021-02-23T23:15:00.000Z'),
endDate: new Date('2021-02-24T01:00:00.000Z'),
priority: 2,
}, {
text: 'Send 2 Remotes for Giveaways',
ownerId: [3],
startDate: new Date('2021-02-24T16:30:00.000Z'),
endDate: new Date('2021-02-24T18:45:00.000Z'),
priority: 1,
}, {
text: 'Discuss Product Giveaways with Management',
ownerId: [1],
startDate: new Date('2021-02-24T19:15:00.000Z'),
endDate: new Date('2021-02-24T23:45:00.000Z'),
priority: 2,
}, {
text: 'Replace Desktops on the 3rd Floor',
ownerId: [2],
startDate: new Date('2021-02-25T16:30:00.000Z'),
endDate: new Date('2021-02-25T17:45:00.000Z'),
priority: 1,
}, {
text: 'Update Database with New Leads',
ownerId: [3],
startDate: new Date('2021-02-25T19:00:00.000Z'),
endDate: new Date('2021-02-25T21:15:00.000Z'),
priority: 2,
}, {
text: 'Mail New Leads for Follow Up',
ownerId: [1],
startDate: new Date('2021-02-25T21:45:00.000Z'),
endDate: new Date('2021-02-25T22:30:00.000Z'),
priority: 2,
}, {
text: 'Send Territory Sales Breakdown',
ownerId: [2],
startDate: new Date('2021-02-26T01:00:00.000Z'),
endDate: new Date('2021-02-26T03:00:00.000Z'),
priority: 1,
}, {
text: 'Territory Sales Breakdown Report',
ownerId: [1],
startDate: new Date('2021-02-26T15:45:00.000Z'),
endDate: new Date('2021-02-26T16:45:00.000Z'),
priority: 1,
}, {
text: 'Report on the State of Engineering Dept',
ownerId: [3],
startDate: new Date('2021-02-26T21:45:00.000Z'),
endDate: new Date('2021-02-26T22:30:00.000Z'),
priority: 2,
}, {
text: 'Staff Productivity Report',
ownerId: [4],
startDate: new Date('2021-02-26T23:15:00.000Z'),
endDate: new Date('2021-02-27T02:30:00.000Z'),
priority: 2,
}];
export const resourcesData: Resource[] = [
{
text: 'Samantha Bright',
id: 1,
color: '#C2185B',
}, {
text: 'John Heart',
id: 2,
color: '#2E7D32',
}, {
text: 'Todd Hoffman',
id: 3,
color: '#1564C0',
}, {
text: 'Sandra Johnson',
id: 4,
color: '#DD2C00',
},
];
export const priorityData: Resource[] = [
{
text: 'Low Priority',
id: 1,
color: '#1564C0',
}, {
text: 'High Priority',
id: 2,
color: '#DD2C00',
},
];
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,
},
'openai': {
'esModule': true,
},
'zod': {
'esModule': true,
},
'zod-to-json-schema': {
'esModule': true,
},
},
paths: {
'npm:': 'https://cdn.jsdelivr.net/npm/',
'bundles:': '../../../../bundles/',
'externals:': '../../../../bundles/externals/',
'anti-forgery:': '../../../../shared/anti-forgery/',
},
defaultExtension: 'js',
map: {
'anti-forgery': 'anti-forgery:fetch-override.js',
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.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/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'zod': 'externals:zod.bundle.js',
'zod-to-json-schema': 'externals:zod-to-json-schema.bundle.js',
'devextreme-quill': 'npm:devextreme-quill@1.7.9/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.29/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.69/dist/dx-gantt.js',
'inferno': 'npm:inferno@8.2.3/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@8.2.3/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/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',
'@preact/signals-core': 'npm:@preact/signals-core@1.14.1/dist/signals-core.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.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme-react/common': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/common/core/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
window.process = {
env: {
NODE_ENV: 'production',
},
};
System.config(window.config);
// eslint-disable-next-line
const useTgzInCSB = ['openai'];
let packagesInfo = {
"zod": {
"version": "3.24.4"
},
"zod-to-json-schema": {
"version": "3.24.6"
}
};
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',
ownerId: [2],
startDate: new Date('2021-02-01T16:00:00.000Z'),
endDate: new Date('2021-02-01T17:30:00.000Z'),
priority: 1,
},
{
text: 'New Brochures',
ownerId: [1],
startDate: new Date('2021-02-01T18:30:00.000Z'),
endDate: new Date('2021-02-01T21:15:00.000Z'),
priority: 2,
},
{
text: 'Brochure Design Review',
ownerId: [4],
startDate: new Date('2021-02-01T20:15:00.000Z'),
endDate: new Date('2021-02-01T23:15:00.000Z'),
priority: 1,
},
{
text: 'Website Re-Design Plan',
ownerId: [3],
startDate: new Date('2021-02-01T23:45:00.000Z'),
endDate: new Date('2021-02-02T18:15:00.000Z'),
priority: 2,
},
{
text: 'Rollout of New Website and Marketing Brochures',
ownerId: [1],
startDate: new Date('2021-02-02T15:15:00.000Z'),
endDate: new Date('2021-02-02T17:45:00.000Z'),
priority: 2,
},
{
text: 'Update Sales Strategy Documents',
ownerId: [2],
startDate: new Date('2021-02-02T19:00:00.000Z'),
endDate: new Date('2021-02-02T20:45:00.000Z'),
priority: 1,
},
{
text: 'Non-Compete Agreements',
ownerId: [4],
startDate: new Date('2021-02-03T16:15:00.000Z'),
endDate: new Date('2021-02-03T17:00:00.000Z'),
priority: 1,
},
{
text: 'Approve Hiring of John Jeffers',
ownerId: [2],
startDate: new Date('2021-02-03T17:00:00.000Z'),
endDate: new Date('2021-02-03T18:15:00.000Z'),
priority: 2,
},
{
text: 'Update NDA Agreement',
ownerId: [1],
startDate: new Date('2021-02-03T18:45:00.000Z'),
endDate: new Date('2021-02-03T20:45:00.000Z'),
priority: 2,
},
{
text: 'Update Employee Files with New NDA',
ownerId: [2],
startDate: new Date('2021-02-03T21:00:00.000Z'),
endDate: new Date('2021-02-03T23:45:00.000Z'),
priority: 1,
},
{
text: 'Submit Questions Regarding New NDA',
ownerId: [1],
startDate: new Date('2021-02-05T01:00:00.000Z'),
endDate: new Date('2021-02-04T16:30:00.000Z'),
priority: 1,
},
{
text: 'Submit Signed NDA',
ownerId: [2],
startDate: new Date('2021-02-04T19:45:00.000Z'),
endDate: new Date('2021-02-04T21:00:00.000Z'),
priority: 1,
},
{
text: 'Review Revenue Projections',
ownerId: [3],
startDate: new Date('2021-02-05T00:15:00.000Z'),
endDate: new Date('2021-02-04T15:00:00.000Z'),
priority: 2,
},
{
text: 'Comment on Revenue Projections',
ownerId: [2],
startDate: new Date('2021-02-05T16:15:00.000Z'),
endDate: new Date('2021-02-05T18:15:00.000Z'),
priority: 1,
},
{
text: 'Provide New Health Insurance Docs',
ownerId: [3],
startDate: new Date('2021-02-05T19:45:00.000Z'),
endDate: new Date('2021-02-05T21:15:00.000Z'),
priority: 2,
},
{
text: 'Review Changes to Health Insurance Coverage',
ownerId: [2],
startDate: new Date('2021-02-05T21:15:00.000Z'),
endDate: new Date('2021-02-05T22:30:00.000Z'),
priority: 1,
},
{
text: 'Review Training Course for any Omissions',
ownerId: [2],
startDate: new Date('2021-02-08T21:00:00.000Z'),
endDate: new Date('2021-02-09T19:00:00.000Z'),
priority: 2,
},
{
text: 'Recall Rebate Form',
ownerId: [1],
startDate: new Date('2021-02-08T19:45:00.000Z'),
endDate: new Date('2021-02-08T20:15:00.000Z'),
priority: 1,
},
{
text: 'Create Report on Customer Feedback',
ownerId: [4],
startDate: new Date('2021-02-09T22:15:00.000Z'),
endDate: new Date('2021-02-10T00:30:00.000Z'),
priority: 2,
},
{
text: 'Review Customer Feedback Report',
ownerId: [2],
startDate: new Date('2021-02-09T23:15:00.000Z'),
endDate: new Date('2021-02-10T01:30:00.000Z'),
priority: 1,
},
{
text: 'Customer Feedback Report Analysis',
ownerId: [3],
startDate: new Date('2021-02-10T16:30:00.000Z'),
endDate: new Date('2021-02-10T17:30:00.000Z'),
priority: 1,
},
{
text: 'Prepare Shipping Cost Analysis Report',
ownerId: [4],
startDate: new Date('2021-02-10T19:30:00.000Z'),
endDate: new Date('2021-02-10T20:30:00.000Z'),
priority: 1,
},
{
text: 'Provide Feedback on Shippers',
ownerId: [2],
startDate: new Date('2021-02-10T21:15:00.000Z'),
endDate: new Date('2021-02-10T23:00:00.000Z'),
priority: 2,
},
{
text: 'Select Preferred Shipper',
ownerId: [1],
startDate: new Date('2021-02-11T00:30:00.000Z'),
endDate: new Date('2021-02-11T03:00:00.000Z'),
priority: 1,
},
{
text: 'Complete Shipper Selection Form',
ownerId: [2],
startDate: new Date('2021-02-11T15:30:00.000Z'),
endDate: new Date('2021-02-11T17:00:00.000Z'),
priority: 2,
},
{
text: 'Upgrade Server Hardware',
ownerId: [4],
startDate: new Date('2021-02-11T19:00:00.000Z'),
endDate: new Date('2021-02-11T21:15:00.000Z'),
priority: 1,
},
{
text: 'Upgrade Personal Computers',
ownerId: [3],
startDate: new Date('2021-02-11T21:45:00.000Z'),
endDate: new Date('2021-02-11T23:30:00.000Z'),
priority: 1,
},
{
text: 'Upgrade Apps to Windows RT or stay with WinForms',
ownerId: [1],
startDate: new Date('2021-02-12T17:30:00.000Z'),
endDate: new Date('2021-02-12T20:00:00.000Z'),
priority: 1,
},
{
text: 'Estimate Time Required to Touch-Enable Apps',
ownerId: [1],
startDate: new Date('2021-02-12T21:45:00.000Z'),
endDate: new Date('2021-02-12T23:30:00.000Z'),
priority: 1,
},
{
text: 'Report on Tranistion to Touch-Based Apps',
ownerId: [2],
startDate: new Date('2021-02-13T01:30:00.000Z'),
endDate: new Date('2021-02-13T02:00:00.000Z'),
priority: 1,
},
{
text: 'Submit New Website Design',
ownerId: [2],
startDate: new Date('2021-02-15T15:00:00.000Z'),
endDate: new Date('2021-02-15T17:00:00.000Z'),
priority: 2,
},
{
text: 'Create Icons for Website',
ownerId: [4],
startDate: new Date('2021-02-15T18:30:00.000Z'),
endDate: new Date('2021-02-15T20:15:00.000Z'),
priority: 1,
},
{
text: 'Create New Product Pages',
ownerId: [1],
startDate: new Date('2021-02-16T16:45:00.000Z'),
endDate: new Date('2021-02-16T18:45:00.000Z'),
priority: 2,
},
{
text: 'Approve Website Launch',
ownerId: [3],
startDate: new Date('2021-02-16T19:00:00.000Z'),
endDate: new Date('2021-02-16T22:15:00.000Z'),
priority: 1,
},
{
text: 'Update Customer Shipping Profiles',
ownerId: [3],
startDate: new Date('2021-02-17T16:30:00.000Z'),
endDate: new Date('2021-02-17T18:00:00.000Z'),
priority: 1,
},
{
text: 'Create New Shipping Return Labels',
ownerId: [4],
startDate: new Date('2021-02-17T19:45:00.000Z'),
endDate: new Date('2021-02-17T21:00:00.000Z'),
priority: 1,
},
{
text: 'Get Design for Shipping Return Labels',
ownerId: [3],
startDate: new Date('2021-02-17T22:00:00.000Z'),
endDate: new Date('2021-02-17T23:30:00.000Z'),
priority: 1,
},
{
text: 'PSD needed for Shipping Return Labels',
ownerId: [4],
startDate: new Date('2021-02-18T15:30:00.000Z'),
endDate: new Date('2021-02-18T16:15:00.000Z'),
priority: 2,
},
{
text: 'Contact ISP and Discuss Payment Options',
ownerId: [1],
startDate: new Date('2021-02-18T18:30:00.000Z'),
endDate: new Date('2021-02-18T23:00:00.000Z'),
priority: 2,
},
{
text: 'Prepare Year-End Support Summary Report',
ownerId: [2],
startDate: new Date('2021-02-19T00:00:00.000Z'),
endDate: new Date('2021-02-19T03:00:00.000Z'),
priority: 1,
},
{
text: 'Review New Training Material',
ownerId: [3],
startDate: new Date('2021-02-19T15:00:00.000Z'),
endDate: new Date('2021-02-19T16:15:00.000Z'),
priority: 2,
},
{
text: 'Distribute Training Material to Support Staff',
ownerId: [2],
startDate: new Date('2021-02-19T19:45:00.000Z'),
endDate: new Date('2021-02-19T21:00:00.000Z'),
priority: 1,
},
{
text: 'Training Material Distribution Schedule',
ownerId: [2],
startDate: new Date('2021-02-19T21:15:00.000Z'),
endDate: new Date('2021-02-19T23:15:00.000Z'),
priority: 1,
},
{
text: 'Approval on Converting to New HDMI Specification',
ownerId: [4],
startDate: new Date('2021-02-22T16:30:00.000Z'),
endDate: new Date('2021-02-22T17:15:00.000Z'),
priority: 2,
},
{
text: 'Create New Spike for Automation Server',
ownerId: [3],
startDate: new Date('2021-02-22T17:00:00.000Z'),
endDate: new Date('2021-02-22T19:30:00.000Z'),
priority: 2,
},
{
text: 'Code Review - New Automation Server',
ownerId: [1],
startDate: new Date('2021-02-22T20:00:00.000Z'),
endDate: new Date('2021-02-22T22:00:00.000Z'),
priority: 1,
},
{
text: 'Confirm Availability for Sales Meeting',
ownerId: [1],
startDate: new Date('2021-02-23T17:15:00.000Z'),
endDate: new Date('2021-02-23T22:15:00.000Z'),
priority: 2,
},
{
text: 'Reschedule Sales Team Meeting',
ownerId: [2],
startDate: new Date('2021-02-23T23:15:00.000Z'),
endDate: new Date('2021-02-24T01:00:00.000Z'),
priority: 2,
},
{
text: 'Send 2 Remotes for Giveaways',
ownerId: [3],
startDate: new Date('2021-02-24T16:30:00.000Z'),
endDate: new Date('2021-02-24T18:45:00.000Z'),
priority: 1,
},
{
text: 'Discuss Product Giveaways with Management',
ownerId: [1],
startDate: new Date('2021-02-24T19:15:00.000Z'),
endDate: new Date('2021-02-24T23:45:00.000Z'),
priority: 2,
},
{
text: 'Replace Desktops on the 3rd Floor',
ownerId: [2],
startDate: new Date('2021-02-25T16:30:00.000Z'),
endDate: new Date('2021-02-25T17:45:00.000Z'),
priority: 1,
},
{
text: 'Update Database with New Leads',
ownerId: [3],
startDate: new Date('2021-02-25T19:00:00.000Z'),
endDate: new Date('2021-02-25T21:15:00.000Z'),
priority: 2,
},
{
text: 'Mail New Leads for Follow Up',
ownerId: [1],
startDate: new Date('2021-02-25T21:45:00.000Z'),
endDate: new Date('2021-02-25T22:30:00.000Z'),
priority: 2,
},
{
text: 'Send Territory Sales Breakdown',
ownerId: [2],
startDate: new Date('2021-02-26T01:00:00.000Z'),
endDate: new Date('2021-02-26T03:00:00.000Z'),
priority: 1,
},
{
text: 'Territory Sales Breakdown Report',
ownerId: [1],
startDate: new Date('2021-02-26T15:45:00.000Z'),
endDate: new Date('2021-02-26T16:45:00.000Z'),
priority: 1,
},
{
text: 'Report on the State of Engineering Dept',
ownerId: [3],
startDate: new Date('2021-02-26T21:45:00.000Z'),
endDate: new Date('2021-02-26T22:30:00.000Z'),
priority: 2,
},
{
text: 'Staff Productivity Report',
ownerId: [4],
startDate: new Date('2021-02-26T23:15:00.000Z'),
endDate: new Date('2021-02-27T02:30:00.000Z'),
priority: 2,
},
];
export const resourcesData = [
{
text: 'Samantha Bright',
id: 1,
color: '#C2185B',
},
{
text: 'John Heart',
id: 2,
color: '#2E7D32',
},
{
text: 'Todd Hoffman',
id: 3,
color: '#1564C0',
},
{
text: 'Sandra Johnson',
id: 4,
color: '#DD2C00',
},
];
export const priorityData = [
{
text: 'Low Priority',
id: 1,
color: '#1564C0',
},
{
text: 'High Priority',
id: 2,
color: '#DD2C00',
},
];
<!DOCTYPE html>
<html 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="https://cdn3.devexpress.com/jslib/26.1.3/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/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>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
.dx-scheduler-timeline-day .dx-scheduler-cell-sizes-horizontal,
.dx-scheduler-timeline-week .dx-scheduler-cell-sizes-horizontal,
.dx-scheduler-timeline-work-week .dx-scheduler-cell-sizes-horizontal {
width: 100px;
}
.dx-scheduler-appointment-content {
color: white;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
display: flex;
align-items: center;
gap: 10px;
}
This demo allows you to explore the capabilities of our Timeline view:
- You can switch between Timeline view types using the View Switcher toolbar item.
- You can enable our "Snap to Grid" option for all appointments or short appointments only (shorter than two cells in duration). For additional information, see snapToCellsMode.
Note how the DevExtreme Scheduler groups appointments by resource to separate low and high priority tasks. For additional information, refer to the following technical demo: Scheduler - Grouping by Resources.