'How do I change the content in the Drupal 8 full-calendar dialog

I am using the Full Calendar View Plugin (via Smart Date Calendar Kit) on Drupal 9 and I do not see any way to manage the dialog/popup content displayed after clicking an event.

The dialog displays. Initially, it just displayed the date (no body/description as you'd expect). Then I added a new field to the entity and now it only displays that field (no date, no body/description).

I have reviewed the limited documentation (shown on the attached links), but have not been able to find this information.

I'm looking for hooks or services I can override. It looks like I may be able to override fullcalendar_view.view_preprocess, but it seems like this should be easier ( What's the point of having the dialog-option if you can't control what displays in it). Perhaps the intent is to override the JS settings, idk.

TIA

drupal-8fullcalendar-4


Solution 1:[1]

I'm not sure if this is the best solution, but it works and puts the dialog content back to the rendering API so we can use view modes.

Hook into the view...

/**
 * Implements hook_block_view_alter().
 *
 * @param array $build
 * @param BlockPluginInterface $block
 * @return void
 */
function MYMODULE_block_view_alter(array &$build, BlockPluginInterface $block) {
  switch ($block->getPluginId()) {
    case 'views_block:events_calendar-event_cal_block': // ADJUST TO YOUR BLOCK REFERENCE
      $build['#pre_render'][] = function(array $build) {
        $rendered_dialog_content = [];
        $view_builder = \Drupal::entityTypeManager()->getViewBuilder('node');
        $renderer = \Drupal::service('renderer');
        foreach($build['content']['view_build']['#rows'] as $index => $subview) {
          /** @var ResultRow $row */
          foreach ($subview['#rows'] as $row) {
            $result_build = $view_builder->view($row->_entity, 'dialog'); // YOUR VIEW MODE
            $rendered_dialog_content[$row->_entity->id() . '-' . $index] = $renderer->render($result_build, FALSE);
          }
          $build['content']['#attached']['library'][] = 'MYMODULE/calendar-dialog';
          $build['content']['#attached']['drupalSettings']['calendarDialogEvents'] = $rendered_dialog_content;
        }
        return $build;
      };
      break;
  }

Add MYMODULE/calendar-dialog library: MYMODULE.libraries.yml

calendar-dialog:
  js:
      js/calendar-dialog.js: {}

Add Drupal behavior: js/calendar-dialog.js

/* global Drupal */
/* global drupalSettings */

(function ($, Drupal, drupalSettings) {

    'use strict';

    /**
     * Update calendar-options-events-des metadata with rendered content.
     *
     * @type {Drupal~behavior}
     */
    Drupal.behaviors.updateCalendarOptions = {
        attach: function () {

            $(document).once('updateCalendarOptions').each(() => {

                let fullcalendarInstances = $('.js-drupal-fullcalendar'),
                    dialogEvents = drupalSettings.calendarDialogEvents;

                if (
                    typeof fullcalendarInstances !== "object" ||
                    fullcalendarInstances.length === 0 ||
                    typeof dialogEvents !== "object" ||
                    dialogEvents.length === 0
                ) {
                    return;
                }

                fullcalendarInstances.each(function() {
                    let calendarEl = this,
                        viewIndex = parseInt(calendarEl.getAttribute("calendar-view-index")),
                        viewSettings = drupalSettings.fullCalendarView[viewIndex],
                        calendarOptions = JSON.parse(viewSettings.calendar_options);

                    calendarOptions.events.forEach((calEvent, i) => {
                       let nid = calEvent.eid.split('-')[0],
                           dei = nid + '-' + viewIndex;
                       if (dialogEvents.hasOwnProperty(dei)) {
                           calendarOptions.events[i].des = dialogEvents[dei];
                       }
                    });

                    drupalSettings.fullCalendarView[viewIndex].calendar_options = JSON.stringify(calendarOptions);

                });
            });
        }
    };

})(jQuery, Drupal, drupalSettings);

If there is a better solution, please let me know.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 bfuzze

Related Questions