Global

Type Definitions

CalendarColor

Properties:
Name Type Attributes Description
color string <optional>

calendar color

bgColor string <optional>

calendar background color

borderColor string <optional>

calendar left border color

CustomEvents

MonthOptions

Options for monthly view.

Properties:
Name Type Attributes Default Description
daynames Array.<string> <optional>

day names in monthly. Default values are ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

startDayOfWeek number <optional>
0

start day of week

narrowWeekend boolean <optional>
false

make weekend column narrow(1/2 width)

visibleWeeksCount boolean <optional>
6

visible week count in monthly(0 or null are same with 6)

isAlways6Week boolean <optional>
true

Always show 6 weeks. If false, show 5 weeks or 6 weeks based on the month.

workweek boolean <optional>
false

show only 5 days except for weekend

visibleScheduleCount number <optional>

visible schedule count in monthly grid

moreLayerSize object <optional>

more layer size

Properties
Name Type Attributes Default Description
width object <optional>
null

css width value(px, 'auto'). The default value 'null' is to fit a grid cell.

height object <optional>
null

css height value(px, 'auto'). The default value 'null' is to fit a grid cell.

grid object <optional>

grid's header and footer information

Properties
Name Type Attributes Description
header object <optional>

grid's header informatioin

Properties
Name Type Attributes Default Description
height number <optional>
34

grid's header height

footer object <optional>

grid's footer informatioin

Properties
Name Type Attributes Default Description
height number <optional>
34

grid's footer height

scheduleFilter function <optional>
null

Filter schedules on month view. A parameter is {Schedule} object.

Options

calendar option object

Properties:
Name Type Attributes Default Description
defaultView string <optional>
'week'

default view of calendar

taskView boolean | Array.<string> <optional>
true

show the milestone and task in weekly, daily view. If the value is array, it can be ['milestone', 'task'].

scheduleView boolean | Array.<string> <optional>
true

show the all day and time grid in weekly, daily view. If the value is array, it can be ['allday', 'time'].

theme themeConfig <optional>
themeConfig

custom theme options

template Template <optional>
{}

template options

week WeekOptions <optional>
{}

options for week view

month MonthOptions <optional>
{}

options for month view

calendars Array.<Calendar> <optional>
[]

list of Calendars that can be used to add new schedule

useCreationPopup boolean <optional>
false

whether use default creation popup or not

useDetailPopup boolean <optional>
false

whether use default detail popup or not

timezones Array.<Timezone> <optional>

timezone array. The first Timezone element is primary and can override Calendar#setTimezoneOffset function. The rest timezone elements are shown in left timegrid of weekly/daily view.

disableDblClick boolean <optional>
false

disable double click to create a schedule

isReadOnly boolean <optional>
false

Calendar is read-only mode and a user can't create and modify any schedule.

Schedule

Schedule information

Properties:
Name Type Attributes Description
id string

unique schedule id depends on calendar id

calendarId string

unique calendar id

title string

schedule title

start string | TZDate

start time. It's 'string' for input. It's 'TZDate' for output like event handler.

end string | TZDate

end time. It's 'string' for input. It's 'TZDate' for output like event handler.

goingDuration number

travel time: going duration

comingDuration number

travel time: coming duration

isAllDay boolean

all day schedule

category string

