Event Date Selection
Use the range picker for a new event creation. Let people pick start and end dates when adding events.
Dynamically switch between date only and date-time entry based on an "all-day" switch by changing the controls to 'date' or 'datetime'.
Interested in an event calendar solution? Check out the event calendar →
Demo
jsxconst [start, setStart] = React.useState(null);
const [end, setEnd] = React.useState(null);
const [allDay, setAllDay] = React.useState(false);
const [showAs, setShowAs] = React.useState('busy');
const controls = React.useMemo(() => allDay ? ['date'] : ['datetime']);
const controlChange = (ev) => {
setAllDay(ev.target.checked);
};
const showAsChange = (event) => {
setShowAs(event.target.value);
};
<Input label="Title" placeholder="Name of the event" />
<Input label="Location" placeholder="Where will it be?" />;
<Switch label="All day" value={allDay} onChange={controlChange} />
<Datepicker
controls={controls}
select="range"
startInput={start}
endInput={end}
/>
<Input ref={setStart} label="Start" placeholder="Event start" />
<Input ref={setEnd} label="End " placeholder="Event end" />
<SegmentedGroup value={showAs} onChange={showAsChange}>
<SegmentedItem value="busy">Show as busy</SegmentedItem>
<SegmentedItem value="free">Show as free</SegmentedItem>
</SegmentedGroup>
<Textarea label="Notes" placeholder="Enter notes, URL, comments" />
JSXTSX
import { Datepicker, Input, Page, Segmented, SegmentedGroup, setOptions, Switch, Textarea } from '@mobiscroll/react';
import { useCallback, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [start, setStart] = useState(null);
const [end, setEnd] = useState(null);
const [allDay, setAllDay] = useState(false);
const [showAs, setShowAs] = useState('busy');
const controls = useMemo(() => (allDay ? ['date'] : ['datetime']), [allDay]);
const controlChange = useCallback((ev) => {
setAllDay(ev.target.checked);
}, []);
const showAsChange = useCallback((ev) => {
setShowAs(ev.target.value);
}, []);
return (
<Page>
<Input label="Title" placeholder="Name of the event" />
<Input label="Location" placeholder="Where will it be?" />
<Switch label="All day" value={allDay} onChange={controlChange} />
<Datepicker controls={controls} select="range" startInput={start} endInput={end} />
<Input ref={setStart} label="Start" placeholder="Event start" />
<Input ref={setEnd} label="End " placeholder="Event end" />
<SegmentedGroup value={showAs} onChange={showAsChange}>
<Segmented value="busy">Show as busy</Segmented>
<Segmented value="free">Show as free</Segmented>
</SegmentedGroup>
<Textarea label="Notes" placeholder="Enter notes, URL, comments" />
</Page>
);
}
export default App;
import {
Datepicker,
Input,
MbscDatepickerControl,
Page,
Segmented,
SegmentedGroup,
setOptions,
Switch,
Textarea ,
} from '@mobiscroll/react';
import { ChangeEvent, FC, useCallback, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [start, setStart] = useState<Input | null>(null);
const [end, setEnd] = useState<Input | null>(null);
const [allDay, setAllDay] = useState<boolean>(false);
const [showAs, setShowAs] = useState<string>('busy');
const controls = useMemo<MbscDatepickerControl[]>(() => (allDay ? ['date'] : ['datetime']), [allDay]);
const controlChange = useCallback((ev: ChangeEvent<HTMLInputElement>) => {
setAllDay(ev.target.checked);
}, []);
const showAsChange = useCallback((ev: ChangeEvent<HTMLInputElement>) => {
setShowAs(ev.target.value);
}, []);
return (
<Page>
<Input label="Title" placeholder="Name of the event" />
<Input label="Location" placeholder="Where will it be?" />
<Switch label="All day" value={allDay} onChange={controlChange} />
<Datepicker controls={controls} select="range" startInput={start} endInput={end} />
<Input ref={setStart} label="Start" placeholder="Event start" />
<Input ref={setEnd} label="End " placeholder="Event end" />
<SegmentedGroup value={showAs} onChange={showAsChange}>
<Segmented value="busy">Show as busy</Segmented>
<Segmented value="free">Show as free</Segmented>
</SegmentedGroup>
<Textarea label="Notes" placeholder="Enter notes, URL, comments" />
</Page>
);
};
export default App;