Set events limitations per day in EventsCalendar Timeline

Hello,

How can I set limit for events per day in the EventsCalendar Timeline? Basically now when i click in cell is showing the popup for create events every time. But I want to display once time.

This is my view:

And this is my code:

```
var calendar;

    var popup;

    var range;

    var oldShift;

    var tempShift;

    var deleteShift;

    var formatDate = mobiscroll.util.datetime.formatDate;

    var $notes = $('#employee-shifts-notes');

    var $deleteButton = $('#employee-shifts-delete');

    var staff = $.map(employee, function(item) {

        return {

            id: item.id,

            name: item.name,

            color: '#e20000'

        };

    });

    var shifts = [{

        start: '2022-07-05T07:00',

        end: '2022-07-05T13:00',

        title: '07:00 - 13:00',

        resource: 23

    }, {

        start: '2022-07-05T07:00',

        end: '2022-07-05T13:00',

        title: '07:00 - 13:00',

        resource: 1

    }];

   

    function createAddPopup(args) {

        // hide delete button inside add popup

        $deleteButton.hide();

        deleteShift = true;

        restoreShift = false;

        // set popup header text and buttons for adding

        popup.setOptions({

            headerText: '<div>New shift</div><div class="employee-shifts-day">' +  // More info about headerText: https://docs.mobiscroll.com/5-17-1/eventcalendar#opt-headerText

                formatDate('DDDD', new Date(tempShift.start)) + ',' + formatDate('DD MMMM YYYY', new Date(tempShift.start)) + '</div>',

            buttons: [                                                             // More info about buttons: https://docs.mobiscroll.com/5-17-1/eventcalendar#opt-buttons

                'cancel',

                {

                    text: 'Add',

                    keyCode: 'enter',

                    handler: function () {

                        calendar.updateEvent(tempShift);

                        deleteShift = false;

                        popup.close();

                    },

                    cssClass: 'mbsc-popup-button-primary'

                }

            ]

        });

        // fill popup with a new event data

        range.setVal([tempShift.start, tempShift.end]);

        popup.open();

    }

    function createEditPopup(args) {

        var ev = args.event;

        var resource = staff.find(function (r) { return r.id === ev.resource });

        var headerText = '<div>Edit ' + resource.name + '\'s hours</div><div class="employee-shifts-day">' +

            formatDate('DDDD', new Date(ev.start)) + ',' + formatDate('DD MMMM YYYY', new Date(ev.start)) + '</div>';

        // show delete button inside edit popup

        $deleteButton.show();

        deleteShift = false;

        restoreShift = true;

        // // set popup header text and buttons for editing

        popup.setOptions({

            headerText: headerText,                                                
            buttons: [                                                             

                'cancel',

                {

                    text: 'Save',

                    keyCode: 'enter',

                    handler: function () {

                        var date = range.getVal();

                        // update event with the new properties on save button click

                        calendar.updateEvent({

                            id: ev.id,

                            title: formatDate('HH:mm', date[0]) + ' - ' + formatDate('HH:mm', date[1] ? date[1] : date[0]),

                            notes: $notes.val(),

                            start: date[0],

                            end: date[1] ? date[1] : date[0],

                            resource: resource.id,

                            color: resource.color,

                        });

                        restoreShift = false;

                        popup.close();

                    },

                    cssClass: 'mbsc-popup-button-primary'

                }

            ]

        });

        // fill popup with the selected event data

        $notes.mobiscroll('getInst').value = ev.notes || '';

        range.setVal([ev.start, ev.end]);

        popup.open();

    }

    calendar = $('#demo-employee-shifts-calendar').mobiscroll().eventcalendar({

        view: {                                                                    

            timeline: {

                type: 'week',

                eventList: true,

                startDay: 0

            }

        },

        data: shifts,                                              

        dragToCreate: false,                                                       

        dragToResize: false,                                                      

        dragToMove: true,                                                          

        clickToCreate: 'single',                                                       

        resources: staff,                                                         

        extendDefaultEvent: function (ev) {                                        

            var d = ev.start;

            var start = new Date(d.getFullYear(), d.getMonth(), d.getDate());

            var end = new Date(d.getFullYear(), d.getMonth(), d.getDate());

            return {

                title: formatDate('HH:mm', start) + ' - ' + formatDate('HH:mm', end),

                start: start,

                end: end,

                resource: ev.resource

            };

        },

        onEventCreate: function (args, inst) {                                     

            // store temporary event

            tempShift = args.event;

            setTimeout(function () {

                createAddPopup(args);

            }, 100);

        },

        onEventClick: function (args, inst) {                                      

            oldShift = $.extend({}, args.event);

            tempShift = args.event;

            if (!popup.isVisible()) {

                createEditPopup(args);

            }

        },

        renderResource: function (resource) {                                      

            return '<div class="employee-shifts-cont">' +

                '<div class="employee-shifts-name">' + resource.name + '</div></div>';

        },

    }).mobiscroll('getInst');

    popup = $('#demo-employee-shifts-popup').mobiscroll().popup({

        display: 'bottom',                                                         

        contentPadding: false,

        fullScreen: true,

        onClose: function () {                                                     

            if (deleteShift) {

                calendar.removeEvent(tempShift);

            } else if (restoreShift) {

                calendar.updateEvent(oldShift);

            }

        },

        responsive: {                                                              

            medium: {
                display: 'center',                           

                width: 400,                                                       

                fullScreen: false,

                touchUi: false,

                showOverlay: false

            }

        }

    }).mobiscroll('getInst');

    range = $('#demo-employee-shifts-date').mobiscroll().datepicker({

        controls: ['time'],

        select: 'range',

        display: 'anchored',                                                      
        showRangeLabels: false,

        touchUi: false,

        startInput: '#employee-shifts-start',

        endInput: '#employee-shifts-end',

        stepMinute: 30,

        timeWheels: '|h:mm A|',

        onChange: function (args) {

            var date = args.value;

            // update shift's start/end date

            tempShift.start = date[0];

            tempShift.end = date[1] ? date[1] : date[0];

            tempShift.title = formatDate('HH:mm', date[0]) + ' - ' + formatDate('HH:mm', date[1] ? date[1] : date[0]);

        }

    }).mobiscroll('getInst');

    $notes.on('change', function (ev) {

        // update current event's title

        tempShift.notes = ev.target.value;

    });

fggg

Hello @Epifanios_Chatzievan :wave:

Yes, it’s possible to prevent event overlap, as it’s shown in this example: https://demo.mobiscroll.com/scheduler/prevent-double-booking-events - this is a demo for the Scheduler view and you are using the Timeline view but, the method and solution would be the same.