JavaScript/jQuery Scheduler - Toolbar

The DevExtreme JavaScript Scheduler ships with a customizable toolbar UI element. You can populate the toolbar with predefined and custom items—in any display order. This demo adds the "today" predefined control and two DevExtreme components to the toolbar.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

$(() => { const MS_IN_HOUR = 60 * 1000; const scheduler = $('#scheduler').dxScheduler({ timeZone: 'America/Los_Angeles', dataSource: schedulerDataSource, views: ['day', 'week', 'workWeek', 'month'], currentView: 'workWeek', currentDate, startDayHour: 9, endDayHour: 19, resources: [{ fieldExpr: 'assigneeId', allowMultiple: true, dataSource: assignees, label: 'Assignee', }], toolbar: { items: [ 'today', 'dateNavigator', { location: 'before', locateInMenu: 'auto', widget: 'dxButton', options: { icon: 'plus', text: 'New Appointment', stylingMode: 'outlined', type: 'normal', onClick() { const selected = scheduler.option('selectedCellData'); if (selected.length) { const firstSelected = selected[0]; const lastSelected = selected.at(-1); scheduler.showAppointmentPopup({ ...firstSelected.groups, allDay: firstSelected.allDay, startDate: new Date(firstSelected.startDateUTC), endDate: new Date(lastSelected.endDateUTC), }, true); return; } const currentDate = scheduler.option('currentDate'); const cellDuration = scheduler.option('cellDuration') * MS_IN_HOUR; const currentTime = currentDate.getTime(); const roundTime = Math.round(currentTime / cellDuration) * cellDuration; scheduler.showAppointmentPopup({ startDate: new Date(roundTime), endDate: new Date(roundTime + cellDuration), }, true); }, }, }, { location: 'before', locateInMenu: 'auto', widget: 'dxSelectBox', options: { placeholder: 'Select Employee', items: assignees, showClearButton: true, displayExpr: 'text', valueExpr: 'id', inputAttr: { 'aria-label': 'Select Employee', }, width: 200, onValueChanged({ value }) { const dataSource = scheduler.option('dataSource'); const filter = value ? ['assigneeId', 'contains', value] : null; dataSource.filter(filter); scheduler.option('dataSource', dataSource); }, }, }, { location: 'after', locateInMenu: 'auto', name: 'viewSwitcher', }, ], }, height: 600, }).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/25.1.3/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>

To customize the JavaScript Scheduler toolbar in your DevExtreme-powered app, add items to the toolbar.items[] array. DevExtreme JavaScript Scheduler supports the following toolbar item types:

Predefined Controls
- "dateNavigator"
  Displays a ButtonGroup component with next/previous buttons and a date interval button that invokes a dropdown calendar. Define options.items to customize the control. You can add new buttons, and specify button availability/order.
- "viewSwitcher"
  Switches between view types (day, week, month, and others).
- "today"
  A "Today" button (navigates to the current date).
DevExtreme Components
You can configure a DevExtreme component within a toolbar item element. In this demo, we extended the toolbar with a Button and SelectBox.
Custom Controls
Specify items[].template to implement custom controls.

The default JavaScript Scheduler toolbar displays "dateNavigator" and "viewSwitcher" predefined controls.