自定义一天的AntD日历 [英] Customize day AntD calendar

问题描述

我需要在AntD日历中自定义日期名称.对于星期日，"Su"需要显示"Sun".有什么办法吗?

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

谢谢.

推荐答案

我必须手动更改每个th和span内容.您可以根据需要更改代码.

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日历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！