如何在Fullcalendar上向columnFormat添加额外的HTML

时间:2016-12-08 09:11:02

标签: javascript jquery html css fullcalendar

我正在使用完整日历 string constr = ConfigurationManager.ConnectionStrings["Server=CONNECTIONINFO"].ConnectionString; using (SqlConnection con = new SqlConnection(constr)) { using (SqlCommand cmd = new SqlCommand("SELECT * [firstName], [lastName] FROM [dbo].[Players] WHERE [position] = 'QB' ORDER BY [firstName] ASC")) { cmd.CommandType = CommandType.Text; cmd.Connection = con; con.Open(); ddlPlayers.DataSource = cmd.ExecuteReader(); ddlPlayers.DataTextField = "firstName"; ddlPlayers.DataValueField = "PlayerId"; ddlPlayers.DataBind(); con.Close(); } } ddlCustomers.Items.Insert(0, new ListItem("--Select Player--", "0")); 并使用生成html的basicWeek

columnFormat: 'dd D'

我想将此数据<th class="fc-day-header ui-widget-header fc-sat fc-future" data-date="2016-12-10"> <span>Sa 10</span> </th> Sa设置为不同的颜色。所以我认为,最好是改变标记。寻求专家的建议。

想要像:

Want like this

目前看起来像是:

Currently looks like this:

1 个答案:

答案 0 :(得分:1)

正如评论中所提到的,它不是开箱即用的功能,但您可以尝试这样的事情:

var $calendar = $('#calendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,basicWeek,basicDay'
  },
  defaultView: 'basicWeek',
  dayRender: function(date, cell) {
    var today = new Date();
    var cellIndex = cell[0].cellIndex
    var h = cell.closest('table').find('th').eq(cellIndex);
    if (date.getDate() === today.getDate()) {
      h.html('<span class="c1">' + moment(date).format("ddd") + '</span>&nbsp;<span class="c2">' + moment(date).format("M/D") + '</span>');
    } else {
      h.addClass('c1');
    }
  }
});

http://jsfiddle.net/ogaydvos/

最好的问候 的Krzysztof