Bagaimana cara mengatur warna hari ini di FullCalendar?

Saya ingin mengubah warna hari ini tetapi hanya jika kalender berada dalam tampilan agenda hari. Pengguna saya bilang mereka kesulitan melihat garis atau semacamnya. Saya melihat dokumentasi serta css/js dan tidak menemukan cara cepat untuk melakukannya. Apakah ini mungkin tanpa perubahan kode besar?


javascript jquery css fullcalendar
person Kirrilian    schedule 22.01.2011    source sumber
comment
Dia mungkin mengacu pada widget kalender penuh jQuery UI.   -  person Pekka    schedule 22.01.2011

Jawaban (12)


arrow_upward
18
arrow_downward

Sejujurnya saya tidak begitu paham apa yang Anda bicarakan, tetapi widget jQuery UI fullcalendar menggunakan kelas CSS .fc-today untuk menata hari ini. Jika perubahan Anda tidak terlihat, coba gunakan !important — mungkin salah satu dari banyak kelas lain menggantikan gaya Anda di tempat lain.

person polarblau    schedule 22.01.2011
comment
Hari ini berwarna kuning sedangkan hari-hari lainnya berwarna putih. Pengguna saya kesulitan melihat garis pada tampilan agenda hari untuk hari ini karena warnanya kuning. Maaf, saya seharusnya lebih spesifik dan saya yakin itu akan memperbaiki masalah saya. Saya dapat mengubah properti css untuk .fc-today dengan jquery saat berada dalam tampilan agenda harian untuk hari ini dan kembali jika tidak pada hari ini. Terima kasih! - person Kirrilian; 24.01.2011
comment
Jika hanya ingin menggunakan css maka lakukan hal berikut: di versi 3.9.0 : .fc-agendaDay-view .fc-today { background: white !important; } - person RolandoCC; 07.04.2018
comment
Jawaban yang bagus. Tetapi apakah ada opsi di FullCalender untuk mengaktifkan/menonaktifkan indikator hari ini? Alasannya adalah, saya menggunakan kalender dalam tipe yang berbeda dan ingin sekali menampilkan warna hari ini tetapi tidak pada tampilan lainnya. - person Mitch; 23.10.2020

arrow_upward
13
arrow_downward

Anda dapat menggunakan kode berikut

.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

Jika Anda tidak menggunakan tema, ini berfungsi untuk saya menggunakan FullCalendar 2.3.1

.fc-unthemed .fc-today {
  background: ....;
}
person Brant    schedule 22.04.2015
comment
Berfungsi dengan baik pada versi 2.9.0 - person Thiago Pereira; 09.08.2016
comment
.fc-bg .fc-state-highlight{ warna latar:#009688 !penting; } Saya menggunakan ini untuk mendapatkan hasil yang benar. Kalender penuh versi 3.4.0 - person Rajesh Nadar; 01.08.2017

arrow_upward
4
arrow_downward

Kalender Lengkap ›= 5

Dalam kalender penuh ›= 5, mereka mengubah nama kelas menjadi .fc-day-today. Namun, Anda harus meningkatkan kekhususan pemilih tersebut untuk mengganti gaya ATAU menggunakan !important pada atribut yang Anda ganti jika atribut tersebut tidak berlaku tanpanya.

Catatan - Saya BELUM melihat apakah API mendukung sesuatu yang lebih asli. Jika ya, mungkin solusi jangka panjang yang lebih baik.

person karns    schedule 26.10.2020
comment
Saya BELUM melihat apakah API mendukung sesuatu yang lebih asli. Jika ya, mungkin solusi jangka panjang yang lebih baik. Tidak masalah. FullCalendar terkenal karena mengubah API sepenuhnya di setiap versi baru. - person Ivan; 29.01.2021

arrow_upward
3
arrow_downward

Saya punya banyak kalender jadi ini berhasil:

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

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

Menggunakan #calendar-favorite .fc-unthemed .fc-today { ... } tidak berhasil, jadi ingatlah untuk menghapus bagian .fc-unthemed.

Periksa juga cara jquery: https://stackoverflow.com/a/17930817/1066234 menggunakan dayRender

person Avatar    schedule 25.05.2016

arrow_upward
1
arrow_downward

Untuk mengubah warna/latar belakang hari kalender penuh saat ini di tampilan hari, tambahkan kelas CSS berikut dan pastikan itu dimuat setelah semua gaya css.

  .fc-view-basicDay .fc-today {
     color:....;
     background:....;
  }
person Rams Kannan    schedule 28.07.2011
comment
di versi 3.9.0 gunakan: .fc-agendaDay-view .fc-today { background: white !important; } - person RolandoCC; 07.04.2018

arrow_upward
1
arrow_downward

bagiku itu .ui-state-highlight.fc-today

person kneidels    schedule 29.05.2013

arrow_upward
0
arrow_downward

Ini berfungsi untuk saya di 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

Ini berhasil pada hari ini

.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

Jawaban yang bagus. Tetapi apakah ada opsi di FullCalender untuk mengaktifkan/menonaktifkan indikator hari ini? Alasannya adalah, saya menggunakan kalender dalam tipe yang berbeda dan ingin sekali menampilkan warna hari ini tetapi tidak pada tampilan lainnya.

person Mitch    schedule 23.10.2020

arrow_upward
0
arrow_downward

Untuk menyorot hari ini dalam tampilan garis waktu di v5 dengan 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

Tambahkan kata kunci ini !important ke akhir baris tepat sebelum titik koma untuk mengganti aturan default yang ditetapkan untuk kelas css .fc-day-today

File .js menggunakan jQuery

<script>

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

</script>

berkas .css

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

Ini berfungsi untuk fullCalendar v5.8.0. Anda dapat menerapkan konsep yang sama untuk hal yang berbeda.

person Nelson Katale    schedule 13.07.2021