Форматирование календаря?

Поддержка
1

Есть ли простой способ изменить цвета календаря, отображаемого в плагине календаря? Мы получаем жалобы на доступность цветовой схемы «светло-серый на белом».

2

Нет никаких настроек, которые можно было бы использовать для изменения цветов календаря, но цвета можно переопределить с помощью небольшого фрагмента CSS. Я далеко не эксперт в CSS, но что-то вроде этого близко к тому, что вы ищете?

image
image1017×891 38.5 KB

Единственное изменение, которое я внес, — это затемнение внешней рамки и линий, используемых для разделения дней календаря. Если это именно то изменение, которое вы ищете, я могу найти для вас правильные CSS-селекторы. (Корректировка, которую я сделал на этом скриншоте, была выполнена просто через инструменты CSS моего браузера.)

3

Спасибо! Это было бы большим улучшением. Мне бы очень пригодилась помощь в поиске нужных селекторов.

4

Отлично! Вам нужно либо отредактировать CSS-файл темы вашего сайта, либо внести изменения в компонент темы, а затем включить этот компонент во все темы вашего сайта. Я использовал подход с компонентом темы на своём тестовом сайте. Вот попытка показать этот процесс с помощью скриншотов:

image
image1056×604 56.9 KB

image
image823×397 25.3 KB

image
image1073×753 62.5 KB

Не забудьте добавить тему (или темы) вашего сайта в поле «Включить компонент в эти темы».

После этого нажмите кнопку «Редактировать CSS/HTML» и добавьте следующее в вкладку «Общие CSS» редактора тем:

.discourse-calendar-wrap {
    border: 5px solid var(--primary);
}

.calendar.fc.fc-unthemed .fc-content,
.calendar.fc.fc-unthemed .fc-divider,
.calendar.fc.fc-unthemed .fc-list-heading td,
.calendar.fc.fc-unthemed .fc-list-view,
.calendar.fc.fc-unthemed .fc-popover,
.calendar.fc.fc-unthemed .fc-row,
.calendar.fc.fc-unthemed tbody,
.calendar.fc.fc-unthemed td,
.calendar.fc.fc-unthemed th,
.calendar.fc.fc-unthemed thead {
    border-color: var(--primary);
}

Это изменение устанавливает цвет границ календаря в основной цвет вашего сайта — тот же цвет, что используется для текста сайта. Благодаря использованию переменной --primary изменение работает как со светлыми, так и с тёмными цветовыми схемами:

image
image989×913 36.2 KB

image
image981×921 37.2 KB

Вместо использования var(--primary) для установки цвета вы можете указать жёстко заданный HEX-цвет. Например, #000000 для чёрного:

.discourse-calendar-wrap {
    border: 5px solid #000000;
}

Дайте знать, если заметите какие-либо нежелательные побочные эффекты от этого изменения. Возможно, второе правило выбирает некоторые элементы, которые вы предпочли бы оставить в старом более светлом цвете.

5

Супер! Большое спасибо. Я попробую это завтра.