Ubah seluruh warna sel pada tanggal yang dipilih kalender penuh

Saya menggunakan kalender penuh dan saya mengubah warna latar belakang tanggal yang dipilih. Masalah saya sekarang adalah, jika tanggalnya adalah tanggal sekarang, tidak semua sel memiliki warna tanggal yang dipilih, setengahnya memiliki kode warna hari ini dan setengahnya lagi memiliki warna sel yang dipilih.

Tanggal yang dipilih berwarna hijau dan tanggal saat ini berwarna kuning. Ini kode css saya:

.fc-event-container {
  display: none;
}
.fc-day-top {
  border-color: solid green 3px;
}
.fc-today {
  background: #ffffa1 !important;
}
.fc-highlight {
  background: green !important;
}
.fc-row .fc-content-skeleton td, .fc-row .fc-helper-skeleton td {
  border-color: inherit !important;
}


$(function () {
  $('#calendars').fullCalendar({

    height: 395,

    header: {
      // title, prev, next, prevYear, nextYear, today
      left: 'prev',
      center: 'title',
      right: 'next'
    },
    events: [
  {
      title  : 'event1',
      start  : '2019-03-01'
  },
  {
      title  : 'event2',
      start  : '2019-03-05',
  },
  {
      title  : 'event3',
      start  : '2019-03-15'
  },
  {
    title  : 'event5',
    start  : '2019-05-15'
  }

],
eventRender: function (event, element, view) {
    // like that
    var eventStart = moment(event.start);
    $("td[data-date='"+eventStart.format('YYYY-MM-DD')+"']").addClass('dayWithEvent');
},

 
    // 選択可
    selectable: true,
    // 選択時にプレースホルダーを描画
    selectHelper: true,

  })
})
.fc-event-container {
  display: none;
}
.fc-day-top {
  border-color: solid green 3px;
}
.fc-today {
  background: #ffffa1 !important;
}
.fc-highlight {
  background: green !important;
}
.fc-row .fc-content-skeleton td, .fc-row .fc-helper-skeleton td {
  border-color: inherit !important;
}
.dayWithEvent {
  background: #b0e0e6;
  cursor: pointer;
}

.change-bg {
  background-color : green !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" defer/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js" defer></script>
<div id="calendars"></div>


javascript css fullcalendar
person Eem Jee    schedule 25.03.2019    source sumber
comment
Silakan tambahkan demo biola   -  person NIsham Mahsin    schedule 25.03.2019
comment
@NIshamMahsin Silakan lihat pembaruan,   -  person Eem Jee    schedule 25.03.2019
comment
@AndyHoffman Silakan lihat pembaruan   -  person Eem Jee    schedule 25.03.2019
comment
ada yang punya ide tentang ini?   -  person Eem Jee    schedule 25.03.2019

Jawaban (2)


arrow_upward
1
arrow_downward

Baru saja mendapatkannya! Saya baru saja menambahkan css ini:

td.fc-day-top.fc-today.fc-state-highlight {
   display: block;
}

Dan sekarang memblokir semua sel. :)

person Eem Jee    schedule 25.03.2019
comment
Bagus! Anda disarankan untuk menandai jawaban Anda sebagai diterima agar pengguna lain mengetahui jawaban mana yang cocok untuk Anda - person Gouda; 25.03.2019
comment
@Gouda Ya saya akan melakukannya besok. - person Eem Jee; 26.03.2019

arrow_upward
1
arrow_downward

Fungsi fullCalendar() menyoroti tanggal saat ini secara default sebagai fitur bawaan. Jadi, ketika Anda mengatur warna bg secara manual, warnanya akan tumpang tindih dengan warna default.

Saya baru saja menghapus cuplikan di bawah ini dari kode Anda, dan itu berfungsi dengan baik

.fc-today {
  background: #ffffa1 !important;
}
person Gouda    schedule 25.03.2019
comment
Ya, bagi saya tidak ada masalah jika default, yang bermasalah adalah klien saya, mereka ingin warnanya kuning. Terima kasih. - person Eem Jee; 25.03.2019