Необходимо настроить заголовок дня мат-календаря.
Я хочу изменить цвет заголовка определенного дня на другой цвет, например, заголовки понедельника и вторника красного цвета. используя DateClass, я могу изменить конкретный цвет дня, но не могу изменить заголовок дня клиента.
С 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
Мой хороший, нет! У mat-datepicker есть свойство dateClass , то есть функция, аргументом которой является дата. Вы можете увидеть в примерах в разделе «Выбор даты с пользовательскими классами даты».
Да, но это влияет только на номер дня, а не на название дня в заголовке. Я обновил свое решение и добавил динамический способ
Мы должны установить цвет в зависимости от условия, поэтому мы не можем использовать CSS, упомянутый здесь.