Настроить дневной календарь

Question

Мне нужно настроить название дня в календаре AntD. В воскресенье вместо «Су» нужно показать «Солнце». Есть ли способ?

Спасибо.

Answer 1

Мне приходилось вручную изменять каждый контент th и span. Вы можете изменить код в соответствии с вашими потребностями.

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;
}

Здесьэто песочница кодаИзмените код в соответствии с вашими потребностями. код . Надеюсь, это поможет.

и календарь