MUI Calendar Weekday Rename

Solves a critical MUI limitation: Material-UI's DayPicker and CalendarPicker components don't provide built-in localization for weekday headers, making it difficult to customize weekday names for different languages or formats.

A lightweight TypeScript utility that dynamically changes weekday names in Material-UI DayPicker/CalendarPicker headers with configurable selectors.

🎯 Problem This Solves

Material-UI's calendar components have a significant limitation:

• No built-in weekday localization for DayPicker/CalendarPicker headers
• Fixed English abbreviations (Sun, Mon, Tue, etc.) that can't be easily customized
• Limited internationalization support for weekday display
• No straightforward API to modify weekday labels without complex workarounds

This utility provides a simple, reliable solution to customize weekday names in MUI calendar components.

🚀 Installation

npm install @ubuligan/mui-calendar-weekdays-rename

📖 Usage

Basic Usage (Azerbaijani weekdays by default)

import { weekDayNameChanger } from "@ubuligan/mui-calendar-weekdays-rename";

// Apply default Azerbaijani weekday names
weekDayNameChanger();
// Result: ["B.e.", "Ç.a.", "Ç.", "C.a.", "C.", "Ş.", "B."]

Custom Weekdays

// English short names
weekDayNameChanger({
  weekdays: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
});

// Turkish weekdays
weekDayNameChanger({
  weekdays: ["Pzt", "Sal", "Çar", "Per", "Cum", "Cmt", "Paz"],
});

// Numbers
weekDayNameChanger({
  weekdays: ["1", "2", "3", "4", "5", "6", "7"],
});

Custom Selectors

// For custom calendar implementations
weekDayNameChanger({
  weekdays: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
  headerSelector: ".custom-calendar-header",
  columnSelector: ".custom-day-header",
});

⚙️ API Reference

weekDayNameChanger(options?)

| Parameter | Type | Default | Description | | ---------------- | ---------- | -------------------------------------------------- | ---------------------------------------------- | | weekdays | string[] | ["B.e.", "Ç.a.", "Ç.", "C.a.", "C.", "Ş.", "B."] | Array of 7 weekday names starting from Sunday | | headerSelector | string | ".MuiDayPicker-header" | CSS selector for the calendar header container | | columnSelector | string | 'span[role="columnheader"]' | CSS selector for individual weekday columns |

🔧 How It Works

1. DOM Targeting: Uses requestAnimationFrame to ensure DOM is ready
2. Flexible Selectors: Configurable CSS selectors for different MUI versions
3. Accessibility: Updates both textContent and aria-label attributes
4. Non-intrusive: Doesn't modify MUI components directly

🌍 Supported Languages

While you can use any custom weekday names, here are some common examples:

// Azerbaijani (default)
["B.e.", "Ç.a.", "Ç.", "C.a.", "C.", "Ş.", "B."][
  // English
  ("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat")
][
  // Turkish
  ("Paz", "Pzt", "Sal", "Çar", "Per", "Cum", "Cmt")
][
  // German
  ("So", "Mo", "Di", "Mi", "Do", "Fr", "Sa")
][
  // French
  ("Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam")
];

You can phrase it in English like this for documentation or README purposes:

"It can be used like this:"

<DatePicker
  onOpen={weekDayNameChanger}
/>

Or more descriptive:

"The utility can be applied by passing it to the onOpen prop of DatePicker:"

<DatePicker
  onOpen={weekDayNameChanger}
/>

If you want, I can rewrite the full npm package description including this usage example in clean, professional English.

🔗 MUI Compatibility

Compatible with:

• Material-UI v4.x DayPicker
• Material-UI v5.x DatePicker
• MUI X DatePicker components
• Custom calendar implementations using similar DOM structure

📝 License

MIT © Javid Salimov

🐛 Issues & Contributions

• Issues: GitHub Issues
• Repository: GitHub

Note: This utility specifically addresses the weekday header customization limitation in MUI calendar components, providing a clean solution where the framework falls short.