---
title: "React Agenda Supported Date Formats Example | Mobiscroll"
component: "Agenda"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/agenda/date-object-ISO-8601-moment"
---

# Supported Date Formats - React Agenda demo

Use JS Date objects, ISO 8601 strings, or Moment.js values in the React Agenda — pass them to event data, markers, colors, and labels. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/agenda/date-object-ISO-8601-moment)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/agenda/date-object-ISO-8601-moment)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/eventcalendar/agenda/date-object-ISO-8601-moment)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/agenda/date-object-ISO-8601-moment.md), [jQuery](https://demo.mobiscroll.com/jquery/agenda/date-object-ISO-8601-moment.md), [Angular](https://demo.mobiscroll.com/angular/agenda/date-object-ISO-8601-moment.md), [Vue](https://demo.mobiscroll.com/vue/agenda/date-object-ISO-8601-moment.md)

## Description

Understanding how to work with dates inside the agenda is essential. You can pass to the `data`, `marked`, `colors` and `labels` in four different formats. The agenda can work with **Javascript date objects, ISO strings** and **Moment.js objects**.

## What this demo shows

- Shows a monthly agenda view with an empty agenda list by default, so no events appear until one is added from the examples.
- **Example panel** Three code snippets are displayed to the left of the agenda, each showing a supported event date format.
- **Supported formats** The examples cover `JS date object`, `ISO date string` and `Moment.js object`.
- **Add event actions** Each code example has a button that adds a new event to the agenda using that format.
- **Button labels**: The buttons are labeled `Add event with JS date object`, `Add event with ISO string` and `Add event with moment.js object`.
- **Button interaction** Hovering a button highlights it, and clicking it inserts a new event into the month view.
- **Header navigation** The month and year label in the top left opens date navigation. The previous and next arrows and the Today button on the right move between months and jump back to the current date.
- **Agenda list** The area below the header lists events for the selected month. Events in the agenda are grouped by date.
- **Sticky day headers** As the agenda scrolls vertically, each day stays visible with a sticky date header while its events appear underneath.
- **Events** Events appear as agenda cards with a colored strip on the left and the event title next to it. Start and end times are stacked on the right side of timed events. All-day events show the all-day label on the right.
- **Event interaction** Hovering an event highlights it.
- **Event selection** Clicking an event selects and highlights it.

## Best for

- **Supported date inputs** Explaining which date formats the agenda accepts for event-related data.

## Tutorial

### JS date object

```jsx
start: new Date(2020, 4, 19, 10, 45),
end: new Date(2020, 4, 19, 11, 45)
```

### ISO date string

```jsx
start: '2020-05-20T12:30:00',
end: '2020-05-20T13:00:00'
```

### Moment.js object

```jsx
start: moment([2020, 4, 21, 11]),
end: moment([2020, 4, 21, 14])
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-themeVariant) - option
- [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - option
- [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option
- [`selectedDate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-selectedDate) - option
- [`onSelectedDateChange`](https://mobiscroll.com/docs/react/eventcalendar/api#event-onSelectedDateChange) - event

## Code

### JSX

```jsx
import { Button, Eventcalendar, Page, setOptions } from '@mobiscroll/react';
import moment from 'moment';
import { useCallback, useMemo, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

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(() => ({ agenda: { type: 'month' } }), []);

  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
                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
                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
                data={dateMomentEvents}
                view={myView}
                selectedDate={selectedDateMoment}
                onSelectedDateChange={handleSelectedDateMomentChange}
              />
            </div>
          </div>
        </div>
      </div>
    </Page>
  );
}

export default App;
```

### TSX

```tsx
import {
  Button,
  Eventcalendar,
  MbscCalendarEvent,
  MbscDateType,
  MbscEventcalendarView,
  MbscSelectedDateChangeEvent,
  Page,
  setOptions,
} from '@mobiscroll/react';
import moment from 'moment';
import { FC, useCallback, useMemo, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

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>(() => ({ agenda: { type: 'month' } }), []);

  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
                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
                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
                data={dateMomentEvents}
                view={myView}
                selectedDate={selectedDateMoment}
                onSelectedDateChange={handleSelectedDateMomentChange}
              />
            </div>
          </div>
        </div>
      </div>
    </Page>
  );
};

export default App;
```

## Implementation notes

- Use `view: { agenda: { type: 'month' } }`. Render three Eventcalendar instances side by side in a `Page` + grid layout, each demonstrating a different date format: JavaScript `Date` object (e.g. `new Date(2020, 4, 19, 7)`), ISO 8601 string (e.g. `'2020-05-20T07:00:00'`), and Moment.js object (e.g. `moment([2020, 4, 21, 7])`). Each instance is pre-seeded with one event using its respective format and navigated to its date on init.
- Adding an event programmatically: call `addEvent(event)` (or update the `data` array) with the event in the target date format, then navigate to it via `navigate(date)` (or update `selectedDate`).

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-react.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config react
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config react --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation

## Related demos

- Previous: [Event Data Structure](https://demo.mobiscroll.com/react/agenda/event-data-structure.md) - Structure event objects for the React Agenda — configure start, end, recurrence, resource, and color properties, and extend events with custom fields.
- Next: [Recurring Events](https://demo.mobiscroll.com/react/agenda/recurring-events.md) - Configure daily, weekly, monthly, and yearly recurring events in a React agenda view — exclude dates, set stop conditions, and build RRULE strings interactively.