[APP+] Change time slot appearance

In Appointents+ booking page, time slots are showing time in the following format:

09:00

14:00

I would like to change how they look and instead show how much time the service will be. So it will look like this:

09:00 – 14:00

14:00 – 18:00

  • viobru
    • Recruit

    Hi Marleen!

    Hope you are doing great :slight_smile:

    As informed during the chat session, I've scalated this to our developers so they can have a closer look at this. Please note that they have to deal with lots of critical issues on a daily basis, so it may take a little while for them to check this and give feedback. We highly appreaciate your patience on this.

    In the meantime, let me suggest to try using this workaround that I found for this. Please try adding the following code under Appearance > Customize > Additional CSS:

    /* Add ending time on available time slots on Appointments+ booking calendar - added by Violeta WPMU DEV */
    .app_timetable_cell.app_timetable_cell-09-00.free:after {
    content: ' - 14:00';
    }
    .app_timetable_cell.app_timetable_cell-14-00.free:after {
    content: ' - 19:00';
    }

    As you can see, I tested it on my site and seems to be working fine: Please note that I added the end time for the times slot to be at 14:00 and 19:00 respectively, since when checking the appointments details I saw that each appoinment lasts 5h (if you change that, you will just need to change the ending time in the code I provided to display the new one). Hope this helps!

    Have a nice day ahead!

    Kind regards,

    Violeta

  • Marleen
    • New Recruit

    Hey Violeta,

    thanks for the fix, like you said this is a temporary one but for now this should work! since we have either a part of the day (the 5hrs) or the full day, and now the time is also displayed when you select a full day. I will await the response of the developers for a hopefully permanent fix :slight_smile: a good fix if possible would be that if a client were to select “full day” they no longer need to select a timeslot but they just get sent to the next step after they’ve selected a day.

    Thanks for your help in this regard.

  • Konstantinos Xenos
    • Rubber Duck Debugger

    Hey Marleen !

    Sorry for the late reply but we've been quite busy :slight_smile: .

    I've made a mu-plugin just in case it can help more to automatically add the duration on your calendar that will be easier for you to manage as you'll only have to change the "minutes" of the duration.

    How to install:

    Always make sure to keep a backup of your site before changing/adding custom code.

    1] Navigate to your /wp-content/ directory and create a new one named mu-plugins if it doesn't exist.

    2] Inside the mu-plugins folder create a file named app-add-duration-on-cal.php

    3] Edit the file and copy / paste this code snippet inside.

    <?php

    add_action(
    'wp_footer',
    function() {
    ?>
    <script>
    ( function( $ ) {
    function formatAMPM(date) {
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var ampm = hours >= 12 ? 'pm' : 'am';
    hours = hours % 12;
    hours = hours ? hours : 12;
    minutes = minutes < 10 ? '0'+minutes : minutes;
    var strTime = hours + ':' + minutes + ' ' + ampm;

    return strTime;
    }

    $( document ).ready( function() {
    // change the "300" to the total minutes that you like to add.
    var mins = 300;

    $( '.app_timetable_cell' ).each( function() {
    var txt = $( this ).text(),
    dt = new Date( $( this ).prop( 'title' ) ),
    dtn = new Date( dt.getTime() + ( mins * 60 * 1000 ) ),
    newtxt = txt + ' - ' + formatAMPM( dtn );

    $( this ).text( newtxt );
    } );
    } );
    } ( jQuery ) );
    </script>
    <?php
    },
    999
    );

    4] Save and close the file.

    5] The final path should look like /wp-content/mu-plugins/app-add-duration-on-cal.php

    In the code you will see the var mins = 300;, you can change the 300 into the minutes that you like to be added as a duration. This example is adding 5 hours ( so 300 minutes ). Please note that all durations should be the same ( on services ) for this to properly work.

    This will result on automatically showing the "range" of the timers as seen in the image:

    Tell me if you need any further help with this !

    Regards,

    Konstantinos

    • Marleen
      • New Recruit

      Hey Konstantinos,

      The only issue with this is that the time format is in AM/PM, i see youre calling it with a function “function formatAMPM(date) ” can i simply change “formatAMPM” into i.e. “formatDIGITAL” or a comparable function so the time will be in digital format? (we’re dutch so AM PM is not generally used here, this might be confusing for some of the clients).

      edit: Along with that, it doesn’t change the time in the form when you click on it (it says; date and time: 1 januari 1970 00:00) and it still displays the ending time if you select “full day (hele dag)” which might be confusing. We also have some issues with how the appointment time is displayed in the completed/waiting list. We also can’t delete old appointments after selecting a different base time. help would be appreciated, if you need access to ftp or website i would be happy to provide.

      Best regards,

      Marleen.

    • Marleen
      • New Recruit

      Hey Konstantinos,

      The only issue with this is that the time format is in AM/PM, i see youre calling it with a function “function formatAMPM(date) ” can i simply change “formatAMPM” into i.e. “formatDIGITAL” or a comparable function so the time will be in digital format? (we’re dutch so AM PM is not generally used here, this might be confusing for some of the clients).

      edit: Along with that, it doesn’t change the time in the form when you click on it (it says; date and time: 1 januari 1970 00:00) and it still displays the ending time if you select “full day (hele dag)” which might be confusing. We also have some issues with how the appointment time is displayed in the completed/waiting list. We also can’t delete old appointments after selecting a different base time. help would be appreciated, if you need access to ftp or website i would be happy to provide.

      Best regards,

      Marleen.

  • Konstantinos Xenos
    • Rubber Duck Debugger

    Hi Marleen ,

    Sorry for the late reply here.

    Could you please update the code with this snippet:

    <?php

    add_action(
    'wp_footer',
    function() {
    ?>
    <script>
    ( function( $ ) {
    $( document ).ready( function() {
    // change the "300" to the total minutes that you like to add.
    var mins = 300;

    $( '.app_timetable_cell' ).each( function() {
    var txt = $( this ).text(),
    dt = new Date( $( this ).prop( 'title' ) ),
    dtn = new Date( dt.getTime() + ( mins * 60 * 1000 ) ),
    hours = txt + ' - ' + dtn.getHours() + ':',
    minutes = dtn.getMinutes(),
    clone = $(this).find('input').clone();

    minutes = minutes < 10 ? '0'+minutes : minutes;
    $( this ).text( hours + minutes );
    $( this ).append( clone );
    } );
    } );
    } ( jQuery ) );
    </script>
    <?php
    },
    999
    );

    This should fix the hours being displayed in 24hr mode instead ( sorry I missed that on your screenshot I was testing with 12hr clock ) of am/pm as well as the Confirmation dates & timers.

    If you need any further help yes please do share some credentials with me so I can see exactly what the issues are on your end.

    You can send me the information needed privately through our contact form at https://premium.wpmudev.org/contact/#i-have-a-different-question by following this example:

    Subject: "Attn: Konstantinos Xenos"

    - Admin login ( if Multisite please provide Super Admin details ):
    Admin Username:
    Admin Password:
    Login URL:

    - FTP credentials
    Hostname:
    Username:
    Password:
    Port:
    Key-File ( and password ) if needed

    - Link back to this thread for reference
    - Any other relevant URLs -or- information regarding the issue that was not included in this thread

    Regards,

    Konstantinos

  • Panos
    • SLS

    Hi Marleen !

    So sorry for missing this!

    : Along with that, it doesn’t change the time in the form when you click on it (it says; date and time: 1 januari 1970 00:00) and it still displays the ending time if you select “full day (hele dag)”

    Do you mean in the form under the date picker? I just had a look on that form but it is a custom one. Could you provide more info where to look in order to see the date and time se to 1 januari 1970 00:00?

    Thanks!

  • Marleen
    • New Recruit

    Hey Panos, that is no problem. Sorry for getting back to you so late. We’ve decided that we will work on quotation basis, this because we couldn’t find a proper Calendar plugin that was fit for what we were trying to do without a good bit of custom work.

    Thanks for the hard work and good luck with other issues :slight_smile:

    Best regards,

    Marleen.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.