Thyme - A PHP Calendar - Creating a custom event view (2)

Home

Documentation

Integration

Creating a custom event view (2)

Creating a custom event view (2)

We will use extrovert/tutorials/examples/chess_club/index3.php as an example site. Note that you can click on event titles in the example site. We'll cover the following topics:

Using a JavaScript popup to display event information.

An advanced version of creating an event display is examplified in Development Tutorial 1.

Custom Event View 2

We'll take our example used in the Embedding a Calendar tutorial and add custom event view functionality.

Instead of recreating and publishing the calendar again, we can simply change/add a few options.

Change:

$cal->set("event_links", 0);

$cal->set("event_links", 1);

Then add:

$cal->set("event_view_url", "javascript:view_event(%eid, \"%inst\")");

below it.

In the Calendar Publisher, this is the equivalent of checking the 'Event Links' option and changing 'Event Link URL' to javascript:view_event(%eid,%inst) under the 'Events' section.

First we'll create our JavaScript function that will display our event popup.

<script language='JavaScript' type='text/javascript'>

function view_event(eid, inst)
{

   var url = "event.php?eid=" + eid + '&inst=' + inst;
   var opts = "width=300,height=400,menubar=no,toolbar=no,status=no";

   window.open(url, "newwin", opts);

}

</script>

Each time someone clicks on an event link, the eid and inst arguments to view_event() will be that event's id and instance date.

Now we must create event.php. We'll need to copy and paste a few things from our main calendar page. Optionally we can use the calendar publisher again, but this would be overkill. We'll need the lines:

############################################################

# base path of thyme with trailing slash
define("_CAL_BASE_PATH_", "/usr/local/apache/htdocs/thyme/");

# base url of thyme with trailing slash
define("_CAL_BASE_URL_", "http://192.168.1.111:80/thyme/");

require_once(_CAL_BASE_PATH_ . "include/classes/class.calendar.php");

############################################################


$cal = new calendar();

Then we'll add the line:


$e = $cal->get_event($_REQUEST['eid'], $_REQUEST['inst']);

This will grab the event information. $_REQUEST['eid'] simply means 'eid' as set in the request. Remember that we set 'event_view_url' to our JavaScript function that will point to event.php?eid=%eid&inst=%inst.

$e now contains all the information listed in the Event Variables section of the API Reference. In the body of event.php we can simply display (or echo()) any of the event information. I've used the following code to do this:



<table width='300' align='center'
        style='
        border: 1px solid #fff;
        padding: 0px;
        border-collapse: collapse
'>
<tr valign='middle'>
   <td align='center' bgColor='#000000'>
      <h2><?php echo($e->title); ?></h2>
      <hr>
   </td>
</tr>

<tr>
   <td align='left'>
   <?php echo(nl2br($e->notes)); ?>

   <br><br>

   <b><font color='#000000'>Address:</font></b><br>
   <?php echo($e->addr_st); ?><br>
   <?php echo($e->addr_ci); ?><br>
   <br>
   <b><font color='#000000'>Phone:</font></b> <?php echo($e->phone); ?>
   <br><br>

   </td>
</tr>
</table>

<input type='button' value='Close' onClick='self.close()'>

We've also added a 'Close' button at the bottom to close the window. The event view function is now created and will change depending on which event link is clicked on calendar.

View entire source:

View example site:

extrovert/tutorials/examples/chess_club/index3.php