I like Appointments+ very much for booking appointments,

I like Appointments+ very much for booking appointments, but I also need a very simple Availability Calendar to only show the days I can accept or not appointments, with a drop down to select month and year.

Please see this: http://prntscr.com/6dtdzr

I have found another plugin that does just that. (The green area ) of my screenshot. But it is not responsible and my theme is....

Can I create this desired layout with Appointments+ ??

Thanks

  • Jose

    Hi there Paulo,

    Hope you are doing great today.

    I'm attaching a custom solution that I coded for you.

    You only need to drop the attached plugin into the folder
    ../wp-content/mu-plugins/ (create the folder if it doesn't exists).

    Once the plugin is in place, a new shortcode will be available:
    [app_month_selector]

    So, you will add something like this in your page in order to show the dropdown and the monthly calendar:

    [app_month_selector]
    [app_monthly_schedule]

    Hope it works fine for you :slight_smile:

    Just for reference, this is the code for the mu-plugin:

    if(! class_exists('app_month_selector') ):
    
        class app_month_selector{
    
            function __construct(){
                add_shortcode('app_month_selector', array($this, "process_month_selector_shortcode"));
                add_action('wp_head', array($this, 'inject_head_scripts'));
                add_action('wp_head', array($this, 'inject_footer_scripts'));
            }
    
            function process_month_selector_shortcode($args=array(), $content=''){
                $output = '';
                $output .= '<form id="app_date_selector_form" name="app_date_selector_form" action="#">';
                $output .= '<div class="app_date_selector_wrapper">';
                $output .= '<div class="app_month_dropdown_select">';
                $output .= '<input type="text" id="app_month_selector_holder" name="wcalendar">';
                $output .= '</div>';
                $output .= '</div>';
                $output .= '</form>';
                return $output;
            }
    
            function inject_footer_scripts()
            {
                ?>
                <script type="text/javascript">
                    jQuery(document).ready(function ($) {
                        $('#app_month_selector_holder').monthpicker({
                            'lang': 'en',
                            'minYear': "2015",
                            'maxYear': "2025",
                        });
                        $('#app_month_selector_holder').change(function(event) {
                            console.log($('#app_month_selector_holder').val());
                            $( "#app_date_selector_form" ).submit();
                        });
                    });
                </script>
            <?php
            }
    
            function inject_head_scripts(){
                ?>
                <style>
                    .app_timetable_wrapper {
                        display:none;
                    }
                </style>
                <script type="text/javascript">
                    (function(e){e.fn.monthpicker=function(t,n){var r={de:{month:["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"]},at:{month:["Jänner","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"]},es:{month:["enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre"]},fr:{month:["janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre"]},hu:{month:["január","február","március","április","május","június","július","augusztus","szeptember","október","november","december"]},it:{month:["gennaio","febbraio","marzo","aprile","maggio","giugno","luglio","agosto","settembre","ottobre","novembre","dicembre"]},nl:{month:["januari","februari","maart","april","mei","juni","juli","augustus","september","oktober","november","december"]}},i={minYear:"1980",maxYear:"2010",month:["January","February","March","April","May","June","July","August","September","October","November","December"]},s,o,u,a=e(this);if(!e.isEmptyObject(t)){i=e.extend(i,r[t.lang])}t=e.extend(i,t);a.hide();if(t.minYear>t.maxYear){for(s=t.minYear;s>=t.maxYear;s--){o+='<option value="'+s+'">'+s+"</option>"}}else{for(s=t.minYear;s<=t.maxYear;s++){o+='<option value="'+s+'">'+s+"</option>"}}e.map(t.month,function(e,t){u+='<option value="'+t+'">'+e+"</option>"});var f=e('<select class="yearpick">'+o+"</select>"),l=e('<select class="monthpick">'+u+"</select>");l.insertBefore(e(this));f.insertAfter(e(this));var c=function(){a.attr("value",Math.round(Date.UTC(f.val(),l.val(),1))/1e3);a.trigger( "change" )};f.change(c);l.change(c)}})(jQuery)
                </script>
    <?php
            }
    
         }
        new app_month_selector;
    endif;

    Cheers,
    Jose

  • Paulo

    Wow!

    Thank you so very much.

    It is working and there are something I would like to see if can be changed.
    Take a look at the page: http://www.paulotebet.com/vou-me-casar/fotos-de-casamento/

    The new code is working on the page, where we can see and use the selector, but not in the sidebar.

    Also, the selection made at the selector is not sticking....

    See http://prntscr.com/6f16yh

    I can select March of 2015 in the selector and the calendar does change to reflect this, but the selector goes back to January 2015...

    In terms of priorities ( in case any of these could be implemented):

    1.) Have the seletor to remember the last selection

    2.) Can I control the text displayed for just some calendar? For example, in the page http://prntscr.com/6f18nk , we have "Click a free day to apply for an appointment", at this page it doesn't make sense, since I will only be showing my availability. There is no functionality to apply for an appointment. The text in blue, I believe I can just change to "Our availability" globally as it will make sense on both scenario (when being able to apply for an appointment, or not). I believe I can do this with the translation of the .mo and .po files.

    3.) Make the Widget at the sidebar (I've created as text with the same shorcodes used on the page) to show the selector.

    Thanks a lot.

    Regards,

    Paulo Tebet

  • Paulo

    One more for the wish list :wink:

    I've noticed that when we select the Month and Year the page is refreshed and the calendar shows the availability for that month/year combination. At this point the url is changed to something like: http://www.paulotebet.com/vou-me-casar/fotos-de-casamento/?wcalendar=1422748800#

    Even if I clear the cache and reload the page, I still see the availability for that month/year combination.

    If I change the url back to http://www.paulotebet.com/vou-me-casar/fotos-de-casamento then the calendar show current month's availability ( I guess, since it is showing March's availability).

    Is is possible to update the content of the page / side bar without changing the URL ?

    Regards,

    Paulo Tebet

  • Paulo

    Number 2 above has been already taken car of by the WordPress org support for the plugin.

    I've got this from Bojan - WPMU DEV

    Not sure if you're looking to remove that from both content and sidebar calendar. If you want to remove them from both then add the following:

    .page-id-63 .appointments-instructions {
    display: none;
    }
    This should remove both. If you only want to remove it from sidebar calendar please add this instead:

    .page-id-63 .x-sidebar .appointments-instructions {
    display: none;
    }
    This will remove it only from the sidebar. In both cases the text will be remove only on this specific page.

  • Jose

    Hi again Paulo,

    Hope you are doing great today :slight_smile:

    To be honest, your original request is beyond the scope of the support team, since it is a specific customization for your site and it won't be used widely. Normally, I would give you just some guidance and suggest you to hire a dev.
    Nevertheless, I went ahead and coded the customization for you as an exception. Unfortunately, I can't invest more time on it. We are totally swamped :slight_frown:

    Regarding your last question, the wcalendar parameter in the url is neccesary. We are making use of the built in pagination, which relies on this parameter. There might be a chance to send it via POST, but it will need further modifications.

    In order to reflect the selected date in the dropdown, I would suggest to do it via javascritpt. I mean, once the page is loaded, to read the date from url parameter, parse it, and force the selection of the correct month and year.

    If you don't feel comfortable with coding it by yourself, you can look for a pro in our jobs board.

    Hope this helps :slight_smile:

    If you have any specific question about the code, I'll be glad to answer.

    Cheers,
    Jose

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.