How to Create an Interactive Calendar Using Imapbuilder

Google Calendar is a time management introduced by Google, which is a new and rapidly-adopting method for users to view and add events from one date to another without reloading the page. The events are stored online, plus pre-registration of Google account is required. In addition, the calendar can't be integrated into a website easily, as well as the image associated with an event can't be shown. Such kind of limitations prompt users to find other alternative methods to create a user-friendly, simple yet attractive software to create an interactive flash calendar. This tutorial will take you through the steps of creating a flash calendar using iMapBuilder- a flash software originally designed to build flash maps, now you can import your custom own calendar image and add events with image/information displayed in an infobox.

Steps

  1. Image titled Create an Interactive Calendar Using Imapbuilder Step 1
    1
    Download the interactive flash building software from its official website and install in your computer.
  2. Image titled Create an Interactive Calendar Using Imapbuilder Step 2
    2
    Run the software, click the icon "Create" to create a new map.
  3. Image titled Create an Interactive Calendar Using Imapbuilder Step 3
    3
    Click the icon 'Import a custom map image' and select the calendar image you would like to insert.
  4. Image titled Create an Interactive Calendar Using Imapbuilder Step 4
    4
    In the Map Options tab, set the calendar title, layout and size. You can check the box "Zooming Function" to allow the users to zoom in/out and navigate the calendar.
  5. Image titled Create an Interactive Calendar Using Imapbuilder Step 5
    5
    Add events to your calendar. Click "Points and Lines" button under the "Map Options" tab and a pop-up window will be displayed, click the 'red pin' at the top and place on the date to represent an event. You can enter the name and description for the event.
  6. Image titled Create an Interactive Calendar Using Imapbuilder Step 6
    6
    Display image and description. Click "Mouse Over" or 'Move Click' tab, select the tooltips style, add description and image associated with the event. This way when user mouse hover/ mouse clicks the icon of the calendar, an infobox will be displayed with those text and image. Click 'Apply' to save the settings.
  7. Image titled Create an Interactive Calendar Using Imapbuilder Step 7
    7
    Enrich your calendar. You can also add labels, lines, curves and logo to make your calendar more outstanding.
  8. Image titled Create an Interactive Calendar Using Imapbuilder Step 8
    8
    Click "Preview" in the menu bar to see how it will look in the browser.
  9. Image titled Create an Interactive Calendar Using Imapbuilder Step 9
    9
    Select File->Publish and select the folder you would like to publish the calendar.
  10. Image titled Create an Interactive Calendar Using Imapbuilder Step 10
    10
    After publishing the calendar, a "Publishing" pop-up window will be displayed. Copy and paste the embed code into your existing webpage using Dreamweaver/Frontpage or any other HTML editors.
  11. Image titled Create an Interactive Calendar Using Imapbuilder Step 11
    11
    Save the webpage (e.g myWebPage.html), navigate to the publish folder and copy the "imapbuilder" folder to the same directory as the myWebPage.html
  12. Image titled Create an Interactive Calendar Using Imapbuilder Step 12
    12
    Click Ftp Setting to set the ftp information.(Please do not fill in http:// or ftp:// in the Ftp Host)Default Host Directory is the path to your root directory of your server, you can leave it blank if you don't have this information. (Usually, it will be /public_html, /htdocs, /var/www/html, you may contact with your webhosting to get this information.)
  13. Image titled Create an Interactive Calendar Using Imapbuilder Step 13
    13
    After you set the ftp information, click Upload in the publishing screen.
  14. Image titled Create an Interactive Calendar Using Imapbuilder Step 14
    14
    Select Remote Folder if necessary and click Upload to start uploading.
  15. Image titled Create an Interactive Calendar Using Imapbuilder Step 15
    15
    After upload finish, you can browse the flash calendar by clicking the URL link and you can modify the URL link if not appropriate.
  16. Image titled Create an Interactive Calendar Using Imapbuilder Step 16
    16

Sources and Citations

Article Info

Categories: Software