Take a look at my other projects & resources, such as the
urls2links php functions for converting web addresses to HTML links.

m-bread Flash Calendar

Skip to: Description, example, technical documentation (menu, months, errors & status messages), files (zip, swf, html, menu, months), source, license.

Description

This is an interactive calendar, useful for putting on personal or group web pages to inform people of when events are happening.

You need to have Macromedia Flash plug-in installed to view this calendar.

The calendar displays one month at a time. Days with events are shown with a rectangle around them. Click the rectangle to display the information about the event.

When the calendar is loaded it displays the current month. The current date is shown in a circle.

Use the menu at the top to view other months. (Note that the current month may not be listed in that menu, in which case it can be returned to by reloading the web page.)


Technical documentation

The calendar is a single .swf file which can be embedded in a web page. The menu is defined in an xml file, and each month has its own xml file containing the events happening that month. See the files list below to view or download the files.

The ActionScript code for loading the xml files and creating the menu was based on the XML-driven drop-down menu from kirupa.com.

The swf & html files

You can embed the flash file into a web page by using the HTML shown below or in the calendar.html file. The code shown here will work in all major browsers which have the flash plug-in installed, and also validates as valid XHTML.

The menu xml file

The menu is loaded from a file which must be called menu1.xml and be located in the same folder as the page which the calendar is shown on. Note that this may be different from the folder where the flash file is located. (This allows different pages to use the same flash file but have a different menu and different events.) The namespace for this xml file should be http://m-bread.com/resources/calendar/.

The xml file has a root menu element which contains the items for the menu. Each item can either be an item element or another menu element, which creates a submenu. Each menu element can have a name attribute, which is used as the label on the sub-menus. This is ignored for the root element.

Each item element also has a name attribute for its label. The action taken when the item is selected is defined by the action attribute, which can contain one of the following values. The variables attribute provides a parameter (detail) for the action.

changeMonth
Action: change which month is displayed
Variable: the month to display, in the format yyyy-mm
newMenu
Action: load a new menu
Variable: the path to the xml file containing the new menu, relative to the web page containing the calendar (In the example on this page this is used in the 'reload menu' item, where the parameter is the name of the menu already being used)
gotoURL
Action: load a web page
Variable: the URl of the web page to load

See the example menu1.xml below, which contains all three of these actions and is used in the example calendar above.

The month xml files

When a month is displayed, the events for that month are loaded from an xml file named in the format yyyy-mm.xml. This file must have a month root element, which should contain a number of event elements. Each event element must have a name element containing the event's name or title, and a date attribute containing a number between 1 and 31 specifying the day of the month on which this event will happen.

The event element should contain a description of the event, which may contain the following HTML elements for formatting: <br/>, <b>, <i>, <u> and <a href="...">. Note that links (the <a> element) will not be underlined, so you should also contain them within <u> tags to show users that they are links. As it is an XML file, not an HTML file, the <br/> tags should have a self-closing slash as shown here.

The namespace for this xml file should be http://m-bread.com/resources/calendar/, and the file should not contain an xml processing instruction ('PI'): <?xml version="1.0"?>.

When the calendar is loaded, it looks for an xml file for the current month whether it is specified in the menu or not.

See the example month, 2012-11, below.

Errors & Status Messages

The calendar notifies the user of its status through messages in the status bar. The possible messages, and their meanings, are as follows:

Month loaded;
The month requested (or the current month if the calendar was just loaded) has been successfully displayed. If there are any errors in the xml file then they will be ignored and this message will be displayed anyway. If the xml file starts with an xml processing instruction ('PI'): <?xml version="1.0"?>, then the calendar will not be able to find any events in that file. Such PIs should be omitted.
No events found for this month
The calendar could not find and xml file for the month it was trying to display.
Error: Calendar not fully loaded (XML01)
The calendar could not find the menu xml file. This must be called menu1.xml and located in the same directory as the page the calendar is displayed on. It must also be under the same domain name (web site) as the flash file. The words [Select Month] will be displayed where the menu should be.

Files

Zip file

calendar.zip

Download all the following files in one zip archive.


Flash file

calendar.swf

The calendar flash (.swf) file. This can be embedded in a web page or loaded on its own.


Xhtml file

calendar.html

This is the XHTML code to embed the calendar into a web page. To copy this into your own web page, copy the <p> element and everything it contains. This code will validate as valid XHTML, as long as the <object> element is kept within a <p> or <div> element.


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb">
<head>
<title>Calendar</title>
</head>
<body>
<h1>Calendar</h1>
<p><object id="cal" type="application/x-shockwave-flash" data="calendar.swf" width="400" height="300" class="left">
<param name="movie" value="calendar.swf" />
You need to have Macromedia Flash plug-in installed to view this calendar.
</object></p>
</body>
</html>
Xml file

menu1.xml

This an example menu, as used in the demonstration at the top of the page. The layout of this file is described in the technical documentation above.


<?xml version="1.0"?>
<menu xmlns="http://m-bread.com/resources/calendar/">
   <menu name="2012">
      <item name="November" action="changeMonth" variables="2012-11"/>
      <item name="December" action="changeMonth" variables="2012-12"/>
   </menu>
   <menu name="2013">
      <item name="January" action="changeMonth" variables="2013-01"/>
   </menu>
  <item name="Reload Menu" action="newMenu" variables="menu1.xml"/>
  <item name="Help..." action="gotoURL" variables="http://m-bread.com/resources/calendar"/>
</menu>
Xml file

2012-11.xml

This an example month, as used in the demonstration at the top of the page. The layout of this file is described in the technical documentation above.

The other example months referenced by the example menu are available in the zip file or here: 2012-12.xml, 2013-01.xml.


<month xmlns="http://m-bread.com/resources/calendar/">
  <event date="1" title="First example">
    This is an example of an event on the first day of the month.<br/><br/>
    Here you can put information on where & when the event is, how to get there, cost, and
    anything else that they need to know, including <a href="/resources/">links</a>.
    The links work even though they don't show up as links. However, you can
    <u>underline</u> them using the 'u' HTML element.<br/><br/>
    <b>Opens from:</b> 6.30pm<br/>
    <b>Starts:</b> 7pm<br/>
    <b>Finish:</b> 8pm<br/><br/>
  </event>
  <event date="15" title="Another event">
    If the description is too long, you can scroll down using the scroll bar on the right,
    but if not then the scroll bar is still visible.
  </event>
</month>

Source

The source of this calendar is not available as it was created using a non-standard tool. However, there are various commercial tools available for reverse-engineering flash animations. You are free to use such tools on this calendar under the condition that the resulting source code is used under the terms of the calendar's licence.

License

Creative Commons License This m-bread Flash Calendar is licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales License by Martin Pain. This means you are free to use, distribute and modify the calendar, as long as you distribute any work you use it in under a similar licence. Click on the image or licence name for more information.

Any source code created by reverse-engineering the calendar is also licensed under that same license.

Take a look at my other projects & resources, such as the
urls2links php functions for converting web addresses to HTML links,
or title cloaking for changing your browser's title bar.