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
$100.11
Apple Inc.
+0.00
MSFT
$46.44
Microsoft Corpora
+0.00
GOOG
$576.36
Google Inc.
+0.00

MacTech Search:
Community Search:

Software Updates via MacUpdate

QuickBooks 2015 16.0.0.1352 R1 - Financi...
QuickBooks 2015 helps you manage your business easily and efficiently. Organize your finances all in one place, track money going in and out of your business, and spot areas where you can save.... Read more
Mac DVDRipper Pro 5.0.1 - Copy, backup,...
Mac DVDRipper Pro is the DVD backup solution that lets you protect your DVDs from scratches, save your batteries by reading your movies from your hard disk, manage your collection with just a few... Read more
SyncTwoFolders 2.0.5 - Syncs two user-sp...
SyncTwoFolders simply synchronizes two folders. It supports synchronization across mounted network drives and it is a possibility to run a simulation showing in a log what will be done. Please visit... Read more
FinderPop 2.5.7 - Classic Mac utility, n...
FinderPop is a Universal preference pane that extends OS X's contextual menus using a FinderPop Items folder much as the Apple Menu Items folder used to do for the Apple menu. It has other features... Read more
VueScan 9.4.45 - Scanner software with a...
VueScan is a scanning program that works with most high-quality flatbed and film scanners to produce scans that have excellent color fidelity and color balance. VueScan is easy to use, and has... Read more
LibreOffice 4.3.2.2 - Free Open Source o...
LibreOffice is an office suite (word processor, spreadsheet, presentations, drawing tool) compatible with other major office suites. The Document Foundation is coordinating development and... Read more
calibre 2.4 - Complete e-library managem...
Calibre is a complete e-book library manager. Organize your collection, convert your books to multiple formats, and sync with all of your devices. Let Calibre be your multi-tasking digital... Read more
Default Folder X 4.6.9b1 - Enhances Open...
Default Folder X attaches a toolbar to the right side of the Open and Save dialogs in any OS X-native application. The toolbar gives you fast access to various folders and commands. You just click... Read more
Beamer 2.0.4 - Stream any movie file fro...
Beamer streams to your Apple TV.... Plays any movie file - Just like the popular desktop movie players, Beamer accepts all common formats, codecs and resolutions. AVI, MKV, MOV, MP4, WMV, FLV. To... Read more
Adobe Premiere Elements 13.0 - Consumer...
Adobe Premiere Elements just got better. Now you can create quick movies from favorite parts of your clips or tell big life stories in full-on productions. Add motion inside movie titles, punch up... Read more

Latest Forum Discussions

See All

iPollute Review
iPollute Review By Nadia Oxford on September 30th, 2014 Our Rating: :: iPOLLUTE, uPOLLUTEUniversal App - Designed for iPhone and iPad iPollute is a delightful-looking pollution simulator, though it’s a bit light on “game” content... | Read more »
This Week at 148Apps: September 22-26, 2...
Your Source For The Latest App Reviews   | Read more »
Kill Shot Review
Kill Shot Review By Jennifer Allen on September 29th, 2014 Our Rating: :: OCCASIONAL MISFIRESUniversal App - Designed for iPhone and iPad Kill Shot is often satisfying, but its more than pushy in-app purchases will leave you... | Read more »
It Came From Canada: Vainglory
I’m going to be straight you with folks. I don’t know much about MOBAs, and I’m certainly no professional. That means I don’t know how well Vainglory, the upcoming multiplayer online battle arena showcased in the most recent Apple keynote, compares... | Read more »
The Tunnel – An Endless Fall Review
The Tunnel – An Endless Fall Review By Nadia Oxford on September 29th, 2014 Our Rating: :: FREE FALLIN' Universal App - Designed for iPhone and iPad The Tunnel – An Endless Fall is a bit harder to get the hang of than most “endless... | Read more »
Ubisoft Launches Just Dance Now in the A...
Ubisoft Launches Just Dance Now in the App Store Worldwide Posted by Jessica Fisher on September 29th, 2014 [ permalink ] Universal App - Designed for iPhone and iPad | Read more »
For Better, or for Worse? How the New Ap...
With the release of iOS 8 (finally), Apple has made some noticeable changes on the App Store – bundles, videos, and Testflight integration, to name a few. Many of these additions will make things friendlier for App Store shoppers, but how has it... | Read more »
Asphalt Overdrive Review
Asphalt Overdrive Review By Jennifer Allen on September 29th, 2014 Our Rating: :: SHORT LIVED ADRENALINEUniversal App - Designed for iPhone and iPad Asphalt Overdrive is a fairly simple auto-running racing game, but one that’s... | Read more »
Kritika: Wrath of the Pirate King Update...
Kritika: Wrath of the Pirate King Update Introduces New Class: Shadow Mage. Posted by Jessica Fisher on September 29th, 2014 [ permalink ] | Read more »
Vampire Tribunals Review
Vampire Tribunals Review By Campbell Bird on September 29th, 2014 Our Rating: iPhone App - Designed for the iPhone, compatible with the iPad Hunt other vampires in the “real world” in this location-based multiplayer game.   | Read more »

