logo

/repo|v1.13.0

Class

new Calendar(container, options)calendar.jsline 555

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 1905

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 1920

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 1644

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 1085

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 843

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 934

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 680

destroy calendar instance.

getDate()calendar.jsline 1831

Current rendered date (TZDate for further information)

RETURNS:
{

TZDate

}

getDateRangeEnd()calendar.jsline 1847

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

RETURNS:
{

TZDate

}

getDateRangeStart()calendar.jsline 1839

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

RETURNS:
{

TZDate

}

getElement(scheduleId, calendarId)calendar.jsline 1759

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 1823

Get current Options.

RETURNS:
{

Options

} - options

getSchedule(scheduleId, calendarId)calendar.jsline 868

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 1855

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

RETURNS:
{

string

} - view name

hideMoreView()calendar.jsline 1890

Hide the more view

openCreationPopup(schedule)calendar.jsline 1881

Open schedule creation popup

PARAMETERS
NameTypeDescription

schedule

Schedule

The preset Schedule data

render(immediately)calendar.jsline 1045

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 1100

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 1318

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 1863

Set calendar list

PARAMETERS
NameTypeDescription

calendars

Array.<CalendarProps>

CalendarProps List

setDate(date)calendar.jsline 1235

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 1793

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 1781

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 1114

Move to today.

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

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

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 1732

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 1712

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 888

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 1545

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 1478

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 1523

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 1503

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 1433

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 1410

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 1389

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 1564

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