explaingit

nhn/tui.calendar

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

TLDR

Full-featured drag-and-drop calendar component for web apps supporting monthly, weekly, and daily views, available as plain JavaScript or as ready-made React and Vue wrappers.

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
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

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.

Tech stack

TypeScriptJavaScriptReactVuePreactImmerDOMPurify

Getting 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.

In plain English

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?
Open on GitHub → Explain another repo

← nhn on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.