Price Scanner via MacPrices.net

MacBook Airs on sale for $100 off MSRP, start...
Best Buy has the new 2014 MacBook Airs on sale for $100 off MSRP on their online store. Choose free home shipping or free local store pickup (if available). Prices valid for online orders only, in-... Read more
Apple Releases OS X Mavericks bash Update 1.0...
Apple has released a patch update for OS X Mavericks users to address the recently-detected “Shellshock” security bug in BSD UNIX’s bash shell. Apple says only a few Mac users who had manually... Read more
Pivotal Payments Ready for Apple Pay – FlexPo...
Pivotal Payments, a provider of merchant services and global payment processing solutions, has announced its proprietary FlexPoint platform will support credit and debit transactions through Apple’s... Read more
iStabilizer Announces Tabarm — First Friction...
iStabilizer, a specialist in universal lightweight compact tripods, steady cams, dollies, mounts, and remotes for smartphones, tablets, and cameras, announced today the iStabilizer tabArm, the first... Read more
IStabilizer Flex Smartphone Tripod Wins Usa T...
iStabilizer, a specialist in universal lightweight compact tripods, steady cams, and other products for smartphones, tablets, and cameras, has announced today that its iStabilizer Flex smartphone... Read more
13-inch 2.8GHz Retina MacBook Pro on sale for...
B&H Photo has the new 2014 13″ 2.8GHz Retina MacBook Pro on sale for $1699.99 including free shipping plus NY sales tax only. They’ll also include free copies of Parallels Desktop and LoJack for... Read more
15-inch Retina MacBook Pros on sale for up to...
B&H Photo has the new 2014 15″ Retina MacBook Pros on sale for up to $150 off MSRP. Shipping is free, and B&H charges NY sales tax only. They’ll also include free copies of Parallels Desktop... Read more
Get Down to Business On Your iPad With Free N...
Utah based Poem LLC has introduced Nexticy 1.0, a full-featured, affordable (Free) forms application for iPad. Nexticy makes it ‘way easy’ to create, store, retrieve and analyze paper-like forms of... Read more
13-inch Retina MacBook Pros on sale for $100...
Best Buy has 13-inch 2.6GHz Retina MacBook Pros on sale for $100 off MSRP on their online store. Choose free shipping or free local store pickup (if available). Prices are for online orders only, in-... Read more
Reports Outline Claimed 12-Inch Macbook Air D...
Blogger Jack March says that according to information he’s received from an anonymous “source familiar with Apple’s plans,” the next-generation MacBook Air will launch in mid-2015 and be available... 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...
Job Description: Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, Read more
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
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.