.net Core Fullcalendar show dots

Question

We are using fullcalendar with .netcore-razor pages. We can made crud operaitons in calendar. We got users and they have property with userColor:'#hex_color'. So I want to add dots in calender for each user color.

This is the calendar

This is the type I want

Basicly i just want to add dots for each event with dot color=user color

$.each(data, function(i, v) {
  console.log(v);
  events.push({
    id: v.id,
    title: v.subject,
    tooltitle: v.tool,
    description: v.description,
    start: moment(v.start),
    end: v.end != null ? moment(v.end) : null,
    color: v.themeColor,
    allDay: v.isFullDay,
    type: v.type,
    rate: v.rate,
    status: v.status,
    //HERE
    textColor: v.TextColor
  });
})

in creating calendar

$('#calender').fullCalendar({
  contentHeight: 1000,
  eventLimit: true,
  eventColor: '#394006',
  events: events,
  //...

Or can I make it in controller. How can i give style in there

foreach (var user in item.Users)
                        {
                             
                          //var user = _userManager.FindByIdAsync(id).Result;
                //here's the data
                            usertxt +=  user.Name+" "+user.Surname + " ● ";
                            usertxt2 +=  user.Name+" "+user.Surname + " <br> ";
//New try is

var v = HttpUtility.HtmlDecode("<span style='background: Red; width:15px; height:15px; radius: 100 %;'></span> ");
 usertxt += user.Name + " " + user.Surname + v;

//It turns into in developer view

    demo user1 <span style='background: Red; width:15px; height:15px; radius: 100 %;'></span> demo user2<span style='background: Red; width:15px; height:15px; radius: 100 %;'></span> 

//But now shows any dot beacuse edit as hmtl codes are
    <span class="fc-title">Demo user&lt;span style='background: Red;'&gt;●&lt;/span&gt; &lt;span style='background: Red;'&gt;●&lt;/span&gt; &lt;span style='background: Red;'&gt;●&lt;/span&gt; Demo &lt;span style='background: Red;'&gt;●&lt;/span&gt; </span>


< and > turns into lt, gt

Finally !! it works with that way but When Date changes. The render is gone. How can make it rerender

I want to rerender it when date changes

//also in evenrender same code
//eventRender: function (event, element) {
     var titles = JSON.parse(test);
            if (!jQuery.isEmptyObject(titles)) {               
                $(".id_" + event.id + " .fc-title").append('<br>');
                $.each(titles.User, function (k, titlee) {
                    var span = document.createElement('span');
                    span.style.color = titlee.User_Color;
                    span.innerHTML = "●";
                    $(".id_" + event.id + " .fc-title").append(span);
                    console.log("TEST");
                });
            }

Answer 1

It would make a lot more sense if your user data was part of your event object, so that each event has a list of the users associated with it, and what colour should be used for them.

And you can append the dot to the title area of the event, to avoid it being placed on the next line.

eventRender: function (event, element) {
  var title = $(element).find(".fc-title");
  
  event.users.forEach(function(user) {
    var span = document.createElement("span");
    span.style.color = user.color;
    span.innerHTML = " ●";
    title.append(span);
  });
}

This is based on an event which has a property "users" as part of it, structured like this:

users: [{ "color": "red" }, { "color": "blue" }]

Demo: https://codepen.io/ADyson82/pen/MWjwBBJ?editable=true&editors=001