TweetFollow Us on Twitter

Building Web Calendar

Volume Number: 15 (1999)
Issue Number: 9
Column Tag: Web Development

Building a Web Calendar

by Seth Ganahl (ganahls@eou.edu)
Edited by Bill Doerrfeld, Blue World

Web apps with Lasso and FileMaker Pro

Whether you're looking to design a simple calendar of upcoming events for your organization, create a customized scheduling interface, or make a web based day planner for everyone in your company, this article can help you get started with the initial FileMaker Pro databases, and Lasso format files for the creation of any of the above solutions and more.

The first step in creating a database driven calendar is to download some existing generic databases, and format files from the web. They are available at http://chaos.eou.edu via anonymous ftp. The file you are looking for is calendar.hqx which is a stuffed archive containing all the files you will need to complete the rest of this lesson. These files are also referenced off of Blue World's Lasso Solutions page <http://www.blueworld.com/blueworld/products/lassosolutions.html>.

Now that you have the generic files, open the calendar database in FileMaker Pro. It should look like this.


Figure 1. Calendar Database; Visit Layout.

There are three layouts contained within the calendar database; visit, booking and committee. Each layout corresponds to one of the other three databases that came in the set of files you downloaded; Visitor Events, Bookings Events, and Committee Events respectively. If you want to create relationships to one of your pre-existing databases you will need to create a duplicate layout and then modify it to suit your existing data. For the time being we will continue to work with the four databases that came in the set.

In the calendar database you will need to define relationships to each of the other three databases. Let's start with layout number one, visit. Go to the file menu and select Define -> Relationships. A dialogue box will appear entitled Define Relationships for calendar. Click the New button. A second dialogue box will pop up asking you to select a file to relate to calendar. Choose Visitor Events from the Calendars folder that contains all of the databases, and format files you downloaded. Click Open.

Now you should be looking at a dialogue box labeled Edit Relationship. You are going to create 14 relationships each with a unique name. Call the first relationship startmonday by typing "startmonday" in the Relationship Name field at the top of the dialogue box. Match up the field thisMonday in the box listing fields within the calendar database with the field ::startDate in the Visitor Events box. Click OK. Basically what you just did was establish a line of communication between the calendar database, and the Visitor Events database so that they can begin sharing information. This is how you get information that is in the Visitor Events database into the calendar.

Create six more relationships called starttuesday, startwednesday, startthursday, startfriday, startsaturday, and startsunday which relate the fields thisTuesday, thisWednesday, thisThursday, thisFriday, thisSaturday, and thisSunday each to the field ::startDate in the Visitor Events database. This should be pretty easy. Just repeat the steps you took to create the relationship called startmonday, only increment the day by one each time.

Now you've established begin dates for all the Visitor Events. The next step is to create relationships that will define ending dates. The Define Relationships for calendar dialogue box should still be open. Click New to create a new relationship. Label the relationship endmonday, and match up the field thisMonday in the calendar box to the field ::endDate in the Visitor Events box. Click OK. Do the same for each of the fields thisTuesday, thisWednesday, thisThursday, thisFriday, thisSaturday, and thisSunday relating them to the endDate field in the Visitor Events database. Click Done, and you're finished creating relationships for now.

Open the Visitor Events database. You should see seven fields called theVisitor, theVisitorsHome, startDate, endDate, theDestinations, whoSaysSo, and stayLength.


Figure 2. Visitor Events Database.

For this next step we are only going to use theVisitor field. Go back to the calendar database, and make sure you are using layout 1, and are in layout view. Double click on the portal box under the field monNum. It looks like this :


Figure 3. Portal.

You should now be looking at a Portal Setup dialogue box. You can also get to this dialogue box by clicking on the portal, and then selecting Format -> Portal from the pull-down menu. Make sure that startmonday is selected in the Show Records From pop-up menu. Click OK. Now double click on the small field contained within the portal. You should see a Specify Field dialogue box. From the pop-up menu select startmonday. This will give you a list of available fields in the white box below the pop-up menu. From this list select theVisitor (remember the field in the Visitor Events database? This is the same field). Click OK.

