Как настроить стиль FullCalendar?
В настоящее время я работаю над проектом, в котором использую FullCalendar для отображения событий. Хотя FullCalendar — отличная библиотека, я хочу внести некоторые индивидуальные настройки стиля, чтобы он лучше соответствовал внешнему виду моего приложения.
Вот несколько вещей, которых я пытаюсь достичь:
Измените цвет фона заголовка и ячеек календаря. Настройте внешний вид всплывающих подсказок и всплывающих окон событий.
Может ли кто-нибудь предоставить рекомендации или примеры того, как эффективно настроить стиль FullCalendar? Существуют ли определенные классы или методы, которые мне следует использовать, или рекомендации по интеграции пользовательских стилей?
Любая помощь будет принята с благодарностью!
Спасибо!
Я попытался переопределить стили CSS по умолчанию, но не уверен, правильно ли я нацеливаюсь на элементы или существует более эффективный способ применения этих стилей.
мой HTML и CSS:
<full-calendar
class = "w-full rounded-lg overflow-hidden"
[options] = "calendarOptions"
></full-calendar>
.fc .fc-button-primary {
background-color: aliceblue;
}
да, но когда я пытаюсь, я не могу
Ну и что конкретно ты имеешь в виду? Что именно нельзя? Какие изменения вы пытались внести? Какой код вы для этого использовали? Какой эффект, если таковой имеется, вы заметили? Вероятно, мы сможем помочь вам исправить ваш код, если вы покажете его нам. См. также Как задавать и как создать минимально воспроизводимый пример вашей проблемы, а затем отредактировать свой вопрос. Но мы точно ничего не сможем исправить, если у нас нет кода и мы знаем только, что вы «не можете» что-то сделать. Спасибо :-)
например, я хочу изменить цвет кнопки заголовка, это мой CSS: .fc .fc-button-primary {background-color: aliceblue; }
Как я уже упоминал выше, пожалуйста, отредактируйте свой вопрос, когда у вас есть код и новая информация, которой вы можете поделиться. Не пишите это в комментариях. Stackoverflow — это не форум :-)
окей, спасибо, я уже добавил фотографии своего кода
Вы прочитали Как задать вопрос , прежде чем обновлять свой вопрос, как я предлагал? Он советует вам не публиковать изображения кода, данных или сообщений об ошибках. Эта информация является текстовой. Вставлять его в виде графики очень непрактично, поскольку его нельзя копировать, искать, повторно использовать в ответах и т. д. Это затрудняет работу тех, кто может захотеть вам помочь. Пожалуйста, отредактируйте свой вопрос, включив в него код в виде текста, и используйте инструменты форматирования, чтобы представить его красиво, чтобы его можно было использовать для тех, кто хочет вам помочь. Спасибо
(См. также Почему мне не следует загружать изображения кода/данных/ошибок? для получения дополнительной информации)
Кроме того, одна строка CSS не является минимально воспроизводимым примером вашей проблемы! Минимально, конечно, но как-то слишком минимально...
В любом случае, CSS, который вы опубликовали (.fc .fc-button-primary { background-color: aliceblue; }), обязательно изменит цвет фона кнопок в календаре — демо: codepen.io/ADyson82/pen/zYVWOyO /. Но это не имеет ничего общего с остальной частью заголовка, фоном ячеек или чем-либо еще, о чем вы упомянули. Пытались ли вы выяснить, какие элементы HTML соответствуют этим другим элементам, и установить для них какие-либо правила CSS?
подождите, я обновлю вопрос, чтобы получить дополнительную информацию
I’m not sure if I’m targeting the correct elements... как сказано в руководстве FullCalendar, используйте инспектор элементов в инструментах разработчика вашего браузера, чтобы проверить различные компоненты визуализированного HTML-кода FullCalendar и посмотреть, какой бит вам нужен, а также какие классы, идентификаторы или другие свойства он имеет, которые вы могли бы использовать. использовать в качестве селектора CSS.
так вот или?
Да, вот так, спасибо. Итак, я уже продемонстрировал, какой эффект будет иметь класс btn-primary. Вы вообще пробовали другие?
я уже пробовал, но кнопка не меняется
Да, это так — я доказал это в приведенной вам демо-ссылке (codepen.io/ADyson82/pen/zYVWOyO ). Если для вас это не изменится, значит, у вас должна быть какая-то другая настройка - либо какой-то другой CSS, переопределяющий его, либо, возможно, другая версия fullCalendar, либо какое-то другое отличие в среде. Трудно быть уверенным. Но, очевидно, код, который вы нам предоставили, сам по себе не является минимальным воспроизводимым примером этой проблемы.
я использую angular, поэтому в html это только код, который я уже дал, а в компонентах у меня есть только опция календаря, или мне нужны дополнительные настройки в angular
Я понимаю, что установка fullCalendar не требует от вас писать что-либо сверх того, что вы показали - затем он использует JS для визуализации остальной части HTML, которую вы можете проверить с помощью инструментов вашего браузера после ее загрузки. Но, как я уже сказал: какую версию FullCalendar вы загружаете? Есть ли на вашей странице какой-либо дополнительный CSS, помимо того, что включен в fullCalendar?
спасибо, но я уже нашел, как это работает
Ответы 1
"styles": [
"src/app/components/calendar/calendar.component.css",
],
Наконец-то я понял, как это работает: вы добавляете нужный стиль в angular.json, и после этого мы можем переопределить CSS.
А, так похоже, проблема заключалась в том, что написанный вами CSS на самом деле не применялся, потому что вы не включили его в конфигурацию Angular?
да, мне нужно включить CSS для стилизации в angular json
Вы уже прочитали fullcalendar.io/docs/css-customization ?