FullCalendar 5 - 如何在 initialView 中的事件左侧显示彩色点：'timeGridWeek' 而不是实心填充

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 中拾取 'red' 并且文本从边框中掉落：

此外，'month' 和 'list' 视图有两个点：

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>`); 
} },

Answer 2

在科比的帮助下我得到了：

var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
    firstDay: 0, //Sunday
    weekends: true, //Show the weekends
    hiddenDays: calendarHidenDays, //non working days to hide
    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
    
    eventDidMount: function(info) {
        console.log(info.event.borderColor);
        var icon = info.event.extendedProps.icon;
        if (info.event.extendedProps.icon) {
            if (calendar.view.type == "dayGridMonth") {
                $(info.el).find('.fc-event-title').append("<i class='fa "+icon+"'></i>");
            }else {
                $(info.el).find('.fc-event-title').prepend("<i class='largeDot' style='color:"+info.event.borderColor+"'>•</i>").append("<i class='fa "+icon+"'></i>");
            }
        }else{
            //
            if (calendar.view.type != "dayGridMonth") {
                $(info.el).find('.fc-event-title').prepend("<i class='largeDot' style='color:"+info.event.borderColor+"'>•</i>");
            }
        };
    },
});

服务器端传回的变量为：

id, title, daysOfWeek, startRecur, endRecur, startTime, endTime, backgroundColor, classNames, extendedProps1, icon, setAllDay, borderColor, textColor

FullCalendar 5 - 如何在 initialView 中的事件左侧显示彩色点：'timeGridWeek' 而不是实心填充

FullCalendar 5 - How to show a coloured dot to the left of events in initialView: 'timeGridWeek' instead of solid fill

javascript

fullcalendar

fullcalendar-5