Full-featured Calendar JavaScript Library – tui.calendar

Category: Date & Time , Javascript , Recommended | May 31, 2019
Author: nhnent
Views Total: 4,925
Official Page: Go to website
Last Update: May 31, 2019
License: MIT

Preview:

Full-featured Calendar JavaScript Library – tui.calendar

Description:

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

Installation:

# NPM
$ 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
    
});

Changelog:

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:


Leave a Reply