Access object data from a JS callback function - fullcalendar.io

Hi,
i want to create a calendar view on my site and want my users to select a date range (similiar to a booking calendar). The selected dates should be shown in a popup, created with bricks. In the fullcalendar.io docs i found the “select” callback function ( select - Docs | FullCalendar) which provides a selectionInfo object with all data i need. Is there a elegant way to access and use this object data in the bricks popup? i did not found a good solution for this case.
Thank you!

So for opening the Popup id use the bricksOpenPopup( ) function (Popup Builder – Bricks Academy) and then hook into the 'bricks/popup/open' event like so:

document.addEventListener( 'bricks/popup/open', (event) => {
// Manipulate the dom inside the popup
})

from there i’d manipulate the dom inside the Popup, maybe with the help of alpine.js:

does that help?

Hi UserfreundSuat!
Thank you for your reply. Yes, it helps for some parts. When i open the Popup using the bricksOpenPopup() function, i set additionalParams ( Popup Builder – Bricks Academy ) .
Is there a way to access this additionalParams in the ‘bricks/popup/open’ hook? I could not find any information in the event object.

Best regards!

I think you are missunderstanding the documentation. These parameters that you can pass, are meant to give context to the bricks popup when useing ajax requests. Say you want to open a Profile-Popup of an author of the current blogpost you are reading. You would need to pass the ID of the Popup Template, the ID the WordPress Account, aswell as the context-type (be it post, term or in my example author) so bricks knows what kind of WordPress Content it should fetch.

These parameters aren’t meant for your consumption. Sadly You can’t just put in any data and use it in your custom function.

I’m not quite sure that I completly understood your problem but let me show you a solution for the following scenario that might help you:

I enqueued FullCalendar and a custom js file to init.

// functions.php
add_action('wp_enqueue_scripts', function () {
  if (!bricks_is_builder_main()) {
wp_enqueue_script('fullcalendar', 'https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js', [], null, false);
wp_enqueue_script('fullcalendarInit', get_stylesheet_directory_uri() . '/js/custom-script.js', ['fullcalendar'], null, true);
  }
});

I created a popup (not ajax), and displayed it on the relevant page.
This Popup has a brxe-heading and a brxe-div with the id of #popupTitle and #popupContent each.

I initialize the FullCalendar with a brxe-div (#calendar) on my page via the custom-script.js.
You might notice how I setup the event handler dateClick to modify the innerHTML of aforementioned elements inside the popup and then open said popup.

// custom-script.js
document.addEventListener("DOMContentLoaded", function () {
  const calendarEl = document.getElementById("calendar");
  const title = document.getElementById("popupTitle");
  const content = document.getElementById("popupContent");

  if (!calendarEl || !title || !content) return;

  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: "dayGridMonth",
    dateClick: function (info) {
      console.log(info);
      title.innerHTML = info.dateStr;
      content.innerHTML = info.date;
      bricksOpenPopup(1275); // your Popup ID
    },
  });

  calendar.render();
});

I hope this helps or points you in the right direction.
Cheers Suat

Hi!
Thank you for your extensive reply! After digging deeper in the documentation yesterday i came to the same conclusion like you and found a solution similiar to yours. I use a Code block in Bricks instead of enqueuing a custom js script but the content of js is the same.
Again: Thank you for your support!!

1 Like