We will use extrovert/tutorials/examples/chess_club/index.php
as an example site and cover the following topics:
Initial Setup
We're assuming that we are the web master for our local chess club and that we also use Thyme
to keep track of personal events. We'll want to create an calendar specifically for our
chess club so that we may easily distinguish chess club events from other events as examplified
in the screen shot below.
To make sure that this calendar is accessable to any visitor, the Guest user must be added to it's members list.
Next we'll add our events to the 'Chess Club' calendar
As you can see, we have practice on Thursday every week and a tournament on the first Sunday
of every month, and we've added these events to Thyme.
Month Calendar
Using the Calendar Publisher, we'll generate the PHP code that will allow us to embed
our calendar into our Chess Club site. Here are the options we've set as well as reasons
for setting them:
- General
- Calendar - Chess Club. Events from our Chess Club calendar will be displayed.
- View - Month. We want to create a calendar that displays
a month.
- Date - check the box Set to Current Date. We want the
calendar to default to using the current date.
- Week Starts On - Monday. We want our
weeks to start on Monday
- Hour Format - 12 hr. We want to use a 12 hour format.
This will display 'p' for PM and 'a' for AM. E.g. 2p instead of 14 ("military time").
- Static - Checked. We do not want day numbers to be
links.
- Hightlight Day - Checked. We would like the current
day to be highlighted.
- Hightlight Week - Unchecked. We do not want the current
week to be highlighted.
- Width - blank. We'll use a table in our site to control
the calendar's width.
- Style Editor
- Use Theme - default. The default theme makes no changes to
html code and is the best option since we are going to use our own style.
- Apply Style From - Style Editor. We want to use the
Style Editor to
alter the look of the calendar so that it matches the look of our
site.
- Edit Style - This is self-expanitory and is used to change the
look of the calendar to match the look of our site
- Events
- Show Events - Checked. We want to show events.
- Event Notes Popup - Unchecked. We do not
wish to see event notes popups.
- Event Links - Unchecked. We do not wish for our
events to be clickable links. All relevant information is contained
in the title.
- Show Event Type Names - Not important. Our calendar will not use event types. All of them are for the chess club.
- Event Popup - Not important. Our events will not be clickable links.
- Event Link Url - Not Important. Same reason as above.
- Locale
- Set to our Timezone and Daylight Savings Time configuration.
- Header
- Show Header - Checked. We want to display the calendar's
header.
- Align Header Text - Center. We want the header text to be
centered.
- Header Text - Events in %month. The default header
text is
fine.
- Show Header Links - Checked. We want Next/Previous buttons
in our header
- Previous Link - <<. This is our
custom 'Previous' text. Since we are not using an image, leave 'Image Url' unchecked.
- Next Link - >>. See
explanation above.
- Note that in HTML, you should use > to display a > and < to display
a <.
- Day View
- Not important. Our calendar displays the month.
- Month Views
- Show Weeks - Unchecked. We do not wish to display
week numbers.
- Row Height - Leave Blank. The
default height is fine for us.
- Limit Weekday Names To - blank chars.
We want to display full weekday names.
- Mini Month Date Link - Not Important. We are creating a month view
not a mini month.
Excluding CSS, this generated the following code:
<?php
############################################################
# base path of files, with trailing slash
define("_CAL_BASE_PATH_", "/usr/local/apache/htdocs/thyme-0.93/");
# base url for calendar, with trailing slash
define("_CAL_BASE_URL_", "http://192.168.1.111/thyme-0.93/");
include_once(_CAL_BASE_PATH_ . "include/classes/class.calendar.php");
############################################################
$cal = new calendar();
# general
#############
$cal->set("calendar", 1);
$cal->set("week_start", 1);
$cal->set("hour_format", 12);
$cal->set("static", 0);
$cal->set("hil_day", 0);
$cal->set("hil_week", 1);
# locale
####################
$cal->set("timezone", -5.0);
$cal->set("dst", 13);
# events
####################
$cal->set("event_links", 1);
$cal->set("show_events", 1);
# header
##############
$cal->set("show_header", 1);
$cal->set("show_header_links", 1);
$cal->set("header_align", "m");
$cal->set("img_next", "images/next_sm.gif");
$cal->set("img_prev", "images/prev_sm.gif");
# day view
###############
$cal->set("time_interval", 2);
$cal->set("workday_start_hr", 9);
$cal->set("workday_end_hr", 18);
# month view
###############
$cal->set("show_weeks", 0);
$cal->set("abbr_weekdays", 3);
?>
The CSS code as well as the <?php $cal->appply_style(); ?> line (these
are excluded from the code above for readibility) should go between your <head>
tags as per W3C specifications. This is also exemplified in the generated code as HTML
comments.
Printing the Calendar
We can cut code that prints the calendar
$cal->display_month();
... and paste it into our
Chess Club site.
The resulting source looks like this:
<table width='800' align='center' style='
border: 1px solid #fff;
padding: 0px;
border-collapse: collapse'
>
<tr> <td>
<?php
$cal->display_month();
?>
</td> </tr>
</table>
As you can see, I've pasted the PHP code into a table I've created that controls
the calendar width, and displays a solid white border around it. This is merely
for aesthetic reasons.
View entire source:
View example site:
Conclusion
We can now update our Chess Club events through Thyme just as we would any other events and they will
be displayed on our Chess Club web site. Since we've used a different calendar, our personal
events will not interfere with our Chess Club events.
Updates to 'Chess Club' events will update the calendar on our Chess Club site in real time.
There is no nead to re-generate any code or 'publish' a new calendar.
|
