Appointment Hour Booking Blog

Require explicit quantity selection

The default behavior of the plugin is to have the quantity selection starting at 1. If you need to require a more explicit selection of the quantity then a solution is to set the default quantity to 0 making the user select a quantity before selecting a time-slot in the calendar.

For setting the default quantity to 0 you can paste the following custom script in the "General Settings >> Edit Scripts" area of the plugin:

jQuery(document).on('showHideDepEvent', function(){ (function($) { $(".ahbfield_quantity").addClass("validQuantity"); $(".ahbfield_quantity_div").css("position","relative"); addZero = function (){ $(".ahbfield_quantity").prepend('<option value="0">0</option>'); } $("select.ahbfield_service").bind("change", function() { addZero(); $(".ahbfield_quantity").val(0); }); addZero(); $(".ahbfield_quantity").val(0); $.validator.addMethod("validQuantity", function(value, element) { return (value*1>0); }, "Please select a valid quantity"); $(document).on("beforeClickSlot", function(e, eventInfo) { if (!($("#"+eventInfo.name).parents("form").find(".ahbfield_quantity").valid())) { var fieldId = eventInfo.name; var p = fieldId.split( '_' ), _index = ( p.length > 1 ) ? '_'+p[ 1 ] : '', me = ( typeof $.fbuilder[ 'forms' ] != 'undefined' && typeof $.fbuilder[ 'forms' ][ _index ] != 'undefined' ) ? $.fbuilder[ 'forms' ][ _index ].getItem( p[ 0 ]+'_'+p[ 1 ] ) : null; for (var i=0;i<me.allUsedSlots.length;i++) me.usedSlots[me.allUsedSlots[i].d] = []; me.allUsedSlots = []; } }); })(jQuery); });

If you want to display the number of slots next to the selected date even when the quantity selection is "1" then add this style into "Appointment Hour Booking -> General Settings ->Edit Styles" area of the plugin:

#fbuilder .ahb_list_quantity1{display:inline}

Feedback about these features will be welcome, feel free to open a support ticket for any question.