new Calendar(container, options)
Calendar class
Parameters:
Name | Type | Description |
---|---|---|
container |
HTMLElement | string | container element or selector id |
options |
Options | calendar options |
- Mixes In:
Example
var calendar = new tui.Calendar(document.getElementById('calendar'), {
defaultView: 'week',
taskView: true,
scheduleView: true,
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'],
panelHeights: [80, 80, 120],
startDayOfWeek: 0,
narrowWeekend: true
}
});
Members
-
options :Options
-
calendar options
-
readonly renderDate :Date
-
Current rendered date
-
readonly renderRange :RenderRange
-
start and end date of weekly, monthly
-
readonly viewName :string
-
current rendered view name. ('day', 'week', 'month')
- Default Value:
- 'week'
Methods
-
static setTimezoneOffset(offset)
-
Set timezone offset
Parameters:
Name Type Description offset
number offset (min)
Example
var timezoneName = moment.tz.guess(); tui.Calendar.setTimezoneOffset(moment.tz.zone(timezoneName).utcOffset(moment()));
-
static setTimezoneOffsetCallback(callback)
-
Set a callback function to get timezone offset by timestamp
Parameters:
Name Type Description callback
function callback function
Example
var timezoneName = moment.tz.guess(); tui.Calendar.setTimezoneOffsetCallback(function(timestamp) { return moment.tz.zone(timezoneName).utcOffset(timestamp)); });
-
clear()
-
Delete all schedules and clear view.
Example
calendar.clear(); calendar.createSchedules(schedules, true); calendar.render();
-
createSchedules(schedules, silentopt)
-
Create schedules and render calendar.
Parameters:
Name Type Attributes Default Description schedules
Array.<Schedule> schedule data list
silent
boolean <optional>
false no auto render after creation when set true
Example
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(id, calendarId)
-
Delete schedule.
Parameters:
Name Type Description id
string ID of schedule to delete
calendarId
string calendarId of schedule to delete
Fires:
-
destroy()
-
destroy calendar instance.
-
getElement(scheduleId, calendarId) → {HTMLElement}
-
Get schedule 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 null
Example
var element = calendar.getElement(scheduleId, calendarId); console.log(element);
-
getSchedule(id, calendarId) → {Schedule}
-
Get schedule by schedule id and calendar id.
Parameters:
Name Type Description id
string ID of schedule
calendarId
string calendarId of schedule
Example
var schedule = calendar.getSchedule(scheduleId, calendarId); console.log(schedule.title);
-
next()
-
Move the calendar forward a day, a week, a month
Example
function moveToNextOrPrevRange(val) { calendar.clear(); if (val === -1) { calendar.prev(); } else if (val === 1) { calendar.next(); } }
-
prev()
-
Move the calendar backward a day, a week, a month
Example
function moveToNextOrPrevRange(val) { calendar.clear(); if (val === -1) { calendar.prev(); } else if (val === 1) { calendar.next(); } }
-
refresh()
-
Refresh the calendar layout.
Example
window.addEventListener('resize', function() { calendar.refresh(); });
-
render()
-
Render the calendar.
Example
var silent = true; calendar.clear(); calendar.createSchedules(schedules, silent); calendar.render();
-
scrollToNow()
-
Scroll to now in daily, weekly view
Example
function onNewSchedules(schedules) { calendar.createSchedules(schedules); if (calendar.viewName !== 'month') { calendar.scrollToNow(); } }
-
setCalendarColor(calendarId, option)
-
Change calendar's schedule color with option
Parameters:
Name Type Description calendarId
string calendar ID
option
object color data object
Properties
Name Type Attributes Default Description color
string text color of schedule element
bgColor
string bg color of schedule element
borderColor
string border color of schedule element
render
boolean <optional>
true set false then does not auto render.
Example
calendar.setCalendarColor('1', { color: '#e8e8e8', bgColor: '#585858', render: false }); calendar.setCalendarColor('2', { color: '#282828', bgColor: '#dc9656', render: false }); calendar.setCalendarColor('3', { color: '#a16946', bgColor: '#ab4642', render: true });
-
setDate(date)
-
Move to specific date
Parameters:
Name Type Description date
Date | string date to move
Example
calendar.on('clickDayname', function(event) { if (calendar.viewName === 'week') { calendar.setDate(new Date(event.date)); calendar.toggleView('day', true); } });
-
today()
-
Move to today.
Example
function onClickTodayBtn() { calendar.today(); }
-
toggleScheduleView(enabled)
-
Toggle schedule view('AllDay', TimeGrid') panel
Parameters:
Name Type Description enabled
boolean use task view
Example
// hide those view panel to show only 'Milestone', 'Task' calendar.toggleScheduleView(false); // show those view panel. calendar.toggleScheduleView(true);
-
toggleTaskView(enabled)
-
Toggle task view('Milestone', 'Task') panel
Parameters:
Name Type Description enabled
boolean use task view
Example
// 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);
-
toggleView(newViewName, force)
-
Toggle current view
Parameters:
Name Type Description newViewName
string new view name to render
force
boolean force render despite of current view and new view are equal
Example
// daily view calendar.toggleView('day', true); // weekly view calendar.toggleView('week', true); // monthly view(default 6 weeks view) calendar.options.month.visibleWeeksCount = 6; // or null calendar.toggleView('month', true); // 2 weeks monthly view calendar.options.month.visibleWeeksCount = 2; calendar.toggleView('month', true); // 3 weeks monthly view calendar.options.month.visibleWeeksCount = 3; calendar.toggleView('month', true); // narrow weekend calendar.options.month.narrowWeekend = true; calendar.options.week.narrowWeekend = true; calendar.toggleView(calendar.viewName, true); // change start day of week(from monday) calendar.options.month.startDayOfWeek = 1; calendar.options.week.startDayOfWeek = 1; calendar.toggleView(calendar.viewName, true);
-
updateSchedule(id, calendarId, scheduleData)
-
Update the schedule
Parameters:
Name Type Description id
string ID of schedule to update
calendarId
string calendarId of schedule to update
scheduleData
Schedule schedule data to update
Example
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
-
beforeCreateSchedule
-
Fire this event when select time period in daily, weekly, monthly.
Type:
- object
Properties:
Name Type Description isAllDay
boolean allday schedule
start
Date selected start time
end
Date selected end time
guide
TimeCreationGuide TimeCreationGuide instance
triggerEventName
string event name like 'click', 'dblclick'
Example
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]); });
-
beforeDeleteSchedule
-
Fire this event when delete a schedule.
Type:
- object
Properties:
Name Type Description schedule
Schedule schedule instance to delete
Example
calendar.on('beforeDeleteSchedule', function() { alert('The schedule is removed.'); });
-
beforeUpdateSchedule
-
Fire this event when drag a schedule to change time in daily, weekly, monthly.
Type:
- object
Properties:
Name Type Description schedule
Schedule schedule instance to update
start
Date start time to update
end
Date end time to update
Example
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 }); });
-
clickDayname
-
Fire this event when click a day name in weekly.
Type:
- object
Properties:
Name Type Description date
string date string by format 'YYYY-MM-DD'
Example
calendar.on('clickDayname', function(event) { if (calendar.viewName === 'week') { calendar.setDate(new Date(event.date)); calendar.toggleView('day', true); } });
-
clickSchedule
-
Fire this event when click a schedule.
Type:
- object
Properties:
Name Type Description schedule
Schedule schedule instance
event
MouseEvent MouseEvent
Example
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 });
-
resizePanel
-
Fire this event when resize view panels(milestone, task, allday).
Type:
- object
Properties:
Name Type Description layoutData
Array.<number> layout data after resized
Example
calendar.on('resizePanel', function(layoutData) { console.log(layoutData); // do something to resize your UI if necessary. });