.net Core Fullcalendar 显示点

Question

我们在 .netcore-razor 页面上使用全日历。我们可以在日历中进行 crud 操作。我们有用户，他们有属性和 userColor:'#hex_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
  });
})

正在创建日历

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

或者我可以在控制器中制作它。我怎样才能在那里给风格

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;

//在开发者视图中变为

    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

终于！！它以这种方式工作，但当日期更改时。渲染不见了。如何让它重新渲染

我想在日期更改时重新渲染它

//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

如果您的用户数据是您的活动的一部分，这将更有意义 object，这样每个活动都有一个与之关联的用户列表，以及应该为他们使用什么颜色。

您可以将点附加到事件的标题区域，以避免它被放在下一行。

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 = "&nbsp;●";
    title.append(span);
  });
}

这是基于一个包含属性个“用户”的事件，结构如下：

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

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

.net Core Fullcalendar 显示点

.net Core Fullcalendar show dots

html

javascript

css

fullcalendar

fullcalendar-3