Reputation: 11
Event : Product Booking is set to be starting on March 9th, and ending on the 11th, but the calendar displays it as ending one day too early for day view grid. But there's no issue in displaying all day with week grid view. I have attached screen shots for reference. Can you please help ?
Week View Grid Image:
Day View Grid Image:
Code:
eventDataTransform: function(eventData) {
console.log('EventDataStart-->' + eventData.start);
console.log('EventDataEnd-->' + eventData.end);
/*var m = moment(eventData.end);
var roundDown = m.startOf('day');
var day2 = moment(roundDown).add(1, 'days')
eventData.end = day2.toString();
console.log('EventDataEndAfter-->'+eventData.end);*/
var dur = eventData.end - eventData.start; //total event duration
if (dur >= 18000000 || eventData.end == null) { // 5 hours
eventData.allDay = true;
eventData.allDaySlot = true;
console.log('dur-->' + dur);
//eventData.end needs ammending to 00:00:00 of the next morning
if (dur > 86400000) {
var m = moment(eventData.end);
var roundDown = m.startOf('day');
var day2 = moment(roundDown).add(1, 'days')
eventData.end = day2.toString();
console.log('EventDataEndIf1-->' + eventData.end);
}
}
console.log('eventData-->' + JSON.stringify(eventData));
return (eventData);
}
Console Log Output:
Week Grid View:
EventDataStart-->Thu Mar 09 2023 09:00:00 GMT+0530 (India Standard Time)
EventDataEnd-->Sat Mar 11 2023 18:00:00 GMT+0530 (India Standard Time)
Day Grid View
EventDataStart-->Thu Mar 09 2023 09:00:00 GMT+0530 (India Standard Time)
EventDataEnd-->Sat Mar 11 2023 18:00:00 GMT+0530 (India Standard Time)
and
eventData-->{"color":"#FF9800","title":"Cooler | Test Record | Time: 09:00 AM - 06:00 PM","start":"2023-03-09T03:30:00.000Z","end":"Sun Mar 12 2023 00:00:00 GMT+0530","scheduleid":"a0z8F000000ElipQAC","userid":"0058F000000tDxiQAE","description":"Time: 09:00 AM - 06:00 PM","popupTitle":"Test Record - ","CAP_Reservations__c":{"type":"CAP_Reservations__c","Id":"a0z8F000000ElipQAC","Name":"CAP-00607","Color__c":"#FF9800","Number_of_Chafing_Dishes__c":null,"Number_of_Chairs__c":null,"Number_of_Air_Movers__c":null,"Number_of_Tables__c":null,"Number_Of_Six_Tables__c":null,"Agent__c":"0058F000000tDxiQAE","Agent__r":{"type":"User","Id":null,"Name":"Rohan Kabra"},"CAP_Items__c":"Cooler","Client__c":"0038F00000IssiVQAR","Client__r":{"type":"Contact","Id":null,"Name":"Test Record"},"Drop_Off_Date__c":"2023-03-12T00:00:00.000Z","Pick_Up_Date__c":"2023-03-09T15:00:00.000Z","Wait_List_Position__c":null,"Number_of_Tents__c":null},"allDay":true,"allDaySlot":true}
The code above mark the event as all day if the difference between end date and start date is greater than equal to 5 hours. Also we are adding a day to the end date so that events are correctly marked as per start date and end date on the calendar. Previously before adding a day (refer the code) it used to display one day less for both week grid and day grid. After adding a day to the end date, it displays correctly on week grid but not on day grid.
Expected Result : Order should be displayed correctly with proper end date on day grid calendar view.
Upvotes: 1
Views: 73