FullCalendar中的动态事件模板 [英] Dynamic event template in FullCalendar

问题描述

有什么方法可以在FullCalendar中动态更改事件模板？

更新。我想要指定新事件html在eventRender回调中）并使FullCalendar将其用于我的事件呈现。像这样：

  eventRender：function（event，element，view）{
 var template ='< div类= 自定义事件 >< / DIV>'; 
返回$ .parse（template）; 
} 
  

试过上面的例子 - 没有用。

解决方案

eventRender回调函数可以修改元素，返回将用于渲染的全新DOM元素，或者它可以返回false，这将防止事件被渲染。

http://fullcalendar.io/docs/event_rendering/eventRender/

示例： http://jsfiddle.net/3E8nk/506/

  $（'＃日历'）。fullCalendar（{
 header：{
 left：'prev，next today'，
 center：'title'，
 right：'month，agendaweek，agendaDay' 
}，
 defaultDate：'2014-06-12'，
 editable：true，
 eventRender：function（event，element，view）{
 return $（ '< div> +事件。 title +'< / div>'）; 
}，
 
 events：[
 {
 title：'All Day Event'，
 start ：'2014-06-01'
}，
 {
 title：'Long Event'，
 start：'2014-06-07'，
 end： '2014-06-10'
}，
 {
 id：999，
标题：'重复事件'，
开始：'2014-06-09T16： 00:00'
}，
 {
 id：999，
标题：'重复活动'，
开始：'2014-06-16T16：00：00 '
}，
 {
 title：'Meeting'，
 start：'2014-06-12T10：30：00'，
 end：'2014-06 -12T12：30：00'
}，
 {
标题：'Lunch'，
 start：'2014-06-12T12：00：00'
} ，
 {
标题：'生日派对'，
开始：'2014-06-13T07：00：00'
}，
 {
标题：'Click for Google'，
 url：'http://google.com /'，
 start：'2014-06-28'
}，
] 
}）; 
  

Is there any way to dynamically change event template in FullCalendar?

Update. What I want is to specify new event html (e. g. in eventRender callback) and make FullCalendar to use it for my event rendering. Something like this:

eventRender: function(event, element, view) {
  var template = '<div class="customEvent"></div>';
  return $.parse(template);
}

Tried the sample above - didn't work.

解决方案

The eventRender callback function can modify element, return a brand new DOM element that will be used for rendering instead, or it can return false, which will prevent the event from being rendered at all.

http://fullcalendar.io/docs/event_rendering/eventRender/

Example here: http://jsfiddle.net/3E8nk/506/

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: '2014-06-12',
    editable: true,
    eventRender: function(event, element, view) {
        return $('<div>' + event.title + '</div>');
    },

    events: [
        {
            title: 'All Day Event',
            start: '2014-06-01'
        },
        {
            title: 'Long Event',
            start: '2014-06-07',
            end: '2014-06-10'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: '2014-06-09T16:00:00'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: '2014-06-16T16:00:00'
        },
        {
            title: 'Meeting',
            start: '2014-06-12T10:30:00',
            end: '2014-06-12T12:30:00'
        },
        {
            title: 'Lunch',
            start: '2014-06-12T12:00:00'
        },
        {
            title: 'Birthday Party',
            start: '2014-06-13T07:00:00'
        },
        {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2014-06-28'
        },
    ]
});

这篇关于FullCalendar中的动态事件模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！