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",
  },
]