Calendar class

Description

You can use the Calendar class to create a calendar instance. You need to specify where you want the instance to be created (the HTML element), and set the appropriate options if necessary.

Add a container element where TOAST UI Calendar will be created. This element must have an appropriate height. (600px or higher is recommended)

import { Calendar } from '@toast-ui/calendar';

// Passing elements directly
const container = document.querySelector('#container');
const calendar = new Calendar(container);

// Using CSS selectors
const calendar = new Calendar('#container');

Options can be set as the second argument when creating a calendar instance. Options that are not specified are set to default values. For more information on options, see the Options documentation.

const calendar = new Calendar(container, {
  // Options of the calendar instance
  defaultView: 'month',
  isReadOnly: true,
  timezone: {
    // ...
  },
  theme: {
    // ...
  },
  template: {
    // ...
  },
});

After creating an instance, you can control the operation of the calendar using the calendar instance method and register event handlers in the instance event.

const calendar = new Calendar('#container');

// Registering an instance event
calendar.on('beforeCreateEvent', (eventObj) => {
  // Calling the instance method when the instance event is invoked
  calendar.createEvents([
    {
      ...eventObj,
      id: uuid(),
    },
  ]);
});

Instance methods

💡 Click on a method to see more detailed explanations and usage examples.

Method	Description
render	Renders the calendar instance to the screen.
renderToString	Returns the rendering result of the current calendar instance as an HTML string for use in server-side rendering.
destroy	Destroys the calendar instance.
getEvent	Gets the data of the target event.
createEvents	Creates one or more calendar events.
updateEvent	Updates the contents of the target event.
deleteEvent	Deletes the target event.
clear	Removes all events stored in the calendar instance.
today	Moves to the range containing the current date.
move	According to the view, it moves the range by a given number.
prev	Moves to the previous range of the current screen. The range of movement depends on the range of the view.
next	Moves to the next range of the current screen. The range of movement depends on the range of the view.
setDate	Moves to the range containing the specified date.
changeView	Changes the view of the calendar instance to Monthly/Weekly/Day.
getElement	Finds the HTML element where a specific event was rendered. If not found, `null` is returned.
setTheme	Changes the theme of the calendar instance.
getOptions	Gets the options set in the calendar instance.
setOptions	Changes the options of the calendar instance.
getDate	Gets the base date for displaying range of the calendar instance.
getDateRangeStart	Gets the start date for displaying range of the calendar instance.
getDateRangeEnd	Gets the end date for displaying range of the calendar instance.
getViewName	Gets the view type of the calendar instance. (Monthly / Weekly / Daily)
setCalendars	Changes calendar information.
setCalendarVisibility	Hides or shows all events included in the specified event group.
setCalendarColor	Changes the color value of all events included in the specified event group.
scrollToNow	If a displayed range contains the current time in the weekly/daily view, it immediately scrolls to the current time area.
openFormPopup	Displays the popup for creating the event. The value of the popup is filled according to the parameter.
clearGridSelections	Removes all date/time selection elements currently displayed in the calendar.
fire	Executes arbitrary instance events. A detailed description is provided in the Instance Events section.
off	Unregisters an instance event. A detailed description is provided in the Instance Events section.
on	Registers an instance event. A detailed description is provided in the Instance Events section.
once	Registers an instance event to fire only once. A detailed description is provided in the Instance Events section.

render

Type: render(): Calendar
Returns: Calendar - the calendar instance

This method is automatically called when a calendar instance is created in the browser environment.

When called for the first time, the calendar element is inserted under the HTML element passed as an argument when creating the instance, and if the render method is called directly, it is re-rendered.

If no HTML container is passed when instantiating, nothing happens.

After calling the method, it returns the calendar instance itself.

// Nothing happens
const calendar = new Calendar();
calendar.render();

// Automatically rendered once when there is an element
const calendar = new Calendar('#container');

// Re-render the instance above
calendar.render();

Event name	Description
selectDateTime	Occurs when dragging and dropping a specific date or time then dropping
beforeCreateEvent	Occurs when the ‘Save’ button is pressed in the default event creation/modification popup
beforeUpdateEvent	Occurs when the ‘Save’ button is pressed in the default event creation/modification popup or an event is dragged and dropped
beforeDeleteEvent	Occurs when the ‘Delete’ button is pressed in the default event details popup
afterRenderEvent	Occurs when each event is rendered
clickDayName	Occurs when a day of the week at the top of the calendar is clicked
clickEvent	Occurs when an event is clicked
clickMoreEventsBtn	Occurs when you click the 'More' button that appears because the number of events in each cell of the monthly view is exceeded
clickTimezoneCollapseBtn	Occurs when you click the collapse button that appears when multiple time zones are displayed in the weekly or daily view

Files

calendar.md

Latest commit

History

calendar.md

File metadata and controls

Calendar class

Description

Instance methods

render

renderToString

destroy

getEvent

createEvents

updateEvent

deleteEvent

clear

today

move

prev

next

setDate

changeView

getElement

setTheme

getOptions

setOptions

getDate

getDateRangeStart

getDateRangeEnd

getViewName

setCalendars

setCalendarVisibility

setCalendarColor

scrollToNow

openFormPopup

clearGridSelections

fire

off

on

once

Instance events

List of instance events

selectDateTime

beforeCreateEvent

beforeUpdateEvent

beforeDeleteEvent

afterRenderEvent

clickDayName

clickEvent

clickMoreEventsBtn

clickTimezonesCollapseBtn

Custom instance events