iframe

Possibly the simplest method of including the calendar within your web is to use an "iframe".
This involves nothing more than simply placing the url of the calendar in the "src" attribute of the iframe tag like this:

<iframe width="700px" height="400px" src="/calendar/index.php"></iframe>
Unless you want to get your hands dirty with php code (see below), I suggest that you use this iframe method to include the calendar in your website.

PopUp window

A few years ago this would be a possibly the most common method for showing this sort of information. However, in recent years most browsers block popup windows so it is unlikely that your users will actually ever see the window.
There are many examples of popup window scripts on the internet but I have included an example in case you want to use this method.

<script language="javascript" type="text/javascript">
<!--
function popCalendar(url) {
	calendarWindow=window.open(url,'name','height=200,width=500');
	if (window.focus) {calendarWindow.focus()}
	return false;
}
// -->
</script>

<a href="/calendar/index.php" onclick="return popCalendar('/calendar/index.php')">
see calendar</a>
It is worth noting that, with this particular function, if the user has javascript turned off, the calendar will simply open in the browser.

PHP integration

Ideally this is the method your should choose as it completely embeds the calendar in yo.ur page, however it does require a certain amount of php and html knowledge.
To implement the calendar this way you need to do the following things:

  • Include the calendar php file. eg.:
    require_once(ac-includes/cal.inc.php);
    This file will include all the various calendar configuration files which, amongst many other things will define the php constant variables that are then used in the following code snippets.
  • Include the calendar CSS and Javascript files:
    <link rel="stylesheet" href="<?php echo AC_DIR_CSS; ?>avail-calendar.css">
    <script type="text/javascript" src="<?php echo AC_DIR_JS; ?>mootools-core-1.3.2-full-compat-yc.js">
    <script type="text/javascript" src="<?php echo AC_DIR_JS; ?>mootools-cal-public.js">
    
  • Define the basic javascript variables using the built-in variables (note this method will be simplified in the next release):
    var url_ajax_cal = '<?php echo AC_DIR_AJAX; ?>calendar.ajax.php';
    var img_loading_day = '<?php echo AC_DIR_IMAGES; ?>ajax-loader-day.gif';
    var img_loading_month = '<?php echo AC_DIR_IMAGES; ?>ajax-loader-month.gif';	
    var id_item = '<?php echo ID_ITEM; ?>';
    var lang = '<?php echo LANG; ?>';
    var months_to_show = <?php echo AC_NUM_MONTHS; ?>;
    var clickable_past = '<?php echo AC_ACTIVE_PAST_DATES; ?>';
    
  • Show the calendar where you need it in your html code:
    <div id="the_months">
    <?php echo $calendar_months; ?>
    </div>
    
  • Calendar Navigation
    Note - do NOT change the id value of these elements as they are used by the javascript to detect the action required.
    <div id="cal_prev" title="'.$lang["prev_X_months"].'">
      <img src="'.AC_DIR_IMAGES.'icon_prev.gif" class="cal_button">
    </div>
    <div id="cal_next" title="'.$lang["next_X_months"].'">
      <img src="'.AC_DIR_IMAGES.'icon_next.gif" class="cal_button">
    </div>
    
  • Calendar Key and last update date:
    <div id="key_wrapper">
      '.$calendar_states.'
      <div id="footer_data">
      '.$lang["last_update"].': '.get_cal_update_date(ID_ITEM).'
      </div>
    </div>
    
To see a working example of how this all fits together, take a look at the index.php file that is included in the download package.

Finally, for more help, try posting your questions on the Ajax Availability Calenda Forum

Coming soon!

The new version front-end features:
  • No JavaScript libraries
  • No images
  • No iFrames - code loaded via JS
  • Simple CSS
  • Responsive:
    • Automatically calculates the number of months to show.
    • The code recalculates the number of months to show the browser window is resized.
  • Uses built-in PHP functions and data to define local language texts.
ServWise - Low cost, reliable and fast hosting with 24/7 support

Help with installation?

The calendar script is very simple to set up on your server. However, if you prefer, I can install the calendar on your server for you.
Requirements:
  • Server running PHP
  • One Mysql Database. If you don't have one, your hosting provider should be able to create one for you.
I will of course also require ftp access to your server. The cost for this service is 40 Euros * (payable via Paypal) however this may need to be adjusted if you have "special" installation requirements.
If you are interested in this option, don't hesitate to contact me via my contact form. I will get back to you as soon as possible.

* Not included in base price:
  • Functionality customization.
  • Skin modifications (css & layout).
  • Database creation.