Full Calendar

Our React Fullcalendar is a full-sized drag & drop event calendar. Keep reading our React Fullcalendar examples and learn how to use this plugin.

Import#

import EventCalendar from "components/Calendars/EventCalendar"

Usage#

function Example() {
return (
<Box bg="red.400" color="white">
<iframe
src="https://codesandbox.io/embed/bold-marco-5d6bf?fontsize=14&hidenavigation=1&initialpath=%2Fcalendar&theme=dark&view=preview"
width="100%"
height="500px"
ms="-15px"
overflow="hidden"
></iframe>
</Box>
)
}
function Example() {
return (
<Box>
<EventCalendar calendarData={calendarDataExample} />
</Box>
)
}

Data example#

export const calendarDataExample = [
{
title: "All day conference",
borderColor: "transparent",
start: "2021-10-01",
end: "2021-10-01",
backgroundColor: "#68D391",
className: "success",
},
{
title: "Meeting with Mary",
borderColor: "transparent",
start: "2021-10-03",
end: "2021-10-03",
backgroundColor: "#F6AD55",
className: "info",
},
{
title: "Cyber Week",
borderColor: "transparent",
start: "2021-10-04",
end: "2021-10-04",
backgroundColor: "#805AD5",
className: "warning",
},
{
title: "Winter Hackaton",
borderColor: "transparent",
start: "2021-10-05",
end: "2021-10-05",
backgroundColor: "#0BC5EA",
className: "error",
},
{
title: "Digital event",
borderColor: "transparent",
start: "2021-10-09",
end: "2021-10-11",
backgroundColor: "#4FD1C5",
className: "warning",
},
{
title: "Dinner with Family",
borderColor: "transparent",
start: "2021-10-21",
end: "2021-10-21",
backgroundColor: "#F6AD55",
className: "error",
},
{
title: "Black Friday",
borderColor: "transparent",
start: "2021-10-25",
end: "2021-10-25",
backgroundColor: "#0BC5EA",
className: "info",
},
]

© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web

  • Creative Tim
  • Simmmple
  • Blog
  • License