How to change the date format in quick popup?
This article explains the way to change the date format in Quick Popup.
Step 1: Create a JS Scheduler by referring to the following online sample link.
https://ej2.syncfusion.com/javascript/demos/#/material/schedule/default.html
Step 2: Bind popupOpen event to customize the quick popup date format, as shown in the following code example.
popupOpen: function (args) {
if (args.type === 'QuickInfo') {
var details = '';
var instance = new ej.base.Internationalization();
var startDate = args.data.StartTime;
var endDate = args.data.EndTime;
var isAllDay = args.data.IsAllDay;
var startTimeDetail = instance.formatDate(startDate, { type: 'time', skeleton: 'short' });
var endTimeDetail = instance.formatDate(endDate, { type: 'time', skeleton: 'short' });
var startDateDetails = this.getDayNames('wide')[startDate.getDay()];
endDate = (isAllDay) && endDate.getHours() === 0 && endDate.getMinutes() === 0 ?
new Date(endDate.setDate(endDate.getDate() - 1)) : endDate;
var endDateDetails = this.getDayNames('wide')[endDate.getDay()];
var spanLength = endDate.getDate() !== startDate.getDate() &&
(endDate.getTime() - startDate.getTime()) / (60 * 60 * 1000) < 24 ? 1 : 0;
if (isAllDay) {
details = startDateDetails + ' (all Day)';
if ((endDate.getTime() - startDate.getTime()) / 86400000 > 1) {
details += ' - ' + endDateDetails + ' (all Day)';
}
} else if ((((endDate.getTime() - startDate.getTime()) / 86400000) >= 1 || spanLength > 0)) {
details = startDateDetails + ' (' + startTimeDetail + ')' + ' - ' + endDateDetails + ' (' + endTimeDetail + ')';
} else {
details = startDateDetails + ' (' + (startTimeDetail + ' - ' + endTimeDetail) + ')';
}
args.element.querySelector('.e-date-time-details').textContent = details;
}
}
Step 3: Run the sample and click any cell / event,a quick popup will be displayed as shown below.
Figure 1: Quick popup with custom format.
Please refer to the example from the following GitHub link: Quick popup with custom format.
