Event on full day is rendered with one more day

With version 5.17.2 of mobiscroll, if you try to create a full day event it will render as a day + 1 event.

will render like this

<html>

<head>
    <link rel="stylesheet" href="mobiscroll.min.css" />
    <script src="mobiscroll.javascript.min.js"></script>
</head>

<body>
    <div id="calendar"></div>

    <div id="event-popup" class="mbsc-cloak">
        <div class="mbsc-form-group">
            <label>
                <input mbsc-switch data-label="All day" id="event-all-day" type="checkbox" />
            </label>
            <label>
                Start
                <input mbsc-input id="start-input" />
            </label>
            <label>
                End
                <input mbsc-input id="end-input" />
            </label>
            <div id="event-date"></div>
        </div>
    </div>

    <script>
        var actualEvent;

        const allDaySwitch = document.getElementById('event-all-day');
        allDaySwitch.addEventListener('change', function () {
            const checked = allDaySwitch.checked
            range.setOptions({
                controls: checked ? ['calendar'] : ['calendar', 'time'],
            });
            actualEvent.allDay = checked;
        });


        const popupOptions = {
            buttons: [
                'cancel',
                {
                    text: 'Add',
                    keyCode: 'enter',
                    handler: function () {
                        calendar.updateEvent(actualEvent);
                        popup.close();
                    },
                    cssClass: 'mbsc-popup-button-primary'
                }
            ]
        };

        const popup = mobiscroll.popup('#event-popup', popupOptions);

        const range = mobiscroll.datepicker('#event-date', {
            select: 'range',
            controls: ['calendar', 'time'],
            startInput: '#start-input',
            endInput: '#end-input',
            exclusiveEndDates: true,
            stepMinute: 5,
            touchUi: true,
            onChange: function (args) {
                const date = args.value;
                actualEvent.start = date[0];
                actualEvent.end = date[1];
            }
        });

        const options = {
            view: {
                schedule: {
                    type: 'week',
                    allDay: true,
                }
            },
            dragToCreate: true,
            onEventCreated: function (args) {
                actualEvent = args.event;
                range.setVal([actualEvent.start, actualEvent.end]);
                popup.open();
            },
        }
        const calendar = mobiscroll.eventcalendar('#calendar', options);
    </script>
</body>

</html>

Hi @Julien :wave:

I was not able to reproduce this issue, please see this example as a reference: https://demo.mobiscroll.com/javascript/scheduler/create-read-update-delete-CRUD#.

Could you please try the following steps to reproduce :

  1. slide to create an appointment for 1 hour
  2. turn the toggle AllDay on in the pop up
  3. click Add

Yup, I tried, but for me works as expected.

Did you manage to reproduce this issue with the CRUD demo? - if yes, can you share a screencast of the problem?

I can confirm the issue, if you add this option to the datepicker in your example :
exclusiveEndDates: true,

you will see it.

Yup with that I was able to reproduce this behavior.

I have to take a deeper look into this issue and will get back to you as soon as I have updates.

Hi @Zsombor,

Do you have any update on this issue ?

Thanks

Hello @Julien :wave:

Yes, I can confirm that this is a bug on our end.
Your voice is already added to a bug report and when this issue is fixed, I’ll let you know.

Ok, thanks for the quick reply !

1 Like

Hi @Zsombor,

I’ve just updated mobiscroll to 5.19.1 and the issue is still present, is there any ETA for this issue ?

This rendering issue is a real problem for my clients.

Hello @Julien :wave:

That’s right, it’s because this timezone issue was not yet fixed.

We don’t have an exact ETA but, don’t worry, I’ll let you know when the fix is up and running.