Now if you go back to browse mode in the visit layout in the calendar database the name of any visitor who is arriving on the date which corresponds to the date in the field thisMonday will be displayed in the Portal you just defined. Go ahead and try adding a new visitor to the Visitor Events database. Now check the calendar database, and notice how your entry shows up in the Portal.

Lasso Time

Okay, now that you've got a working database up and running it's time to show it to the world. After all what good is an events calendar if you're the only one who can see it? Using your favorite text editor, like BBEdit, or Simple Text, open the Lasso format file called calendar99.lasso in the calendars folder which should be contained within the Calendar Solution folder that you previously downloaded. If you've never seen Lasso tags before, those long <A HREF...> statements can appear daunting at first even if you're an HTML crackerjack. Don't get scared off just yet it's really not all that complicated.

Each month in the year 1999 has a corresponding link in this format file. When the end user sees this page there will just be a bunch of text months that look like this :


Figure 4. Format file calendar99.lasso.

When the user clicks on one of the months Lasso springs into action (hence the action.lasso part of the HREF tag) and calls up the calendar database (-database = calendar). The way this format file is set up now it accesses the bookings layout which is not the one we want. We need to access the layout we have been working with so far which is the visit layout. So make a new folder within the calendars folder called visitors. Save a copy of the calendar99.lasso file in the visitors folder. Now go through the calendar99.lasso file (the one in the visitors folder) and change all the

<A HREF...> tags so that -layout=booking part now reads -layout=visitors. Save the file.

The next part of the <A HREF...> tag -response=/calendars/CalendarHitlistFormat.lasso tells Lasso which file to use to display the results of the action it is processing. You will need to make a copy of the CalendarHitlistFormat.lasso file, and save it in the visitors folder you created in the last step. Using your text editor, open the copy of CalendarHitlistFormat.lasso you just made. This is really just a very basic table that Lasso tells how many rows to generate based on the number of weeks in the month that the user clicked on in the calendar99.lasso file. Lasso does this through the use of the [records] tag. It generates one row/week for each record it finds based on the search criteria from the previous page, calendar99.lasso. Let's say that the user has clicked on December. The search criteria that Lasso receives are as follows:

[op]=gte&thisMonday=11/29/99&[op]=lte&thisMonday=12/27/99&-search 

simply means that Lasso is to search the database for records in which the field thisMonday is greater than or equal to (gte) 11/29/99, and less than or equal (lte) to 12/27/99.

If you look at a 1999 calendar you will see that the first Monday of December 1999 is on the 6th, but there are obviously days in December before the 6th, so the search criteria is based on the first Monday of a week that also contains days in the month of December. You will also see that the last Monday in December falls on the 27th. So based on the search criteria [op]=gte&thisMonday=11/29/99&[op]=lte&thisMonday=12/27/99&-search Lasso will return records containing the weeks that fall between the dates 11/29/99, and 12/27/99.

Looking at the CalendarHitlistFormat.lasso file you will see three more Lasso tags, [field: monNum],[portal: bookMonday], and [field: bookMonday::title]. The first of these tells Lasso to look in the database that it already has open, calendar, and to put the contents of the field monNum into the current cell. This will display the number for each day of the week in the table so that it actually looks like a calendar. The second tag, [portal : bookMonday] you will need to change to [portal:startmonday]. Remember the relationships you set up earlier in the calendar database? Now you are telling Lasso to pull information from those portals, and bring them onto the web. The next tag [field:bookMonday::title] you will need to change to [field:startmonday::theVisitor]. This will tell Lasso to actually display the information contained in the portal relationship between startmonday in the calendar database, and theVisitor in the Visitor Events database. The result will be that on any given day that a visitor is scheduled, their name will appear on the calendar generated by the CalendarHitlistFormat.lasso file.

