logo

/repo|v1.12.13

Class

new Calendar(container, options)calendar.jsline 513

Calendar class

PARAMETERS
NameTypeDescription

container

HTMLElementstring

The container element or selector id

options

Options

The calendar Options object

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

Static Methods

deprecatedsetTimezoneOffset(offset)calendar.jsline 1801

Set timezone offset

PARAMETERS
NameTypeDescription

offset

number

The offset (min)

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

deprecatedsetTimezoneOffsetCallback(callback)calendar.jsline 1816

Set a callback function to get timezone offset by timestamp

PARAMETERS
NameTypeDescription

callback

function

The callback function

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

Instance Methods

changeView(newViewName, force)calendar.jsline 1549

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

PARAMETERS
NameTypeDescription

newViewName

string

The New view name to render

force

boolean

Force render despite of current view and new view are equal

EXAMPLES
// 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(immediately)calendar.jsline 1003

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
NameTypeDescription

immediately

boolean = false

Render it immediately

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

createSchedules(schedules, silent)calendar.jsline 761

Create schedules and render calendar.

PARAMETERS
NameTypeDescription

schedules

Array.<Schedule>

Schedule data list

silent

boolean = false

no auto render after creation when set true

EXAMPLES
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, silent)calendar.jsline 852

Delete a schedule.

PARAMETERS
NameTypeDescription

scheduleId

string

ID of schedule to delete

calendarId

string

The CalendarId of the schedule to delete

silent

boolean = false

No auto render after creation when set true

destroy()calendar.jsline 635

destroy calendar instance.

getDate()calendar.jsline 1731

Current rendered date (TZDate for further information)

RETURNS:
{

TZDate

}

getDateRangeEnd()calendar.jsline 1747

End time of rendered date range (TZDate for further information)

RETURNS:
{

TZDate

}

getDateRangeStart()calendar.jsline 1739

Start time of rendered date range (TZDate for further information)

RETURNS:
{

TZDate

}

getElement(scheduleId, calendarId)calendar.jsline 1669

Get a schedule element by schedule id and calendar id.

PARAMETERS
NameTypeDescription

scheduleId

string

ID of schedule

calendarId

string

calendarId of schedule

RETURNS:
{

HTMLElement

} - schedule element if found or null
EXAMPLES
var element = calendar.getElement(scheduleId, calendarId);
console.log(element);

getOptions()calendar.jsline 1723

Get current Options.

RETURNS:
{

Options

} - options

getSchedule(scheduleId, calendarId)calendar.jsline 782

Get a Schedule object by schedule id and calendar id.

PARAMETERS
NameTypeDescription

scheduleId

string

ID of schedule

calendarId

string

calendarId of the schedule

RETURNS:
{

Schedule

} - schedule object
EXAMPLES
var schedule = calendar.getSchedule(scheduleId, calendarId);
console.log(schedule.title);

getViewName()calendar.jsline 1755

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

RETURNS:
{

string

} - view name

hideMoreView()calendar.jsline 1786

Hide the more view

openCreationPopup(schedule)calendar.jsline 1777

Open schedule creation popup

PARAMETERS
NameTypeDescription

schedule

Schedule

The preset Schedule data

render(immediately)calendar.jsline 963

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

PARAMETERS
NameTypeDescription

immediately

boolean = 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()calendar.jsline 1018

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

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

setCalendarColor(calendarId, option, silent)calendar.jsline 1229

Change calendar's schedule color with option

PARAMETERS
NameTypeDescription

calendarId

string

The calendar ID

option

CalendarColor

The CalendarColor object

silent

boolean = false

No auto render after creation when set true

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

setCalendars(calendars)calendar.jsline 1763

Set calendar list

PARAMETERS
NameTypeDescription

calendars

Array.<CalendarProps>

CalendarProps List

setDate(date)calendar.jsline 1146

Move to specific date

PARAMETERS
NameTypeDescription

date

Datestring

The date to move

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

setOptions(options, silent)calendar.jsline 1701

Set options of calendar

PARAMETERS
NameTypeDescription

options

Options

set Options

silent

boolean = false

no auto render after creation when set true

setTheme(theme)calendar.jsline 1689

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

PARAMETERS
NameTypeDescription

theme

object

multiple styles map

RETURNS:
{

Array.<string>

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

today()calendar.jsline 1032

Move to today.

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

toggleSchedules(calendarId, toHide, render)calendar.jsline 927

Toggle schedules' visibility by calendar ID

PARAMETERS
NameTypeDescription

calendarId

string

The calendar id value

toHide

boolean

Set true to hide schedules

render

boolean = true

set true then render after change visible property each models

deprecatedtoggleScheduleView(enabled)calendar.jsline 1642

PARAMETERS
NameTypeDescription

enabled

boolean

use task view

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

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

deprecatedtoggleTaskView(enabled)calendar.jsline 1622

PARAMETERS
NameTypeDescription

enabled

boolean

use task view

EXAMPLES
// 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, changes, silent)calendar.jsline 802

Update the schedule

PARAMETERS
NameTypeDescription

scheduleId

string

ID of the original schedule to update

calendarId

string

The calendarId of the original schedule to update

changes

object

The Schedule properties and values with changes to update

silent

boolean = false

No auto render after creation when set true

EXAMPLES
calendar.updateSchedule(schedule.id, schedule.calendarId, {
    title: 'Changed schedule',
    start: new Date('2019-11-05T09:00:00'),
    end: new Date('2019-11-05T10:00:00'),
    category: 'time'
});

Events

afterRenderSchedulecalendar.jsline 1451

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

PROPERTIES
NameTypeDescription

schedule

Schedule

A rendered Schedule instance

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

beforeCreateSchedulecalendar.jsline 1384

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

PROPERTIES
NameTypeDescription

isAllDay

boolean

The allday schedule

start

Date

The selected start time

end

Date

The selected end time

guide

TimeCreationGuide

TimeCreationGuide instance

triggerEventName

string

The event name like 'click', 'dblclick'

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

beforeDeleteSchedulecalendar.jsline 1429

Fire this event when delete a schedule.

PROPERTIES
NameTypeDescription

schedule

Schedule

The Schedule instance to delete

EXAMPLES
calendar.on('beforeDeleteSchedule', function(event) {
    var schedule = event.schedule;
    alert('The schedule is removed.', schedule);
});

beforeUpdateSchedulecalendar.jsline 1409

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

PROPERTIES
NameTypeDescription

schedule

Schedule

The original Schedule instance

changes

object

The Schedule properties and values with changes to update

start

Date

Deprecated: start time to update

end

Date

Deprecated: end time to update

EXAMPLES
calendar.on('beforeUpdateSchedule', function(event) {
    var schedule = event.schedule;
    var changes = event.changes;

    calendar.updateSchedule(schedule.id, schedule.calendarId, changes);
});

clickDaynamecalendar.jsline 1339

Fire this event when click a day name in weekly.

PROPERTIES
NameTypeDescription

date

string

The date string by format 'YYYY-MM-DD'

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

clickMorecalendar.jsline 1316

Fire this event when click a schedule.

PROPERTIES
NameTypeDescription

date

Date

The Clicked date

target

HTMLElement

The more element

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

clickSchedulecalendar.jsline 1295

Fire this event when click a schedule.

PROPERTIES
NameTypeDescription

schedule

Schedule

The Schedule instance

event

MouseEvent

MouseEvent

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

clickTimezonesCollapseBtncalendar.jsline 1470

Fire this event by clicking timezones collapse button

PROPERTIES
NameTypeDescription

timezonesCollapsed

boolean

The timezones collapes flag

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