Ant Design Calendar: How to Change the Day of Week Format - reactjs

Question

I'm using the Ant Design Calendar Component in my project and I have it set up as follows:
Currently the Day of Week format is dd. Eg. Su, Mo, Tu, etc.
Is it possible to change the format via props to ddd. Eg. Sun, Mon, Tue, etc.?

Answer 1

There is no support for changing that directly on ant design component,
but Ant Design under the hood is using moment which is using locale.weekdaysMin, so you can import moment and change them:
import moment from 'moment'
moment.updateLocale('en', {
weekdaysMin : ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
});

Answer 2

Changing the configuration of moment will cause global changes. If you are absolutely sure you want all the stuff relying on moment's minimized English weekday names to be set to "Sun Mon Tue....", then that's fine, and you should go with Barry Michael Doyle's answer.
If you only want to apply this change to specific calendars, however, I'd recommend using the CSS ::after pseudoclass.
First, apply some class name to the calendar that you can use for CSS targeting.
import React from "react";
import { Calendar } from "antd";
export const App = () => <Calendar className="my-calendar" />;
Then you can add the extra letters using CSS:
/* adds 'n' after "Su"*/
.my-calendar table thead tr > th:nth-child(1)::after {
content: "n";
}
/* adds 'n' after "Mo"*/
.my-calendar table thead tr > th:nth-child(2)::after {
content: "n";
}
/* ... etc., etc., ....*/
.my-calendar table thead tr > th:nth-child(3)::after {
content: "e";
}
.my-calendar table thead tr > th:nth-child(4)::after {
content: "d";
}
.my-calendar table thead tr > th:nth-child(5)::after {
content: "u";
}
.my-calendar table thead tr > th:nth-child(6)::after {
content: "i";
}
.my-calendar table thead tr > th:nth-child(7)::after {
content: "t";
}
Note: If you need to support different languages, this solution would require you to set the class name dynamically based on language settings and have different sets of the above CSS for each language. For one or two languages that won't be too bad, but beyond that you might want to take a different approach.

Answer 3

You must first set the format using a variable:
const dateFormat = 'DDD/MM/YYYY';
and then in the DatePicker you point out that you are going to use a custom format:
<DatePicker format = {dateFormat} />
The other way is to render each cell of the Datepicker placing the number in custom form:
<DatePicker
format = {dateFormat}
dateRender = {(current) => {
const num = (current.toString().length < 2) ? "0" + current : current)
return (
{num}
)
}}
/>