logo

/repo|v1.12.7

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 1791

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 1806

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 1541

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 995

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 753

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 844

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 1721

Current rendered date (TZDate for further information)

RETURNS:
{

TZDate

}

getDateRangeEnd()calendar.jsline 1737

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

RETURNS:
{

TZDate

}

getDateRangeStart()calendar.jsline 1729

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

RETURNS:
{

TZDate

}

getElement(scheduleId, calendarId)calendar.jsline 1661

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 1713

Get current Options.

RETURNS:
{

Options

} - options

getSchedule(scheduleId, calendarId)calendar.jsline 774

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 1745

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

RETURNS:
{

string

} - view name

hideMoreView()calendar.jsline 1776

Hide the more view

openCreationPopup(schedule)calendar.jsline 1767

Open schedule creation popup

PARAMETERS
NameTypeDescription

schedule

Schedule

The preset Schedule data

render(immediately)calendar.jsline 955

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 1010

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 1221

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 1753

Set calendar list

PARAMETERS
NameTypeDescription

calendars

Array.<CalendarProps>

CalendarProps List

setDate(date)calendar.jsline 1138

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 1693

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 1681

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 1024

Move to today.

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

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

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 1634

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 1614

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 794

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 1443

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 1376

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 1421

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 1401

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 1331

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 1308

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 1287

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 1462

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