fullcalendar_react_daygrid_basic_component_with_sample_event.ts

1import React from 'react'
2import FullCalendar from '@fullcalendar/react'
3import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!
4
5interface EventInfo {
6  title: string;
7  date: string;
8}
9
10const events: EventInfo[] = [
11  { title: 'Meeting', date: new Date().toISOString().split('T')[0] }
12]
13
14export default function Calendar() {
15  return (
16    <FullCalendar
17      plugins={[ dayGridPlugin ]}
18      initialView="dayGridMonth"
19      weekends={false}
20      events={events}
21      eventContent={renderEventContent}
22    />
23  )
24}
25
26function renderEventContent(eventInfo: any) {
27  return (
28    <>
29      <b>{eventInfo.timeText}</b>
30      <i>{eventInfo.event.title}</i>
31    </>
32  )
33}