Issue #3280301: Improved developer experience and integrations

INTRODUCTION

------------

This module provide a block to display a calendar powered by FullCalendar 5.

This module provides a block to display a calendar powered by FullCalendar 5.

It created a block called 'FullCalendar block' which accepts event source as a json (URL) feed.

It creates a block called 'FullCalendar block' which accepts event source as a json (URL) feed.

The URL can be a relative or absolute link. You may use a relative link if the event source is

* For a full description of the module visit:

  https://www.drupal.org/project/fullcalendar_block

REQUIREMENTS

------------

This module requires Drupal FullCalendar library from https://github.com/drupal-spider/drupal-fullcalendar .

This module requires FullCalendar library (https://github.com/fullcalendar/fullcalendar).

It may also make use of DOMPurify (https://github.com/cure53/DOMPurify) to handle sanitization of HTML when rendering

custom event descriptions in a dialog popup to prevent potential XSS attacks.

As well as support for the Moment (https://fullcalendar.io/docs/moment-plugin) and RRule (https://fullcalendar.io/docs/rrule-plugin) plugins.

INSTALLATION

------------

* Install via Composer.

   The required library will be downloaded automatically. You can install this module as a normal installation process of Composer.

  You can install this module as a normal installation process of Composer.

  Optionally, if you'd like to automatically install the external libraries into your local Drupal instance, then you may add `drupal/fullcalendar_block` as a `drupal-libraries-dependencies` of the [zodiacmedia/drupal-libraries-installer](https://github.com/zodiacmedia/drupal-libraries-installer#installing-libraries-declared-by-other-packages) plugin.

  * Ensure that packages of type drupal-library are [properly configured to install](https://www.drupal.org/docs/develop/using-composer/using-composer-to-install-drupal-and-manage-dependencies#s-define-the-directories-to-which-drupal-projects-should-be-downloaded) to the `/libraries` directory.

  * Add the composer dependency: `composer require zodiacmedia/drupal-libraries-installer`.

  * Add the library as a dependency:

    ```json

    {

      "extra": {

        "drupal-libraries-dependencies": [

          "drupal/fullcalendar_block"

        ]

      }

    }

    ```

Then run `composer install` as normal.

* Install via zip file.

   The required library is not included in the zip file. You need to downoad it from https://github.com/drupal-spider/drupal-fullcalendar/archive/refs/tags/5.10.2.zip and decompress all files to /libraries/drupal-fullcalendar/ under your Drupal root folder.

### MANUAL INSTALLATION

If you'd like to manually install the external Javascript libraries into your local Drupal instance, you may download and extract the following into your Drupal root directory:

| URL                                                                 | Destination                      |

|---------------------------------------------------------------------|----------------------------------|

| https://registry.npmjs.org/fullcalendar/-/fullcalendar-5.11.1.tgz   | `/libraries/drupal-fullcalendar` |

| https://registry.npmjs.org/dompurify/-/dompurify-2.3.8.tgz          | `/libraries/DOMPurify`           |

| https://registry.npmjs.org/moment/-/moment-2.26.0.tgz               | `/libraries/moment`              |

| https://registry.npmjs.org/rrule/-/rrule-2.6.4.tgz                  | `/libraries/rrule`               |

| https://registry.npmjs.org/@fullcalendar/rrule/-/rrule-5.11.0.tgz   | `/libraries/fullcalendar-moment` |

| https://registry.npmjs.org/@fullcalendar/moment/-/moment-5.11.0.tgz | `/libraries/fullcalendar-rrule`  |

If the required external libraries are unavailable locally, then they will be loaded from a CDN (usually https://unpkg.com).

CONFIGURATION

-------------

 1. Go to the Block layout configuration page (/admin/structure/block).

1. Go to the Block layout configuration page (`/admin/structure/block`).

2. Click the 'Place block' button in the area you want the calendar block take place.

3. In the pop-up dialog search 'FullCalendar block' and then place the block.

 4. Click the 'Configure' button of the blcok to set up the block.

4. Click the 'Configure' button of the block to set up the block.

5. The 'Event source URL' is mandatory which is the JSON feed URL providing the event data of the calendar.

 6. The 'Advanced setting' provides the capability to add or modify any options of the FullCalendar, which has to be valid JSON format text. For example, following will set the initial date at 2022-05-01,

6. The 'Advanced settings' provides the capability to add or modify any options of the FullCalendar, which has to be valid JSON/YAML format text. For example, following will set the initial date at 2022-05-01,

   ```yaml

   initialDate: 2022-05-01

   ```

```json

{

    "initialDate": "2022-05-01"

}

8. The 'Advanced Drupal settings' provides support for more advanced Fullcalendar behaviour relating to the dialog, which has to be valid JSON/YAML format text. Available options are as follows:

   ```yaml

   # The dialog modal type.

   dialog_type: 'modal'

   # Additional options to pass through to the Drupal modal.

   dialog_options:

     # Disable Drupal's default autoResize feature on all blocks.

     autoResize: false

   # Whether to enable integration with jquery_ui_draggable if installed.

   draggable: false

   # Options to pass over to jquery_ui_draggable.

   draggable_options: {}

   # Whether to enable integration with jquery_ui_resizable if installed.

   resizable: false

   # Options to pass over to jquery_ui_resizable.

   resizable_options: {}

   # Show event description in dialog window.

   # If enabled, the description will show in a dialog window upon clicking the event.

   description_popup: false

   # Event description field name to use for the popup dialog.

   description_field: 'des'

   ```

8. After saving the configurations, you might need to clear the cache to apply the changes, but it's typically not

   necessary.

### Development

During development, you may switch to non-minified assets by specifying the following in your local `settings.php` and clearing the Drupal cache:

```php

// Enable non-minified assets.

$settings['fullcalendar_block.dev_mode'] = TRUE;

```

 7. After saving the configurations, you might need to clear the cache to apply the changes.

FEATURES:

-------------

* Fully configurable via the block setting.

* Support simple recurring events out of box.

* Support loading events via Ajax once needed.

 No newline at end of file

    "issues": "http://drupal.org/project/issues/fullcalendar_block",

    "source": "http://cgit.drupalcode.org/fullcalendar_block"

  },

  "require": {

    "drupal-spider/drupal-fullcalendar": "5.10.2"

  "suggest": {

    "zodiacmedia/drupal-libraries-installer": "This Composer plugin will help you easily install Drupal libraries locally."

  },

  "extra": {

    "drupal-libraries": {

      "DOMPurify": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.8.tgz",

      "drupal-fullcalendar": "https://registry.npmjs.org/fullcalendar/-/fullcalendar-5.11.1.tgz",

      "moment": "https://registry.npmjs.org/moment/-/moment-2.26.0.tgz",

      "rrule": "https://registry.npmjs.org/rrule/-/rrule-2.6.4.tgz",

      "fullcalendar-moment": "https://registry.npmjs.org/@fullcalendar/rrule/-/rrule-5.11.0.tgz",

      "fullcalendar-rrule": "https://registry.npmjs.org/@fullcalendar/moment/-/moment-5.11.0.tgz"

    }

  }

}

    dialog_width:

      type: integer

      label: 'Dialog width'

    plugins:

      type: sequence

      label: 'Plugins'

      sequence:

        type: string

        label: 'Plugin'

    advanced:

      # Translatable text so that you can easily have a different configuration

      # per site.

      # @see config_translation_config_schema_info_alter()

      type: text

      label: 'Advanced settings.'

    advanced_drupal:

      type: text

      label: 'Advanced Drupal settings'

# The dialog types.

fullcalendar_block_dialog_type.0:

fullcalendar_block_dialog_type.1:

  type: integer

  label: 'Open in a dialog'

fullcalendar_block_dialog_type.2:

  type: integer

  label: 'Open in current tab'

/* Allow AJAX dialogs to be resizable */

.fullcalendar-block-dialog #drupal-modal {

  margin: 1px;

}

<?php

/**

 * @file

 * Hooks for the fullcalendar_block module.

 */

/**

 * @addtogroup hooks

 * @{

 */

use Drupal\Core\Block\BlockPluginInterface;

/**

 * Alter the Fullcalendar block settings for a specific block.

 *

 * @param array $block_settings

 *   The current fullcalendar block settings.

 * @param array $block_content

 *   The block render array.

 * @param \Drupal\Core\Block\BlockPluginInterface $block

 *   The current block instance.

 */

function hook_fullcalendar_block_settings_alter(array &$block_settings, array &$block_content, BlockPluginInterface $block) {

  // Specify some custom default advanced options.

  $block_settings['advanced'] += [

    'dialog_type' => 'modal',

    'dialog_options' => [

      // Disable Drupal's default autoResize feature on all blocks.

      'autoResize' => FALSE,

    ],

    'draggable' => TRUE,

    'draggable_options' => [],

    'resizable' => TRUE,

    'resizable_options' => [],

    // Enable description popups.

    'description_popup' => TRUE,

    // Field to use for the description field popup.

    'description_field' => 'des',

  ];

  if ($block->getPluginId() === 'my_block_id') {

    // Specify the initial date (although this might be inherently uncacheable).

    // \Drupal::service('page_cache_kill_switch')->trigger();

    $block_settings['calendar_options']['initialDate'] = date(DATE_ATOM, \Drupal::time()->getRequestTime());

  }

  if ($block->getPluginId() === 'multiple_events_block') {

    // Provide multiple event sources in addition to the current one.

    $block_settings['calendar_options']['events'] = [

      $block_settings['calendar_options']['events'],

      '/alternative-event-source-2',

      '/alternative-event-source-3',

    ];

  }

}

/**

 * @} End of "addtogroup hooks".

 */