web-dev-qa-db-fra.com

HTML dans la chaîne de titre du plugin fullcalendar jquery

Je pense que le plugin complet de calendrier jquery est une très bonne solution. Cependant, j'ai remarqué que le plugin échappe (htmlEscape) au titre. Mais je dois formater certaines chaînes du titre, par exemple du texte en gras, des couleurs ou de petites images.

La solution avec un autre plugin (par exemple, qTip, comme dans les exemples) ne fonctionnera pas correctement pour moi. Est-il possible de formater le texte du titre? 

jqueryfullcalendar
39
Chichi

Je l'ai fait à la place, car les autres vues utilisent la même classe, mais pas d'envergure et j'ai forcé le titre à partir de l'événement au lieu de faire une demande supplémentaire pour le texte.

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

En v2, vous pouvez utiliser:

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

La classe span est fc-title par opposition à fc-event-title.

Crédit à j00lz pour le commentaire confirmant le changement.

53
Giancarlo Gomez

Parce que la classe CSS a changé, voici la bonne réponse:

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

Avoir facilement tout le code html dans les titres d’événement montre que j’ai utilisé cela, le rend très facile.

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

Qui a été trouvé ici http://code.google.com/p/fullcalendar/issues/detail?id=152

14
jhanifen

J'ai fini par faire quelque chose comme ça pour mettre un lien à côté de l'heure. Quelque chose de similaire devrait fonctionner pour le titre:

    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);
    }

Donc, cela utilise append () de jQuery pour ajouter un espace, un lien de suppression après le temps et cela fonctionne bien pour les choses de base.

Ce qui n'a pas fonctionné (et ce que j'aimerais voir comme une solution, si quelqu'un en a une) consiste à inclure du code avec des guillemets imbriqués ou des guillemets doubles. Par exemple, je n'ai pas pu ajouter de déclencheur onClick en raison de la nécessité (dans mon cas) de guillemets simples entre guillemets doubles. Je ne savais pas comment leur échapper sans avoir (ce que je crois être) un calendrier complet leur échappant.

Quoi qu'il en soit, pour le texte de base, cela a fonctionné pour moi.

2
seanhussey

J'ai fait comme ça, Vérifiez le lien Lien

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
Ashi
        eventRender: function (event, element) {
            element.find('.fc-title, .fc-list-item-title').html("<b>"+event.title+"</b>");
        },
0
Sanil Shrestha