logo

/repo|v1.12.8

Typedef

Template:

object

calendar.jsline 513

Template functions to support customer renderer

PROPERTIES
NameTypeDescription

milestoneTitle

[ function ]

The milestone title(at left column) template function

milestone

[ function ]

The milestone template function

taskTitle

[ function ]

The task title(at left column) template function

task

[ function ]

The task template function

alldayTitle

[ function ]

The allday title(at left column) template function

allday

[ function ]

The allday template function

time

[ function ]

The time template function

goingDuration

[ function ]

The travel time(going duration) template function

comingDuration

[ function ]

The travel time(coming duration) template function

monthMoreTitleDate

[ function ]

The month more layer title template function

monthMoreClose

[ function ]

The month more layer close button template function

monthGridHeader

[ function ]

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

monthGridHeaderExceed

[ function ]

The month grid header(exceed schedule count) template function

monthGridFooter

[ function ]

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

monthGridFooterExceed

[ function ]

The month grid footer(exceed schedule count) template function

monthDayname

[ function ]

The monthly dayname template function

weekDayname

[ function ]

The weekly dayname template function

weekGridFooterExceed

[ function ]

The week/day grid footer(exceed schedule count) template function

dayGridTitle

[ function ]

The week/day grid title template function(e.g. milestone, task, allday)

schedule

[ function ]

The week/day schedule template function(When the schedule category attribute is milestone, task, or all day)

collapseBtnTitle

[ function ]

The week/day (exceed schedule more view) collapse button title template function

timezoneDisplayLabel

[ function ]

The timezone display label template function in time grid

timegridDisplayPrimayTime

[ function ]

Deprecated: use 'timegridDisplayPrimaryTime'

timegridDisplayPrimaryTime

[ function ]

The display label template function of primary timezone in time grid

timegridDisplayTime

[ function ]

The display time template function in time grid

timegridCurrentTime

[ function ]

The current time template function in time grid

popupIsAllDay

[ function ]

The all day checkbox label text template function in the default creation popup

popupStateFree

[ function ]

The free option template function in the state select box of the default creation popup

popupStateBusy

[ function ]

The busy option template function in the state select box of the default creation popup

titlePlaceholder

[ function ]

The title input placeholder text template function in the default creation popup

locationPlaceholder

[ function ]

The location input placeholder text template function in the default creation popup

startDatePlaceholder

[ function ]

The start date input placeholder text template function in the default creation popup

endDatePlaceholder

[ function ]

The end date input placeholder text template function in the default creation popup

popupSave

[ function ]

The 'Save' button text template function in the default creation popup

popupUpdate

[ function ]

The 'Update' button text template function in the default creation popup when in edit mode

popupDetailDate

[ function ]

The schedule date information's template function on the default detail popup

popupDetailLocation

[ function ]

The schedule location text information's template function on the default detail popup

popupDetailUser

[ function ]

The schedule user text information's template function on the default detail popup

popupDetailState

[ function ]

The schedule state(busy or free) text information's template function on the default detail popup

popupDetailRepeat

[ function ]

The schedule repeat information's template function on the default detail popup

popupDetailBody

[ function ]

The schedule body text information's template function on the default detail popup

popupEdit

[ function ]

The 'Edit' button text template function on the default detail popup

popupDelete

[ function ]

The 'Delete' button text template function on the default detail popup

