Pages

Saturday, October 1, 2011

A Youtube video a day makes Jack (or Jill) a Web 2.0 boy (or girl) - how to embed Web 2.0 code inside an ACal Calendar


Ever heard of the ACal Calendar Project? Arthur Wiebe's ACal Calendar is one of those unsung heroes of freeware PHP Calendars.Today's post is something that just hit me as I was about to knock off to bed. So this post is going to be as concise as possible, and yet leave you wanting for more information. So you'll have to figure out the installation steps by yourself for the time being.[Note: I added the installation steps on the next day]



I've been using the ACal Calendar system on my Moodle site for sometime. I knew that I could embed images in it. Like in the below embedded website. Use the vertical scrollbar to scroll the content downwards. Then you will see the images inside the calendar.



Now, the crux of the matter in this post is that I have discovered that you can actually insert Web 2.0 embed code inside a day's cell. And when you do, you can get something like this:


The calendars above are LIVE! If you prefer to access the live demo from a Web browser, go here: http://scm.moodleace.com/calendar226/calendar.php?year=2011&month=10
What do you see inside the calendar? I see a TED video, a VoiceThread, three Youtube videos, one Flash "fishy" widget and one live OKMindMap! Each Web 2.0 object can be of any size within a cell. Is this information overload?

Here are TWO examples of how the ACal Calendar could be used, aside from being an ordinary diary of sorts:

  1. The facilitator could embed Youtube videos (or any other Web 2.0 content), one for every day of the week, for the student to watch as homework (poor student!). Make sure you have a fast Internet connection though...
  2. As a "This Day In History" with embedded content from TED.com, Wikipedia, Flickr or other history-related content on the Net.

PAUSE...and THINK!

Could there be any use for a matrix of Web 2.0 objects inside a calendar? What do you think? If you intent to use ACal Calendar to embed Web 2.0, please let me know how you are using such a mashup.





How to install ACal Version 2.26


1. Go to the ACal homepage, http://acalproj.sourceforge.net, and download the installer file.




2. Extract the zipped file ACal-2.2.6.tar.gz and upload it to your server.

    On my Moodle site, I uploaded the folder kalendar266 to my root Moodle folder.



3. Point your Web browser to the index.php file of the installer subfolder.

    The rest is now easy.


4. The Installer mini-screen appears.


5. Enter an Administrator username and a password.


     Click the "Start Install" button.


6.  The Confirmation Screen appears.


     What a sight for sore eyes! Hallelujah! It works! Now click the "Visit Calendar" link.


7.  Your calendar now appears.


