javascript - FullCalendar 5 - 如何在 initialView : 'timeGridWeek' instead of solid fill 中的事件左侧显示彩色点

Question

当我将 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 有两个点:

Answer 1

您可以使用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>`); 
} },