Customize day AntD calendar - antd

Question

I need to customize day name in AntD calendar. For Sunday, instead "Su" needs to show "Sun". Is there any way?
Thanks.

Answer 1

I had to manually change each th and span content. you can change the code as per your need.
styles.css
.App {
font-family: sans-serif;
text-align: center;
}
/* sunday */
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(1)>span{
display: none;
}
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(1):after{
content: "Sun";
display: block;
font-weight: normal;
}
/* monday */
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(2)>span{
display: none;
}
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(2):after{
content: "Mon";
display: block;
font-weight: normal;
}
/* tuesday */
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(3)>span{
display: none;
}
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(3):after{
content: "Tue";
display: block;
font-weight: normal;
}
/* wednesday */
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(4)>span{
display: none;
}
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(4):after{
content: "Wed";
display: block;
font-weight: normal;
}
/* thursday */
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(5)>span{
display: none;
}
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(5):after{
content: "Thu";
display: block;
font-weight: normal;
}
/* friday */
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(6)>span{
display: none;
}
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(6):after{
content: "Fri";
display: block;
font-weight: normal;
}
/* saturday */
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(7)>span{
display: none;
}
.ant-fullcalendar.ant-fullcalendar-full>div>table>thead>
tr th:nth-child(7):after{
content: "Sat";
display: block;
font-weight: normal;
}
Here is the code sandbox. Change the code as per your need.code . Hope it helps.
antd calender

Answer 2

For me it worked by setting the information I wanted on the correct property using momentjs:
<Calendar
locale={{
lang: {
locale: 'en',
dayFormat: moment.updateLocale('en', {
weekdaysMin: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ]
})
}
}}
/>

Answer 3

In order to change to portuguese, for example, here's what have worked for me:
(Also, before that, it's important to use a 'wrapper' class in DatePicker in order to reach the desired elements. To do that, I used a class called 'pt-datepicker', in the following way)
<DatePicker dropdownClassName="pt-datepicker" />
Read more about 'dropdownClassName' here: https://ant.design/components/date-picker/#Common-API
And now, the SCSS to change the label of each week day:
.pt-datepicker {
.ant-picker-panel-container {
.ant-picker-panel {
.ant-picker-date-panel {
.ant-picker-body {
.ant-picker-content {
thead {
tr {
th:nth-child(1) {
visibility: hidden;
position: relative;
}
th:nth-child(1):after {
visibility: visible;
position: absolute;
top: 50%;
left: 50%;
content: 'Dom';
transform: translate(-50%, -50%);
}
th:nth-child(2) {
visibility: hidden;
position: relative;
}
th:nth-child(2):after {
visibility: visible;
position: absolute;
top: 50%;
left: 50%;
content: 'Seg';
transform: translate(-50%, -50%);
}
th:nth-child(3) {
visibility: hidden;
position: relative;
}
th:nth-child(3):after {
visibility: visible;
position: absolute;
top: 50%;
left: 50%;
content: 'Ter';
transform: translate(-50%, -50%);
}
th:nth-child(4) {
visibility: hidden;
position: relative;
}
th:nth-child(4):after {
visibility: visible;
position: absolute;
top: 50%;
left: 50%;
content: 'Qua';
transform: translate(-50%, -50%);
}
th:nth-child(5) {
visibility: hidden;
position: relative;
}
th:nth-child(5):after {
visibility: visible;
position: absolute;
top: 50%;
left: 50%;
content: 'Qui';
transform: translate(-50%, -50%);
}
th:nth-child(6) {
visibility: hidden;
position: relative;
}
th:nth-child(6):after {
visibility: visible;
position: absolute;
top: 50%;
left: 50%;
content: 'Sex';
transform: translate(-50%, -50%);
}
th:nth-child(7) {
visibility: hidden;
position: relative;
}
th:nth-child(7):after {
visibility: visible;
position: absolute;
top: 50%;
left: 50%;
content: 'Sab';
transform: translate(-50%, -50%);
}
}
}
}
}
}
}
}
}