Hi.
I've combined my "venue" field with the title using a global custom text field.
I was wondering if it might be possible to not strip tags from the title so that it could read:

<span class="title">Boring event</span>
<span class="venue">Desolate venue</span>

I tried removing the strip_tags and setting 'title' => $entity->title at line 263 but then I get escaped html in the output. I've tried the fullcalendar_templates module but views doesn't pick up the templates.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

griz’s picture

Title: Basic HTML in title field. » FullCalendar escaping HTML where it should not.

I've just placed an upcoming events blocks next to my calendar and it's turning the links into plain text.
To reproduce:

  1. Create a fullcalendar page view.
  2. Create a block view (different view, not just different display) of the same content. I used title and a node reference field simply outputting the title as a link.
  3. Configure the block to appear in a sidebar on the path of the fullcalendar page display.
  4. Weep uncontrollably.
Creation Media’s picture

@griz - did you try looking in sites/libraries/fullcalendar.js - the js file also escapes the HTML - try doing a search for "fc-event-title". You'll also need to re-minify the JS.

Kiwa’s picture

Issue summary: View changes

Modifying the fullcalendar.js wont work, as the module already grabs an escaped version - it uses the title attribute from the link tag with the class .fullcalendar-event-details the view generates, and not the actual title field also rendered.

I am adding my solution since I came across this post mutliple times when looking for a way to solve the problem:

1) Create a Plugin as suggested by this page: Full Calendar Documentation - JavaScript API

2) Copy this code (eventually with modified behavior name) into the js file:

(function($) {
Drupal.fullcalendar.plugins.calendar_html = {
  options: function (fullcalendar, settings) {
    return {
      eventRender: function(event, element, view) {
        var dom_id = event.dom_id;
        var entity_type = event.entity_type;
        var entity_id = event.eid;
        var index = event.index;

        var entry = $(dom_id).find(".fullcalendar-event > .fullcalendar-instance > a[eid='" + entity_id + "'][entity_type='" + entity_type + "'][index='" + index + "']");
        var title = entry.parent(".fullcalendar-instance").prev('.title').html();

        element.find('.fc-event-title').html(title);
      }
    };
  }
};
}(jQuery));

Most solutions on the net suggest a similar approach using just "element.find('.fc-event-title').html(event.title)", but this only works because their original event.title contains html elements - the output this view generates however does not. So this approach uses the given dom-id of the view as well as the entity type + entity id to grab the hidden title html from the actual title field.

testube’s picture

Hey Kiwa,

Yeah, I tried modifying the fullcalendar.js and using just "element.find('.fc-event-title').html(event.title)" but neither works.

Thanks for posting your code. I've created a custom module with the JS file, and now I'm trying to get it to work, to allow HTML to be displayed within the FullCalendar title fields, but so far no success.
:(

I was wondering what you meant when you said "eventually with modified behavior name"?
Maybe I missed something...

My custom module - fullcalendar_fix.module:

 <?php

/**
 * Implements hook_fullcalendar_api().
 */
function fullcalendar_fix_fullcalendar_api() {
  return array(
    'api' => fullcalendar_api_version(),
  );
}

/**
 * Implements hook_fullcalendar_options_info().
 */
function fullcalendar_fix_fullcalendar_options_info() {
  return array(
    'fullcalendar_fix' => array(
      'js' => TRUE,
      'no_fieldset' => TRUE,
      'weight' => 5,
    ),
  );
}

and here's my fullcalendar_fix.fullcalendar.js:

(function($) {
fullcalendar_fix.fullcalendar.plugins.calendar_html = {
  options: function (fullcalendar, settings) {
    return {
      eventRender: function(event, element, view) {
        var dom_id = event.dom_id;
        var entity_type = event.entity_type;
        var entity_id = event.eid;
        var index = event.index;

        var entry = $(dom_id).find(".fullcalendar-event > .fullcalendar-instance > a[eid='" + entity_id + "'][entity_type='" + entity_type + "'][index='" + index + "']");
        var title = entry.parent(".fullcalendar-instance").prev('.title').html();

        element.find('.fc-event-title').html(title);
      }
    };
  }
};
}(jQuery));
david.qdoscc’s picture

Does anyone have a workaround for this yet?

caldenjacobs’s picture

EDIT: Don't use this. See comment #8 for the correct patch and custom module example.

Attached find a patch which removes strip_tags from theme.inc. It is also necessary as Kiwa pointed out to modify fullcalendar's JS via a plugin (in this case by using a custom module), in conjunction with the patch.

I'll upload a working example of what such a custom module might look like in a moment.

caldenjacobs’s picture

FileSize
2.53 KB

EDIT: Don't use this. See comment #8 for the correct patch and custom module example.

Attached you'll find the working example of a custom module (mentioned in #6), addressing fullcalendar JS' potentially unwanted html escaping behavior.

All credit goes to Kiwa as this code is based on #3 :)

caldenjacobs’s picture

Ah! Just now realizing that I uploaded the wrong custom module AND a patch for the dev version which I hadn't tested. Not sure what I was thinking.

Here's a corrected patch for the stable 7.x-2.0 release, as well as a tested copy of the working example module addressing fullcalendar js' unwanted html escaping behavior.

kokamow’s picture

FileSize
34.68 KB

This works great except for repeating events, which show the escaped html in the title. (In screenshot, note the event on Sunday correctly highlights the Pending status, but on the Tuesday event, a repeating event, the html is displaying instead )

jpdaut’s picture

For the dev release this works for me :

(function($) {
Drupal.fullcalendar.plugins.fullcalendar_fix = {
  options: function (fullcalendar, settings) {
    return {
      eventRender: function(event, element, view) {
        element.find('span.fc-event-title').html(element.find('span.fc-event-title').text()); 
      }
    };
  }
};
}(jQuery));