fullcalendar jquery插件的标题字符串中的HTML

时间:2022-12-05 07:49:21

I think the fullcalendar jquery-plugin is a really great solution. However, I noticed the plugin escapes (htmlEscape) the title. But I need to format some strings in the title, for example bold text, colors, or small images.

我认为fullcalendar jquery-plugin是一个非常好的解决方案。但是,我注意到插件转义(htmlEscape)标题。但我需要在标题中格式化一些字符串,例如粗体文本,颜色或小图像。

The solution with another plugin (for example qTip, like in the examples) will not work the right way for me. Is there anyway to format the title text?

使用另一个插件的解决方案(例如qTip,如示例中所示)对我来说无法正常工作。无论如何要格式化标题文本?

6 个解决方案

#1


51  

I did this instead as the other views use the same class but not spans and I forced in the title from the event rather than making an additional request for the text.

我做了这个,因为其他视图使用相同的类但没有跨度,我强迫事件的标题,而不是对文本进行额外的请求。

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

In v2, you may use:

在v2中,您可以使用:

element.find('span.fc-title').html(element.find('span.fc-title').text());

The span class is fc-title as opposed to fc-event-title.

span类是fc-title而不是fc-event-title。

Credit to j00lz for the comment confirming the change .

感谢j00lz确认更改的评论。

#2


17  

Because the CSS class has changed, this is the correct answer:

因为CSS类已经改变,这是正确的答案:

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

#3


14  

To easily have all html in event titles show I used this, makes it very easy.

为了轻松地在事件标题中显示所有html,我使用了它,这非常容易。

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

Which was found here http://code.google.com/p/fullcalendar/issues/detail?id=152

这里有http://code.google.com/p/fullcalendar/issues/detail?id=152

#4


2  

I ended up doing something like this to put a link next to the time. Something similar should work for the title:

我最后做了类似这样的事情,在时间旁边放了一个链接。类似的东西应该适用于标题:

    events: [
      <% @schedule.events.each do |event| %>
      {
        // Render your events here as needed
        // I added a custom attribute called eventDeleteLink, to be used below
      },
      <% end %>
    ],
    // Add this piece:
    eventRender: function(event, element) {
      element.find(".fc-event-time").append(" " + event.eventDeleteLink);
    }

So this uses jQuery's append() to add a space any a delete link after the time and it works fine for basic stuff.

因此,这使用jQuery的append()在时间之后添加任何删除链接的空间,它适用于基本的东西。

What it didn't work for (and what I'd love to see a solution for, if anyone has one) is including code with nested quotes or double quotes. For instance, I was unable to add an onClick trigger because of the need (in my case) for single quotes within double quotes. I couldn't figure out how to escape them and not have (what I believe is) fullCalendar re-escaping them.

什么它不起作用(以及我希望看到的解决方案,如果有人有),包括嵌套引号或双引号的代码。例如,我无法添加onClick触发器,因为需要(在我的情况下)双引号内的单引号。我无法弄清楚如何逃避它们而没有(我相信)fullCalendar重新逃避它们。

Anyway, for basic text, this worked for me.

无论如何,对于基本文本,这对我有用。

#5


0  

        eventRender: function (event, element) {
            element.find('.fc-title, .fc-list-item-title').html("<b>"+event.title+"</b>");
        },

#6


0  

I have done like this, Check the link Link

我这样做了,检查链接链接

eventRender: function (event, element) {
    element.find('.fc-title').html(event.title);/*For Month,Day and Week Views*/
    element.find('.fc-list-item-title').html(event.title);/*For List view*/
}

#1


51  

I did this instead as the other views use the same class but not spans and I forced in the title from the event rather than making an additional request for the text.

我做了这个,因为其他视图使用相同的类但没有跨度,我强迫事件的标题,而不是对文本进行额外的请求。

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

In v2, you may use:

在v2中,您可以使用:

element.find('span.fc-title').html(element.find('span.fc-title').text());

The span class is fc-title as opposed to fc-event-title.

span类是fc-title而不是fc-event-title。

Credit to j00lz for the comment confirming the change .

感谢j00lz确认更改的评论。

#2


17  

Because the CSS class has changed, this is the correct answer:

因为CSS类已经改变,这是正确的答案:

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

#3


14  

To easily have all html in event titles show I used this, makes it very easy.

为了轻松地在事件标题中显示所有html,我使用了它,这非常容易。

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

Which was found here http://code.google.com/p/fullcalendar/issues/detail?id=152

这里有http://code.google.com/p/fullcalendar/issues/detail?id=152

#4


2  

I ended up doing something like this to put a link next to the time. Something similar should work for the title:

我最后做了类似这样的事情,在时间旁边放了一个链接。类似的东西应该适用于标题:

    events: [
      <% @schedule.events.each do |event| %>
      {
        // Render your events here as needed
        // I added a custom attribute called eventDeleteLink, to be used below
      },
      <% end %>
    ],
    // Add this piece:
    eventRender: function(event, element) {
      element.find(".fc-event-time").append(" " + event.eventDeleteLink);
    }

So this uses jQuery's append() to add a space any a delete link after the time and it works fine for basic stuff.

因此,这使用jQuery的append()在时间之后添加任何删除链接的空间,它适用于基本的东西。

What it didn't work for (and what I'd love to see a solution for, if anyone has one) is including code with nested quotes or double quotes. For instance, I was unable to add an onClick trigger because of the need (in my case) for single quotes within double quotes. I couldn't figure out how to escape them and not have (what I believe is) fullCalendar re-escaping them.

什么它不起作用(以及我希望看到的解决方案,如果有人有),包括嵌套引号或双引号的代码。例如,我无法添加onClick触发器,因为需要(在我的情况下)双引号内的单引号。我无法弄清楚如何逃避它们而没有(我相信)fullCalendar重新逃避它们。

Anyway, for basic text, this worked for me.

无论如何,对于基本文本,这对我有用。

#5


0  

        eventRender: function (event, element) {
            element.find('.fc-title, .fc-list-item-title').html("<b>"+event.title+"</b>");
        },

#6


0  

I have done like this, Check the link Link

我这样做了,检查链接链接

eventRender: function (event, element) {
    element.find('.fc-title').html(event.title);/*For Month,Day and Week Views*/
    element.find('.fc-list-item-title').html(event.title);/*For List view*/
}