Event mode - time until a full day event is shown incorrectly

[atomic7777]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

If I'm correct, the amount of time until a full day event is shown incorrectly in the 'event mode' and with 'relative time' enabled.
Now it's saturday evening. The next event is on monday, but the calendar shows it's tomorrow. It should be "in two days". I think it just counts that the event will start at midnight, so it's only 28 hours away. I haven't looked at the code, so I'm not sure.

Expected behaviour

I think it would be great if full day events were trated as full day events (or it could be an option to do it) - the amount of time should be calculated in days - tomorrow, today - not by hours.

Possible Solutions

I was the author of the "original" atomic calendar and if I remember correctly for full day events I set the variable "isFullOneDayEvent" or isFullMoreDaysEvent and calculated the number of days based on that.

Context / Reason

Unfortunately I stopped creating this a few years ago, I know this may involve quite a bit of change, this is just a suggestion. Anyway, great job and I'm glad the calendar has a successor.

Code of Conduct

• I agree to follow this project's Code of Conduct

[marksie1988]

Hey,

I wasnt able to re-produce this in my lab but will try at different times as I guess that will impact the results here!

That said, this calculation is completed by DayJS using the relative time module, im not too sure if there is much I could do about it, however will do some digging to see if there is any additional configuration for the relative time module.

[marksie1988]

Ok i now see this issue.

[marksie1988]

so this appears to be the way dayjs deals with relative time:

https://day.js.org/docs/en/display/from-now#list-of-breakdown-range

[lsv]

Would it be possible to set your own "roundings/thresholds" - Maybe only in the code editor

https://day.js.org/docs/en/customization/relative-time#relative-time-thresholds-and-rounding

I really dont like seeing "in a month" (on a birthday calendar) I would rather just see eg "in 36 days"

With the possibility to adding your own threshold I would be able to do so.
And also, it would be possible to "fix" the 22 hour threshold

[RuneNyhuus]

Will this be fixed??
Still says (in a day) on something happening in 2 days ?

[Jeremwhy]

Hey, same issue for me, pretty inconvenient, any update/workaround ?

[salocinyeet]

I am having this issue where it shows the time instead of all day
Even tho the event is set for 24 hours because that is how ical integration set it up

[marksie1988]

Unfortunately I haven't been able to think of a good way to get around this because of the way it's implemented in dayjs.

Ideally I would want it to say in 1 day 2 hours for example. But the dayjs implementation doesn't do that. If anyone has any ideas or a solution I'm all ears

[marksie1988]

Something like this may work but it looses the locale which I wanted to avoid.

import dayjs from 'dayjs';

function customRelativeTime(targetDate) {
  const now = dayjs();
  const diffMilliseconds = targetDate.diff(now);
  const diffDays = targetDate.diff(now, 'day');
  const diffHours = targetDate.diff(now, 'hour') % 24; // Hours within the current day
  const diffMinutes = targetDate.diff(now, 'minute') % 60; // Minutes within the current hour

  if (diffMilliseconds < 0) {
    // Handle past dates (you can customize this)
    return targetDate.format('YYYY-MM-DD HH:mm'); // Or a "X ago" logic if desired
  }

  if (targetDate.isSame(now.add(1, 'day'), 'day')) {
    return 'tomorrow';
  }

  if (diffDays < 3) {
    let result = 'in ';
    if (diffDays > 0) {
      result += `${diffDays} day${diffDays !== 1 ? 's' : ''}`;
      if (diffHours > 0) {
        result += `, ${diffHours} hour${diffHours !== 1 ? 's' : ''}`;
      }
    } else {
      result += `${targetDate.diff(now, 'hour')} hour${targetDate.diff(now, 'hour') !== 1 ? 's' : ''}`;
      if (diffMinutes > 0) {
        result += `, ${diffMinutes} min${diffMinutes !== 1 ? 's' : ''}`;
      }
    }
    return result;
  }

  if (diffDays < 14 && diffDays % 7 === 0) {
    return `in ${diffDays / 7} week${diffDays / 7 !== 1 ? 's' : ''}`;
  }

  if (diffDays < 30) {
    return `in ${diffDays} day${diffDays !== 1 ? 's' : ''}`;
  }

  if (diffDays >= 30 && diffDays < 365) {
      const months = targetDate.diff(now, 'month');
      return `in ${Math.abs(months)} month${Math.abs(months) !== 1 ? 's' : ''}`;
  }

  if (diffDays >= 365) {
      const years = targetDate.diff(now, 'year');
      return `in ${Math.abs(years)} year${Math.abs(years) !== 1 ? 's' : ''}`;
  }

  return targetDate.format('YYYY-MM-DD'); // Default fallback
}

// Example usage
const oneDayFiveHours = dayjs().add(1, 'day').add(5, 'hours');
const twentyHoursThirtyMinutes = dayjs().add(20, 'hours').add(30, 'minutes');
const fourDays = dayjs().add(4, 'days');
const sevenDays = dayjs().add(7, 'days');
const fourteenDays = dayjs().add(14, 'days');
const pastDate = dayjs().subtract(1, 'day');

console.log(customRelativeTime(oneDayFiveHours)); // Output: in 1 day, 5 hours
console.log(customRelativeTime(twentyHoursThirtyMinutes)); // Output: in 20 hours, 30 mins
console.log(customRelativeTime(fourDays)); // Output: in 4 days
console.log(customRelativeTime(sevenDays)); // Output: in 1 week
console.log(customRelativeTime(fourteenDays)); // Output: in 2 weeks
console.log(customRelativeTime(pastDate)); // Output: 2024-03-05 23:00 (or your past date format)