schedule type('milestone', 'task', allday', 'time')

dueDateClass string

task schedule type string (any string value is ok and mandatory if category is 'task')

location string

location

attendees Array.<string>

attendees

recurrenceRule any

recurrence rule

isPending boolean

in progress flag to do something like network job(The schedule will be transparent.)

isFocused boolean

focused schedule flag

isVisible boolean

schedule visibility flag

isReadOnly boolean

schedule read-only flag

isPrivate boolean

private schedule

color string <optional>

schedule text color

bgColor string <optional>

schedule background color

dragBgColor string <optional>

schedule background color when dragging it

borderColor string <optional>

schedule left border color

customStyle string

schedule's custom css class

raw any

user data

Template

Template functions to support customer renderer

Properties:
Name Type Attributes Description
milestoneTitle function <optional>

milestone title(at left column) template function

milestone function <optional>

milestone template function

taskTitle function <optional>

task title(at left column) template function

task function <optional>

task template function

alldayTitle function <optional>

allday title(at left column) template function

allday function <optional>

allday template function

time function <optional>

time template function

monthMoreTitleDate function <optional>

month more layer title template function

monthMoreClose function <optional>

month more layer close button template function

monthGridHeader function <optional>

month grid header(date, decorator, title) template function

monthGridFooter function <optional>

month grid footer(date, decorator, title) template function

monthGridHeaderExceed function <optional>

month grid header(exceed schedule count) template function

monthGridFooterExceed function <optional>

month grid footer(exceed schedule count) template function

weekDayname function <optional>

weekly dayname template function

monthDayname function <optional>

monthly dayname template function

themeConfig

Full configuration for theme. "common" prefix is for entire calendar. "common" properties can be overriden by "week", "month". "week" prefix is for weekly and daily view. "month" prefix is for monthly view.

Example
// default keys and styles
 var themeConfig = {
    'common.border': '1px solid #e5e5e5',
    'common.backgroundColor': 'white',
    'common.holiday.color': '#ff4040',
    'common.saturday.color': '#135de6',
    'common.dayname.color': '#333',
    'common.today.color': '#135de6',

    // creation guide style
    'common.creationGuide.backgroundColor': 'rgba(81, 92, 230, 0.05)',
    'common.creationGuide.border': '1px solid #515ce6',

    // month header 'dayname'
    'month.dayname.height': '31px',
    'month.dayname.borderLeft': '1px solid #e5e5e5',
    'month.dayname.paddingLeft': '10px',
    'month.dayname.paddingRight': '10px',
    'month.dayname.backgroundColor': 'inherit',
    'month.dayname.fontSize': '12px',
    'month.dayname.fontWeight': 'normal',
    'month.dayname.textAlign': 'left',

    // month day grid cell 'day'
    'month.holidayExceptThisMonth.color': 'rgba(255, 64, 64, 0.4)',
    'month.dayExceptThisMonth.color': 'rgba(51, 51, 51, 0.4)',
    'month.weekend.backgroundColor': 'inherit',
    'month.day.fontSize': '14px',

    // month schedule style
    'month.schedule.borderRadius': '2px',
    'month.schedule.height': '24px',
    'month.schedule.marginTop': '2px',
    'month.schedule.marginLeft': '8px',
    'month.schedule.marginRight': '8px',

    // month more view
    'month.moreView.border': '1px solid #d5d5d5',
    'month.moreView.boxShadow': '0 2px 6px 0 rgba(0, 0, 0, 0.1)',
    'month.moreView.backgroundColor': 'white',
    'month.moreView.paddingBottom': '17px',
    'month.moreViewTitle.height': '44px',
    'month.moreViewTitle.marginBottom': '12px',
    'month.moreViewTitle.backgroundColor': 'white',
    'month.moreViewTitle.borderBottom': 'none',
    'month.moreViewTitle.padding': '12px 17px 0 17px',
    'month.moreViewList.padding': '0 17px 17px 17px',

    // week header 'dayname'
    'week.dayname.height': '42px',
    'week.dayname.borderTop': '1px solid #e5e5e5',
    'week.dayname.borderBottom': '1px solid #e5e5e5',
    'week.dayname.borderLeft': 'inherit',
    'week.dayname.paddingLeft': '0',
    'week.dayname.backgroundColor': 'inherit',
    'week.dayname.textAlign': 'left',
    'week.today.color': '#333',

    // week vertical panel 'vpanel'
    'week.vpanelSplitter.border': '1px solid #e5e5e5',
    'week.vpanelSplitter.height': '3px',

    // week daygrid 'daygrid'
    'week.daygrid.borderRight': '1px solid #e5e5e5',
    'week.daygrid.backgroundColor': 'inherit',

    'week.daygridLeft.width': '72px',
    'week.daygridLeft.backgroundColor': 'inherit',
    'week.daygridLeft.paddingRight': '8px',
    'week.daygridLeft.borderRight': '1px solid #e5e5e5',

    'week.today.backgroundColor': 'rgba(81, 92, 230, 0.05)',
    'week.weekend.backgroundColor': 'inherit',

    // week timegrid 'timegrid'
    'week.timegridLeft.width': '72px',
    'week.timegridLeft.backgroundColor': 'inherit',
    'week.timegridLeft.borderRight': '1px solid #e5e5e5',
    'week.timegridLeft.fontSize': '11px',
    'week.timegridLeftTimezoneLabel.height': '20px',

    'week.timegridOneHour.height': '52px',
    'week.timegridHalfHour.height': '26px',
    'week.timegridHalfHour.borderBottom': 'none',
    'week.timegridHorizontalLine.borderBottom': '1px solid #e5e5e5',

    'week.timegrid.paddingRight': '8px',
    'week.timegrid.borderRight': '1px solid #e5e5e5',
    'week.timegridSchedule.borderRadius': '2px',
    'week.timegridSchedule.paddingLeft': '2px',

    'week.currentTime.color': '#515ce6',
    'week.currentTime.fontSize': '11px',
    'week.currentTime.fontWeight': 'normal',

    'week.pastTime.color': '#333',
    'week.pastTime.fontWeight': 'normal',

    'week.futureTime.color': '#333',
    'week.futureTime.fontWeight': 'normal',

    'week.currentTimeLinePast.border': '1px dashed #515ce6',
    'week.currentTimeLineBullet.backgroundColor': '#515ce6',
    'week.currentTimeLineToday.border': '1px solid #515ce6',
    'week.currentTimeLineFuture.border': 'none',

    // week creation guide style
    'week.creationGuide.color': '#515ce6',
    'week.creationGuide.fontSize': '11px',
    'week.creationGuide.fontWeight': 'bold',

    // week daygrid schedule style
    'week.dayGridSchedule.borderRadius': '2px',
    'week.dayGridSchedule.height': '24px',
    'week.dayGridSchedule.marginTop': '2px',
    'week.dayGridSchedule.marginLeft': '8px',
    'week.dayGridSchedule.marginRight': '8px'
};

TimeCreationGuide

time creation guide instance to present selected time period

Properties:
Name Type Description
guideElement HTMLElement

guide element

guideElements Object.<string, HTMLElement>

map by key. It can be used in monthly view

clearGuideElement function

hide the creation guide

Example
calendar.on('beforeCreateSchedule', function(event) {
    var guide = event.guide;
    // use guideEl$'s left, top to locate your schedule creation popup
    var guideEl$ = guide.guideElement ?
         guide.guideElement : guide.guideElements[Object.keys(guide.guideElements)[0]];

    // after that call this to hide the creation guide
    guide.clearGuideElement();
});

Timezone

Properties:
Name Type Attributes Description
timezoneOffset number <optional>

minutes for your timezone offset. If null, use the browser's timezone. Refer to Date.prototype.getTimezoneOffset()

displayLabel string <optional>

display label of your timezone at weekly/daily view(ex> 'GMT+09:00')

tooltip string <optional>

tooltip(ex> 'Seoul')

Example
var timezoneName = moment.tz.guess();
var cal = new Calendar('#calendar', {
 timezones: [{
     timezoneOffset: 540,
     displayLabel: 'GMT+09:00',
     tooltip: 'Seoul'
 }, {
     timezoneOffset: -420,
     displayLabel: 'GMT-08:00',
     tooltip: 'Los Angeles'
 }]
});

WeekOptions

Options for daily, weekly view.

Properties:
Name Type Attributes Default Description
startDayOfWeek number <optional>
0

start day of week

daynames Array.<string> <optional>

day names in weekly and daily. Default values are ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

narrowWeekend boolean <optional>
false

make weekend column narrow(1/2 width)

workweek boolean <optional>
false

show only 5 days except for weekend

showTimezoneCollapseButton boolean <optional>
false

show a collapse button to close multiple timezones

timezonesCollapsed boolean <optional>
false

An initial multiple timezones collapsed state

hourStart number <optional>
0

Can limit of render hour start.

hourEnd number <optional>
24

Can limit of render hour end.