Full-featured Calendar JavaScript Library – tui.calendar

Category: Date & Time , Javascript , Recommended | November 6, 2018
Author: nhnent
Views Total: 3,200
Official Page: Go to website
Last Update: November 6, 2018
License: MIT


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

Leave a Reply