logo

/repo|v1.12.0

Class

new Calendar(container, options)calendar.jsline 511

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 1764

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 1779

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 1520

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 976

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 751

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 825

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 633

destroy calendar instance.

getDate()calendar.jsline 1699

Current rendered date (TZDate for further information)

RETURNS:
{

TZDate

}

getDateRangeEnd()calendar.jsline 1715

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

RETURNS:
{

TZDate

}

getDateRangeStart()calendar.jsline 1707

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

RETURNS:
{

TZDate

}

getElement(scheduleId, calendarId)calendar.jsline 1639

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 1691

Get current Options.

RETURNS:
{

Options

} - options

getSchedule(scheduleId, calendarId)calendar.jsline 780

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 1723

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

RETURNS:
{

string

} - view name

hideMoreView()calendar.jsline 1749

Hide the more view

openCreationPopup(schedule)calendar.jsline 1740

Open schedule creation popup

PARAMETERS
NameTypeDescription

schedule

Schedule

The preset Schedule data

render(immediately)calendar.jsline 936

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 991

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 1199

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'
});
calendar.setCalendarColor('2', {
    color: '#282828',
    bgColor: '#dc9656',
    borderColor: '#a1b56c'
});
calendar.setCalendarColor('3', {
    color: '#a16946',
    bgColor: '#ab4642',
    borderColor: '#a1b56c'
});

setCalendars(calendars)calendar.jsline 1731

Set calendar list

PARAMETERS
NameTypeDescription

calendars

Array.<Object>

calendar list

setDate(date)calendar.jsline 1119

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 1671

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 1659

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 1005

Move to today.

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

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

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 1612

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 1592

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, scheduleData, silent)calendar.jsline 803

Update the schedule

PARAMETERS
NameTypeDescription

scheduleId

string

ID of a schedule to update

calendarId

string

The calendarId of the schedule to update

scheduleData

Schedule

The Schedule data to update

silent

boolean = false

No auto render after creation when set true

EXAMPLES
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

afterRenderSchedulecalendar.jsline 1422

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 1352

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 1400

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 1380

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

PROPERTIES
NameTypeDescription

schedule

Schedule

The Schedule instance to update

start

Date

The start time to update

end

Date

The end time to update

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

clickDaynamecalendar.jsline 1307

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 1284

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 1263

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 1441

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