EXAMPLES
var calendar = new tui.Calendar(document.getElementById('calendar'), {
    ...
    template: {
        milestone: function(schedule) {
            return '<span class="calendar-font-icon ic-milestone-b"></span> <span style="background-color: ' + schedule.bgColor + '">' + schedule.title + '</span>';
        },
        milestoneTitle: function() {
            return '<span class="tui-full-calendar-left-content">MILESTONE</span>';
        },
        task: function(schedule) {
            return '#' + schedule.title;
        },
        taskTitle: function() {
            return '<span class="tui-full-calendar-left-content">TASK</span>';
        },
        allday: function(schedule) {
            return getTimeTemplate(schedule, true);
        },
        alldayTitle: function() {
            return '<span class="tui-full-calendar-left-content">ALL DAY</span>';
        },
        time: function(schedule) {
            return '<strong>' + moment(schedule.start.getTime()).format('HH:mm') + '</strong> ' + schedule.title;
        },
        goingDuration: function(schedule) {
            return '<span class="calendar-icon ic-travel-time"></span>' + schedule.goingDuration + 'min.';
        },
        comingDuration: function(schedule) {
            return '<span class="calendar-icon ic-travel-time"></span>' + schedule.comingDuration + 'min.';
        },
        monthMoreTitleDate: function(date, dayname) {
            var day = date.split('.')[2];

            return '<span class="tui-full-calendar-month-more-title-day">' + day + '</span> <span class="tui-full-calendar-month-more-title-day-label">' + dayname + '</span>';
        },
        monthMoreClose: function() {
            return '<span class="tui-full-calendar-icon tui-full-calendar-ic-close"></span>';
        },
        monthGridHeader: function(dayModel) {
            var date = parseInt(dayModel.date.split('-')[2], 10);
            var classNames = ['tui-full-calendar-weekday-grid-date '];

            if (dayModel.isToday) {
                classNames.push('tui-full-calendar-weekday-grid-date-decorator');
            }

            return '<span class="' + classNames.join(' ') + '">' + date + '</span>';
        },
        monthGridHeaderExceed: function(hiddenSchedules) {
            return '<span class="weekday-grid-more-schedules">+' + hiddenSchedules + '</span>';
        },
        monthGridFooter: function() {
            return '';
        },
        monthGridFooterExceed: function(hiddenSchedules) {
            return '';
        },
        monthDayname: function(model) {
            return (model.label).toString().toLocaleUpperCase();
        },
        weekDayname: function(model) {
            return '<span class="tui-full-calendar-dayname-date">' + model.date + '</span>&nbsp;&nbsp;<span class="tui-full-calendar-dayname-name">' + model.dayName + '</span>';
        },
        weekGridFooterExceed: function(hiddenSchedules) {
            return '+' + hiddenSchedules;
        },
        dayGridTitle: function(viewName) {

            // use another functions instead of 'dayGridTitle'
            // milestoneTitle: function() {...}
            // taskTitle: function() {...}
            // alldayTitle: function() {...}

            var title = '';
            switch(viewName) {
                case 'milestone':
                    title = '<span class="tui-full-calendar-left-content">MILESTONE</span>';
                    break;
                case 'task':
                    title = '<span class="tui-full-calendar-left-content">TASK</span>';
                    break;
                case 'allday':
                    title = '<span class="tui-full-calendar-left-content">ALL DAY</span>';
                    break;
            }

            return title;
        },
        schedule: function(schedule) {

            // use another functions instead of 'schedule'
            // milestone: function() {...}
            // task: function() {...}
            // allday: function() {...}

            var tpl;

            switch(category) {
                case 'milestone':
                    tpl = '<span class="calendar-font-icon ic-milestone-b"></span> <span style="background-color: ' + schedule.bgColor + '">' + schedule.title + '</span>';
                    break;
                case 'task':
                    tpl = '#' + schedule.title;
                    break;
                case 'allday':
                    tpl = getTimeTemplate(schedule, true);
                    break;
            }

            return tpl;
        },
        collapseBtnTitle: function() {
            return '<span class="tui-full-calendar-icon tui-full-calendar-ic-arrow-solid-top"></span>';
        },
        timezoneDisplayLabel: function(timezoneOffset, displayLabel) {
            var gmt, hour, minutes;

            if (!displayLabel) {
                gmt = timezoneOffset < 0 ? '-' : '+';
                hour = Math.abs(parseInt(timezoneOffset / 60, 10));
                minutes = Math.abs(timezoneOffset % 60);
                displayLabel = gmt + getPadStart(hour) + ':' + getPadStart(minutes);
            }

            return displayLabel;
        },
        timegridDisplayPrimayTime: function(time) {
            // will be deprecated. use 'timegridDisplayPrimaryTime'
            var meridiem = 'am';
            var hour = time.hour;

            if (time.hour > 12) {
                meridiem = 'pm';
                hour = time.hour - 12;
            }

            return hour + ' ' + meridiem;
        },
        timegridDisplayPrimaryTime: function(time) {
            var meridiem = 'am';
            var hour = time.hour;

            if (time.hour > 12) {
                meridiem = 'pm';
                hour = time.hour - 12;
            }

            return hour + ' ' + meridiem;
        },
        timegridDisplayTime: function(time) {
            return getPadStart(time.hour) + ':' + getPadStart(time.hour);
        },
        timegridCurrentTime: function(timezone) {
            var templates = [];

            if (timezone.dateDifference) {
                templates.push('[' + timezone.dateDifferenceSign + timezone.dateDifference + ']<br>');
            }

            templates.push(moment(timezone.hourmarker).format('HH:mm a'));

            return templates.join('');
        },
        popupIsAllDay: function() {
            return 'All Day';
        },
        popupStateFree: function() {
            return 'Free';
        },
        popupStateBusy: function() {
            return 'Busy';
        },
        titlePlaceholder: function() {
            return 'Subject';
        },
        locationPlaceholder: function() {
            return 'Location';
        },
        startDatePlaceholder: function() {
            return 'Start date';
        },
        endDatePlaceholder: function() {
            return 'End date';
        },
        popupSave: function() {
            return 'Save';
        },
        popupUpdate: function() {
            return 'Update';
        },
        popupDetailDate: function(isAllDay, start, end) {
            var isSameDate = moment(start).isSame(end);
            var endFormat = (isSameDate ? '' : 'YYYY.MM.DD ') + 'hh:mm a';

            if (isAllDay) {
                return moment(start).format('YYYY.MM.DD') + (isSameDate ? '' : ' - ' + moment(end).format('YYYY.MM.DD'));
            }

            return (moment(start).format('YYYY.MM.DD hh:mm a') + ' - ' + moment(end).format(endFormat));
        },
        popupDetailLocation: function(schedule) {
            return 'Location : ' + schedule.location;
        },
        popupDetailUser: function(schedule) {
            return 'User : ' + (schedule.attendees || []).join(', ');
        },
        popupDetailState: function(schedule) {
            return 'State : ' + schedule.state || 'Busy';
        },
        popupDetailRepeat: function(schedule) {
            return 'Repeat : ' + schedule.recurrenceRule;
        },
        popupDetailBody: function(schedule) {
            return 'Body : ' + schedule.body;
        },
        popupEdit: function() {
            return 'Edit';
        },
        popupDelete: function() {
            return 'Delete';
        }
    }
}
Resizable