Как установить цвет текущего дня в FullCalendar?

Я хотел бы изменить цвет текущего дня, но только тогда, когда календарь находится в режиме просмотра дня. Мои пользователи говорят, что им трудно видеть линии или что-то в этом роде. Я просмотрел документацию, а также css/js и не нашел быстрого способа сделать это. Возможно ли это вообще без серьезных изменений кода?


javascript jquery css fullcalendar
person Kirrilian    schedule 22.01.2011    source источник
comment
Вероятно, он имеет в виду виджет полного календаря пользовательского интерфейса jQuery.   -  person Pekka    schedule 22.01.2011

Ответы (12)


arrow_upward
18
arrow_downward

Честно говоря, я не совсем понимаю, о чем вы говорите, но виджет полный календарь jQuery UI использует класс CSS .fc-today для оформления текущего дня. Если ваши изменения не видны, попробуйте использовать !important — возможно, один из многих других классов переопределяет ваши стили в другом месте.

person polarblau    schedule 22.01.2011
comment
Текущий день желтый, а все остальные дни белые. Мои пользователи с трудом видят строки в представлении повестки дня на текущий день, потому что они желтые. Извините, я должен был быть более конкретным, и я верю, что это решит мою проблему. Я могу изменить свойство css для .fc-today с помощью jquery, находясь в ежедневном представлении повестки дня на текущий день и обратно, если не в текущий день. Спасибо! - person Kirrilian; 24.01.2011
comment
Если вы хотите использовать только css, сделайте следующее: в версии 3.9.0: .fc-agendaDay-view .fc-today { background: white !important; } - person RolandoCC; 07.04.2018
comment
Хорошие ответы. Но есть ли в FullCalender возможность включить/отключить индикатор текущего дня? Причина в том, что я использую календарь разных типов и хочу один раз показать цвет текущего дня, а не другой вид. - person Mitch; 23.10.2020

arrow_upward
13
arrow_downward

вы можете использовать следующий код

.fc-today {
    background: #FFF !important;
    border: none !important;
    border-top: 1px solid #ddd !important;
    font-weight: bold;
}
person Sunny Luthra    schedule 24.05.2016

arrow_upward
5
arrow_downward

Если вы не используете тему, у меня это сработало с использованием FullCalendar 2.3.1.

.fc-unthemed .fc-today {
  background: ....;
}
person Brant    schedule 22.04.2015
comment
Отлично работает на версии 2.9.0 - person Thiago Pereira; 09.08.2016
comment
.fc-bg .fc-state-highlight{цвет фона:#009688 !важно; } Я использовал это, чтобы получить правильный результат. Полный календарь версии 3.4.0 - person Rajesh Nadar; 01.08.2017

arrow_upward
4
arrow_downward

Полный календарь ›= 5

В fullcalendar ›= 5 они изменили название класса на .fc-day-today. Однако вам нужно будет повысить специфичность этого селектора, чтобы переопределить стили ИЛИ использовать !important для переопределяемого атрибута, если он не применяется без него.

Примечание. Я НЕ смотрел, поддерживает ли API что-то более родное. Если это так, вероятно, лучшее долгосрочное решение.

person karns    schedule 26.10.2020
comment
Я НЕ смотрел, поддерживает ли API что-то более родное. Если это так, возможно, это лучшее долгосрочное решение. Это не имеет значения. FullCalendar известен тем, что полностью меняет API в каждой новой версии. - person Ivan; 29.01.2021

arrow_upward
3
arrow_downward

У меня было несколько календарей, так что это сработало:

#calendar .fc-today {
    background: #FFF !important;
}

#calendar-two .fc-today {
    background: #FFF !important;
}

Использование #calendar-favorite .fc-unthemed .fc-today { ... } не сработало, поэтому не забудьте удалить часть .fc-unthemed.

Также проверьте способ jquery: https://stackoverflow.com/a/17930817/1066234 с использованием dayRender

person Avatar    schedule 25.05.2016

arrow_upward
1
arrow_downward

Чтобы изменить цвет/фон текущего дня полного календаря в дневном представлении, добавьте следующий класс CSS и убедитесь, что он загружается после всех стилей css.

  .fc-view-basicDay .fc-today {
     color:....;
     background:....;
  }
person Rams Kannan    schedule 28.07.2011
comment
в версии 3.9.0 используйте: .fc-agendaDay-view .fc-today { background: white !important; } - person RolandoCC; 07.04.2018

arrow_upward
1
arrow_downward

для меня это было .ui-state-highlight.fc-today

person kneidels    schedule 29.05.2013

arrow_upward
0
arrow_downward

Эта работа для меня в FullCalendar 3.6.1

#calendar-id .fc-widget-content:not(.fc-axis) {
       background: #FFF !important;
}
person Fellipe Fonseca    schedule 08.02.2019

arrow_upward
0
arrow_downward

Эта работа сегодня

.fc-timeGridDay-view {
  .fc-widget-content:not(.fc-axis) {
    .fc-today {
      background: red;
    }
  }
}
person Andriy Danylko    schedule 09.06.2020

arrow_upward
0
arrow_downward

Хорошие ответы. Но есть ли в FullCalender возможность включить/отключить индикатор текущего дня? Причина в том, что я использую календарь разных типов и хочу один раз показать цвет текущего дня, а не другой вид.

person Mitch    schedule 23.10.2020

arrow_upward
0
arrow_downward

Чтобы выделить сегодняшний день на временной шкале в v5 с помощью SCSS

// make today highlight in red
.fc-day-today {
  border: 1px solid red !important;
  .fc-timeline-slot-frame {
      border-top: 1px solid red !important; 
  }
}
.fc-day-today + .fc-day-future {
  border-left: 1px solid red !important;
}
person ihorbond    schedule 13.03.2021

arrow_upward
0
arrow_downward

Добавьте это ключевое слово !important в конец строки непосредственно перед точкой с запятой, чтобы переопределить правила по умолчанию, установленные для класса css .fc-day-today .

Файл .js с использованием jQuery

<script>

    $('.fc-day-today').addClass('cell-background');

</script>

Файл .css

.cell-background {
    background-color:#D9FFE1 !important;
}

Это работало для fullCalendar v5.8.0. Вы можете применить одну и ту же концепцию для разных.

person Nelson Katale    schedule 13.07.2021