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