2

For dayGridYear, is there a way to update the title so that it reflects the month currently in view?

Currently (dayGridYear view, fullCalendar):

The goal (modified dayGridYear view, fullCalendar):

I have tried playing with

datesSet={(arg) => {
  console.log(arg.start) // starting visible date
  console.log(arg.end) // ending visible date
}}

but that returns

Jan 1 to Jan 7

I'm unsure of how to proceed. Last resort might potentially be making my own such view with https://fullcalendar.io/docs/visibleRange if that even works?

ADyson
  • 57,178
  • 14
  • 51
  • 63
hallofren
  • 21
  • 3
  • Could you please append console.log(args) – Shankaja Aroshana Mar 14 '23 at 09:33
  • https://fullcalendar.io/docs/view-object - `activeStart` and `activeEnd` should be what you need? But it says on the same page, that all those properties (including the view title) are read-only here, so if you wanted to be able to modify the title (and not do it by "circumventing" Fullcalendar and manipulating the DOM yourself), you will need a custom view anyway, https://fullcalendar.io/docs/custom-view-with-settings – CBroe Mar 14 '23 at 10:06

1 Answers1

1

There's no way of doing precisely what you're asking, as far as I know. However you can use the multi-month stack view which results in a view where each month's grid has a header above it showing what month it is.

It's not precisely the same as your current display but it's very similar, and realistically it's probably the best way to get the month names on display without resorting to customisations.

Sample code:

import { Calendar } from '@fullcalendar/core'
import multiMonthPlugin from '@fullcalendar/multimonth'

const calendar = new Calendar(calendarEl, {
  plugins: [multiMonthPlugin],
  initialView: 'multiMonthYear',
  multiMonthMaxColumns: 1 // force a single column
});

Demo: https://fullcalendar.io/docs/multimonth-stack-demo

ADyson
  • 57,178
  • 14
  • 51
  • 63