Calendar

A JavaScript event calendar. Customizable and open source. Display a full-size drag-n-drop event calendar.

TOAST UI Calendar is great for displaying events, but it isn't a complete solution for event content-management. See more about this great plugin at TOAST UI React Calendar.

Theme has built in Next.js wrapper with dynamic import which you can find in src/components/Calendar

import Calendar from "../components/Calendar"
import moment from "moment"


const themeConfig = {
  // month day grid cell 'day'
  month: {
    weekend: {
      backgroundColor: "#fafafa",
    },
  },
}
export default function page(props) {
  const todayDate = moment().startOf("day")
  const YM = todayDate.format("YYYY-MM")
  const YESTERDAY = todayDate.clone().subtract(1, "day").format("YYYY-MM-DD")
  const TODAY = todayDate.format("YYYY-MM-DD")
  const TOMORROW = todayDate.clone().add(1, "day").format("YYYY-MM-DD")
 
  return(
    <Calendar 
      height="900px"
      view="month"
      calendars={[
        {
          id: "0",
          name: "Private",
          bgColor: "#4650dd",
          borderColor: "#4650dd",
          color: "#fff",
        },
        {
          id: "1",
          name: "Company",
          bgColor: "#00a9ff",
          borderColor: "#00a9ff",
          color: "#fff",
        },
      ]}
      disableDblClick={true}
      disableClick={false}
      isReadOnly={false}
      month={{
        startDayOfWeek: 0,
      }}
      events={[
        {
          calendarId: "0",
          title: "All Day Event",
          category: "time",
          start: YM + "-01",
          end: YM + "-01",
        },
        {
          calendarId: "0",
          title: "Long Event",
          category: "time",
          start: YM + "-07",
          end: YM + "-10",
        },
        {
          calendarId: "1",
          category: "time",
          id: 999,
          title: "Repeating Event",
          start: YM + "-09T16:00:00",
          end: YM + "-09T16:00:00",
        },
        {
          calendarId: "1",
          title: "Repeating Event",
          category: "time",
          id: 999,
          title: "Repeating Event",
          start: YM + "-16T16:00:00",
          end: YM + "-16T16:00:00",
        },
        {
          calendarId: "1",
          title: "Conference",
          start: YESTERDAY,
          end: TOMORROW,
          category: "time",
        },
        {
          calendarId: "0",
          title: "Meeting",
          start: TODAY + "T10:30:00",
          end: TODAY + "T12:30:00",
          category: "time",
        },
        {
          calendarId: "0",
          title: "Lunch",
          category: "time",
          start: TODAY + "T12:00:00",
          end: TODAY + "T12:00:00",
        },
        {
          calendarId: "0",
          category: "time",
          title: "Meeting",
          start: TODAY + "T14:30:00",
          end: TODAY + "T14:30:00",
        },
      ]}
      scheduleView
      taskView
      theme={themeConfig}
      timezones={[
        {
          timezoneOffset: 540,
          displayLabel: "GMT+09:00",
          tooltip: "Seoul",
        },
        {
          timezoneOffset: -420,
          displayLabel: "GMT-08:00",
          tooltip: "Los Angeles",
        },
      ]}
      useDetailPopup
      week={{
        showTimezoneCollapseButton: true,
        timezonesCollapsed: true,
      }}
    />
  )
}

Your company © 2023

Version 1.3.0