Feature Request: startOfCalendarSheetMonth, endOfCalendarSheetMonth

[MoxxiManagarm]

The request is to add 2 functions to calculate the first and the last date of a calendar sheet. Calendar sheets in common tools like google calendar, windows calendar etc. fill the rows to complete the week and additionally fill to 6 rows at the end.

With May 2024 it would result in 29th April and 9th June respectively.

Name suggestion for the functions: startOfCalendarSheetMonth, endOfCalendarSheetMonth

To achieve the same without the suggested functions, 6 other functions of date-fns are required:

• startOfMonth+startOf(ISO)Week
• endOfMonth+endOf(ISO)Week
• differenceInWeeks+addWeeks

The suggested functions would make that much cleaner.

[fturmel]

I like it. Some thoughts/caveats:

• This type of component is hard to implement correctly with keyboard shortcuts and accessibility. Having helper functions for this specific use case might encourage inexperienced users to tackle this from scratch instead of using a properly tested library.

• Not all calendar views render a fixed 6 weeks, see the month view on the web version of Google Calendar or MUI's date picker / calendar for example. There are UX trade-offs: a stable grid between months vs more vertical space to display information or events. Most months can fit in a 5 weeks layout.

• If we're looking at the 6 weeks layout, the solution is simpler than described since the end date will always be 41 days (6 weeks - 1 day) after the start of the month "sheet". You don't need to explicitly know when the month ends.

• ISO weeks always start on Monday and thus are not localizable. They should probably not be used for a user-centric calendar display unless it's part of the requirements.

For reference :

// process.env.TZ = 'Europe/Berlin';

import { addDays, endOfMonth, endOfWeek, startOfMonth, startOfWeek } from 'date-fns';
import { de } from 'date-fns/locale'; // use a locale or manually set the `weekStartsOn` option on the weeks functions

const today = new Date(2024, 4, 16);

const startOfCalendarSheet = startOfWeek(startOfMonth(today), { locale: de });
const endOfCalendarSheetPadLastWeek = endOfWeek(endOfMonth(today), { locale: de });
const endOfCalendarSheetFixedSixWeeks = addDays(startOfCalendarSheet, 6 * 7 - 1);

console.log(startOfCalendarSheet.toString());            // Mon Apr 29 2024 00:00:00 GMT+0200 (Central European Summer Time)
console.log(endOfCalendarSheetPadLastWeek.toString());   // Sun Jun 02 2024 23:59:59 GMT+0200 (Central European Summer Time)
console.log(endOfCalendarSheetFixedSixWeeks.toString()); // Sun Jun 09 2024 00:00:00 GMT+0200 (Central European Summer Time)