BreezingForms

 

Here it is explained how to disable certain day(s) of the week in a Responsive Calendar, in other words, how to make it unclickable. Also, styling is added to the disabled day of the week so that users easier recognize that it can't be clicked on.

 

Go to Advanced options of your form > More options > Form pieces > Before Form, set Type to Custom and paste the following code:

echo '<script type="text/javascript">
		JQuery(document).ready(function () {
					
			JQuery("#ff_elem16229_calendarButton").pickadate({
				format: "yyyy-mm-dd", 
				selectYears: 60, 
				disable: [7],
				selectMonths: true,
				editable: true,
				firstDay: 1,
				onSet: function() {JQuery("#ff_elem16229").val(this.get("value"));}
			});
                    
		});
	</script>
<style>
.picker__day--disabled{
background-color: gray !important;
}
</style>
';

This is an example which will disable Sundays.

NOTE: You have to replace ff_elem5113_calendarButton with the ID of your calendar button. To find it you have to inspect that element. Also, replace ff_elem5113 with the right ID of the calendar field.

The part between <style> tags will make the disabled fields background gray. Here you can adjust CSS as you like.

Which days of the week are disabled is explained by the following:

disable: [6,7]

 

To disable the whole weekend, the following code should be added:

echo '<script type="text/javascript">
		JQuery(document).ready(function () {
					
			JQuery("#ff_elem16229_calendarButton").pickadate({
				format: "yyyy-mm-dd", 
				selectYears: 60, 
				disable: [6,7],
				selectMonths: true,
				editable: true,
				firstDay: 1,
				onSet: function() {JQuery("#ff_elem16229").val(this.get("value"));}
			});
                    
		});
	</script>
<style>
.picker__day--disabled{
background-color: gray !important;
}
</style>
';

 NOTE: Replace the ID as explained above.

 

 That will disable the wanted days which can be very useful, especially if the form is used for some kind of reservations or application.