Load on demand/click

Hello,

There is no such feature in our plugin to achieve this.

Thank you!

Hello,

Thank you for the reply.

In fact, I am more looking for “a way” to achieve it either with code or plugin than an already built-in feature.

How can I instantiate a calendar without using the shortcode ?
What is the javascript code to append it in a div ?

I am using the former great Booking Calendar PRO (jQuery Plugin) in another site so I know it is possible but with this WP version I am confused with it.

Any advice is appreciated.
Thanks by advance

My contribution to your request:
If you plan to publish the calendar in a WP page and if you have sufficient knowledge upon developping a plugin and a theme in WordPress, you could use the following trick:
– create a page with a dedicated template in which you will display the calendar and only the calendar, using the relevant shortcode,
– create the dedicated template. This template must use the strict minimum of the wordpress core to be sure that all necessary resources will be outputted (mainly the js and css theme and from Pinpoint, in order to display the strict minimum (no header, no sidebar, no footer,etc…)
– create your own plugin to manage your own shortcode that you will insert in the page in which you want to display the calendar. In this page, you will also set an iframe, support of the calendar. The shortcode will display something like: “Click here to see the calendar” and an associated javascript will open the frame and set the src of the iframe to the previously created page.
Hope this help to setup your requirement

Hello @jyd44

I am not totally sure if I have understood everything well, but that seems to be a very nice trick ! Thank you for your contribution.

I didn’t think about that way to integrate/load the calendar on demand. I was looking for something more integrated/clean (with all respect) but I take your solution with strong attention.

Some questions about your solution :
First of all, if you advise to do it this way, would you agree there is no way to instantiate a calendar with javascript ? Only with a shortcode ?
Maybe I am wrong but is it really good practice to use an iframe ?
Is that what you are doing when you don’t need the calendar to load on every page loads or you want to load it on demand ?
You are talking about developping theme, the goal here is only to get a theme free of unwanted assets ? So, the only goal is to load the lightest page possible or is there another reason ?
Creating a custom page template inside my current theme/child theme won’t handle the script “purification” you advise ?
Then, the next step is to use a plugin like, for instance, “Freesoul Switch Theme” in order to specify loading this specific custom page with a deactivated theme ? Or should I install this new theme on another domain (and install the plugin on this new install) ?

Now, this is what I found yesterday about what I want to achieve, can you advise me on it :
What do you think about using AJAX (see refered post) :

Handling the click with JS, hooking the request onto actions, handling the AJAX request by echoing the shortcode with do_shortcode('[DOPBSP id="x" lang="xx"]'); and using the wp_localize_script() function in order to make the requests secured.
Would you say this solution allows to run a shortcode asynchronously/on demand and would fit with what I need to achieve ?

Thanks again for your help !

OK, just to be a little bit more precise: my goal was to use the PinPoint Plugin as it is, without any modification. This point is very important if you plan to follow the releases of this plugin.
With that in mind, the only way was to find an external solution. I agree that it is only a workaround, and after few search in the PinPoint Code, I’m pretty sure that with some modifications in it, you could do what you plan with an ajax request. (the code executing the shortcode is located in the file includes/calendars/class-frontend-calendar.php and you can see that executing the shortcode set the document ready event to load the content of the calendar. This event will not be triggered by an ajax call. You will have to do it in your own code. One another point is that the treatment of the shortcode add the link to a css file and I have never tried to add such kind of content by an ajax call to a document. Last point is that you need to retrieve in your own code the content of the options for the DOPBSPCalendar init method (see the assets/jquery.dop.frontend.BSPCalendar.js file) ).
The question is : how deep is it necessary to enter into the PinPoint code, is it acceptable ? What about the support if you make some modifications of your own ?

So back to your questions:
– is it good practice to use an iframe: We are in the case of same source, which is in my point of view acceptable. Another way is to set a div (for instance) and to load the content of this div with the result of an ajax request.
– loading the calendar on demand: setting the url of the iframe on user’s request with some javascript that you attach to the trigger (any text link, icon or whatever you want) will load the calendar on demand only, which answer to your request.
– I was not talking about developing a new theme, but only to be aware of how to build theme. And yes, developing a dedicated template for a page help to remove all unnecessary assets, like the header of the page, the footer, sidebars and so on, things that you don’t need to display into the frame. But you need to ensure that all necessary wordpress events are triggered (like enqueue_scripts and so on)

Hope this clarify my proposal.

Hello @jyd44

Back to tell you a big thank you because the cleaner AJAX option you made me think about works perfectly for a load on demand.

For those who would need to do so :

First created a clean page template
Create a page with this template that embed the calendar shortcode
Exclude it from cache plugins in order to access scripts individually
In a regular page of your site, create your button with a class
Create your target div (calendar container) with another class
Create an AJAX function to load the calendar in the target div when the button is clicked

To go further, as we are using AJAX and the calendar always needs time to display we can save ressources and psychological time, so we can preload the calendar since the hover/mouseenter to decrease the user psychological loading time of the calendar between the mouse hover and the click, to do this :

Put the function in a <script> tag and give it an ID
Put your AJAX call into a .one() function $(".your-button").one("mouseenter", function(){} in order to only load the calendar at the first mouseenter (and not the next ones if not clicked)
In the success callback, first process the data response in order to remove the script tag (or find a way to not load this function in the page that contains the calendar) else the function will be reruned and the calendar will be fired each time the button will be hovered
Add the proccessed response to the target div
That’s it

To avoid the one() function and depending of the cases, you can also wrap the button into a div and turn it as the target div.

Let me know @jyd44 what you think about it and if you see some improvement to this or a better way to handle it.