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>

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>

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>