【问题标题】:FullCalendar: How can i display an icon on each day of the month using the function DayRender?FullCalendar:如何使用 DayRender 功能在每月的每一天显示一个图标?
【发布时间】:2016-12-01 09:13:38
【问题描述】:

我正在通过FullCalendar 构建日历。

我想为当月的每一天显示一个小图标 img。不管任何事件。 (可以说我根本没有活动)。 我想使用 DayRender 功能。如果可能的话

这是迄今为止我的日历的完成情况:

        $(document).ready(function() {
        var json_backgrundColor ={"1":"#f1f9ef","2":"#edf5f9","3":"#edf5f9","4":"#f7fafc","5":"#f7fafc","6":"#f7fafc","7":"#f7fafc","8":"#f7fafc","9":"#edf5f9","10":"#edf5f9","11":"#f7fafc","12":"#f7fafc","13":"#f7fafc","14":"#f7fafc","15":"#f7fafc","16":"#edf5f9","17":"#edf5f9","18":"#f7fafc","19":"#f7fafc","20":"#f7fafc","21":"#f7fafc","22":"#f7fafc","23":"#edf5f9","24":"#f1f9ef","25":"#ffdfdf","26":"#ffdfdf","27":"#f1f9ef","28":"#f1f9ef","29":"#f1f9ef","30":"#f1f9ef","31":"#f1f9ef"};

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
            },

            defaultView: 'month',
    dayRender: function ( date, cell) {
    var cellDate = date.format('D');
    if(!cell.hasClass('fc-other-month')) {    
        cell.css('background-color', json_backgrundColor[cellDate]);  
    }else {
            cell.css('background-color', '#ffffff');  
            }  
},
 
        });
        
    });

https://jsfiddle.net/m53jbwx0/4/

有人知道我该怎么做吗?

【问题讨论】:

  • 图片是否都一样?
  • 在我的最终产品中没有,但为了这个问题,是的!
  • 另外,我可能想显示 2 个图标。

标签: javascript jquery css fullcalendar


【解决方案1】:

你需要这样的东西吗?

dayRender: function ( date, cell) {
cell.prepend('<i class="fa fa-plane" aria-hidden="true"></i>');
}

https://jsfiddle.net/mnjsjs6p

【讨论】:

  • 事件渲染后有没有办法做到这一点?
  • @KrzysztofKaźmierczak 无论如何要在 c# 的控制器端显示它?就像下面的 sn-p 里面一样?
  • var absentEventList = from e in absentDates select new { id = EnrollNumber, title = "Absent", start = ((DateTime)e.Date).ToString("s"), end = ((DateTime)e.Date).ToString("s"), someKey = EnrollNumber, borderColor = "#ffffff", color = "#fa0303", allDay = false }; var absentRows = absentEventList.ToArray(); return Json(absentRows, JsonRequestBehavior.AllowGet);
  • aria-hidden="true" 太棒了
猜你喜欢
  • 2015-11-29
  • 1970-01-01
  • 1970-01-01
  • 2021-11-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多