Time picker does not show when selecting multiple days(dragging) in month view.

[RoudyTarabay]

Version

1.12.1

Development Environment

Chrome, MacOs

Current Behavior

When selecting multiple days in month view(dragging through multiple days), the popup creation only gives me the option of choosing date without time. If I click on a day however it works as expected.

const templates = {
        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.toDate()).isSame(end.toDate());
            var endFormat = (isSameDate ? '' : 'YYYY.MM.DD ') + 'HH:mm a';
            if (isAllDay) {
                return moment(start.toDate()).format('YYYY.MM.DD') + (isSameDate ? '' : ' - ' + moment(end.toDate()).format('YYYY.MM.DD'));
            }
            return (moment(start.toDate()).format('YYYY.MM.DD HH:mm a') + ' - ' + moment(end.toDate()).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';
        }
    };
cal = new tui.Calendar('#calendar', {
    defaultView: 'month',
    template: templates,
    useCreationPopup: true,
    useDetailPopup: true,
});
setRenderRangeText();
setEventListener(cal);
if (!$(".tui-full-calendar-layout").length) {
    cal = new tui.Calendar('#calendar', {
        defaultView: 'month',
        template: templates,
        useCreationPopup: true,
        useDetailPopup: true,
    });
    setRenderRangeText();
    setEventListener(cal)
    cal.on({
     'beforeUpdateSchedule': function(e) {
        var formdata = new FormData();
        formdata.append('equipment_id', rowId);
        formdata.append('reservation_id', e.schedule.id);
        formdata.append('from', moment(e.start.toDate()).format('YYYY-MM-DD HH:mm:ss'));
        formdata.append('to', moment(e.end.toDate()).format('YYYY-MM-DD HH:mm:ss'));
        $.ajax({
            url: "{{path_for('editBookEquipment')}}",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false,
            success: function(res) {
                if (res == 'Already exists') {
                    alert("Your reservation overlaps with someone else's");
                    return;
                }
                cal.updateSchedule(e.schedule.id, '1', {
                    start: e.start,
                    end: e.end
                });
                cal.render();
            },
            error: function(jqXHR, textStatus, errorThrow) {
                alert("An error occured");
            }
        });

     },
    'beforeDeleteSchedule': function(e) {
        var formdata = new FormData();
        formdata.append('reservation_id', e.schedule.id);

        $.ajax({
            url: "{{path_for('cancelBookEquipment')}}",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false,
            success: function(res) {
                console.log(res)
                // cal.createSchedules(scheduleList);
                cal.deleteSchedule(e.schedule.id,'1')
                cal.render();

            },
            error: function(jqXHR, textStatus, errorThrow) {
                alert("An error occured");
            }
        });  
    },

    'beforeCreateSchedule': function(e) {
        // open a creation popup

        var formdata = new FormData();
        formdata.append('user_id', 1);
        formdata.append('equipment_id', rowId);
        formdata.append('from', moment(e.start.toDate()).format('YYYY-MM-DD HH:mm:ss'));
        formdata.append('to', moment(e.end.toDate()).format('YYYY-MM-DD HH:mm:ss'));
        $.ajax({
            url: "{{path_for('bookEquipment')}}",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false,
            success: function(res) {
                if (res == 'Already exists') {
                    alert("Your reservation overlaps with someone else's");
                    return;
                }
                var schedule = {
                    id: res,
                    calendarId: '1',
                    title: e.title,
                    category: 'time',
                    start: e.start,
                    end: e.end
                }

                scheduleList.push(schedule);
                cal.clear();
                cal.createSchedules(scheduleList);
                cal.render();
                id++;
            },
            error: function(jqXHR, textStatus, errorThrow) {
                alert("An error occured");
            }
        });

    },

})
}
var scheduleList = [];
$.each(_reservations, function( key, value ) {
    if(value.reservation_removed==0)
        scheduleList.push({
            id: ''+value.reservation_id,
            calendarId:'1',
            title: 'reserved',
            category:'time',
            dueDateClass: '',
            start: value.from_field.replace(" ","T"),
            end: value.to_field.replace(" ","T")        

            //     start: value.from_field.replace(" ","T")+"+09:00",
            // end: value.to_field.replace(" ","T")+"+09:00"
        })
})
// cal.clear();
cal.clear();
cal.createSchedules(scheduleList);

}
function setRenderRangeText() {
    var renderRange = document.getElementById('renderRange');
    var options = cal.getOptions();
    var viewName = cal.getViewName();
    var html = [];
    if (viewName === 'day') {
        html.push(moment(cal.getDate().getTime()).format('YYYY.MM.DD'));
    } else if (viewName === 'month' &&
        (!options.month.visibleWeeksCount || options.month.visibleWeeksCount > 4)) {
        html.push(moment(cal.getDate().getTime()).format('YYYY.MM'));
    } else {
        html.push(moment(cal.getDateRangeStart().getTime()).format('YYYY.MM.DD'));
        html.push(' ~ ');
        html.push(moment(cal.getDateRangeEnd().getTime()).format(' MM.DD'));
    }
    renderRange.innerHTML = html.join('');
}

