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"><iframesrc="https://codesandbox.io/embed/sweet-napier-h80cf?fontsize=14&hidenavigation=1&initialpath=%2Fcalendar&module=%2Fsrc%2Fcomponents%2Fcalendar.js&theme=dark&view=preview"width="100%"height="500px"ms="-15px"overflow="hidden"/></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