Readme set up issues

[natguy]

First, is that <date> in useState<Date> a typo, not a placeholder?

let [currentMonth, setCurrentMonth] = useState<Date>(
  startOfMonth(new Date())
);

Second, I seem to be getting an error that React is not liking the <DefaultMonthlyEventItem> component's date being a javascript date object. And converting it to a string overcomes the error and displays the calendar, but does not display the event.

<MonthlyBody
    events={[
      { title: 'Call John', date: subHours(new Date(), 2) },
      { title: 'Call John', date: subHours(new Date(), 1) },
      { title: 'Meeting with Bob', date: new Date() },
    ]}
    renderDay={data =>
      data.map((item, index) => (
        <DefaultMonthlyEventItem
          key={index}
          title={item.title}
          date={item.date}
        />
      ))
    }
  />

Error:

Error: Objects are not valid as a React child (found: Mon Apr 26 2021 14:48:16 GMT-0400 (Eastern Daylight Time)). If you meant to render a collection of children, use an array instead.

Third, is only a suggestion, but you may want to mention in the setup docs the need for importing what's needed from date-fns .

import { startOfMonth, subHours } from 'date-fns'

[zackify]

First, is that in useState a typo, not a placeholder?

It is not a typo, I am saying that the state contains a Date instance. (This is using Typescript, you can omit it if you do not use TS)

As for the Objects are not valid keys error:
Sorry about the confusion. I will be sure to update the readme in regards to the date.

You need to format the date before passing it into DefaultMonthlyEventItem

<DefaultMonthlyEventItem
          key={index}
          title={item.title}
          date={item.date.toISOString()}
        />

I left it up to the end user (you) to decide how to format the date for displaying in the event item. You can see an example here:

https://github.com/zackify/react-calendar/blob/master/example/index.tsx#L33

[zackify]

I have fixed the readme, please check out the stories folder for complete example code: https://github.com/zackify/react-calendar/tree/master/stories

Feel free to re-open this if you have any further issues :)

[natguy]

Thanks! Got it. Worked for me.