Chakra UI Full Calendar - Horizon UI

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/mystifying-parm-4bwdc?fontsize=14&hidenavigation=1&theme=dark&hidedevtools=1&editorsize=0&initialpath=calendar&module=%2Fsrc%2Fcomponents%2calendar.js"
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",
},
]

Horizon UI © 2021-2023 Copyright. All Rights Reserved.

  • Blog
  • License