I have a custom module and in it's .module file I add a value to Drupal settings:
$variables['#attached']['drupalSettings']['my module']['color_body'] = '#dd0000';
I have a named js function and try to access the value:
function loadcal() {
var backgroundColor = drupalSettings.mymodule.color_body;
}
I receive the error:
Uncaught TypeError: Cannot read properties of undefined (reading 'my module')
at Object.attach (loadcal.js?rb7yo3:52:37)
All of the working examples of using drupalSettings seem to be with anonymous functions:
(function ($) {}
I can refactor to do this as a DOMready function, but would prefer this function to be callable. I have tried:
(function loadcal($) {}
but that leaves loadcal() not being found when it is called.
UPDATE
I decided I could do without the function being named. I could pass what I needed at the start and not have to make subsequent calls. Here is the code involved:
mymodule.libraries
mymodule.calendar:
css:
component:
css/calendar.css: {}
js:
js/loadcal.js: { weight: -18 }
dependencies:
- core/Drupal
- core/jQuery
- core/drupalSettings
mymodule.module
function mymodule_preprocess_node($variables) {
$config = \Drupal::config('mymodule.settings');
$variables['#attached']['library'][] = 'mymodule/mymodule.calendar';
$variables['#attached']['drupalSettings']['mymodule']['color_body'] = '#dd0000';
}
loadcal.js
(function (Drupal, drupalSettings, once) {
Drupal.behaviors.mymodule = {
attach: function (context, settings) {
var calendar = new FullCalendar.Calendar(calendarEl, {
dayCellDidMount: ({date, el}) => {
el.style.backgroundColor = drupalSettings.mymodule.color_body;
}
}
}
)}
The console error is:
Uncaught TypeError: Cannot read properties of undefined (reading 'color_body')
though when checking drupalSettings, and settings under Closure (attach), or Closure.drupalSettings, mymodule isn't there, though it shows up under Drupal.behaviors.