fullCalendar js 的 DOM 操作

Question

我正在使用fullcalendar，一个利用 jQuery 的 JavaScript 事件日历。

我需要编辑日历的所有日期单元格，添加两个垂直列表，两个列表都向左浮动；我必须实现处理事件吗？

出色地; 我想不是。

有没有一种简单有效的方法来实现这一目标？

下面是我的代码，说明了我尝试实现这一目标的失败：

$("#calendar").fullCalendar({   
    header: {
        left: 'prev',
        center: 'title',
        right: 'next'
    },
    //defaultDate: '2015-02-12',
    monthNames:
        ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    dayNamesShort:
        ['D', 'L', 'M', 'M','J', 'V', 'S'],     
    editable: false,
    eventLimit: true, // allow "more" link when too many events
    eventRender: function(event, element) {
        //element.find(".fc-view-month td").after($("<td class=\"fc-day\"></td>").html("Prueba"));
        //element.find("div.fc-event-inner").prepend("<img src='" + event.imageurl +"' width='12' height='12'>");
        //element.find("div.fc-event-inner").prepend("<img src='../img/ico_calen_min_1.png' width='12' height='12' />");
        //element.find("table tbody td").prepend("<img src='../img/ico_calen_min_1.png' width='12' height='12' />");
        //element.find(".fc-title").after($("<span class=\"fc-event-icons\"></span>").html("<ul><li><img src=\"../img/ico_calen_min_1.png\" /></li><li><img src=\"../img/ico_calen_min_1.png\" /></li></ul>"));             
        //element.find(".fc-view-month").after($("td").html("<ul><li><img src=\"../img/ico_calen_min_1.png\" /></li><li><img src=\"../img/ico_calen_min_1.png\" /></li></ul>"));                
        //$("#calendar .fc-view-month td").append("<input type=\"checkbox\">AM<br>");
    }
});

Answer 1

您可以使用::before伪和content例如标志性字体（如fontawesome.

content CSS 属性与 ::before 和 ::after 伪元素一起使用以在元素中生成内容。使用 content 属性插入的对象是匿名替换元素。

以下是月视图的示例。

\A并white-space: pre需要对图标进行换行。

代码：

.fc-widget-content::before {
    margin-top: 20px;
    font-family:'FontAwesome';
    content:"\f0c9\A\f0ac\A\f09c\A\f257";
    position: absolute;
    white-space: pre;
}

演示： http: //jsfiddle.net/IrvinDominin/dcx5unzd/

更新

要显示包含数字的列，您可以使用事件并相应地设置其样式，如下所示：

.fc-event{
    margin-left: 20px;
    width: auto !important;
}

以下是您的活动演示：

var events_array = [{
    title: '1\n2\n5\n8',
    start: new Date(2015, 9, 20),
}, {
    title: '5\n4\n1\n2',
    start: new Date(2015, 9, 21),
    tip: 'Personal tip 2'
}];

这\n是列号换行符的基础。

看：

演示： http: //jsfiddle.net/IrvinDominin/dcx5unzd/1/