External Date Navigation

import { Datepicker, Eventcalendar, getJson, setOptions } from '@mobiscroll/react';
import { useCallback, useEffect, useMemo, useState } from 'react';

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

function App() {
  const [myEvents, setEvents] = useState([]);
  const [mySelectedDate, setSelectedDate] = useState(new Date());
  const dayView = useMemo(() => ({ timeline: { type: 'day' } }), []);
  const myResources = useMemo(
    () => [
      { id: 1, name: 'Resource 1', color: 'red' },
      { id: 2, name: 'Resource 2', color: 'orange' },
      { id: 3, name: 'Resource 3', color: 'blue' },
    ],
    [],
  );

  const handleDateChange = useCallback((args) => {
    setSelectedDate(args.value);
  }, []);

  const handleSelectedDateChange = useCallback((args) => {
    setSelectedDate(args.date);
  }, []);

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/filter-resource-events/',
      (events) => {
        setEvents(events);
      },
      'jsonp',
    );
  }, []);

  return (
    <div className="mds-external-nav-timeline mbsc-flex">
      <div className="mds-external-nav-dp">
        <Datepicker value={mySelectedDate} display="inline" onChange={handleDateChange} />
      </div>
      <div className="mds-external-nav-ec mbsc-flex-1-1">
        <Eventcalendar
          data={myEvents}
          selectedDate={mySelectedDate}
          view={dayView}
          resources={myResources}
          onSelectedDateChange={handleSelectedDateChange}
        />
      </div>
    </div>
  );
}

export default App;

import {
  Datepicker,
  Eventcalendar,
  getJson,
  MbscCalendarEvent,
  MbscDatepickerChangeEvent,
  MbscDateType,
  MbscEventcalendarView,
  MbscResource,
  MbscSelectedDateChangeEvent,
  setOptions,
} from '@mobiscroll/react';
import { useCallback, useEffect, useMemo, useState } from 'react';

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

function App() {
  const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
  const [mySelectedDate, setSelectedDate] = useState<MbscDateType>();
  const dayView = useMemo<MbscEventcalendarView>(() => ({ timeline: { type: 'day' } }), []);
  const myResources = useMemo<MbscResource[]>(
    () => [
      { id: 1, name: 'Resource 1', color: 'red' },
      { id: 2, name: 'Resource 2', color: 'orange' },
      { id: 3, name: 'Resource 3', color: 'blue' },
    ],
    [],
  );

  const handleDateChange = useCallback((args: MbscDatepickerChangeEvent) => {
    if (args.value) {
      setSelectedDate(args.value);
    }
  }, []);

  const handleSelectedDateChange = useCallback((args: MbscSelectedDateChangeEvent) => {
    setSelectedDate(args.date);
  }, []);

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/filter-resource-events/',
      (events: MbscCalendarEvent[]) => {
        setEvents(events);
      },
      'jsonp',
    );
  }, []);

  return (
    <div className="mds-external-nav-timeline mbsc-flex">
      <div className="mds-external-nav-dp">
        <Datepicker value={mySelectedDate} display="inline" onChange={handleDateChange} />
      </div>
      <div className="mds-external-nav-ec mbsc-flex-1-1">
        <Eventcalendar
          data={myEvents}
          selectedDate={mySelectedDate}
          view={dayView}
          resources={myResources}
          onSelectedDateChange={handleSelectedDateChange}
        />
      </div>
    </div>
  );
}

export default App;

.mds-external-nav-timeline {
  height: 100%;
}

.mds-external-nav-dp .mbsc-datepicker-inline {
  height: auto;
}

.mds-external-nav-ec {
  border-left: 1px solid #ccc;
}

@media screen and (max-width: 700px) {
  .mds-external-nav-timeline {
    display: block;
  }
}