Calendar(container, options)

new Calendar(container, options)

Calendar class

Parameters:
Name Type Description
container HTMLElement | string

container element or selector id

options Options

calendar options

Mixes In:
Example
var calendar = new tui.Calendar(document.getElementById('calendar'), {
    defaultView: 'week',
    taskView: true,
    scheduleView: true,
    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;
        }
    },
    month: {
        daynames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        startDayOfWeek: 0,
        narrowWeekend: true
    },
    week: {
        daynames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        panelHeights: [80, 80, 120],
        startDayOfWeek: 0,
        narrowWeekend: true
    }
});

Members

options :Options

calendar options

readonly renderDate :Date

Current rendered date

readonly renderRange :RenderRange

start and end date of weekly, monthly

readonly viewName :string

current rendered view name. ('day', 'week', 'month')

Default Value:
  • 'week'

Methods

static setTimezoneOffset(offset)

Set timezone offset

Parameters:
Name Type Description
offset number

offset (min)

Example
var timezoneName = moment.tz.guess();
tui.Calendar.setTimezoneOffset(moment.tz.zone(timezoneName).utcOffset(moment()));

static setTimezoneOffsetCallback(callback)

Set a callback function to get timezone offset by timestamp

Parameters:
Name Type Description
callback function

callback function

Example
var timezoneName = moment.tz.guess();
tui.Calendar.setTimezoneOffsetCallback(function(timestamp) {
     return moment.tz.zone(timezoneName).utcOffset(timestamp));
});

clear()

Delete all schedules and clear view.

Example
calendar.clear();
calendar.createSchedules(schedules, true);
calendar.render();

createSchedules(schedules, silentopt)

Create schedules and render calendar.

Parameters:
Name Type Attributes Default Description
schedules Array.<Schedule>

schedule data list

silent boolean <optional>
false

no auto render after creation when set true

Example
calendar.createSchedules([
    {
        id: '1',
        calendarId: '1',
        title: 'my schedule',
        category: 'time',
        dueDateClass: '',
        start: '2018-01-18T22:30:00+09:00',
        end: '2018-01-19T02:30:00+09:00'
    },
    {
        id: '2',
        calendarId: '1',
        title: 'second schedule',
        category: 'time',
        dueDateClass: '',
        start: '2018-01-18T17:30:00+09:00',
        end: '2018-01-19T17:31:00+09:00'
    }
]);

deleteSchedule(id, calendarId)

Delete schedule.

Parameters:
Name Type Description
id string

ID of schedule to delete

calendarId string

calendarId of schedule to delete

Fires:

destroy()

destroy calendar instance.

getElement(scheduleId, calendarId) → {HTMLElement}

Get schedule by schedule id and calendar id.

Parameters:
Name Type Description
scheduleId string

ID of schedule

calendarId string

calendarId of schedule

Returns:
HTMLElement -

schedule element if found or null

Example
var element = calendar.getElement(scheduleId, calendarId);
console.log(element);

getSchedule(id, calendarId) → {Schedule}

Get schedule by schedule id and calendar id.

Parameters:
Name Type Description
id string

ID of schedule

calendarId string

calendarId of schedule

Returns:
Schedule -

schedule object

Example
var schedule = calendar.getSchedule(scheduleId, calendarId);
console.log(schedule.title);

next()

Move the calendar forward a day, a week, a month

Example
function moveToNextOrPrevRange(val) {
    calendar.clear();
    if (val === -1) {
        calendar.prev();
    } else if (val === 1) {
        calendar.next();
    }
}

prev()

Move the calendar backward a day, a week, a month

Example
function moveToNextOrPrevRange(val) {
    calendar.clear();
    if (val === -1) {
        calendar.prev();
    } else if (val === 1) {
        calendar.next();
    }
}

refresh()

Refresh the calendar layout.

Example
window.addEventListener('resize', function() {
    calendar.refresh();
});

render()

Render the calendar.

Example
var silent = true;
calendar.clear();
calendar.createSchedules(schedules, silent);
calendar.render();

scrollToNow()

Scroll to now in daily, weekly view

Example
function onNewSchedules(schedules) {
    calendar.createSchedules(schedules);
    if (calendar.viewName !== 'month') {
        calendar.scrollToNow();
    }
}

setCalendarColor(calendarId, option)

Change calendar's schedule color with option

Parameters:
Name Type Description
calendarId string

calendar ID

option object

color data object

Properties
Name Type Attributes Default Description
color string

text color of schedule element

bgColor string

bg color of schedule element

borderColor string

border color of schedule element

render boolean <optional>
true

set false then does not auto render.

Example
calendar.setCalendarColor('1', {
    color: '#e8e8e8',
    bgColor: '#585858',
    render: false
});
calendar.setCalendarColor('2', {
    color: '#282828',
    bgColor: '#dc9656',
    render: false
});
calendar.setCalendarColor('3', {
    color: '#a16946',
    bgColor: '#ab4642',
    render: true
});

setDate(date)

Move to specific date

Parameters:
Name Type Description
date Date | string

date to move

Example
calendar.on('clickDayname', function(event) {
    if (calendar.viewName === 'week') {
        calendar.setDate(new Date(event.date));
        calendar.toggleView('day', true);
    }
});

