Dayjs Locale with React - dayjs

Question

So I'm trying to show locale of German in my React app with dayjs but is not working, here is my code, i tried to add locale('de') but that is not doing the job, so i don't know what to try next. I'm trying to learn how to do it, and I don't know if i need to import a locale or it does it take it from 'dayjs'
import React, { Fragment, useContext, useEffect, useState } from 'react';
import dayjs from 'dayjs';
import { getMonth } from '../../utils/calendar/dayjs';
import GlobalContext from '../../context/calendar/GlobalContext';
import styles from '../../styles/Calendar.module.scss';
function SmallCalendar() {
const [currentMonthIdx, setCurrentMonthIdx] = useState(dayjs().month());
const [currentMonth, setCurrentMonth] = useState(getMonth());
useEffect(() => {
setCurrentMonth(getMonth(currentMonthIdx));
}, [currentMonthIdx]);
const { monthIndex, setSmallCalendarMonth, setDaySelected, daySelected } =
useContext(GlobalContext);
useEffect(() => {
setCurrentMonthIdx(monthIndex);
}, [monthIndex]);
function getDayClass(day) {
const format = 'DD-MM-YY';
const nowDay = dayjs().format(format);
const currDay = day.format(format);
const slcDay = daySelected && daySelected.format(format);
if (nowDay === currDay) return styles.day_active;
else if (currDay === slcDay) return styles.day_selected;
else return '';
}
return (
<div className={styles.minicalendar}>
<header className={styles.calendar_header}>
<p
style={{ color: 'var(--color-active)' }}
className='text-gray-500 font-bold'>
{dayjs(new Date(dayjs().locale('de').year(), currentMonthIdx)).format(
'DD MMMM YYYY'
)}
</p>
</header>
<div
className={`grid grid-cols-7 grid-rows-6 ${styles.minicalendar_body}`}>
{currentMonth[0].map((day, i) => (
<span key={i} className='text-sm py-1 text-center'>
{day.format('dd').charAt(0)}
</span>
))}
{currentMonth.map((row, i) => (
<Fragment key={i}>
{row.map((day, inx) => (
<button
key={inx}
onClick={() => {
setSmallCalendarMonth(currentMonthIdx);
setDaySelected(day);
}}
className={`py-1 w-full ${getDayClass(day)}`}>
<span className='text-sm'>{day.format('D')}</span>
</button>
))}
</Fragment>
))}
</div>
</div>
);
}
export default SmallCalendar;

Answer 1

You need to first import the locale at the top of your file.
import 'dayjs/locale/de'
Then you can set the global locale to de
dayjs.locale(‘de’)

Answer 2

import dayjs from 'dayjs';
import <plugin-name> from 'dayjs/plugin/<plugin-name>';
dayjs.extend(<plugin-name>);
This is how you can import any plugin into your react code.
Ex:
import dayjs from "dayjs";
import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
dayjs.extend(isSameOrBefore);