npm

$ npm install chronous

yarn

$ yarn add chronous

import { useState } from 'react'
import Chronous from 'chronous'
import ModalWindow from 'src/features/ModalWindow'
import { EventT } from 'src/types'
import ChevronRight from 'src/assets/icons/chevron-right.svg'
import ChevronLeft from 'src/assets/icons/chevron-left.svg'
import ChevronDown from 'src/assets/icons/chevron-down.svg'

export const App = () => {
  const [events, setEvents] = useState<EventT[]>([])

  return (
    <Chronous
      events={events}
      view="week"
      config={[{ maxWidth: 450, mode: 'mobile' }]}
      nextButton={<ChevronRight />}
      prevButton={<ChevronLeft />}
      dropDownArrow={<ChevronDown />}
      eventModal={({ onClose, ...event }) => (
        <ModalWindow
          onClose={onClose}
          id={event.id}
          events={events}
          selectedEvent={event}
          setEvents={setEvents}
        />
      )}
      newEventModal={({ onClose, time, day }) => (
        <ModalWindow
          day={day}
          time={time}
          events={events}
          onClose={onClose}
          setEvents={setEvents}
        />
      )}
    />
  )
}

| IE / Edge | Firefox | Chrome | Safari | --------- | --------- | --------- | --------- | | IE11, Edge| last 3 versions| last 3 versions| last 3 versions