Full-featured Calendar JavaScript Library – tui.calendar

Category: Date & Time , Javascript , Recommended | September 22, 2020
Views Total:941 views
Official Page:Go to website
Last Update:September 22, 2020


Full-featured Calendar JavaScript Library – tui.calendar


tui.calendar is a powerful, full-featured calendar library used to showcase custom events, schedules, tasks in daily, weekly, and monthly views.


$ npm install tui-calendar --save

Basic usage:

Include the bundled JavaScript and CSS files on the page.

<link rel="stylesheet" href="dist/tui-calendar.css">
<script src="dist/tui-calendar.js"></script>

Create a container where you want to render the Tui Calendar.

<div id="calendar"></div>

Create a new Tui Calendar as these:

var Calendar = tui.Calendar;

var calendar = new Calendar('#calendar', {
    // options here

Possible options to customize the calendar.

var calendar = new Calendar('#calendar', {

    // 'day', 'week', 'month'
    defaultView: 'week',

    // shows the milestone and task in weekly, daily view
    taskView: true,

    // shows the all day and time grid in weekly, daily view
    scheduleView: true,

    // template options
    template: {
      milestone: function(schedule) {
        return '<span style="color:red;"><i class="fa fa-flag"></i> ' + schedule.title + '</span>';
      milestoneTitle: function() {
        return 'Milestone';
      task: function(schedule) {
        return '&nbsp;&nbsp;#' + schedule.title;
      taskTitle: function() {
        return '<label><input type="checkbox" />Task</label>';
      allday: function(schedule) {
        return schedule.title + ' <i class="fa fa-refresh"></i>';
      alldayTitle: function() {
        return 'All Day';
      time: function(schedule) {
        return schedule.title + ' <i class="fa fa-refresh"></i>' + schedule.start;
    week: {
      daynames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      startDayOfWeek: 0,
      narrowWeekend: true
    month: {
      daynames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      startDayOfWeek: 0,
      narrowWeekend: true

    // list of Calendars that can be used to add new schedule
    calendars: [],

    // whether use default creation popup or not
    useCreationPopup: false,

    // whether use default detail popup or not
    useDetailPopup: false


v1.12.14 (09/22/2020)

  • Bug Fixes
  • Enhancement

v1.12.13 (04/28/2020)

  • Bug Fixes
  • Enhancement: Enable text selection on popup
  • Improved default detail popup location

v1.12.12 (03/24/2020)

  • Bug Fixes
  • Refactor: change the properties of accessible objects using util.pick

v1.12.11 (02/05/2020)

  • Bug Fixes

v1.12.10 (01/23/2020)

  • Bug Fixes

v1.12.9 (12/30/2019)

  • Fix: Date convert wrong type as number

v1.12.8 (11/28/2019)

  • fix: remove fixing start of milestone and task as one day

v1.12.6 (10/24/2019)

  • Fix: resolve security vulnerabiliti for npm audi.
  • Fix: If the user directly inputs the end time as 00:00, render the schedule correctly.
  • Fix: change method name ‘getNextStartDay’ to ‘getStartOfNextDay’.
  • Fix: when changing timezone, today display issue.

v1.12.5 (07/31/2019)

  • Fix: add semicolon for more view schdule custom style (#374)
  • Fix: add dependency tui-dom for cdn example pages. (fix #376)
  • Fix: can use html text for templates (fix #380) (#389)
  • Fix: update type definition file

v1.12.4 (07/31/2019)

  • Feat: support minimum height of month and week view
  • Bugs fixed

v1.12.3 (07/05/2019)

  • Fix: remove duplicate tui-time-picker option
  • Fix: resolve tracking GA option inside using tui component

v1.12.1 (05/31/2019)

  • Fix: Wrong type for IMonthOptions.visibleWeeksCount
  • Fix: : fix meridiem in timegridDisplayPrimayTime default template-the Noon is 12 pm
  • Fix: Weekly and Daily views not rendering schedule in few months

v1.12.0 (04/23/2019)

  • Bugfix
  • Refactor: change return value about render position(percent string to number)

v1.11.2 (04/19/2019)

  • Bugfix

v1.11.0 (04/06/2019)

  • Added support current time template on weekly, daily view
  • Change Typescript definition file ‘tui-calendar’ export type to default export

v1.10.1 (03/07/2019)

  • Fix: DST timezone bug

v1.10.0 (01/24/2019)

  • feat: Creation popup open on only double click option if set ‘disableClick’

v1.9.0 (12/18/2018)

  • feat: Display a recurrenceRule and body text

v1.8.1 (12/12/2018)

  • Feat : add declaration file for Typescript

v1.8.0 (11/06/2018)

  • fix: State is always Busy

v1.7.0 (11/06/2018)

  • fix: getDateRangeEnd() error in month view when option.month.isAlways6Week is undefined.
  • feat: Add ‘clickMore’ callback in monthly view
  • fix: Dragging a schedule make wrong time on 24 o’click

v1.6.0 (07/25/2018)

  • Bugfix

v1.5.0 (07/18/2018)

  • fix: getElement return null on month view in case of hidden schedules
  • feat: Support isReadOnly option of Calendar

You Might Be Interested In:

3 thoughts on “Full-featured Calendar JavaScript Library – tui.calendar

  1. shabs

    Is it possible to display calendar multi-column schedule for same day, eg room 1, room 2, room 3 (for appointment book)?


Leave a Reply