What is tui.calendar?

nhn/tui.calendar — explained in plain English

Analysis updated 2026-06-24

★ 12,639TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((tui.calendar))
    View Types
      Monthly view
      Weekly view
      Daily view
      Custom multi-week
    Drag and Drop
      Move events
      Resize events
      Create by drag
    Tech Stack
      TypeScript
      React wrapper
      Vue wrapper
      Preact internal
    Features
      Custom themes
      Built-in popups
      IE 11 support
    Audience
      Web developers
      SaaS product teams

mindmap root((tui.calendar)) View Types Monthly view Weekly view Daily view Custom multi-week Drag and Drop Move events Resize events Create by drag Tech Stack TypeScript React wrapper Vue wrapper Preact internal Features Custom themes Built-in popups IE 11 support Audience Web developers SaaS product teams

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Add a drag-and-drop event calendar to a React or Vue app where users can create, move, and resize events visually.

USE CASE 2

Build a scheduling interface that works across Chrome, Firefox, Safari, Edge, and Internet Explorer 11.

USE CASE 3

Display appointments or tasks in a monthly, weekly, or daily calendar view with minimal configuration.

USE CASE 4

Apply a custom color theme to the calendar to match your application's visual design.

What is it built with?

TypeScriptJavaScriptReactVuePreactImmerDOMPurify

How does it compare?

	nhn/tui.calendar	automattic/wp-calypso	googlechromelabs/comlink
Stars	12,639	12,630	12,655
Language	TypeScript	TypeScript	TypeScript
Setup difficulty	easy	moderate	easy
Complexity	2/5	4/5	2/5
Audience	developer	developer	developer

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

The component collects usage analytics by hostname via Google Analytics, the README documents how to disable it.

MIT license, use freely for any purpose including commercial products, as long as you keep the copyright notice.

So what is it?

TOAST UI Calendar is a JavaScript component that adds a full-featured calendar to web applications. It is built by NHN Cloud, the company behind the TOAST UI suite of frontend components, and is available as a plain JavaScript package or as ready-made wrappers for React and Vue projects. The calendar supports four view types: monthly, weekly, daily, and a customizable multi-week view (such as two or three weeks at a time). You can drag events to move them or resize them by dragging their edges. Built-in popups handle event creation and detail display, so you can drop it into a page with minimal extra code. Other options include changing which day starts the week, narrowing the display width of weekends, showing milestone and task-style schedules separately, and applying custom themes to change the visual appearance. The component works in Chrome, Edge, Safari, Firefox, and Internet Explorer 11 and above. It depends on a few libraries internally: Preact (a lightweight alternative to React used for rendering), Immer (for managing state changes), and DOMPurify (to sanitize user-provided content before it appears on screen). Optional integrations with TOAST UI date and time picker components are also available for more polished date input. The README notes that TOAST UI Calendar collects usage data by hostname through Google Analytics to measure how widely the library is used. The documentation describes how to disable this if you prefer not to share that information. NHN Cloud uses this calendar in their own products, including Dooray, a business collaboration platform. Several other commercial services are also listed as users. The project is released under the MIT license.

Copy-paste prompts

Prompt 1

Add TOAST UI Calendar to my React app in weekly view mode. Show me how to load an array of events from my API and display them, and how to handle the event when a user moves an event by dragging.

Prompt 2

I'm using tui.calendar in Vue 3. Show me how to listen for the event creation callback when a user drags to create a slot, capture the start and end times, and save the new event to my database.

Prompt 3

I want to configure TOAST UI Calendar so Monday is the first day of the week and weekend columns appear narrower than weekday columns. Show me the exact config options.

Prompt 4

Show me how to apply a dark custom theme to TOAST UI Calendar by overriding the theme variables for background color, border color, and event color.

Prompt 5

How do I disable the Google Analytics hostname tracking in TOAST UI Calendar for a client project where we cannot share usage data with third parties?

Frequently asked questions