CODEWITHSUNDEEP
angularfullcalendar
Pawel
Pawel

Reputation: 537

Fullcalendar - can't change background color of calendar

I try to change a background-color of fullcalendar.

I tried these methods (without success):

td .fc-unthemed td.fc-today {
 background: red !important;
}

.fc-unthemed td.fc-today > tr > td{
 background: blue !important;
}

.fc-unthemed td.fc-today td{
 background: black !important;
}

.fc-unthemed td.fc-today {
 background: green !important;
 background: linear-gradient(90deg, rgba(204, 204, 204, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

.fc td {
 background-color: #333 !important;
}

.fc th {
  background-color: #333 !important;
}

My dependencies: "@angular/core": "~9.0.5", "@fullcalendar/angular": "^4.4.5-beta", "@fullcalendar/core": "^4.4.0",

enter image description here

Update: I tried with add class to fullCalendar (without success)

<full-calendar
  #specCalendar
  ...
  [className]="'spectator-calendar'"
  >

Upvotes: 2

Views: 1540

Answers (1)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

You need to try css changes in general style.css. You can't change it, if you write in component.css.

if you have more then on calendar then add class to your calendar add class <full-calendar class="testClass " Write these codes in your style.css

    .testClass .fc-view-container {
    background: #ffffff57  !important
}
.testClass .fc-unthemed th, .fc-unthemed td, .fc-unthemed thead, .fc-unthemed tbody, .fc-unthemed .fc-divider, .fc-unthemed .fc-row, .fc-unthemed .fc-content, .fc-unthemed .fc-popover, .fc-unthemed .fc-list-view, .fc-unthemed .fc-list-heading td {
    border-color: #949494;
}
.testClass  .fc-time-grid .fc-slats {
   background:#333 !important;
   color:white;
}

Upvotes: 1

Related Questions