Calendar Blackout Dates

I’ve been working on a friend’s site over at JKBinstalls.co.nz It’s nothing too crazy but has a form or a couple of forms that can help them with setting up appointments, the general put your name, email, and a few details about what you’re looking for.

The interesting bit came through with adding a calendar so you can pick what day you want the guys to come around. General jQuery datepicker showing inline which is all well and good except we needed the ability to block out the dates they can’t get around as they are already booked out.

This doesn’t seem to be something that is done very often in the way I’m looking for, possibly because it’s in wordpress or php or html or mysql or maybe I just don’t know the right tools for doing this, or I’m just searching the wrong key words. I’m running a backend page that looks pretty much the same as the front end but behind a login and only has the datepicker, this drops the date in a mysql database but bringing that array back into the front end page to block off the dates took a minute to figure out.

The database comes back in as an array and needs to be converted a single variable which can then be thrown into the script tag, this is the front end form.

I’m missing stuff on the fail states, errors security and things like that but for right now it’s working and you can check out some dates that have been blacked out on http://www.jkbinstalls.co.nz/rangehood/


<form action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" enctype="multipart/form-data" method="post" novalidate="" data-abide="">

  <input name="action" type="hidden" value="black" />
  <input name="data" type="hidden" value="blackid" />

  <!-- take the mysql database and turn it into a single string that I can then drop into the datepicker for blacout dates -->
  <?php $array = $wpdb get_col( "SELECT dates FROM jkb_blackout;" );
	$string = '';

	foreach ($array as $key => $value) {
	  $string .= ",$value";
	} ?>

  <script type="text/javascript">
	var disdates = <?=json_encode($string);?>
	jQuery(document).ready(function($){
	  jQuery('#dates').datepicker({
		dateFormat : 'yy-mm-dd',<br />
		onSelect: function(dateText, inst) {
		$("input[name='dates']").val(dateText);
		},
		beforeShowDay: function(date){
		  var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
		  return [ disdates.indexOf(string) == -1 ]
		}
	  });
	});
  </script>

  <div class="row">
	<div class="small-12 medium-9 medium-push-3 columns">
	  <div id="dates"></div>
	  <input name="dates" type="hidden" value="dates" />
	</div>
  </div>
  <div class="row">
	<div class="alert callout" style="display: none;" data-abide-error="">
	  <i class="fi-alert"></i> There are some errors in your form.
	</div>
  </div>
  <div class="row">
	<div class="show-for-medium medium-3 columns"></div>
	<div class="small-12 medium-9 columns"><button type="submit">Submit</button></div>
  </div>
</form>

Then the code for the functions.php file

<?php
// deals with variable set through form _POST
// Blackout
function prefix_admin_black() {
  // deal with the upload
  if ( ! function_exists( 'wp_handle_upload' ) ) {
	require_once( ABSPATH . 'wp-admin/includes/file.php' );
  }

  // Extremley Important to set
  global $wpdb;

  // Whats inserted
  $wpdb->insert( jkb_blackout ,
  array(
  'dates' => $_POST['dates']
  )
  );

  // this give the unid in the next url
  $id = $wpdb->insert_id;

  // fail safe if above zero was inserted to database
  if ($id>0) {
	wp_redirect( home_url() . '/black' );
  } else {
	wp_redirect( home_url() . '/sorry' );
  }
  exit();
}
add_action( 'admin_post_black', 'prefix_admin_black' );
add_action( 'admin_post_nopriv_black', 'prefix_admin_black' ); ?>
				

Exlpore More

I’ve been working on a friend’s site over at JKBinstalls.co.nz It’s nothing too crazy but has a form or a couple of forms that can help them with setting up appointments, the general put your name, email, and a few details about what you’re looking for. The interesting bit came through with adding a calendar […]

Explore Premiere Pro CC – Auto Nesting

Leave a Reply

Your email address will not be published.

Tags