« Printer Sharing with Rendezvous | Main | Installing a Multi-User Calendar (p3) »

Installing a Multi-User Calendar (p2)

In part one of this tutorial, I showed you how to install phpEventCalendar on you web server. In part two, I will show you how to customize the calendar to match the look of your web site.

This is part two of a three part lesson on installing a multi-user calendar on your web server. Part one provides complete installation instructions.

To begin, I duplicate all of the important files that I will be editing (in case I screw up somewhere). You will want to duplicate the following files (with their location in parenthesis);

default.php (phpEventCalendar/templates/)
adminpgs.css (phpEventCalendar/css)
default.css (phpEventCalendar/css)
popwin.css (phpEventCalendar/css)
config.php (phpEventCalendar/)

I usually name then by adding -orig to the file name (default-orig.php, adminpgs-orig.css, etc.)

Now that you have duplicated all of the files that we will be working with, (1) open the page that you want to add the calendar to. I have a template that I have created that I use whenever I am going to be creating a new page. This template has the primary layout of the site that I am working on, with the area for the new information in a table (see image below).

Now, open the default.php file (phpEventCalendar/templates/). Depending on the program you are using to edit your pages, I'm using Adobe GoLive CS, what you will see may vary. You may see HTML code or the page may open in layout view (as mine did). Either way, we need to view the HTML.

We are looking for the phpEventCalendar code. It should start around line 12 and end around line 40 (see image below).

This code is going to be copied and pasted into your page, the template that I referred to earlier. (2) Highlight and copy all of the phpEventCalendar code (see code below).

</tr>

</table>

I would start at <table cellpadding="0" and highlight all the way down to the final </table> (see code above). This will give you all of the code for the calendar.

Next, go over to your template that matches your site and find the location where you want the calendar and paste it. This needs to be done while in HTML or code view.

For those that are new to working with HTML code, I would suggest going back to your WYSIWYG web page editor, and in layout view, find the spot on the page where you want the calendar and typing the word HERE (see image below).

Once you do this, you can then move back to the HTML code view and find the word HERE in the code and that is where you will paste the phpEventCalendar code. You can use this anytime that you are adding code to a page and you don't know where to paste it.

Now that we've pasted the code on the page, the heavy lifting is done. There are just a couple more lines of code that need added.

Find the <head> section of the default.php page. you will see the following code.

<? javaScript() ?>

We will now copy this code and paste it into the <head> section of our template page. Finally, we will save the template page as default.php, making sure that it is saved in the proper directory (phpEventCalendar/templates/). We will then upload all of our files to their proper location on the server.

Once the files are uploaded, direct your web browser to the location of the phpEventCalendar on your web server (http://yourwebpage.com/phpEventCalendar/). You should now see your calendar installed in your page. See my installed sample here: Berkeley Baptist Church Calendar of Events

In lesson three, I'll show you how to change the CSS files to make the Calendar match your site exactly.

Posted by gBrad on October 17, 2004 11:53 AM | Permalink

Social Bookmarking