Global

Type Definitions

CustomEvents

https://nhnent.github.io/tui.code-snippet/latest/tui.util.CustomEvents.html

Options

calendar option object

Properties:
Name Type Attributes Default Description
cssPrefix string <optional>

CSS classname prefix

defaultView string <optional>
'week'

default view of calendar

defaultDate string <optional>
null

default date to render calendar. if not supplied, use today.

calendarColor object <optional>

preset calendar colors

Properties
Name Type Attributes Description
color string <optional>

calendar color

bgColor string <optional>

calendar background color

borderColor string <optional>

calendar left border color

render boolean <optional>

immediately apply colors when setCalendarColor called.

taskView boolean <optional>
true

show the milestone and task in weekly, daily view

scheduleView boolean <optional>
true

show the all day and time grid in weekly, daily view

template object <optional>

template option

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

week object <optional>

options for week view

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

start day of week

panelHeights Array.<number> <optional>

each panel height px(Milestone, Task, Allday View Panel)

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

alldayViewType string <optional>
'scroll'

set view type of allday panel. ('scroll'|'toggle')

month object <optional>

options for month 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)

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

schedules Array.<Schedule> <optional>

array of Schedule data for add calendar after initialize.

RenderRange

rendered range

Properties:
Name Type Description
start Date

start date

end Date

end date

Schedule

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

start time

end string

end time

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')

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

color string <optional>

schedule text color

bgColor string <optional>

schedule background color

borderColor string <optional>

schedule left border color

customStyle string

schedule's custom css class

raw any

user data

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();
});