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


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

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

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

        var actualEvent;

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

        const popupOptions = {
            buttons: [
                    text: 'Add',
                    keyCode: 'enter',
                    handler: function () {
                    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]);
        const calendar = mobiscroll.eventcalendar('#calendar', options);


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 ?


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.

Hello @Julien :wave:

We fixed this in our latest release. Let me know how it goes :+1: