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
$111.01
Apple Inc.
+1.60
MSFT
$46.98
Microsoft Corpora
+1.24
GOOG
$509.20
Google Inc.
+4.31

MacTech Search:
Community Search:

Software Updates via MacUpdate

BBEdit 11.0.2 - Powerful text and HTML e...
BBEdit is the leading professional HTML and text editor for the Mac. Specifically crafted in response to the needs of Web authors and software developers, this award-winning product provides a... Read more
ExpanDrive 4.2.1 - Access cloud storage...
ExpanDrive builds cloud storage in every application, acts just like a USB drive plugged into your Mac. With ExpanDrive, you can securely access any remote file server directly from the Finder or... Read more
Adobe After Effects CC 2014 13.2 - Creat...
After Effects CC 2014 is available as part of Adobe Creative Cloud for as little as $19.99/month (or $9.99/month if you're a previous After Effects customer). After Effects CS6 is still available... Read more
Command-C 1.1.7 - Clipboard sharing tool...
Command-C is a revolutionary app which makes easy to share your clipboard between iOS and OS X using your local WiFi network, even if the app is not currently opened. Copy anything (text, pictures,... Read more
Tidy Up 4.0.2 - Find duplicate files and...
Tidy Up is a complete duplicate finder and disk-tidiness utility. With Tidy Up you can search for duplicate files and packages by the owner application, content, type, creator, extension, time... Read more
Typinator 6.3 - Speedy and reliable text...
Typinator turbo-charges your typing productivity. Type a little. Typinator does the rest. We've all faced projects that require repetitive typing tasks. With Typinator, you can store commonly used... Read more
GraphicConverter 9.5 - Graphics editor w...
GraphicConverter is an all-purpose image-editing program that can import 200 different graphic-based formats, edit the image, and export it to any of 80 available file formats. The high-end editing... Read more
Toast Titanium 12.0.1 - The ultimate med...
Toast Titanium goes way beyond the very basic burning in the Mac OS and iLife software, and sets the standard for burning CDs, DVDs, and now Blu-ray discs on the Mac. Create superior sounding audio... Read more
QuickBooks 2015 16.0.2.1422 R3 - Financi...
Save 20% on QuickBooks Pro for Mac today through this special discount link QuickBooks Pro 2013 helps you manage your business easily and efficiently. Organize your finances all in one place, track... Read more
Remotix 3.0.6 - Access all your computer...
Remotix is a fast and powerful application to easily access multiple Macs (and PCs) from your own Mac. Features: Complete Apple Screen Sharing support - including Mac OS X login, clipboard... Read more

Latest Forum Discussions

See All

Brothers in Arms 3: Sons of War Review
Brothers in Arms 3: Sons of War Review By Jennifer Allen on December 18th, 2014 Our Rating: :: FUN BUT PUSHYUniversal App - Designed for iPhone and iPad Brothers in Arms 3: Sons of War could be great fun, but its plethora of... | Read more »
The Snow is Falling on the French Countr...
The Snow is Falling on the French Countryside of Carcassonne’s Newest Update Posted by Jessica Fisher on December 18th, 2014 [ permalink ] < | Read more »
Creatures Such As We Review
Creatures Such As We Review By Jennifer Allen on December 18th, 2014 Our Rating: :: INTERESTING DISCUSSIONSUniversal App - Designed for iPhone and iPad Taking a more sedate approach to interactive fiction, Creatures Such As We... | Read more »
Stair: Slide the Blocks to Ascend (Game...
Stair: Slide the Blocks to Ascend 1.0 Device: iOS Universal Category: Games Price: $1.99, Version: 1.0 (iTunes) Description: Slide the blocks to ascend! Stair: Slide the Blocks to Ascend | Read more »
Give It Up! (Games)
Give It Up! 1.0 Device: iOS Universal Category: Games Price: $.99, Version: 1.0 (iTunes) Description: GIVE IT UP is a rather hard game where you have to assist this cheerful, singing Blob in jumping through 9 different tracks.So far... | Read more »
The Drive : Devil's Run (Games)
The Drive : Devil's Run 1.0 Device: iOS Universal Category: Games Price: $.99, Version: 1.0 (iTunes) Description: ON THE ROAD AGAIN! The Drive - Devil’s Run is classic point to point style racing game that pays homage to the classics... | Read more »
Procreate Pocket (Entertainment)
Procreate Pocket 1.01 Device: iOS iPhone Category: Entertainment Price: $2.99, Version: 1.01 (iTunes) Description: Create - anytime, anywhere. Made by the developers of the award-winning Procreate® for iPad®, Procreate Pocket™ allows... | Read more »
IRON FINGER - Mini Games Championship (...
IRON FINGER - Mini Games Championship 1.0 Device: iOS Universal Category: Games Price: $1.99, Version: 1.0 (iTunes) Description: Quick to play, easy to learn yet hard to master.. TAP, SWIPE & TILT your way through mini games that... | Read more »
Pentaction: Medieval (Games)
Pentaction: Medieval 1.0 Device: iOS Universal Category: Games Price: $1.99, Version: 1.0 (iTunes) Description: Pentaction: Medieval is a turn-based strategy board-game about chance and skill on the battlefield. Take control of your... | Read more »
Hipstify Review
Hipstify Review By Jennifer Allen on December 17th, 2014 Our Rating: :: COOL FILTERSUniversal App - Designed for iPhone and iPad Add filters, quotes, and fancy frames to your images, thanks to Hipstify.   | Read more »

Price Scanner via MacPrices.net

KMI MIDI K-Board Great Gift for Amateur &...
The K-Board is a MIDI Nano keyboard for music creation for iPad, Android, And computers; the easiest way to make music with iPads & Android tablets, and Mac, Windows, or Linux computers. Ultra-... Read more
Amazon offers 15-inch 2.2GHz Retina MacBook P...
 Amazon.com has the 15″ 2.2GHz Retina MacBook Pro on sale for $1699 including free shipping. Their price is $300 off MSRP. Stock is limited, so act now if you’re interested. Read more
Holiday sales continue: MacBook Pros for up t...
 B&H Photo has new MacBook Pros on sale for up to $300 off MSRP as part of their Holiday pricing. Shipping is free, and B&H charges NY sales tax only: - 15″ 2.2GHz Retina MacBook Pro: $1699... Read more
Google Search App For iOS Gets A Major Makeov...
Google has given iOS users an early Christmas present with a substantial update of it’s not-very-often-upgraded Google Search app. Google Search has been my go-to tool for Web searches since it was... Read more
ShopKeep Apple Pay And Chip Card Reader Avail...
ShopKeep, a cloud-based technology provider to more than 10,000 small business owners to manage retail shops and restaurants with iPads, has released its new Apple Pay and chip card reader. This... Read more
Holiday sale! 27-inch 5K iMac for $2299, save...
 B&H Photo has the 27″ 3.5GHz 5K iMac in stock today and on sale for $2299 including free shipping plus NY sales tax only. Their price is $200 off MSRP, and it’s the lowest price available for... Read more
Holiday Sale! 3.7GHz Quad Core Mac Pro availa...
 B&H Photo has the 3.7GHz Quad Core Mac Pro on sale for $2599 including free shipping plus NY sales tax only. Their price is $400 off MSRP, and it’s the lowest price for this model from any... Read more
iPhone 6 Number 3 Canadian Google Search Of 2...
CTVNews.ca reports that Apple’s iPhone 6 was the third highest-trending Google Canada search topic of 2014, exceeded only by Robin Williams largely after his death by suicide in August, and the FIFA... Read more
New iPad mini 3 Counter-Top & Wall Mount...
newMacgadgets has announced new secure all-acrylic displays for the iPad mini 3 (also works fine with the mini 2, last year’s iPad mini With Retina Display, and the original iPad mini). The new iPad... Read more
Holiday sales continue, MacBook Airs for up t...
B&H Photo has 2014 MacBook Airs on sale for up to $120 off MSRP, for a limited time, for the Thanksgiving/Christmas Holiday shopping season. Shipping is free, and B&H charges NY sales tax... Read more

Jobs Board

*Apple* Retail - Multiple Positions (US) - A...
Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, you're also the Read more
*Apple* Retail - Multiple Positions (US) - A...
Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, you're also the 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
*Apple* Retail - Multiple Positions (US) - A...
Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, you're also the 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
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.