jquery - 更改 jQuery fullcalendar 中每个项目的颜色

Question

我正在使用Fullcalendar为每位员工制定计划。我希望每个项目都有不同的颜色来对应不同的员工。

我在 jQuery 文件中添加了以下几行:

var couleur = $('span.color').text();
$('span.color').hide();

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

var calendar = $('#calendar').fullCalendar({
    theme: true,
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    eventClick: updateEvent,
    eventColor:couleur,
    selectable: true,
    selectHelper: true,
    select: selectDate,
    editable: true,

    events: "JsonResponse.ashx",
    eventDrop: eventDropped,
    eventResize: eventResized,
    eventRender: function (event, element) {
        //alert(event.title);

        element.qtip({
            content: event.description,
            position: { corner: { tooltip: 'bottomLeft', target: 'topleft'} },
            style: {
                border: {
                    width: 0,
                    radius: 3,
                    color: '#2779AA'

                },
                padding: 10,
                textAlign: 'left',
                tip: true, // Give it a speech bubble tip with automatic corner detection
                name: 'cream',
                width: 400,
                heigth: 600    // Style it according to the preset 'cream' style
            }
        });
    }
});

在包含日历的页面中:

<div id="calendar" runat="server">
    <span id="span1" class="color" runat="server">red</span>
</div>

在后端代码中:

protected void Page_Load(object sender, EventArgs e)
{
    //CalendarEvent cevent;
    DataTable dt = new DataTable();
    SqlConnection con2 = new SqlConnection("Data Source=PC;Initial Catalog=base;Persist Security Info=True;User ID=sa;Password=hhh");
    SqlCommand cmd = new SqlCommand("select couleur_planning from cadres where prénom='maher'", con2);
    cmd.CommandType = CommandType.Text;
    // con2.Open()
    SqlDataAdapter adp = new SqlDataAdapter(cmd);
    adp.Fill(dt);
    span1.InnerText ="";

    span1.InnerText = dt.Rows[0]["couleur_planning"].ToString();
}

而且它不起作用。它按最后一个颜色为所有事件颜色着色。 I saw a similar question这正是我想要的，但我需要以编程方式完成它(我正在使用 fullcalendar 的最新版本)。

从该类中提取数据:

public static List<CalendarEvent> getEvents(DateTime start, DateTime end)
{
    //  string listcheck = HttpContext.Current.Session["listcheck"].ToString();
    List<CalendarEvent> events = new List<CalendarEvent>();
    SqlConnection con = new SqlConnection(connectionString);
    string sql;
    sql = "select D.date_deb as deb,D.date_fin as fin ,M.code as code,M.Objet as ob,M.type_mission as t,M.ville," +
"  M.Etat_mission,prénom,'Mission' AS type,S.nom  from Mission_date D  inner join missions M on " +
   " M.code=D.code_mission inner join mission_cadre C on D.code_mission=C.code_mission inner join cadres on cadres.code=C.code_cadre" +
    " join sociétés S on S.code=M.code_client " +
 "   where  ((D.Date_deb>='" + start + "' and D.Date_deb<='" + end + "')  OR (D.Date_fin>='" + start + "' and D.Date_fin<='" + end + "')) and " +
      " C.code_cadre In (select code from cadres)   union select tache_date.date_deb,tache_date.date_fin ,taches.code,Objet,type_tache,'',Etat_tache,prénom,'Tache' AS type,''  from tache_date " +
    "inner join taches on taches.code=tache_date.code_tache inner join tache_cadre C on tache_date.code_tache=C.code_tache inner join cadres on cadres.code=C.code_cadre where " +
     "((tache_date.Date_deb>='" + start + "' and tache_date.Date_deb<='" + end + "')  OR (tache_date.Date_fin>='" + start + "' and tache_date.Date_fin<='" + end + "')) and  C.code_cadre In (select code from cadres) " +
"union select Réunions.DateRéunion + Réunions.HeureDébut,Réunions.DateRéunion + Réunions.HeureFin ,Réunions.code,Réunions.Objet,''," +
 " '','',prénom,'Réunion' AS type,'' from Réunions  inner join réunion_cadre on .."

    SqlCommand cmd = new SqlCommand(sql, con);
          using (con)
    {
        con.Open();
        SqlDataReader reader = cmd.ExecuteReader();
        while (reader.Read())
        {

            CalendarEvent cevent = new CalendarEvent();
            // cevent.id = (Int32 )reader["code"];
            cevent.title = (string)reader[8] + ":" + "|" + SearchForChar((string)reader[7]) + "|" + SearchForChar((string)reader[9]) + "|" + SearchForChar((string)reader[6]) + "|" + SearchForChar((string)reader[4]) + "|" + SearchForChar((string)reader[3]) + "|" + SearchForChar((string)reader[5]) + "|";
            cevent.description = (string)reader[8] + ":" + "|" + (string)reader[7] + "|" + (string)reader[9] + "|" + (string)reader[6] + "|" + (string)reader[4] + "|" + (string)reader[3] + "|" + (string)reader[5] + "|";
            cevent.start = (DateTime)reader["deb"];
            cevent.end = (DateTime)reader["fin"];
            cevent.ApplyColor(Color.Aqua);
            events.Add(cevent);

        }
    }
    return events;
     }