Go through the rest of the CalendarHitlistFormat.lasso file, and change the rest of the [portal...], and [field...] tags as follows:

[portal: bookTuesday] = [portal:starttuesday]
[field: bookTuesday::title] = [field:starttuesday::theVisitor]
[portal: bookWednesday] = [portal:startwednesday]
[field: bookWednesday::title] = [field:startwednesday::theVisitor]
[portal: bookThursday] = [portal:startthursday]
[field: bookThursday::title] = [field:startthursday::theVisitor]
[portal: bookFriday] = [portal:startfriday]
[field: bookFriday::title] = [field:startfriday::theVisitor]
[portal: bookSaturday] = [portal:startsaturday]
[field: bookSaturday::title] = [field:startsaturday::theVisitor]
[portal: bookSunday] = [portal:startsunday]
[field: bookSunday:title] = [field:startsunday::theVisitor]

Save the file.

Ready for Action

You are now ready to try out your calendar on the web. Make sure that FileMaker Pro is running, and that the calendar, and Visitor Events databases are open, and in browse mode. Set up user access in the Lasso Security database so that you can use the calendar database. If you are unsure how to do this consult the Lasso Manual. Also the folder called calendars containing the Lasso format files should be somewhere in your web folder. Launch your web browser, and open the /calendars/visitors/calendar99.lasso file. Click on a month to see if there are any visitors coming. You can spice up the look, and feel of the Lasso format files using any graphical website editor, and with Lasso 3 you can use the new syntax <LDML tag="sometag">.</LDML> to keep the GUI from changing your text around. For more information about the enhanced syntax for Lasso 3 please see <http://www.blueworld.com/blueworld/products/L3/L3NewFeatures.html>.

Creating a Detail Page

You are probably going to want more than just the ability to look at a calendar, and see when visitors are coming. So in this next step we will create a detail page linked from the CalendarHitlistFormat.lasso file that displays detailed information about each visitor.

Create a new file with your favorite text editor, and save it in the visitors folder with the title calendardetail.lasso. You will use Lasso to access the following seven fields contained in the Visitor Events database : theVisitor, theVisitorsHome, startDate, endDate, theDestinations, whoSaysSo, and stayLength. The Lasso format file will allow you to dynamically include the contents of these fields into meaningful text in HTML format.

Make your calendardetail.lasso look how you like with standard HTML, setting font types, background colors, images etc. Then set up your text block with Lasso tags that will supply the visitor information. You can use something like this :


Sample text with event info

[field: 'theVisitor'] will be coming from [field:'theVisitorsHome'], to 	[field:'theDestinations']. Arriving on [field: 'startDate'], and staying until [field:'endDate']. A total of [field: 'stayLength'] days. Approved by [field:'whoSaysSo'].

You should also probably include a link back to the CalendarHitlistFormat.lasso file. Save your work.

Now open the CalendarHitlistFormat.lasso file. We will include embedded action statements as links to the detail page whenever a visitor's name is displayed. You remember that each Lasso tag [field:bookSomeday::theVisitor] displays the name of a visitor if someone is arriving on that day. Lasso can just as easily allow you to make each displayed name a hot-link to the detail page you just created. For each of the [field:bookSomeday::theVisitor] fields place the following text before the tag :

	<A HREF="action.lasso?-database=Visitor%20Events&-layout=main&-response=calendardetail.lasso&-operator=eq&theVisitor=[field:bookMonday::theVisitor]&-search">

Notice that this looks a lot like a normal <A HREF...> HTML tag except for the extra Lasso formatting which tells Lasso what database, layout, and response file to use, and what search criteria to look for. So don't forget to put the end tag </A> after the field tag. And that's it. Now when you load the calendarmain.lasso page, and click on a month it will show you all the visitors arriving for the month, and each entry will in turn be a link to a page of detailed information about the visitor.

