-
Data Grid
- Overview
-
Data Binding
-
Paging and Scrolling
-
Editing
-
Grouping
-
Filtering and Sorting
- Focused Row
-
Row Drag & Drop
-
Selection
-
Columns
- State Persistence
-
Appearance
-
Templates
-
Data Summaries
-
Master-Detail
-
Export to PDF
-
Export to Excel
-
Adaptability
- Keyboard Navigation
-
Pivot Grid
- Overview
-
Data Binding
-
Field Chooser
-
Features
-
Export to Excel
-
Tree List
- Overview
-
Data Binding
- Sorting
- Paging
-
Editing
- Node Drag & Drop
- Focused Row
-
Selection
-
Filtering
-
Column Customization
- State Persistence
- Adaptability
- Keyboard Navigation
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Features
- Virtual Scrolling
-
Grouping
-
Customization
- Adaptability
-
Html Editor
-
Chat
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
Charts
- Overview
-
Data Binding
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Line Charts
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
-
Sparkline Charts
-
Tree Map
-
Funnel and Pyramid Charts
- Sankey Chart
-
Combinations
-
More Features
-
Export
-
Selection
-
Tooltips
-
Zooming
-
-
Gantt
- Overview
-
Data
-
UI Customization
- Strip Lines
- Export to PDF
- Sorting
-
Filtering
-
Gauges
- Overview
-
Data Binding
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Navigation
- Overview
- Accordion
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
- Pagination
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
- Box
- Responsive Box
- Resizable
-
-
Editors
- Overview
- Autocomplete
-
Calendar
- Check Box
- Color Box
-
Date Box
-
Date Range Box
-
Drop Down Box
-
Number Box
-
Select Box
- Switch
-
Tag Box
- Text Area
- Text Box
- Validation
- Custom Text Editor Buttons
- Right-to-Left Support
- Editor Appearance Variants
-
Forms and Multi-Purpose
- Overview
- Button Group
- Field Set
-
Filter Builder
-
Form
- Radio Group
-
Range Selector
- Numeric Scale (Lightweight)
- Numeric Scale
- Date-Time Scale (Lightweight)
- Date-Time Scale
- Logarithmic Scale
- Discrete scale
- Custom Formatting
- Use Range Selection for Calculation
- Use Range Selection for Filtering
- Image on Background
- Chart on Background
- Customized Chart on Background
- Chart on Background with Series Template
- Range Slider
- Slider
-
Sortable
-
File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Actions and Lists
- Overview
-
Action Sheet
-
Button
- Floating Action Button
- Drop Down Button
-
Context Menu
-
List
-
Lookup
-
Maps
- Overview
-
Map
-
Vector Map
-
Dialogs and Notifications
-
Localization
React Calendar - Multiple Selection
This demo applies different selection modes and date availability options to the Calendar component.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React, { useCallback, useRef, useState } from 'react';
import CheckBox from 'devextreme-react/check-box';
import SelectBox from 'devextreme-react/select-box';
import Button from 'devextreme-react/button';
import Calendar, { CalendarTypes } from 'devextreme-react/calendar';
const selectionModes = ['single', 'multiple', 'range'];
const selectionModeLabel = { 'aria-label': 'Selection Mode' };
const isWeekend = (date) => {
const day = date.getDay();
return day === 0 || day === 6;
};
const isDateDisabled = ({ view, date }) => view === 'month' && isWeekend(date);
const now = new Date().getTime();
const msInDay = 1000 * 60 * 60 * 24;
const initialValue = [now, now + msInDay];
export default function App() {
const calendar = useRef(null);
const [selectWeekOnClick, setSelectWeekOnClick] = useState(true);
const [selectionMode, setSelectionMode] = useState<CalendarTypes.CalendarSelectionMode>('multiple');
const [minDateValue, setMinDateValue] = useState(null);
const [maxDateValue, setMaxDateValue] = useState(null);
const [weekendDisabled, setWeekendDisabled] = useState(null);
const onSelectWeekOnClickChange = useCallback(({ value }) => {
setSelectWeekOnClick(value);
}, [setSelectWeekOnClick]);
const onSelectionModeChange = useCallback(({ value }) => {
setSelectionMode(value);
}, [setSelectionMode]);
const onMinDateChange = useCallback(({ value }) => {
setMinDateValue(
value ? new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 3) : null,
);
}, [setMinDateValue]);
const onMaxDateChange = useCallback(({ value }) => {
setMaxDateValue(
value ? new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 3) : null,
);
}, [setMaxDateValue]);
const onDisableWeekendChange = useCallback(({ value }) => {
setWeekendDisabled(value);
}, [setWeekendDisabled]);
const onClearButtonClick = useCallback(() => {
calendar.current.instance().clear();
}, []);
return (
<div id="calendar-demo">
<div className="calendar-container">
<Calendar
ref={calendar}
showWeekNumbers={true}
selectWeekOnClick={selectWeekOnClick}
selectionMode={selectionMode}
min={minDateValue}
max={maxDateValue}
defaultValue={initialValue}
disabledDates={weekendDisabled ? isDateDisabled : null}
/>
</div>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<CheckBox
defaultValue={true}
text="Select week on click"
onValueChanged={onSelectWeekOnClickChange}
/>
</div>
<div className="option">
<span>Selection mode</span>
<SelectBox
dataSource={selectionModes}
value={selectionMode}
inputAttr={selectionModeLabel}
onValueChanged={onSelectionModeChange}
/>
</div>
<div className="option caption">
<span>Date availability</span>
</div>
<div className="option">
<CheckBox
defaultValue={false}
text="Set minimum date"
onValueChanged={onMinDateChange}
/>
</div>
<div className="option">
<CheckBox
defaultValue={false}
text="Set maximum date"
onValueChanged={onMaxDateChange}
/>
</div>
<div className="option">
<CheckBox
defaultValue={false}
text="Disable weekends"
onValueChanged={onDisableWeekendChange}
/>
</div>
<div className="option">
<Button
text="Clear value"
onClick={onClearButtonClick}
/>
</div>
</div>
</div>
);
}
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
Selection Modes
The selected value or values are stored in the value property. The following selection modes are available:
-
'single'
A user can select only a single date at any given time. -
'multiple'
A user can select multiple dates simultaneously. -
'range'
A user can select a range of dates. The first and the last date in the range are stored in the value property.
If you enable selectWeekOnClick in 'multiple' or 'range' modes, users can select a week by clicking on the week number.
Disable and Clear Dates
Use the min and max properties to specify the range of available dates. In this demo, these properties limit the range to three days before and after the current date. Enable the "Set minimum date" and "Set maximum date" checkboxes to apply the properties.
If you need to disable specific dates, use the disabledDates property. Toggle the "Disable weekends" checkbox to see how this setting affects component behavior. You can specify either an array of predefined dates or a function that determines whether a date is available.
When using 'multiple' and 'range' selection modes, the behavior of disabled dates in the Calendar is as follows:
-
If you specify the value property programmatically, disabled dates are selected in the values array.
-
If you use the UI to change selection (click on dates or weeks, the Enter key), you cannot select disabled dates in 'multiple' mode. In 'range' mode, disabled dates cannot start or end a range, but can be included in the middle.
To clear selected values, call the Calendar clear() method.