Open calendar item in modal window

Here's a patch that adds this configurable feature in the view settings. I ported over the "open event in modal window" feature from the fullcalendar module.

@zwerg - I haven't personally used this, but have you tried using the colorbox_load module?
https://www.drupal.org/project/colorbox_load

From the sounds of it, you may be able to just create a display mode for your event node and use something like view_mode_page (https://www.drupal.org/project/view_mode_page) to create a path that you can use as a pattern for the ng-lightbox module configuration.

You may need to patch fullcalendar_view.js in the fullcalendar_view module to return false in the eventClick property. Just spitballing since I haven't gone down this path (yet)...

Edit: You may just need to uncheck the option for linkToEntity in the view configurations. Just spitballing since I haven't gone down this path (yet)... Hope that helps!

Thanks @johnnydarkko for your patch,

I modify your patch #2 with following changes:

• Open a dialog window instead of a modal window. So user can open multiple windows.
• Disable this new feature if the title field isn't linked to the entity.
• Make the window draggable and resizable.

Patch #6 doesn't work at all for me. Patch #2 works nicely though.

Patch #6 doesn't work for me either. Patch#2 works good, but i found an issue:
If I double-click instead of single-click:
• Window does not appear
• Blue text appears in upper left

I am using a Bootstrap4 theme (Bario subtheme), Patch#2 with modal works goed, Patch#6 with dialog does not work at all.

As advised in #6,
You have to enable the 'Link to the Content' feature for the title field.

See the screenshot attached.

If the title filed shouldn't link to the entity, the dialog shouldn't appear at all.

I don't think using dialog instead of modal is the problem. If so, it should be reported Drupal core as it should be.

Thanks for working on this.
Normally I don’t use the title field, but a taxonomy field for the title. Using the patch of https://www.drupal.org/project/fullcalendar_view/issues/3091643#comment-13335064
So to tested now on a latest “8.x-2.x-dev” without patches on a fresh Drupal 8.1 install, with standard Bartic theme, to see that this is a Bootstrap4 problem. Disabled “Use entity fields” because I want to use the view fields. Enabled “Open event links in dialog window”. Used the title field. Enabled the 'Link to the Content' on the title field. Still not working. When I click on the field there happens nothing. Except, there are now html showing in the list-view (screenshot).
So, it is not a Bootstrap problem.

Everything works nicely with this configuration.
Drupal 8.1
Bario subtheme
Fullcalendar View 8.x-2.4
Patches I used:
"provide support for Smart Date":"https://www.drupal.org/files/issues/2019-10-19/fullcalendar_view-smart_d...",
"Rewriting with replacements patterns doesn't work": "https://www.drupal.org/files/issues/2019-10-31/3091643-render-fields.patch",
"Open calendar item in modal window": "https://www.drupal.org/files/issues/2019-11-01/fullcalendar_view-open_ca...",
"Link to entity not working with entity reference fields in title": "https://www.drupal.org/files/issues/2019-11-30/link_to_entity_reference_..."

As of 8.8.1, this no longer works, because the 'options' line is malformed in the JS call to Dialog render. Attached is a patch for the 8.x-2.5 version that corrects this issue by stringifying the object in the JS. We also fix the `a` tag appearing in the title (Dialog will just pull it from the target automagically).

We have noticed that the resulting dialog can be very tall and narrow however. The tall part is solvable by enabling auto resize (second version of patch with this also attached), but with width/minWidth needing to be set in pixels, this may not be ideal to solve in JS, and should maybe be a css solution? The con part of this is that autoresize disables draggable and (ironically) resizable.

One other option that would be nice would be the ability to pull a specific display mode for the dialog, but I don't know if that is possible via a URL call. (anyone know?)

Credit to my teammate @wendyZ for all the work here.

Thanks Richard for picking up this.

Yes, the title markup is problematic.

I am also aware that the pop-tip is overlaying the dialog.
See the screenshot below.

So the attached patch based on yours fix the issue by following:

// The entry element object.
let $thisEntry = $(this);
if (typeof $thisEntry.qtip === "function") {
  // Hide the pop tip.
  $thisEntry.qtip("hide");
}

From my test, the draggable option is not working and no title. Is there anyone having the same issue and know why?

Ok, found a solution for the title markup issue.

patch attached here.

Push to 3.x and 2.x

We removed the title specifier, because the Dialog renderer will pull the title directly from the target content. Is your title line so that a field re-write can happen?

As the screenshot below, the title wasn't fetched from the content.

Also, if the title filed was rewritten by a custom text, the title should be changed as well.

I also like to know where exactly I can edit the standard width of the modal window, when clicking an event. I cannot find the value of 300px anywhere in the module.

Modal titles with an ampersand prints out as '&amp'. Should I open a new ticket or does this belong here?

EDIT
Created a new ticket for this: https://www.drupal.org/project/fullcalendar_view/issues/3173041#comment-...