和 JSON 文件:

public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "application/json";

    DateTime start = new DateTime(1970, 1, 1);
    DateTime end = new DateTime(1970, 1, 1);

    start = start.AddSeconds(double.Parse(context.Request.QueryString["start"]));
    end = end.AddSeconds(double.Parse(context.Request.QueryString["end"]));


    String result = String.Empty;

    result += "[";

    List<int> idList = new List<int>();
    foreach (CalendarEvent cevent in EventDAO.getEvents(start, end))
    {
        result += convertCalendarEventIntoString(cevent);
        idList.Add(cevent.id);
    }

    if (result.EndsWith(","))
    {
        result = result.Substring(0, result.Length - 1);
    }

    result += "]";
    //store list of event ids in Session, so that it can be accessed in web methods
    context.Session["idList"] = idList;

    context.Response.Write(result);
}

private String convertCalendarEventIntoString(CalendarEvent cevent)
{
    String allDay = "true";
    if (ConvertToTimestamp(cevent.start).ToString().Equals(ConvertToTimestamp(cevent.end).ToString()))
    {

        if (cevent.start.Hour == 0 && cevent.start.Minute == 0 && cevent.start.Second == 0)
        {
            allDay = "true";
        }
        else
        {
            allDay = "false";
        }
    }
    else
    {
        if (cevent.start.Hour == 0 && cevent.start.Minute == 0 && cevent.start.Second == 0
            && cevent.end.Hour == 0 && cevent.end.Minute == 0 && cevent.end.Second == 0)
        {
            allDay = "true";
        }
        else
        {
            allDay = "false";
        }
    }
    return    "{" +
              "id: '" + cevent.id + "'," +
              "title: '" + HttpContext.Current.Server.HtmlEncode(cevent.title) + "'," +
              "start:  " + ConvertToTimestamp(cevent.start).ToString() + "," +
              "end: " + ConvertToTimestamp(cevent.end).ToString() + "," +
              "allDay:" + allDay + "," +
              "description: '" + HttpContext.Current.Server.HtmlEncode(cevent.description) + "'" +
              "},";
}


public bool IsReusable
{
    get
    {
        return false;
    }
}

private long ConvertToTimestamp(DateTime value)
{


    long epoch = (value.ToUniversalTime().Ticks - 621355968000000000) / 10000000;
    return epoch;

}
}

Answer 1

尝试在 ProcessRequest 或 convertCalendarEventIntoString 函数中设置 backgroundColor。本质上，您的事件字符串应该如下所示:

return    "{" +
              "id: '" + cevent.id + "'," +
              "title: '" + HttpContext.Current.Server.HtmlEncode(cevent.title) + "'," +
              "start:  " + ConvertToTimestamp(cevent.start).ToString() + "," +
              "end: " + ConvertToTimestamp(cevent.end).ToString() + "," +
              "allDay:" + allDay + "," +
              "description: '" + HttpContext.Current.Server.HtmlEncode(cevent.description) + "'" +
              "backgroundColor:" + backgroundColor + "," +
              "},";

让我知道进展如何..