DOM操作fullCalendar js

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做它在純CSS。

內容CSS屬性與:: before和:: 僞元素一起用於在元素中生成內容。插入對象 使用內容屬性是匿名替換的元素。

以下是月視圖的示例。

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

UPDATE

要顯示的數字就可以相應地使用事件和風格它像一列：

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