Блог

Главная - Вопросы по программированию - Полный календарь / Angular — обрабатывает содержимое ячейки даты при рендеринге

Полный календарь / Angular — обрабатывает содержимое ячейки даты при рендеринге

#css #angular #typescript #calendar

#css #angular #typescript #Календарь

Вопрос:

Я использую компонент полного календаря для Angular и хочу настроить содержимое каждой ячейки даты в соответствии с различными условиями. Например, если дата неверна (у меня есть функция, которая проверяет дату), я хочу изменить цвет фона ячейки даты. В противном случае, если это допустимо, я хочу добавить кнопку плюс внутри, чтобы добавлять события. Кроме того, я хочу добавить пользовательские анимации и эффекты наведения.

Как я могу контролировать дату рендеринга?

Мне удается изменить цвет фона с dayCellDidMount помощью hook:

 dayCellDidMount: (arg) => {
      if(!this.dateIsValid(arg.date, arg.isPast)){
        arg.el.style.backgroundColor = "#eeeeee";
      }
},

Я не думаю, что это лучший способ сделать это, и мне все еще не удается добавить кнопку «Плюс» внутри ячейки.

Может ли кто-нибудь добиться этого или чего-то подобного? Ваша помощь будет оценена, спасибо. Если вы знаете другой календарь для интеграции с Angular, который имеет эти функции, я открыт для предложений.

Комментарии:

1. Единственное, что вы могли бы сделать, это изменить className вместо определенного свойства css для сложного стиля, который может быть лучше

2. @JSmith Я пробовал это, но это переопределяет классы, которые уже установлены в <td>, такие как «fc-day», «fc-future» и т.д. Также у меня возникают проблемы со стилем при изменении представления месяца.

3. не могли бы вы создать stackblitz, чтобы воспроизвести проблему и добавить ее в свой пост, пожалуйста? также, возможно, если вы установите для свойств !important значение, у вас не будет этой проблемы переопределения. Лучшие.

4. @JSmith !important ничего не изменяйте, потому что основная проблема заключается в том, что, например, исходный <td> имеет следующие классы fc-daygrid-day fc-day fc-day-wed fc-day-future . После того, как я проверю дату, если я это сделаю arg.el.className = "day-disabled"; , <td> будет иметь только day-disabled класс и потеряет остальные. Я хочу добавить этот класс и сохранить остальные. Кроме того, я не могу точно воспроизвести его с помощью stackblitz, потому что я управляю данными из баз данных. В принципе, если я использую className вместо style (помимо предыдущих проблем), стиль не отображается должным образом при смене месяцев.

5. чтобы избежать удаления всех других классов, используйте render2 для использования addClass . это будет делать что-то вроде this.renderer.addClass(element, 'my-class-name'); . также, если у вас проблема с css, это может быть связано с тем, что ваше добавление вашего класса на уровень wrng — это только предположение, но, по сути, если оно работает с element.style, это должно работать с чистым css. Для проблемы с базой данных просто используйте необработанный объект json, поскольку я полагаю, что вы извлекаете json из своего серверной части. Вместо этого subscribe просто добавьте переменную с фиктивными данными. Лучшие