fullCalendar js的DOM操作
我正在使用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($(" ").html("Prueba")); //element.find("div.fc-event-inner").prepend(""); //element.find("div.fc-event-inner").prepend(""); //element.find("table tbody td").prepend(""); //element.find(".fc-title").after($("").html("
")); //element.find(".fc-view-month").after($("td").html("
")); //$("#calendar .fc-view-month td").append("AM
"); } });
您可以使用::before
伪和content
之类的纯css来完成它,例如像fontawesome
这样的标志性字体。
内容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/
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/
- 如何更新fullcalendar.js中的开始时间(!)
- Fullcalendar:为什么日历在页面上出现两次?
- 如何在不剪切日历事件的主题的情况下显示它 – 使用FullCalendar UI
- 在fullcalendar中添加有关事件的更多信息
- hover在agendaWeek + fullcalendar的一个单元格上的效果
- 有没有办法防止jQuery FullCalendar中的重叠事件?
- 使用addEventSource时,FullCalendar v.2.2.6’hasTime’未定义错误
- FullCalendar中重复的隔夜事件
- FullCalendar – JSON源不起作用,但直接使用JSON数据