today()

Move to today.

Example
function onClickTodayBtn() {
    calendar.today();
}

toggleScheduleView(enabled)

Toggle schedule view('AllDay', TimeGrid') panel

Parameters:
Name Type Description
enabled boolean

use task view

Example
// hide those view panel to show only 'Milestone', 'Task'
calendar.toggleScheduleView(false);

// show those view panel.
calendar.toggleScheduleView(true);

toggleTaskView(enabled)

Toggle task view('Milestone', 'Task') panel

Parameters:
Name Type Description
enabled boolean

use task view

Example
// There is no milestone, task, so hide those view panel
calendar.toggleTaskView(false);

// There are some milestone, task, so show those view panel.
calendar.toggleTaskView(true);

toggleView(newViewName, force)

Toggle current view

Parameters:
Name Type Description
newViewName string

new view name to render

force boolean

force render despite of current view and new view are equal

Example
// daily view
calendar.toggleView('day', true);

// weekly view
calendar.toggleView('week', true);

// monthly view(default 6 weeks view)
calendar.options.month.visibleWeeksCount = 6; // or null
calendar.toggleView('month', true);

// 2 weeks monthly view
calendar.options.month.visibleWeeksCount = 2;
calendar.toggleView('month', true);

// 3 weeks monthly view
calendar.options.month.visibleWeeksCount = 3;
calendar.toggleView('month', true);

// narrow weekend
calendar.options.month.narrowWeekend = true;
calendar.options.week.narrowWeekend = true;
calendar.toggleView(calendar.viewName, true);

// change start day of week(from monday)
calendar.options.month.startDayOfWeek = 1;
calendar.options.week.startDayOfWeek = 1;
calendar.toggleView(calendar.viewName, true);

updateSchedule(id, calendarId, scheduleData)

Update the schedule

Parameters:
Name Type Description
id string

ID of schedule to update

calendarId string

calendarId of schedule to update

scheduleData Schedule

schedule data to update

Example
calendar.on('beforeUpdateSchedule', function(event) {
    var schedule = event.schedule;
    var startTime = event.start;
    var endTime = event.end;
    calendar.updateSchedule(schedule.id, schedule.calendarId, {
        start: startTime,
        end: endTime
    });
});

Events

beforeCreateSchedule

Fire this event when select time period in daily, weekly, monthly.

Type:
  • object
Properties:
Name Type Description
isAllDay boolean

allday schedule

start Date

selected start time

end Date

selected end time

guide TimeCreationGuide

TimeCreationGuide instance

triggerEventName string

event name like 'click', 'dblclick'

Example
calendar.on('beforeCreateSchedule', function(event) {
    var startTime = event.start;
    var endTime = event.end;
    var isAllDay = event.isAllDay;
    var guide = event.guide;
    var triggerEventName = event.triggerEventName;
    var schedule;

    if (triggerEventName === 'click') {
        // open writing simple schedule popup
        schedule = {...};
    } else if (triggerEventName === 'dblclick') {
        // open writing detail schedule popup
        schedule = {...};
    }

    calendar.createSchedules([schedule]);
});

beforeDeleteSchedule

Fire this event when delete a schedule.

Type:
  • object
Properties:
Name Type Description
schedule Schedule

schedule instance to delete

Example
calendar.on('beforeDeleteSchedule', function() {
    alert('The schedule is removed.');
});

beforeUpdateSchedule

Fire this event when drag a schedule to change time in daily, weekly, monthly.

Type:
  • object
Properties:
Name Type Description
schedule Schedule

schedule instance to update

start Date

start time to update

end Date

end time to update

Example
calendar.on('beforeUpdateSchedule', function(event) {
    var schedule = event.schedule;
    var startTime = event.start;
    var endTime = event.end;

    calendar.updateSchedule(schedule.id, schedule.calendarId, {
        start: startTime,
        end: endTime
    });
});

clickDayname

Fire this event when click a day name in weekly.

Type:
  • object
Properties:
Name Type Description
date string

date string by format 'YYYY-MM-DD'

Example
calendar.on('clickDayname', function(event) {
    if (calendar.viewName === 'week') {
        calendar.setDate(new Date(event.date));
        calendar.toggleView('day', true);
    }
});

clickSchedule

Fire this event when click a schedule.

Type:
  • object
Properties:
Name Type Description
schedule Schedule

schedule instance

event MouseEvent

MouseEvent

Example
calendar.on('clickSchedule', function(event) {
    var schedule = event.schedule;

    if (lastClickSchedule) {
        calendar.updateSchedule(lastClickSchedule.id, lastClickSchedule.calendarId, {
            isFocused: false
        });
    }
    calendar.updateSchedule(schedule.id, schedule.calendarId, {
        isFocused: true
    });

    lastClickSchedule = schedule;
    // open detail view
});

resizePanel

Fire this event when resize view panels(milestone, task, allday).

Type:
  • object
Properties:
Name Type Description
layoutData Array.<number>

layout data after resized

Example
calendar.on('resizePanel', function(layoutData) {
    console.log(layoutData);
    // do something to resize your UI if necessary.
});