Incorrect dates passed to daygridMonth header

[kdoroszewicz]

Reduced Test Case

REDUCED TEST CASE.

Bug Description

Describe how to recreate the bug.

Use props dayHeaderFormat or dayHeaderContent to change header display on daygridMonth. In both cases the date passed to those functions is incorrect - points to Jan 1970.

What do you expect to happen?

Correct date should be passed to formatting/rendering functions just like in the other views.

What happens instead?

Incorrect date is passed - it's always Jan 1970.

[acerix]

Thanks, confirmed. You demo doesn't run for me but I get the same in the basic debug template:

https://codepen.io/acerix/pen/MWyLrdm?editors=0011

[arshaw]

As hard as it is to believe, this behavior is intentional. The headers above the dates in month view do not belong to any of the individual days below them. They are "timeless" in a way. They do not rerender when the month changes either. To make clear the fact that they are not linked to a current-month date, I made their dates in the render-hook in the distant past.

What are you hoping to render in the headers? Something date-specific?

[kdoroszewicz]

I would expect it to work the same as v4. Here is forked v4 component sandbox with enabled columnHeaderFormat.

If it's intended change then you can close the issue, it just looks like a bug.

[arshaw]

Thanks @l3szcz , it is intended, but I'll make a task to update the docs

[Dominik-Kohler]

I would also expect it to behave like v4:
Incorrect(v5):

Correct(v4):

As ‘dayHeaderFormat’ currently no longer works properly.

[pdcmoreira]

When FullCalendar wants to pass just dates (ignoring time) or, like in this case, just a bit of information from a date, it passes a Date object with the hours set to 00. The problem is that Date always considers the local timezone, so in places with negative offset, it becomes the previous day.

Example when working with a UTC-3 timezone:

The solution is, parse it as UTC with moment:

dayHeaderContent({ date }, h) {
  return h('div', {}, moment.utc(date).format('ddd'))
}

[olegafx]

@arshaw but how to highlight a header in a monthly view for today?

I want to set some background color if it's today. And it works perfectly in weekly and day views. But in monthly in doesn't add fc-day-today class

[DiarQoroviqi]

@l3szcz I know its been a long time since you reported this issue but did you get any solution because I have the same problem?

[kdoroszewicz]

@l3szcz I know its been a long time since you reported this issue but did you get any solution because I have the same problem?

No, at our company we determined that the functionality is not that important to look for a workaround or push FullCalendar team to reverse the change.

[DiarQoroviqi]

@acerix hi Dylan, did you you guys found the issue or a solution for this ticket?

[jmginfor]

How can we correct this? It's not clear and the bug has been detected few months ago with services pack and it still doesn't work.

[Troy-Yang]

Same issue, we customized the grid header of month view with this hook, however, we always get "1970-01-04T00:00:00.000Z" for the first day, so how can we get the week label correctly based on the date?

text: Sun
date: 1970-01-04T00:00:00.000Z

The week view looks good for the parameters:

text: Sun 6/11
date: 2023-06-11T04:00:00.000Z

I checked the source code and fullcalendar has the below logic for month view. The text output is correct by the dateEnv format.

    let date = addDays(new Date(259200000), props.dow) // start with Sun, 04 Jan 1970 00:00:00 GMT
    let dateMeta: DateMeta = {
      dow: props.dow,
      isDisabled: false,
      isFuture: false,
      isPast: false,
      isToday: false,
      isOther: false,
    }
    let text = dateEnv.format(date, props.dayHeaderFormat)
    let renderProps: DayHeaderContentArg = { // TODO: make this public?
      date,
      ...dateMeta,
      view: viewApi,
      ...props.extraRenderProps,
      text,
    }

[Troy-Yang]

Just find the fullcalendar actually get the text by calling formatDate from @fullcalendar/common and it eventually equals to the below codes:

 const weeklabel = new Intl.DateTimeFormat(locale, { timeZone: UTC, weekday: 'short' }).format(date);

Therefore, I found my solution now.