Date Format Inputs
Understanding how to work with dates inside the event calendar is essential. You can pass to the data, marked, colors and labels in four different formats. The event calendar can work with Javascript date objects, ISO strings and Moment.js objects.
Demo
JS date object
start: new Date(2020, 4, 19, 10, 45),
end: new Date(2020, 4, 19, 11, 45)ISO date string
start: '2020-05-20T12:30:00',
end: '2020-05-20T13:00:00'Moment.js object
start: moment([2020, 4, 21, 11]),
end: moment([2020, 4, 21, 14])
JSXTSX
import { Button, Eventcalendar, Page, setOptions } from '@mobiscroll/react';
import moment from 'moment';
import { useCallback, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [selectedDateObj, setSelectedDateObj] = useState(new Date(2020, 4, 19));
const [selectedDateISO, setSelectedDateISO] = useState('2020-05-20');
const [selectedDateMoment, setSelectedDateMoment] = useState(moment([2020, 4, 21]));
const [dateObjEvents, setDateObjEvents] = useState([
{
start: new Date(2020, 4, 19, 7),
end: new Date(2020, 4, 19, 8),
title: 'General orientation',
color: '#35bb5a',
},
]);
const [dateISOEvents, setDateISOEvents] = useState([
{
start: '2020-05-20T07:00:00',
end: '2020-05-20T08:00:00',
title: 'Clever Conference',
color: '#a71111',
},
]);
const [dateMomentEvents, setDateMomentEvents] = useState([
{
start: moment([2020, 4, 21, 7]),
end: moment([2020, 4, 21, 8]),
title: 'Product team mtg.',
color: '#913aa7',
},
]);
const myView = useMemo(() => ({ calendar: { type: 'month', popover: true, count: true } }), []);
const addDateObjEvent = useCallback(() => {
const newEvent = {
start: new Date(2020, 4, 19, 10, 45),
end: new Date(2020, 4, 19, 11, 45),
text: 'New Event',
};
setDateObjEvents((dateObjData) => [...dateObjData, newEvent]);
setSelectedDateObj(new Date(2020, 4, 19));
}, []);
const addDateISOEvent = useCallback(() => {
const newEvent = {
start: '2020-05-20T12:30:00',
end: '2020-05-20T13:00:00',
text: 'New Event',
};
setDateISOEvents((isoData) => [...isoData, newEvent]);
setSelectedDateISO('2020-05-20');
}, []);
const addDateMomentEvent = useCallback(() => {
const newEvent = {
start: moment([2020, 4, 21, 11]),
end: moment([2020, 4, 21, 14]),
text: 'New Event',
};
setDateMomentEvents((momentData) => [...momentData, newEvent]);
setSelectedDateMoment(moment([2020, 4, 21]));
}, []);
const handleSelectedDateObjChange = useCallback((args) => {
setSelectedDateObj(args.date);
}, []);
const handleSelectedDateISOChange = useCallback((args) => {
setSelectedDateISO(args.date);
}, []);
const handleSelectedDateMomentChange = useCallback((args) => {
setSelectedDateMoment(args.date);
}, []);
return (
<Page>
<div className="mbsc-grid">
<div className="mbsc-row">
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Date object</div>
<div className="mbsc-button-group-block">
<Button onClick={addDateObjEvent}>
start: new Date(2020, 4, 19, 10, 45)
<br />
end: new Date(2020, 4, 19, 11, 45)
</Button>
</div>
<Eventcalendar
clickToCreate={ }
dragToCreate={ }
dragToMove={ }
dragToResize={ }
eventDelete={ }
data={dateObjEvents}
view={myView}
selectedDate={selectedDateObj}
onSelectedDateChange={handleSelectedDateObjChange}
/>
</div>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">ISO 8601 date string</div>
<div className="mbsc-button-group-block">
<Button onClick={addDateISOEvent}>
start: '2020-05-20T12:30:00'
<br />
end: '2020-05-20T13:00:00'
</Button>
</div>
<Eventcalendar
clickToCreate={ }
dragToCreate={ }
dragToMove={ }
dragToResize={ }
eventDelete={ }
data={dateISOEvents}
view={myView}
selectedDate={selectedDateISO}
onSelectedDateChange={handleSelectedDateISOChange}
/>
</div>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Moment.js object</div>
<div className="mbsc-button-group-block">
<Button onClick={addDateMomentEvent}>
start: moment([2020, 4, 21, 11])
<br />
end: moment([2020, 4, 21, 14])
</Button>
</div>
<Eventcalendar
clickToCreate={ }
dragToCreate={ }
dragToMove={ }
dragToResize={ }
eventDelete={ }
data={dateMomentEvents}
view={myView}
selectedDate={selectedDateMoment}
onSelectedDateChange={handleSelectedDateMomentChange}
/>
</div>
</div>
</div>
</div>
</Page>
);
}
export default App;
import {
Button,
Eventcalendar,
MbscCalendarEvent,
MbscDateType,
MbscEventcalendarView,
MbscSelectedDateChangeEvent,
Page,
setOptions ,
} from '@mobiscroll/react';
import moment from 'moment';
import { FC, useCallback, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [selectedDateObj, setSelectedDateObj] = useState<MbscDateType>(new Date(2020, 4, 19));
const [selectedDateISO, setSelectedDateISO] = useState<MbscDateType>('2020-05-20');
const [selectedDateMoment, setSelectedDateMoment] = useState<MbscDateType>(moment([2020, 4, 21]));
const [dateObjEvents, setDateObjData] = useState<MbscCalendarEvent[]>([
{
start: new Date(2020, 4, 19, 7),
end: new Date(2020, 4, 19, 8),
title: 'General orientation',
color: '#35bb5a',
},
]);
const [dateISOEvents, setISOData] = useState<MbscCalendarEvent[]>([
{
start: '2020-05-20T07:00:00',
end: '2020-05-20T08:00:00',
title: 'Clever Conference',
color: '#a71111',
},
]);
const [dateMomentEvents, setMomentData] = useState<MbscCalendarEvent[]>([
{
start: moment([2020, 4, 21, 7]),
end: moment([2020, 4, 21, 8]),
title: 'Product team mtg.',
color: '#913aa7',
},
]);
const myView = useMemo<MbscEventcalendarView>(
() => ({
calendar: {
type: 'month',
popover: true,
count: true,
},
}),
[],
);
const addDateObjEvent = useCallback(() => {
const newEvent = {
start: new Date(2020, 4, 19, 10, 45),
end: new Date(2020, 4, 19, 11, 45),
text: 'New Event',
};
setDateObjData((dateObjData) => [...dateObjData, newEvent]);
setSelectedDateObj(new Date(2020, 4, 19));
}, []);
const addDateISOEvent = useCallback(() => {
const newEvent = {
start: '2020-05-20T12:30:00',
end: '2020-05-20T13:00:00',
text: 'New Event',
};
setISOData((isoData) => [...isoData, newEvent]);
setSelectedDateISO('2020-05-20');
}, []);
const addDateMomentEvent = useCallback(() => {
const newEvent = {
start: moment([2020, 4, 21, 11]),
end: moment([2020, 4, 21, 14]),
text: 'New Event',
};
setMomentData((momentData) => [...momentData, newEvent]);
setSelectedDateMoment(moment([2020, 4, 21]));
}, []);
const handleSelectedDateObjChange = useCallback((args: MbscSelectedDateChangeEvent) => {
setSelectedDateObj(args.date);
}, []);
const handleSelectedDateISOChange = useCallback((args: MbscSelectedDateChangeEvent) => {
setSelectedDateISO(args.date);
}, []);
const handleSelectedDateMomentChange = useCallback((args: MbscSelectedDateChangeEvent) => {
setSelectedDateMoment(args.date);
}, []);
return (
<Page>
<div className="mbsc-grid">
<div className="mbsc-row">
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Date object</div>
<div className="mbsc-button-group-block">
<Button onClick={addDateObjEvent}>
start: new Date(2020, 4, 19, 10, 45)
<br />
end: new Date(2020, 4, 19, 11, 45)
</Button>
</div>
<Eventcalendar
clickToCreate={ }
dragToCreate={ }
dragToMove={ }
dragToResize={ }
eventDelete={ }
data={dateObjEvents}
view={myView}
selectedDate={selectedDateObj}
onSelectedDateChange={handleSelectedDateObjChange}
/>
</div>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">ISO 8601 date string</div>
<div className="mbsc-button-group-block">
<Button onClick={addDateISOEvent}>
start: '2020-05-20T12:30:00'
<br />
end: '2020-05-20T13:00:00'
</Button>
</div>
<Eventcalendar
clickToCreate={ }
dragToCreate={ }
dragToMove={ }
dragToResize={ }
eventDelete={ }
data={dateISOEvents}
view={myView}
selectedDate={selectedDateISO}
onSelectedDateChange={handleSelectedDateISOChange}
/>
</div>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Moment.js object</div>
<div className="mbsc-button-group-block">
<Button onClick={addDateMomentEvent}>
start: moment([2020, 4, 21, 11])
<br />
end: moment([2020, 4, 21, 14])
</Button>
</div>
<Eventcalendar
clickToCreate={ }
dragToCreate={ }
dragToMove={ }
dragToResize={ }
eventDelete={ }
data={dateMomentEvents}
view={myView}
selectedDate={selectedDateMoment}
onSelectedDateChange={handleSelectedDateMomentChange}
/>
</div>
</div>
</div>
</div>
</Page>
);
};
export default App;