$(() => {
$('#scheduler').dxScheduler({
timeZone: 'America/Los_Angeles',
dataSource: data,
views: [{
type: 'month',
name: 'Auto Mode',
maxAppointmentsPerCell: 'auto',
}, {
type: 'month',
name: 'Unlimited Mode',
maxAppointmentsPerCell: 'unlimited',
}, {
type: 'month',
name: 'Numeric Mode',
maxAppointmentsPerCell: 2,
}],
currentView: 'Auto Mode',
currentDate: new Date(2021, 2, 25),
resources: [{
fieldExpr: 'roomId',
dataSource: resourcesData,
label: 'Room',
}],
height: 730,
}).dxScheduler('instance');
});
<!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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css" />
<script src="js/dx.all.js"></script>
<script src="data.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="scheduler"></div>
</div>
</body>
</html>
const data = [
{
text: 'Google AdWords Strategy',
roomId: 1,
startDate: new Date('2021-03-05T16:00:00.000Z'),
endDate: new Date('2021-03-05T17:30:00.000Z'),
}, {
text: 'New Brochures',
roomId: 5,
startDate: new Date('2021-03-05T18:30:00.000Z'),
endDate: new Date('2021-03-05T21:15:00.000Z'),
}, {
text: 'Brochure Design Review',
roomId: 5,
startDate: new Date('2021-03-05T20:15:00.000Z'),
endDate: new Date('2021-03-05T23:15:00.000Z'),
}, {
text: 'Website Re-Design Plan',
roomId: 5,
startDate: new Date('2021-03-05T23:45:00.000Z'),
endDate: new Date('2021-03-05T18:15:00.000Z'),
}, {
text: 'Rollout of New Website and Marketing Brochures',
roomId: 2,
startDate: new Date('2021-03-09T15:15:00.000Z'),
endDate: new Date('2021-03-09T17:45:00.000Z'),
}, {
text: 'Update Sales Strategy Documents',
roomId: 3,
startDate: new Date('2021-03-09T19:00:00.000Z'),
endDate: new Date('2021-03-09T20:45:00.000Z'),
}, {
text: 'Non-Compete Agreements',
roomId: 3,
startDate: new Date('2021-03-09T15:15:00.000Z'),
endDate: new Date('2021-03-09T16:00:00.000Z'),
}, {
text: 'Update NDA Agreement',
roomId: 1,
startDate: new Date('2021-03-10T18:45:00.000Z'),
endDate: new Date('2021-03-10T20:45:00.000Z'),
}, {
text: 'Update Employee Files with New NDA',
roomId: 4,
startDate: new Date('2021-03-18T21:00:00.000Z'),
endDate: new Date('2021-03-18T23:45:00.000Z'),
}, {
text: 'Submit Questions Regarding New NDA',
roomId: 4,
startDate: new Date('2021-03-18T15:00:00.000Z'),
endDate: new Date('2021-03-18T16:30:00.000Z'),
}, {
text: 'Submit Signed NDA',
roomId: 4,
startDate: new Date('2021-03-18T19:45:00.000Z'),
endDate: new Date('2021-03-18T21:00:00.000Z'),
}, {
text: 'Review Revenue Projections',
roomId: 4,
startDate: new Date('2021-03-26T00:15:00.000Z'),
endDate: new Date('2021-03-26T01:00:00.000Z'),
}, {
text: 'Comment on Revenue Projections',
roomId: 1,
startDate: new Date('2021-03-22T16:15:00.000Z'),
endDate: new Date('2021-03-22T18:15:00.000Z'),
}, {
text: 'Provide New Health Insurance Docs',
roomId: 4,
startDate: new Date('2021-03-22T19:45:00.000Z'),
endDate: new Date('2021-03-22T21:15:00.000Z'),
}, {
text: 'Review Changes to Health Insurance Coverage',
roomId: 4,
startDate: new Date('2021-03-25T21:15:00.000Z'),
endDate: new Date('2021-03-25T22:30:00.000Z'),
}, {
text: 'Review Training Course for any Omissions',
roomId: 4,
startDate: new Date('2021-03-22T21:00:00.000Z'),
endDate: new Date('2021-03-22T19:00:00.000Z'),
}, {
text: 'Recall Rebate Form',
roomId: 2,
startDate: new Date('2021-03-23T19:45:00.000Z'),
endDate: new Date('2021-03-23T20:15:00.000Z'),
}, {
text: 'Create Report on Customer Feedback',
roomId: 3,
startDate: new Date('2021-03-23T22:15:00.000Z'),
endDate: new Date('2021-03-24T00:30:00.000Z'),
}, {
text: 'Review Customer Feedback Report',
roomId: 3,
startDate: new Date('2021-03-17T23:15:00.000Z'),
endDate: new Date('2021-03-18T01:30:00.000Z'),
}, {
text: 'Customer Feedback Report Analysis',
roomId: 3,
startDate: new Date('2021-03-17T16:30:00.000Z'),
endDate: new Date('2021-03-17T17:30:00.000Z'),
}, {
text: 'Prepare Shipping Cost Analysis Report',
roomId: 3,
startDate: new Date('2021-03-23T19:30:00.000Z'),
endDate: new Date('2021-03-23T20:30:00.000Z'),
}, {
text: 'Provide Feedback on Shippers',
roomId: 3,
startDate: new Date('2021-03-23T21:15:00.000Z'),
endDate: new Date('2021-03-23T23:00:00.000Z'),
}, {
text: 'Select Preferred Shipper',
roomId: 1,
startDate: new Date('2021-03-27T00:30:00.000Z'),
endDate: new Date('2021-03-27T03:00:00.000Z'),
}, {
text: 'Complete Shipper Selection Form',
roomId: 5,
startDate: new Date('2021-03-25T15:30:00.000Z'),
endDate: new Date('2021-03-25T17:00:00.000Z'),
}, {
text: 'Upgrade Server Hardware',
roomId: 5,
startDate: new Date('2021-03-26T19:00:00.000Z'),
endDate: new Date('2021-03-26T21:15:00.000Z'),
}, {
text: 'Upgrade Personal Computers',
roomId: 5,
startDate: new Date('2021-03-26T21:45:00.000Z'),
endDate: new Date('2021-03-26T23:30:00.000Z'),
},
];
const resourcesData = [
{
text: 'Room 401',
id: 1,
color: '#bbd806',
}, {
text: 'Room 402',
id: 2,
color: '#f34c8a',
}, {
text: 'Room 403',
id: 3,
color: '#ae7fcc',
}, {
text: 'Room 407',
id: 4,
color: '#ff8817',
}, {
text: 'Room 409',
id: 5,
color: '#03bb92',
},
];