Creating a Custom Interface

A database that only allows you to see information is just halfway interactive. To be truly versatile and dynamic, a database that is live on the web should also let you add records using only your browser. This next section will explain how to create a custom Lasso format file that will allow you to add records from the Visitor Events database.


Figure 5. Actual Calendar from Eastern Oregon University's Student Activities Office.

With your favorite text editor create a new file, and save it in the visitors folder with the title addvisitor.lasso. Using a WYSIWYG editor, or coding by hand design the layout, and color scheme for this new page. Now in your text editor input the standard Lasso form tags :

addvisitor.lasso
	<FORM ACTION="action.lasso?-add" METHOD=POST>
 	<CENTER><INPUT TYPE=hidden NAME="-database" VALUE="Visitor%20Events">
 	<INPUT TYPE=hidden NAME="-layout" VALUE="main">
 	<INPUT TYPE=hidden NAME="-response" VALUE="addreply.lasso">

All the elements in these form tags have been created except for the addreply.lasso format file which can simply be an HTML file which thanks the user for adding a record, and provides a link back to the calendarmain.lasso page.

The layout for Lasso forms is pretty straightforward just like HTML forms (if you need help with your HTML forms I suggest the tutorials at <http://www.stars.com> or <http://www.builder.com>) except for the Lasso tags which access fields in the database specified in the <INPUT TYPE=hidden NAME="-database" ...> tag. This add form is going to consist of the six fields in the Visitor Events database (okay there are really seven, but one is a calculation field) and some text that tells the user what he or she should be doing. Very simply it should look like this: (I'll leave out the HTML formatting since you should know how to do this, and just use the Lasso tags, and basic text)


Add Visitor Page

	Type in the visitor's name : 
		<input type="text" name="theVisitor" value="" size="30">
	Type in the visitor's home : 
		<input type="text" name="theVisitorsHome" value="" 				size="30">
	Type in the visitor's destination : 
		<input type="text" name="theDestinations" value="" 				size="30">
	When is this visitor coming : (this must be a date 			mm/dd/yy) 
		<input type="text" name="startDate" value="" size="30">
	When will the visitor be leaving : 
		<input type="text" name="endDate" value="" size="30">
	Who authorizes this stay : 
		<input type="text" name="whoSaysSo" value="" size="30">
<!-At the end of the form you need to include a submit button, and the </form> tag->
	<INPUT TYPE=submit NAME="-add" VALUE="Add Record">
 <INPUT TYPE=reset VALUE="Clear Form">
	</FORM>

That's it. You now have a fully interractive events calendar live on the web. Now you can customize it to serve your existing databases live on the web, or create new databases to serve on the web.


Seth Ganahl blah blah

 
AAPL
$103.40
Apple Inc.
+0.93
MSFT
$44.92
Microsoft Corpora
+0.04
GOOG
$538.81
Google Inc.
+12.27

MacTech Search:
Community Search:

Software Updates via MacUpdate

Apple Security Update 2014-005 - For OS...
Apple Security Update is recommended for all users and improves the security of Mac OS X. For information on the security content of this update, please visit this website: http://support.apple.com/... Read more
EyeTV 3.6.6 - Watch and record TV on you...
EyeTV brings a rich TV experience to your Mac. Watch live TV on your Mac. Pause, rewind, and record whenever you want. EyeTV gives you powerful control over what you watch and how you watch it. Put... Read more
RapidWeaver 6.0 - Create template-based...
RapidWeaver is a next-generation Web design application to help you easily create professional-looking Web sites in minutes. No knowledge of complex code is required, RapidWeaver will take care of... Read more
NTFS 12.0.39 - Provides full read and wr...
Paragon NTFS breaks down the barriers between Windows and OS X. Paragon NTFS effectively solves the communication problems between the Mac system and NTFS, providing full read and write access to... Read more
RestoreMeNot 2.0.3 - Disable window rest...
RestoreMeNot provides a simple way to disable the window restoration for individual applications so that you can fine-tune this behavior to suit your needs. Please note that RestoreMeNot is designed... Read more
Macgo Blu-ray Player 2.10.9.1750 - Blu-r...
Macgo Mac Blu-ray Player can bring you the most unforgettable Blu-ray experience on your Mac. Overview Macgo Mac Blu-ray Player can satisfy just about every need you could possibly have in a Blu-ray... Read more
Apple iOS 8.1 - The latest version of Ap...
The latest version of iOS can be downloaded through iTunes. Apple iOS 8 comes with big updates to apps you use every day, like Messages and Photos. A whole new way to share content with your family.... Read more
TechTool Pro 7.0.5 - Hard drive and syst...
TechTool Pro is now 7, and this is the most advanced version of the acclaimed Macintosh troubleshooting utility created in its 20-year history. Micromat has redeveloped TechTool Pro 7 to be fully 64... Read more
PDFKey Pro 4.0.2 - Edit and print passwo...
PDFKey Pro can unlock PDF documents protected for printing and copying when you've forgotten your password. It can now also protect your PDF files with a password to prevent unauthorized access and/... Read more
Yasu 2.9.1 - System maintenance app; per...
Yasu was originally created with System Administrators who service large groups of workstations in mind, Yasu (Yet Another System Utility) was made to do a specific group of maintenance tasks... Read more

Latest Forum Discussions

See All

Craft Your Own Mini-Games with Papercade
Craft Your Own Mini-Games with Papercade Posted by Jessica Fisher on October 22nd, 2014 [ permalink ] iPad Only App - Designed for the iPad Scrapbookers move over, Scrapgaming is the new thing. | Read more »
Reshape Review
Reshape Review By Jennifer Allen on October 22nd, 2014 Our Rating: :: SIMPLE SHAPESUniversal App - Designed for iPhone and iPad Match triangles together to form cubes in this fast-paced and twitchy game.   | Read more »
Miika (Games)
Miika 1.0.0 Device: iOS Universal Category: Games Price: $1.99, Version: 1.0.0 (iTunes) Description: Miika is a beautiful 3D puzzle game based on camera perspectives combined with the use of optical illusions. Miika challenges... | Read more »
Infuse Pro (Photography)
Infuse Pro 3.0 Device: iOS Universal Category: Photography Price: $9.99, Version: 3.0 (iTunes) Description: ** All-new version 3 includes fully licensed and certified DTS® and DTS-HD® audio! ** | Read more »
Swap Heroes (Games)
Swap Heroes 1.0 Device: iOS Universal Category: Games Price: $.99, Version: 1.0 (iTunes) Description: **Half price for a limited time only** Swap Heroes is a casual turn-based strategy adventure. Form a group of heroes and guide them... | Read more »
Ghost Blade (Games)
Ghost Blade 1.1 Device: iOS Universal Category: Games Price: $4.99, Version: 1.1 (iTunes) Description: Get the most outstanding 3D Action Game from App Store NOW! For those who dare pursue dreams. Masterpiece of Yu Shi Game ---China... | Read more »
Fiete – A Day on a Farm Review
Fiete – A Day on a Farm Review By Amy Solomon on October 21st, 2014 Our Rating: :: A MEMORABLE EXPERIENCEUniversal App - Designed for iPhone and iPad Fiete – A day on a farm in an interactive app for young children full of... | Read more »
Tilt to Live: Gauntlet’s Revenge is Almo...
Tilt to Live: Gauntlet’s Revenge is Almost Here Posted by Jessica Fisher on October 21st, 2014 [ permalink ] One Man Left has announced the official release date of Tilt to Live: Gauntlet’s Re | Read more »
Starfly Review
Starfly Review By Jennifer Allen on October 21st, 2014 Our Rating: :: CHANGE OF PACEiPad Only App - Designed for the iPad Want a slightly different browsing experience? Starfly is a pretty personalized one but it’s also buggy.   | Read more »
Sago Mini Monsters Celebrates Halloween...
Sago Mini Monsters Celebrates Halloween with Fun Costumes and Special Treats. Posted by Jessica Fisher on October 21st, 2014 [ permal | Read more »

Price Scanner via MacPrices.net

AT&T accepting preorders for new iPads fo...
AT&T Wireless is accepting preorders for the new iPad Air 2 and iPad mini 3, cellular models, for $100 off MSRP with a 2-year service agreement: - 16GB iPad Air 2 WiFi + Cellular: $529.99 - 64GB... Read more
Apple offering refurbished Mac Pros for up to...
The Apple Store is offering Apple Certified Refurbished 2013 Mac Pros for up to $600 off the cost of new models. An Apple one-year warranty is included with each Mac Pro, and shipping is free. The... Read more
Select MacBook Airs $100 off MSRP, free shipp...
B&H Photo has 2014 a couple of MacBook Airs on sale for $100 off MSRP. Shipping is free, and B&H charges NY sales tax only. They also include free copies of Parallels Desktop and LoJack for... Read more
13-inch 2.5GHz MacBook Pro on sale for $100 o...
B&H Photo has the 13″ 2.5GHz MacBook Pro on sale for $999.99 including free shipping plus NY sales tax only. Their price is $100 off MSRP. Read more
Strong iPhone, Mac And App Store Sales Drive...
Apple on Monday announced financial results for its fiscal 2014 fourth quarter ended September 27, 2014. The Company posted quarterly revenue of $42.1 billion and quarterly net profit of $8.5 billion... Read more
Apple Posts How-To For OS X Recovery
OS X 10.7 Lion and later include OS X Recovery. This feature includes all of the tools you need to reinstall OS X, repair your disk, and even restore from a Time Machine backup. OS X Recovery... Read more
Mac OS X Versions (Builds) Supported By Vario...
Apple Support has posted a handy resource explaining which Mac OS X versions (builds) originally shipped with or are available for your computer via retail discs, downloads, or Software Update. Apple... Read more
Deals on 2011 13-inch MacBook Airs, from $649
Daily Steals has the Mid-2011 13″ 1.7GHz i5 MacBook Air (4GB/128GB) available for $699 with a 90 day warranty. The Mid-2011 13″ 1.7GHz i5 MacBook Air (4GB/128GB SSD) is available for $649 at Other... Read more
2013 15-inch 2.0GHz Retina MacBook Pro availa...
B&H Photo has leftover previous-generation 15″ 2.0GHz Retina MacBook Pros now available for $1599 including free shipping plus NY sales tax only. Their price is $400 off original MSRP. B&H... Read more
Updated iPad Prices
We’ve updated our iPad Air Price Tracker and our iPad mini Price Tracker with the latest information on prices and availability from Apple and other resellers, including the new iPad Air 2 and the... Read more

Jobs Board

Senior Event Manager, *Apple* Retail Market...
…This senior level position is responsible for leading and imagining the Apple Retail Team's global event strategy. Delivering an overarching brand story; in-store, Read more
*Apple* Solutions Consultant (ASC) - Apple (...
**Job Summary** The ASC is an Apple employee who serves as an Apple brand ambassador and influencer in a Reseller's store. The ASC's role is to grow Apple Read more
Project Manager / Business Analyst, WW *Appl...
…a senior project manager / business analyst to work within our Worldwide Apple Fulfillment Operations and the Business Process Re-engineering team. This role will work Read more
*Apple* Retail - Multiple Positions (US) - A...
Job Description: Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, Read more
Position Opening at *Apple* - Apple (United...
…customers purchase our products, you're the one who helps them get more out of their new Apple technology. Your day in the Apple Store is filled with a range of Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.