Угловой мат-календарь, как изменить цвет заголовка дня для определенного дня слабости

Необходимо настроить заголовок дня мат-календаря.

Я хочу изменить цвет заголовка определенного дня на другой цвет, например, заголовки понедельника и вторника красного цвета. используя DateClass, я могу изменить конкретный цвет дня, но не могу изменить заголовок дня клиента.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
92
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

С CSS

Простой способ сделать это — передать пользовательский класс классу панели выбора даты . Буква дня отображается в теге th, и каждый день не имеет уникального идентификатора, но выбор по порядку решит эту проблему.

В вашем шаблоне:

<mat-datepicker #picker panelClass = "custom-header"></mat-datepicker>

В вашем css:

/** sunday **/
.custom-header .mat-calendar-table-header th:nth-child(1) span {
  color: red;
}
/** monday **/
.custom-header .mat-calendar-table-header th:nth-child(2) span {
  color: green;
}
/** tuesday **/
.custom-header .mat-calendar-table-header th:nth-child(3) span {
  color: pink;
}
/** wednesday **/
.custom-header .mat-calendar-table-header th:nth-child(4) span {
  color: grey;
}
/** thursday **/
.custom-header .mat-calendar-table-header th:nth-child(5) span {
  color: black;
}
/** friday **/
.custom-header .mat-calendar-table-header th:nth-child(6) span {
  color: blue;
}
/** saturday **/
.custom-header .mat-calendar-table-header th:nth-child(7) span {
  color: lightblue;
}

Если у вас другой порядок дней недели, например, начало недели в понедельник, то вы должны написать для каждого из них класс и условно передать правильный класс через panelClass.

Другое возможное решение, но не рекомендуется

Вы можете настроить значение цвета дня в файле .ts компонента и запрашивать дни по буквам, но, поскольку angular рекомендует избегать манипулирования элементами dom в файлах .ts, если это возможно. Я бы выбрал решение css.

Отредактировано

В случае, если цвета являются условными или динамическими, установка цвета в компоненте .ts должна быть опцией, пока Mat-Picker не упростит эту задачу.

Итак, вот мое динамическое решение

При открытии Picker вы можете запросить элемент выбора по его заданному идентификатору, а затем запросить его дочерние элементы (буквы дней). Затем отредактируйте стили динамически с помощью angular Renderer2, что более безопасно, чем прямая установка стиля цвета.

Посмотрите мой скорректированный пример stackblitz

Мы должны установить цвет в зависимости от условия, поэтому мы не можем использовать CSS, упомянутый здесь.

Dinesh Ganesan 23.12.2022 10:23

Мой хороший, нет! У mat-datepicker есть свойство dateClass , то есть функция, аргументом которой является дата. Вы можете увидеть в примерах в разделе «Выбор даты с пользовательскими классами даты».

Eliseo 23.12.2022 11:18

Да, но это влияет только на номер дня, а не на название дня в заголовке. Я обновил свое решение и добавил динамический способ

Mehyar Sawas 23.12.2022 11:46

Другие вопросы по теме