Rohan Kabra
Rohan Kabra

Reputation: 11

All day, multi day event is moved to wrong date on calendar for day view

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: Week Grid

Day View Grid Image: Day Grid

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

Answers (0)

Related Questions