วิธีการตั้งค่าสีวันปัจจุบันใน FullCalendar

ฉันต้องการเปลี่ยนสีของวันปัจจุบันเฉพาะเมื่อปฏิทินอยู่ในมุมมองกำหนดการวันเท่านั้น ผู้ใช้ของฉันบอกว่าพวกเขากำลังประสบปัญหาในการมองเห็นเส้นหรืออะไรบางอย่าง ฉันดูเอกสารประกอบรวมถึง css/js แล้ว และไม่พบวิธีที่รวดเร็วในการทำมัน เป็นไปได้ไหมหากไม่มีการเปลี่ยนแปลงโค้ดที่สำคัญ?


javascript jquery css fullcalendar
person Kirrilian    schedule 22.01.2011    source แหล่งที่มา
comment
เขาอาจหมายถึงวิดเจ็ตปฏิทินแบบเต็มของ jQuery UI   -  person Pekka    schedule 22.01.2011

คำตอบ (12)


arrow_upward
18
arrow_downward

ฉันไม่รู้จริงๆ ว่าคุณกำลังพูดถึงอะไร แต่วิดเจ็ต jQuery UI fullcalendar ใช้คลาส 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

ในปฏิทินแบบเต็ม ›= 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