在fullcalendar.js的事件中呈现HTML标记

时间:2012-11-25 09:22:07

标签: jquery ruby-on-rails fullcalendar

我需要在进行AJAX调用后将事件呈现为HTML表。当它成功时,我正在获取表格HTMLS。但是当它在标题中呈现时,它将表格HTMLS显示为普通文本。当我用Google搜索它时,我找到了一个解决方案,我需要使用下面的代码将其呈现为HTMLS:

eventRender: function (event, element) {
element.find('span.fc-event-title').html(element.find('span.fc-event-title').text());
}); 

但是当我把它放在我的代码中时,它显示了一些JS错误。我不知道为什么会发生这种错误。请帮我搞清楚。请在下面找到该代码的完整部分:

  dayClick: function(start,allDay, jsEvent, view) {
   $('#calendar').fullCalendar('changeView', 'agendaDay');
  var date_clicked = $.fullCalendar.formatDate( start, "yyyy/MM/dd");
  var date_for_view = Date.parse(date_clicked);
  var date_for_view=new Date(date_for_view);
  $('#calendar').fullCalendar( 'gotoDate',date_for_view );
  $.ajax({
      url: "/admins/users/update_projects?date_selected="+date_clicked+"&uid="+'<%=params[:user]%>',
      type: 'GET',
      success: function (data, response, event, date) {
           $('#calendar').fullCalendar('renderEvent',
              {
                title: data,
                start: start
              },
      eventRender: function (event, element) 
              {
               element.find('span.fc-event-title').html(element.find('span.fc-event-title').text());           
              }); },
      error: function () {
          $('#calendar').fullCalendar('renderEvent',
              {
                title: "No Tasks Scheduled Today",
                start: date_clicked              
              });      
               }
            });
  },

3 个答案:

答案 0 :(得分:8)

您应该将eventRender回调添加到初始化日历的代码

// create fullCalendar
$('#calendar').fullCalendar({
    eventRender: function(event, element, view) {
         if (view.name == 'agendaDay') {
              element.find('span.fc-event-title').html(element.find('span.fc-event-title').text());
         }
    }
});

在Ajax响应中,只需调用renderEvent方法并将事件作为第二个参数传递

//call the render event method
$('#calendar').fullCalendar('renderEvent', {
       title: 'My Event 2',
       start: '2012-11-25'
});

工作示例:http://jsfiddle.net/bfz3J/1/

答案 1 :(得分:1)

在最新版本的FullCalendar(v2.6.1)上,我遇到了在AgendaWeek和agendaDay中显示html的问题。这对我有用:

  eventRender: function(event, element, view) {
    if (view.name === 'month') {
      element.find('span.fc-title').html(element.find('span.fc-title').text());
    } else if (view.name === 'agendaWeek' || view.name === 'agendaDay') {
      element.find('div.fc-title').html(element.find('div.fc-title').text());
    }
  },

答案 2 :(得分:0)

我对两类事件的解决方案(少半小时,半小时多)

eventRender: function (event, element)
            {
                //hack for view html(not as text)
                element.find('.fc-event-title').html(element.find('.fc-event-title').text());
            },
eventAfterAllRender:function( view ) {
                $('.fc-event-time').each(function(){
                    $(this).html($(this).text());
                });
            },