Stop Refreshing Page to Browse Calendar (Trying to put Calendar in a TAB)

I am trying to display appointments Calendar in a shortcode tab, and so far so good, BUT if the user wants to check "Next Month's" calendar the page refreshes. Meaning they have to go back to the appointment tab they were on before, and this is not a good user experience.

I have tried other appointment plug-ins and all of their calendars allow browsing months without refreshing the page.

How do I change the month on the front end without refreshing the page or at least refreshing and going back to the tab they were previously on.

  • aristath

    Hello again @Jay, I hope you're well today!

    As far as I know this is not something that can be done out of the box... You might have to do some custom coding to get that functionality!
    I have notified the plugin developer about this, hopefully his insights will help us figure out a solution.
    Please keep in mind though that plugin developers have a lot of responsibilities so this might take a bit longer than a normal ticket.


  • pxwm

    Hi @aristath - I hope you don't mind me chiming in

    Hi @Jay

    I've tried this on my test site and it works fine.

    i.e. I selected a 'Service' then a 'Service Provider' and it displays the available time slots for the current month

    I then click 'Next' and it displays all the available time slots for the next month.

    To confirm I have the auto-refresh parameter set in the 'Services' and 'Service Provider' shortcode so it automatically refreshes.

    Could you please expand on what happens when you click the 'Next' button as you state 'Meaning they have to go back to the appointment tab they were on before,'

    Could you also post the shortcodes yo have in your appointment page.


  • pxwm

    Hi @Jay

    To confirm you shouldn't need the AJAX Add-on activated.
    I would initially deactivate this.

    I would suggest there are some settings that are incorrect or a conflict as when I access your appointment page you are showing the calendar and times and it should not show available slots until you have selected a 'Service' and 'Service Provider' and a date unless of course you wish appointments to be made for a 'no specific provider' (no preference)

    Initially could you please provide the list of shortcodes that are in the appointments page - could you set the page to 'text' so I can view all the code on the page
    And a screenshot of the A+ 'Services' tab
    And a screenshot of the A+ 'Service Providers' tab for all the 'Service Providers' and the 'no specific provider'


  • Jay

    Hi @pxwm

    I am actually working on using A+ on a different theme, but I still having the same issue in addition to another issue, which is getting the confirmation information or shortcode to display, I am placing the A+ shortcodes in a custom field. Here is some more info on what I am trying to accomplish:

    My site is operating like a business directory for medical clinics, where each clinic has a profile that is a custom post type called 'listing'. Below is a test listing as an example:

    I want users to be able to book 1 hour consultations with these clinics on their respective clinic profiles (listing post).

    When I create a clinic profile (listing post), I also create a service provider by the same name, and have a service called "Consultation"

    I display and organize information about each clinic (listing post) using custom fields, which are laid out on the front end as tabs for users to navigate a clinic's profile.

    So the A+ shortcodes are placed in a custom field I created for the post type called Book Appointment (see screenshot)

    [app_monthly_schedule... service="1" worker="2"]
    [app_pagination month="1"]

    service="1" (This is the consultation)
    worker="2" (This is the clinic or service provider)

    Now, when I publish and go to the front end. I just want the user to see a calendar with dates and times. They do not need to select a service or provider because I defined it in the short code.

    If they click 'Next Month' to book a future date the page refreshes and generates a new URL string (see below) and when it does this, it falls back to the first tab on the posting, so the user has to go back to the "Book Appointment" tab to see that the calendar has advanced by one month. I would like them to stay on the "Book Appointment" tab.

    I was wondering if the URL that is generated can be changed to the one below; i.e. have #booking instead of #app_schedule at the end. That way when the page refreshes to show the next month, it falls back to the Book Appointment tab where the calendar is.


    I also have an issue of getting the confirmation shortcode to execute or load in the custom field. You can pick the day, but when you click a time, nothing happens. If I place the shortcodes in the normal text editor. It works, but that means I can't display it in the tab.

  • pxwm

    Hi @Jay

    I'm not sure this is going to work as my understanding is that the A+ shortcodes have to be added to a 'Page' and will not work in Custom posts

    I can confirm what you are trying to do with the shortcodes to select a single 'Service' and single 'Service Provider' in a specific appointment page will work if they are added to a new page.

    Hi @aristath - Is this your understanding or does activating the AJAX Add-on support what @Jay is trying to accomplish with Custom posts?


  • Vladislav


    As far as the custom posts (ie. non-pages) go, the Appointments+ shortcodes should work, as long as the post types are conforming some standard WordPress processing (for an example, filtering the content). This may be a hit or miss in some situations, but it should work in most cases and is worth a shot.

    However, if we can perhaps reduce the problematic scenario to basics, maybe we can go with a simpler solution. If all we need to do is to re-show the actual appointments tab content when the page loads, perhaps adding this bit of javascript code can do the job:

    jQuery(function () {
    	if ( || jQuery("#ui-id-10").trigger("click");

    Basically, this code will execute once the DOM is ready (ie. when the page content is loaded, but not all resources (eg. images) are necessarily there yet) and check the query strings for the page. If the query strings match the ones used by the plugin, the script will simulate the click on the scheduled tab. I have taken the tab ID from the actual page you linked to earlier. Can you please give this a go and see if it helps?

  • Jay


    Thanks for the response, I will try this, but I can't seem to figure out the other issue I'm having, which is when I place my calendar in a Tab (Custom Field that allows shortcodes) it doesn't work.

    It's only when I also place the shortcode in the main text editor of the posting that it works.

    Following Scenarios it works and doesn't work:

    1) If I it place the shortcode in just the main wordpress posting text editor alone it works.

    2) If I place it in a custom field only (where I want it to go, so it displays in the 'book appointment' tab I created) it doesn't work properly.

    3) If it place the shortcode in both the custom field and the main editor it works in both places. Then the custom field works - example:

    FYI: Typing content in the main wordpress posting text editor populates the "overview' tab

    Any ideas? Thank you for your support it is really appreciated and I really want this plug-in to work for my site as it would serve a key function.

  • Jay


    Your javascript code did the trick for staying on the "book appointment" tab. You're the man thanks!

    However, I can't seem to figure out why the shortcode won't fully load when executed in a custom field. It just partially loads and does not generate the booking form when a date and time are selected. It only executes in the custom field if I also place it in the main text editor of the posting.

    Here is the shortcode in the main text editor and it's also in the custom field (book appointment tab) and it works:

    Here the shortcode is only in the custom field (book appointment tab) and doesn't work:

    Here is the php for the custom field of the booking tab, all other shortcodes from various plugins execute.

    <?php if($booking!="" && $htmlvar_name['basic_inf']['proprty_booking']):?>
              <!--Booking Start -->
              <div id="booking">
                   <?php echo apply_filters('the_content', get_post_meta($post->ID, 'proprty_booking', true)); ?>

    Here is php code for the page -

    Any ideas about what may be causing it to behave that way? Once again, your assistance is truly appreciated, I know you must be very busy.

  • Vladislav


    This is happening because of the way the plugin works. Behind the scene, the plugin will check your post (page, custom post format) content when WordPress actually loads it and enqueue some of the dependencies needed for correct operation on the front end. The custom fields, however, won't be checked and these dependencies won't be loaded - which is why the shortcode appears to just half-work when embedded via a custom field.

  • Vladislav


    The method that deals with actually injecting the front-end dependencies I was on about in my previous post is called load_scripts_styles(), so adding this bit of code to your template just after the apply_filters(...) call could help:

    global $appointments;

    Please, make sure that the code is placed right after the actual filtering, and within the IF/ENDIF statement in your template. This is because otherwise, it'll add the dependencies on all pages that has this template, not just the ones that should show the actual filtered content. Can you please give it a go and see if it helps?

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.