It's empty of course. It's wating for the administrator (that's you!) to populate it with content. Events, homework details, reminders, etc.


8. Click on one of the  icons.


Enter your Administrator Username and Password.

    Remember the earlier username and password? You didn't write them down? Aw, shucks!



9. The Add Event dialogue box appears.


Enter the title of your event as well as the description.

Note: the description edit box accepts HTML code. This means that you can embed Web 2.0 code inside a Calendar event! Yes, that's right. You can embed any Web 2.0 object, just as you would in a Moodle editor with the HTML mode (or button) switched on.


10. The event confirmation message appears at the bottom of the current dialogue box.


Note: You can add more than one event in the same day's cell.

You may now close the window.


11. Your event appears on the current day's cell on the Calendar.


Now is this impressive or what?


12. Accessing the Calendar from your Moodle site from a HTML block.

You can access your calendar via a HTML block. Here's what I did on my Moodle production site:



The code inside my HTML block is:

<a target="new" href="../calendar_custom/calendar.php"><img src="http://scm.moodleace.com/file.php/1/images/planner.jpg"/><\a>

Clicking on the planner icon brings up the calendar as a new window.



13. A few final details

If you don't like the default colours of the calendar, you can always edit and modify the CSS file named style.css. You can change the colour, fonts and overall look of the calendar and events.

There is no email notification when an event is added. This is a feature in ACal version 3.0a3. However as of the time being, I have no idea how to install version 3.0a3. So that part of Web 2.0 is sorely missing from version ACal 2.26. I mean, what's the use of spending hours setting up the calendar with events when the students are not informed of it via email, social network messaging or SMS?


Well, that's all about ACal 2.26 from me. If you have any questions, insights or opinions about using a PHP calendar on your Moodle site to display Web 2.0 content, please feel free to leave a comment.

Happy Moodling!
Frankie Kam







APPENDIX

The following is taken from the file Manual.html which is inside the download zip file.

Actually my ACal installation instructions above should suffice to get you started. The text below is just to make my post look more technically impressive (read: longer). At least I'm honest.

ACal 2.2 Manual

  1. Quick Installation
  2. Manual Installation
  3. Upgrading
  4. Troubleshooting
  5. Embedding
  6. More Information

Quick Installation

We at the ACal Project try to make your initial experience with the ACal calendar as enjoyable as possible. Here's some step by step instructions if you need help.
  1. Expand the downloaded file. (Example: ACal-2.0.tar.gz)
  2. Inside the new folder you'll find this manual and the license. If you want to know what you're getting into read the License and if not continue.
  3. Upload or copy the calendar folder to your web server.
  4. (If you are using Windows you can skip this part) Set the permissions of the calendar folder so that anyone can write to it. You can either use the chmod command or in Mac OS X using the Info panel. All good FTP client have a chmod feature as well.
  5. Go to it in your web browser and complete the installation by running the web based installer.
If you get any errors consult the Troubleshooting section.

Manual Installation

If you just can't get the installer to work or simply want to install by hand. Here's some information on how to accomplish that.
  1. Follow Quick Installation instruction up to step 4.
  2. Make a folder named data and one named uploads.
  3. Chmod if needed so anyone can write to the new folders.
  4. In the installer>contents folder copy style.css, vault.php, and version.php to your calendar folder.
  5. Chmod if needed to anyone can write to the 3 new files.
  6. Copy prefs.php to the data folder which is inside your calendar folder. Chmod it as well.
  7. Go to the calendar in your web browser.
  8. Click on the login link at the bottom.
  9. Do not fill in anything and press the Login button.
  10. Add a new user.
You should be done now. Note that after you add a new user you will no longer be able to login with a blank user name and password.

Upgrading

Currently to upgrade your calendar you will need to download the latest version and simply replace your old  calendar with the new one, except for the data folder and the txt files inside (prefs.php should be replaced), and your header and footer if you are using them.
A better solution is being developed where the calendar will be able to self-update.

Troubleshooting

Errors when installing

Make sure you set the permissions of the calendar folder so that anyone can write to it, by using chmod or your FTP client.
If it still doesn't work check whether or not you have safe mode turned on. If it is on you have to do a manual installation.

Embedding

Embedding the ACal calendar is getting better with each release. It is very easy and does not require much skill at all. Here's how to do it.

Using PHP:

 Before you try  embedding using PHP, take a look at the example in the example folder. Then follow these instructions.


In between the <head></head> tags copy and edit this code as needed:
<?php
    $view = "day"; // Can be month or day.
    $path = "path/to/calendar/"; // Relative or absolute path to calendar folder. Must have a trailing slash.
   
    // Do not edit the rest unless you know what you're doing
    echo '<link rel="stylesheet" title="Default" type="text/css" href="' . $path . 'style.css" />';
    if ($view == 'month' || isset($_GET['view'])) {
        echo '<script src="' . $path . 'e_edit.js" type="text/javascript"></script>';
    }
?>
You must edit the bold underlined text. Where it says day you can change it to month. And you must change the path to the real path to your calendar folder.

Then anywhere in the body, copy this code but do not edit it.
<?php
// DO NOT EDIT
if (!isset($_GET['view'])) {
    include $path . 'embed/' . $view . '.php';
}
else {
    include $path . 'embed/' . $_GET['view'] . '.php';
}
?>

Using Frames:

You can also combine the calendar with your web site using frames. Here's an example.
<frameset cols="100,*">
 <frame src="yourpage.html" name="main" />
 <frame src="path/to/calendar/" name="calendar" />
</frameset>

It will create a left frame 100 pixels wide and a right frame using the remaining space containing the calendar.

More Information

For more information see the following:

The end. Really. Bye!

If you like this post or site
a small donation would be nice but would last only a day,
otherwise leaving a comment (or a compliment) below will last me a month!

Ratings and Recommendations by outbrain