function setEventListener(cal) {
    $('.dropdown-menu a[role="menuitem"]').on('click', function(e) { onClickMenu(e, cal) });
    $('#menu-navi').on('click', function(e) { onClickNavi(e, cal) });
    window.addEventListener('resize', resizeThrottled);
}

function onClickMenu(e, cal) {
    var target = $(e.target).closest('a[role="menuitem"]')[0];
    var action = getDataAction(target);
    var options = cal.getOptions();
    var viewName = '';

    switch (action) {
        case 'toggle-daily':
            viewName = 'day';
            break;
        case 'toggle-weekly':
            viewName = 'week';
            break;
        case 'toggle-monthly':
            options.month.visibleWeeksCount = 0;
            viewName = 'month';
            break;
        case 'toggle-weeks2':
            options.month.visibleWeeksCount = 2;
            viewName = 'month';
            break;
        case 'toggle-weeks3':
            options.month.visibleWeeksCount = 3;
            viewName = 'month';
            break;
        case 'toggle-narrow-weekend':
            options.month.narrowWeekend = !options.month.narrowWeekend;
            options.week.narrowWeekend = !options.week.narrowWeekend;
            viewName = cal.getViewName();

            target.querySelector('input').checked = options.month.narrowWeekend;
            break;
        case 'toggle-start-day-1':
            options.month.startDayOfWeek = options.month.startDayOfWeek ? 0 : 1;
            options.week.startDayOfWeek = options.week.startDayOfWeek ? 0 : 1;
            viewName = cal.getViewName();

            target.querySelector('input').checked = options.month.startDayOfWeek;
            break;
        case 'toggle-workweek':
            options.month.workweek = !options.month.workweek;
            options.week.workweek = !options.week.workweek;
            viewName = cal.getViewName();

            target.querySelector('input').checked = !options.month.workweek;
            break;
        default:
            break;
    }

    cal.setOptions(options, true);
    cal.changeView(viewName, true);

    setDropdownCalendarType();
    setRenderRangeText();
}

function getDataAction(target) {
    return target.dataset ? target.dataset.action : target.getAttribute('data-action');
}

function onClickNavi(e, cal) {
    var action = getDataAction(e.target);

    switch (action) {
        case 'move-prev':
            cal.prev();
            break;
        case 'move-next':
            cal.next();
            break;
        case 'move-today':
            cal.today();
            break;
        default:
            return;
    }

    setRenderRangeText();
}

Expected Behavior

Dragging should still give me the option to select time.

[dongsik-yoo]

@RoudyTarabay I thought that dragging multiple days means a kind of all-day schedule, so I removed time picker. What do you think?

[RoudyTarabay]

@dongsik-yoo Hello.

On the Calendar homepage dragging through multiple days keeps the time picker. In our case we are building an equipment reservation project and we need to have time as well.

[dongsik-yoo]

@RoudyTarabay v1.12.1 is not on the homepage yet. I understood your needs. I'll catch up with your suggestion. Thanks!

[RoudyTarabay]

@dongsik-yoo Thanks!