在fullcalendar表格单元格中注入微调器

时间:2017-09-28 00:59:18

标签: jquery html css twitter-bootstrap fullcalendar

我的小提琴here中有一个fullcalendar,它在每天的单元格内显示一个数字事件。触发日期点击或事件项目单击时,是否可以用微调器替换数字。然后,当我完成拉动事件数据和显示等等时,我把数字放回去隐藏微调器?

更新! - 当我单击单元格内的项目时,我可以将单元格事件项的值更改为微调器

eventLimitClick: function (cellInfo, jsEvent) {
                var eventValue = $(cellInfo.moreEl).html();
                $(cellInfo.moreEl).html('<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>');
            },

更新! - 我得到了一天点击显示微调器

dayClick: function (date, jsEvent, view) {
            var elementValue = $(jsEvent.target).text();
            $(jsEvent.target).html('<div><a class="fc-more"><i class="fa fa-circle-o-notch fa-spin fa-fw"></i></a></div>');

但是当我触发一天点击时,我很难改变它。 &#39;这&#39;在回调中,这是一个&#39;&#39; element,用于不同的表,然后是用于事件项值的表。如果我能弄清楚如何改变持有该值的元素,那么我会很高兴去!或者,如果我可以从一天点击触发eventLimitClick,我将接受!!这可能吗?

以下是一些代码

&#13;
&#13;
$('#calendar').fullCalendar({
header: {
  left: 'prev,next today',
  center: 'title',
  right: ''
},
//defaultDate: '2014-06-12',
defaultView: 'basicWeek',
editable: false,
height: 174,
eventLimit: 1,
eventLimitText: function(numEvents) {
  return numEvents;
},
eventLimitClick: function (cellInfo, jsEvent) {
},
dayClick: function(date, jsEvent, view) {

},
events: [{
    title: 'Event',
    start: '2017-09-28'
  },
  {
    title: 'Event',
    start: '2017-09-28'
  }
]
});

});
&#13;
td.fc-more-cell {
  text-align: center;
  font-size: 2.3em;
}

.fc-row .fc-content-skeleton,
.fc-row .fc-content-skeleton td,
.fc-row .fc-content-skeleton table,
.fc-row .fc-content-skeleton tr {
  height: 100%;
  vertical-align: middle;
}

.fc-row .fc-content-skeleton td div {
  display: inline-block;
  line-height: 100%;
}
&#13;
<div id='calendar'></div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

dayClick: function (date, jsEvent, view) {
            var elementValue = $(jsEvent.target).text();
            $(jsEvent.target).html('<div><a class="fc-more"><i class="fa fa-circle-o-notch fa-spin fa-fw"></i></a></div>');