Customize creation popup

Version

@version 1.13.1 | Tue Jul 06 2021

Development Environment

• language: Javascript
• browser: Chrome

/* calendar opts */
var calendar = new tui.Calendar('#calendar', {
        defaultView: 'month',
        taskView: false,     
        scheduleView: true, 
        useCreationPopup: true, 
        useDetailPopup: true,   
        template: { //template calendario e popups
            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;
            },
            titlePlaceholder: function () {
                return 'Attività';
            },
            locationPlaceholder: function () {
                return 'Luogo';
            },
            startDatePlaceholder: function () {
                return 'Inizio';
            },
            endDatePlaceholder: function () {
                return 'Fine';
            },
            popupSave: function () {
                return 'Salva';
            },
            popupUpdate: function () {
                return 'Aggiorna';
            },
            popupEdit: function () {
                return 'Modifica';
            },
            popupDelete: function () {
                return 'Elimina';
            },
            popupDetailDate: function (isAllDay, start, end) {
                let startDate = new Date(start);
                let endDate = new Date(end);

                console.log('startDate: ' + startDate);
                console.log('endDate: ' + endDate);

                let isSameDate = moment(startDate).isSame(endDate);
                let endFormat = (isSameDate ? '' : 'DD.MM.YYYY ') + 'HH:mm';

                if (isAllDay) {
                    return moment(startDate).format('DD.MM.YYYY') + (isSameDate ? '' : ' - ' + moment(endDate).format('DD.MM.YYYY'));
                }
                return (moment(startDate).format('DD.MM.YYYY') + ' ' + moment(startDate.getTime()).format('HH:mm') + ' - ' + moment(endDate.getTime()).format(endFormat));
            },
            popupDetailLocation: function (schedule) {
                return 'Luogo : ' + schedule.location;
            },
            popupDetailUser: function (schedule) {
                return 'Partecipanti: ' + (schedule.attendees || []).join(', ');
            },
            popupDetailState: function (schedule) {
                return 'Stato: ' + schedule.state || 'Busy';
            },
            popupDetailRepeat: function (schedule) {
                return 'Ricorsivit&agrave;: ' + schedule.recurrenceRule;
            },
            popupDetailBody: function (schedule) {
                return 'Altri dettagli: ' + schedule.body;
            }
        },
        month: {
            daynames: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
            startDayOfWeek: 1
        },
        week: {
            daynames: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
            startDayOfWeek: 1
        },
        calendars: calendars   
    });

/* saveNewSchedule method */
function saveNewSchedule(scheduleData) {
        let scheduleId = String(Date.now()) + getRandomNum();

        const schedule = {
            id: scheduleId,                  
            calendarId: scheduleData.calendarId,  
            title: scheduleData.title,         
            body: scheduleData.body,            
            start: scheduleData.start,         
            end: scheduleData.end,              
            isAllDay: scheduleData.isAllDay,    
            category: scheduleData.isAllDay ? 'allday' : 'time',  
            dueDateClass: '',                 
            attendees: scheduleData.attendees,  
            recurrenceRule: scheduleData.recurrenceRule,       
            isVisible: scheduleData.isVisible,  
            isReadOnly: scheduleData.isReadOnly,
            color: calendars.color,          
            bgColor: calendars.bgColor,      
            dragBgColor: calendars.bgColor, 
            borderColor: calendars.borderColor,                
            customStyle: scheduleData.customStyle,              
            state: scheduleData.state           
        };
        calendar.createSchedules([schedule]);
    }

calendar.on({
        clickMore: function (e) {
            console.log('clickMore', e);
        },
        clickSchedule: function (e) {
            console.log('clickSchedule', e);
        },
        clickDayname: function (date) {
            console.log('clickDayname', date);
        },
        beforeCreateSchedule: function (e) {
            console.log('beforeCreateSchedule', e);
            saveNewSchedule(e);
            //e.guide.clearGuideElement();
        },
        beforeUpdateSchedule: function (e) {
            const {schedule, changes} = e;
            console.log('beforeUpdateSchedule', e);

            /*TODO:
            if (schedule.isReadOnly === false) {
                calendar.updateSchedule(schedule.id, schedule.calendarId, changes);}
            */
        },
        beforeDeleteSchedule: function (e) {
            console.log('beforeDeleteSchedule', e);
            calendar.deleteSchedule(e.schedule.id, e.schedule.calendarId);
        },
        afterRenderSchedule: function (e) {
            const schedule = e.schedule;
            let element = calendar.getElement(schedule.id, schedule.calendarId);
            console.log('afterRenderSchedule', element);
        }
    });

Current Behavior

Creation popup not showing “read only” & “attendees” options and show only “private” padlock.

Expected Behavior

I would to custumize the creation popup, but I can’t find the way to do this. I’ve to show “Read only”,“Attendees” field s and remove “Private” padlock. How can I proceed? I read about this: https://github.com/nhn/tui.calendar/blob/master/docs/getting-started.md#customize-popups So far everything ok! …But how can I “pass” the my template to use it? And where\how should I write it??

Thanks!!!