When I set the FullCalendar to: The Events are shown with coloured dots instead of solid fill (this is what I want). However, when I set the FullCalendar to: the Events appear as solid fill. How can I correct this please (i.e., show a coloured dot to the left of each Event)? My code is: I have added the following

JavaScript

When I set the FullCalendar to:

initialView: 'dayGridWeek',

The Events are shown with coloured dots instead of solid fill (this is what I want). However, when I set the FullCalendar to:

initialView: 'timeGridWeek',

the Events appear as solid fill. How can I correct this please (i.e., show a coloured dot to the left of each Event)?

My code is:

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

I have added the following from 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>'); 
    }
},

I also tried:

style="color:${info.event.borderColor}"

However the dot is not picking up the ‘red’ from borderColor and the text drops out of the border:

Also, the ‘month’ and ‘list’ views have two dots:

Answer

You can use eventDidMount

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
...
 eventDidMount: function (args: any) {
        if (eventsExist) {
          args.el.insertAdjacentHTML("afterBegin", "•");
        }
      },

UPDATE You should only see one dot.

Send a screenshot of the two dots so I try debugging the issue

You can add CSS to define a fixed size

To have dynamic colors on the dot, you can simply do this:

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

FullCalendar 5 – How to show a coloured dot to the left of events in initialView: ‘timeGridWeek’ instead of solid fill

Advertisement

Answer