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,    // can be also ['milestone', 'task']
    scheduleView: true,  // can be also ['allday', 'time']
    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'],
        startDayOfWeek: 0,
        narrowWeekend: true
    }
});

Methods

static setTimezoneOffset(offset)

Set timezone offset

Parameters:
Name Type Description
offset number

offset (min)

Deprecated:
  • Yes
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

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

changeView(newViewName, force)

Change current view with view name('day', 'week', 'month')

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.changeView('day', true);

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

// monthly view(default 6 weeks view)
calendar.setOptions({month: {visibleWeeksCount: 6}}, true); // or null
calendar.changeView('month', true);

// 2 weeks monthly view
calendar.setOptions({month: {visibleWeeksCount: 2}}, true);
calendar.changeView('month', true);

// 3 weeks monthly view
calendar.setOptions({month: {visibleWeeksCount: 3}}, true);
calendar.changeView('month', true);

// narrow weekend
calendar.setOptions({month: {narrowWeekend: true}}, true);
calendar.setOptions({week: {narrowWeekend: true}}, true);
calendar.changeView(calendar.getViewName(), true);

// change start day of week(from monday)
calendar.setOptions({week: {startDayOfWeek: 1}}, true);
calendar.setOptions({month: {startDayOfWeek: 1}}, true);
calendar.changeView(calendar.getViewName(), true);

// work week
calendar.setOptions({week: {workweek: true}}, true);
calendar.setOptions({month: {workweek: true}}, true);
calendar.changeView(calendar.getViewName(), true);

clear(immediatelyopt)

Delete all schedules and clear view. The real rendering occurs after requestAnimationFrame. If you have to render immediately, use the 'immediately' parameter as true.

Parameters:
Name Type Attributes Default Description
immediately boolean <optional>
false

Render it immediately

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(scheduleId, calendarId, silentopt)

Delete a schedule.

Parameters:
Name Type Attributes Default Description
scheduleId string

ID of schedule to delete

calendarId string

calendarId of the schedule to delete

silent boolean <optional>
false

no auto render after creation when set true

destroy()

destroy calendar instance.

getDate() → {TZDate}

Current rendered date

Returns:
TZDate

getDateRangeEnd() → {TZDate}

End time of rendered date range

Returns:
TZDate

getDateRangeStart() → {TZDate}

Start time of rendered date range

Returns:
TZDate

getElement(scheduleId, calendarId) → {HTMLElement}

Get a schedule element 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);

getOptions() → {Options}

Get current options.

Returns:
Options -

options

getSchedule(scheduleId, calendarId) → {Schedule}

Get a schedule object by schedule id and calendar id.

Parameters:
Name Type Description
scheduleId string

ID of schedule

calendarId string

calendarId of the schedule

Returns:
Schedule -

schedule object

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

getViewName() → {string}

Get current view name('day', 'week', 'month')

Returns:
string -

view name

hideMoreView()

Hide the more view

next()

Move the calendar forward a day, a week, a month, 2 weeks, 3 weeks.

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

openCreationPopup(schedule)

Open schedule creation popup

Parameters:
Name Type Description
schedule Schedule

preset schedule data

prev()

Move the calendar backward a day, a week, a month, 2 weeks, 3 weeks.

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

render(immediatelyopt)

Render the calendar. The real rendering occurs after requestAnimationFrame. If you have to render immediately, use the 'immediately' parameter as true.

Parameters:
Name Type Attributes Default Description
immediately boolean <optional>
false

Render it immediately

Examples
var silent = true;
calendar.clear();
calendar.createSchedules(schedules, silent);
calendar.render();
// Render a calendar when resizing a window.
window.addEventListener('resize', function() {
    calendar.render();
});

scrollToNow()

Scroll to current time on today in case of daily, weekly view

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

setCalendarColor(calendarId, option, silentopt)

Change calendar's schedule color with option

Parameters:
Name Type Attributes Default Description
calendarId string

calendar ID

option CalendarColor

color data object

silent boolean <optional>
false

no auto render after creation when set true

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

setCalendars(calendars)

Set calendar list

Parameters:
Name Type Description
calendars Array.<Object>

calendar list

setDate(date)

Move to specific date

Parameters:
Name Type Description
date Date | string

date to move

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

setOptions(options, silentopt)

Set options of calendar

Parameters:
Name Type Attributes Default Description
options Options

options to set

silent boolean <optional>
false

no auto render after creation when set true

setTheme(theme) → {Array.<string>}

Set a theme. If some keys are not defined in the preset, will be return.

Parameters:
Name Type Description
theme object

multiple styles map

Returns:
Array.<string> -

keys - error keys not predefined.

Example
cal.setTheme({
    'month.dayname.height': '31px',
    'common.dayname.color': '#333',
    'month.dayname.borderBottom': '1px solid #e5e5e5' // Not valid key  will be return.
});

today()

Move to today.

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

toggleSchedules(calendarId, toHide, renderopt)

Toggle schedules' visibility by calendar ID

Parameters:
Name Type Attributes Default Description
calendarId string

calendar id value

toHide boolean

set true to hide schedules

render boolean <optional>
true

set true then render after change visible property each models

toggleScheduleView(enabled)

Parameters:
Name Type Description
enabled boolean

use task view

Deprecated:
  • Toggle schedule view('AllDay', TimeGrid') panel
Example
// hide those view panel to show only 'Milestone', 'Task'
calendar.toggleScheduleView(false);

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

toggleTaskView(enabled)

Parameters:
Name Type Description
enabled boolean

use task view

Deprecated:
  • Toggle task view('Milestone', 'Task') panel
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);

updateSchedule(scheduleId, calendarId, scheduleData, silentopt)

Update the schedule

Parameters:
Name Type Attributes Default Description
scheduleId string

ID of a schedule to update

calendarId string

calendarId of the schedule to update

scheduleData Schedule

schedule data to update

silent boolean <optional>
false

no auto render after creation when set true

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

afterRenderSchedule

Fire this event by every single schedule after rendering whole calendar.

Type:
  • object
Properties:
Name Type Description
schedule Schedule

a rendered schedule instance

Example
calendar.on('afterRenderSchedule', function(event) {
    var schedule = event.schedule;
    var element = calendar.getElement(schedule.id, schedule.calendarId);
    // use the element
    console.log(element);
});

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(event) {
    var schedule = event.schedule;
    alert('The schedule is removed.', schedule);
});

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.getViewName() === 'week') {
        calendar.setDate(new Date(event.date));
        calendar.changeView('day', true);
    }
});

clickMore

Fire this event when click a schedule.

Type:
  • object
Properties:
Name Type Description
date Date

clicked date

target HTMLElement

more element

Example
calendar.on('clickMore', function(event) {
    console.log('clickMore', event.date, event.target);
});

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
});

clickTimezonesCollapseBtn

Fire this event by clicking timezones collapse button

Type:
  • object
Properties:
Name Type Description
timezonesCollapsed boolean

timezones collapes flag

Example
calendar.on('clickTimezonesCollapseBtn', function(timezonesCollapsed) {
    console.log(timezonesCollapsed);
});