This How-To shows a method to display the booking time, in local time, in a tooltip.

This could be used if your customers are in a different time zone than you.

 

There are two steps required:

1. Edit the gad_ajax file so it places your site's offset from UTC into a hidden field. The client JavaScript code needs to know this.
2. Add a JavaScript override to the script.js file to generate a new title for the timeslot on mouseover.

 

---

Step 1

The file that builds the grid is gad_ajax.php, or is you are using the Show Time on Y-Axis option it is gad_ajax2.php.

At the bottom of the gad_ajax.php file add the red code.

<input type="hidden" name="grid_previous" id="grid_previous" value="<?php echo $grid_previous ?>">
<input type="hidden" name="grid_next" id="grid_next" value="<?php echo $grid_next ?>">
<input type="hidden" name="pxm" id="pxm" value="<?php echo $pxminute ?>">
<?php
    $tzo = new DateTimeZone($timezone_identifier);
    $int_tz_offset = timezone_offset_get ( $tzo , new DateTime("now", $tzo));
?>
<input type="hidden" id="tzo" value="<?php echo $int_tz_offset/60;?>" />

 

---

Step 2

Edit file: \components\com_rsappt_pro3\script.js

At the bottom of the file add the code:

function checkWhoBooked(which){
  // Override to show local time instead of who booked.
  // Get the onclick so we can parse out the ts date start and end times.
  var ts_onclick = ""+document.getElementById(which).childNodes[0].onclick;
  var i = ts_onclick.indexOf("selectTimeslot(",0);
  ts_onclick = ts_onclick.substring(i+16);

  var ary_selected = ts_onclick.split("|");
  var resource = ary_selected[0];
  var startdate = ary_selected[2];
  var enddate = ary_selected[2];
  var starttime = ary_selected[4];
  var endtime = ary_selected[6];

  var d = new Date()

  // get browser timezome offset from UTC
  var n = -d.getTimezoneOffset();

  // get site timezone offset from UTC
  var site_tz_offset = parseInt(document.getElementById("tzo").value, 10);

  // get difference in offsets
  var diff_in_minute = n-site_tz_offset;

  var timeslot_start_as_datetime = new Date.parse(startdate+" "+starttime);
  var timeslot_end_as_datetime = new Date.parse(startdate+" "+endtime);

  // add offset diff to teh booking dat/time to get booking in browser local time
  var original_slot_start = timeslot_start_as_datetime.toString("h:mm tt");
  var original_slot_end = timeslot_end_as_datetime.toString("h:mm tt");

  var slot_start_as_local = timeslot_start_as_datetime;
  var slot_start_as_local = slot_start_as_local.add({ minutes: diff_in_minute });
  var slot_end_as_local = timeslot_end_as_datetime.add({ minutes: diff_in_minute });
 
  var msg = timeslot_start_as_datetime.toString("d-MMM-yyyy")+"\n";
  msg += original_slot_start + " - " + original_slot_end+"\n";
  msg += "Your time:\n";
  msg += (slot_start_as_local.toString("d-MMM-yyyy")+"\n");
  msg += (slot_start_as_local.toString("h:mm tt") + " - " + slot_end_as_local.toString("h:mm tt"));
  // change the title of the slot to the msg
  document.getElementById(which).childNodes[0].title = msg;

}

 

That's it.

Image below shows my Joomla set to Toronto timezone and me in Calgary.
10:00 AM in Toronto is 8:00 AM Calgary.