当我将 FullCalendar 设置为:
initialView: 'dayGridWeek',
事件显示为彩色点而不是实心填充(这就是我想要的)。但是,当我将 FullCalendar 设置为:
initialView: 'timeGridWeek',
事件显示为实心填充。请问我该如何更正这个问题(即在每个事件的左侧显示一个彩色点)?
我的代码是:
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
firstDay: 0, //Sunday
weekends: true, //Show the weekends
businessHours: { // days of week. an array of zero-based day of week integers (0=Sunday)
daysOfWeek: [ 1, 2, 3, 4, 5 ], // Monday - Friday
startTime: '09:00', // a start time
endTime: '17:00', // an end time
},
initialView: 'timeGridWeek',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
locale: 'en-gb',
selectable: true, // gives ability to select multiple days and then have a callback event when this occurs
buttonIcons: false, // show the prev/next text
weekNumbers: true, // show week numbers
navLinks: true, // can click day/week names to navigate views
editable: true, // can make changes and add changes
dayMaxEvents: true, // allow "more" link when too many events
displayEventTime: false, // display the start time
displayEventEnd: false, // display the end time
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
},// display time with minutes
eventDisplay: 'auto', //Controls which preset rendering style events use. 'block' - changes an event with start and end times from a list-item to a block
eventConstraint: {
start: moment().format('YYYY-MM-DD'),/* This constrains it to today or later */
end: '2100-01-01', // hard coded goodness unfortunately
},
events: responseJson1a,//Populate Sessions/Events using JSON
我从 Kibé M.C 添加了以下内容:
eventDidMount: function (info) {
//you need to get the color from "info" argument and place it on the CSS style let eventColor = info."YourEventColor"
if (info.event) {
info.el.insertAdjacentHTML("afterBegin", '<p class="largeDot" style="color:${info.borderColor}">•</p>');
}
},
我也试过:
style="color:${info.event.borderColor}"
但是点没有从 borderColor 中拾取“红色”并且文本从边框中掉落:
此外,“月”和“列表” View 有两个点:
最佳答案
您可以使用eventDidMount
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
...
eventDidMount: function (args: any) {
if (eventsExist) {
args.el.insertAdjacentHTML("afterBegin", "•");
}
},
更新 您应该只能看到一个点。
发送两个点的屏幕截图,以便我尝试调试问题
您可以添加 CSS 来定义固定尺寸
要在点上使用动态颜色,您可以简单地执行以下操作:
eventDidMount: function (info)
//you need to get the color from "info" argument and place it on the CSS style
let eventColor = info."YourEventColor"
{ if (info.event) { info.el.insertAdjacentHTML("afterBegin", `<p style="color:${eventColor}">•</p>`);
} },
关于javascript - FullCalendar 5 - 如何在 initialView : 'timeGridWeek' instead of solid fill 中的事件左侧显示彩色点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70645955/