new Calendar(container, options)calendar.jsline 511
Calendar class
PARAMETERS
Name Type Description 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 ' #' + 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 1762
Set timezone offset
PARAMETERS
Name Type Description offset
number
The offset (min)
EXAMPLES
var timezoneName = moment.tz.guess(); tui.Calendar.setTimezoneOffset(moment.tz.zone(timezoneName).utcOffset(moment()));
deprecatedsetTimezoneOffsetCallback(callback)calendar.jsline 1777
Set a callback function to get timezone offset by timestamp
PARAMETERS
Name Type Description 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 1518
Change current view with view name('day', 'week', 'month')
PARAMETERS
Name Type Description 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 975
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 Description 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
Name Type Description 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
Name Type Description 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 1697
Current rendered date (TZDate for further information)
RETURNS:
{TZDate
}
getDateRangeEnd()calendar.jsline 1713
End time of rendered date range (TZDate for further information)
RETURNS:
{TZDate
}
getDateRangeStart()calendar.jsline 1705
Start time of rendered date range (TZDate for further information)
RETURNS:
{TZDate
}
getElement(scheduleId, calendarId)calendar.jsline 1637
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 nullEXAMPLES
var element = calendar.getElement(scheduleId, calendarId); console.log(element);
getOptions()calendar.jsline 1689
Get current Options.
RETURNS:
{Options
} - options
getSchedule(scheduleId, calendarId)calendar.jsline 780
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 objectEXAMPLES
var schedule = calendar.getSchedule(scheduleId, calendarId); console.log(schedule.title);
getViewName()calendar.jsline 1721
Get current view name('day', 'week', 'month')
RETURNS:
{string
} - view name
hideMoreView()calendar.jsline 1747
Hide the more view
next()calendar.jsline 1139
Move the calendar forward a day, a week, a month, 2 weeks, 3 weeks.
EXAMPLES
function moveToNextOrPrevRange(val) { if (val === -1) { calendar.prev(); } else if (val === 1) { calendar.next(); } }
openCreationPopup(schedule)calendar.jsline 1738
Open schedule creation popup
PARAMETERS
Name Type Description schedule
Schedule
The preset Schedule data
prev()calendar.jsline 1155
Move the calendar backward a day, a week, a month, 2 weeks, 3 weeks.
EXAMPLES
function moveToNextOrPrevRange(val) { if (val === -1) { calendar.prev(); } else if (val === 1) { calendar.next(); } }
render(immediately)calendar.jsline 935
Render the calendar. The real rendering occurs after requestAnimationFrame.
If you have to render immediately, use the 'immediately' parameter as true.PARAMETERS
Name Type Description 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 990
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 1197
Change calendar's schedule color with option
PARAMETERS
Name Type Description 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 1729
Set calendar list
PARAMETERS
Name Type Description calendars
Array.<Object>
calendar list
setDate(date)calendar.jsline 1117
Move to specific date
PARAMETERS
Name Type Description 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 1669
Set options of calendar
PARAMETERS
Name Type Description options
Options
set Options
silent
boolean = false
no auto render after creation when set true
setTheme(theme)calendar.jsline 1657
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.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 1004
Move to today.
EXAMPLES
function onClickTodayBtn() { calendar.today(); }
toggleSchedules(calendarId, toHide, render)calendar.jsline 899
Toggle schedules' visibility by calendar ID
PARAMETERS
Name Type Description 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 1610
PARAMETERS
Name Type Description 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 1590
PARAMETERS
Name Type Description 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
Name Type Description 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 1420
Fire this event by every single schedule after rendering whole calendar.
PROPERTIES
Name Type Description 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 1350
Fire this event when select time period in daily, weekly, monthly.
PROPERTIES
Name Type Description 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 1398
Fire this event when delete a schedule.
PROPERTIES
Name Type Description 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 1378
Fire this event when drag a schedule to change time in daily, weekly, monthly.
PROPERTIES
Name Type Description 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 1305
Fire this event when click a day name in weekly.
PROPERTIES
Name Type Description 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 1282
Fire this event when click a schedule.
PROPERTIES
Name Type Description 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 1261
Fire this event when click a schedule.
PROPERTIES
Name Type Description 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 1439
Fire this event by clicking timezones collapse button
PROPERTIES
Name Type Description timezonesCollapsed
boolean
The timezones collapes flag
EXAMPLES
calendar.on('clickTimezonesCollapseBtn', function(timezonesCollapsed) { console.log(timezonesCollapsed); });