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
$95.60
Apple Inc.
-2.55
MSFT
$43.16
Microsoft Corpora
-0.42
GOOG
$571.60
Google Inc.
-15.82

MacTech Search:
Community Search:

Software Updates via MacUpdate

OneNote 15.2 - Free digital notebook fro...
OneNote is your very own digital notebook. With OneNote, you can capture that flash of genius, that moment of inspiration, or that list of errands that’s too important to forget. Whether you’re at... Read more
iStat Menus 4.22 - Monitor your system r...
iStat Menus lets you monitor your system right from the menubar. Included are 8 menu extras that let you monitor every aspect of your system. Some features: CPU -- Monitor cpu usage. 7 display... Read more
Ember 1.8 - Versatile digital scrapbook....
Ember (formerly LittleSnapper) is your digital scrapbook of things that inspire you: websites, photos, apps or other things. Just drag in images that you want to keep, organize them into relevant... Read more
OmniPlan 2.3.6 - Robust project manageme...
With OmniPlan, you can create logical, manageable project plans with Gantt charts, schedules, summaries, milestones, and critical paths. Break down the tasks needed to make your project a success,... Read more
Command-C 1.1.1 - 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
Knock 1.1.7 - Unlock your Mac by knockin...
Knock is a faster, safer way to sign in. You keep your iPhone with you all the time. Now you can use it as a password. You never have to open the app -- just knock on your phone twice, even when it's... Read more
Mellel 3.3.6 - Powerful word processor w...
Mellel is the leading word processor for OS X and has been widely considered the industry standard since its inception. Mellel focuses on writers and scholars for technical writing and multilingual... Read more
LibreOffice 4.3.0.4 - 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
Freeway Pro 7.0 - Drag-and-drop Web desi...
Freeway Pro lets you build websites with speed and precision... without writing a line of code! With it's user-oriented drag-and-drop interface, Freeway Pro helps you piece together the website of... Read more
Drive Genius 3.2.4 - Powerful system uti...
Drive Genius is an OS X utility designed to provide unsurpassed storage management. Featuring an easy-to-use interface, Drive Genius is packed with powerful tools such as a drive optimizer, a... Read more

Latest Forum Discussions

See All

Dawn of the Immortals Review
Dawn of the Immortals Review By Jennifer Allen on July 31st, 2014 Our Rating: :: RESPECTABLE EXPLORATIONUniversal App - Designed for iPhone and iPad Dawn of the Immortals might not re-invent the wheel, but it does tweak it a little... | Read more »
80 Days Review
80 Days Review By Jennifer Allen on July 31st, 2014 Our Rating: :: EPIC ADVENTUREUniversal App - Designed for iPhone and iPad A fantastic and fascinating re-envisioning of the classic novel by Jules Verne, 80 Days is a delightful... | Read more »
Battleheart Legacy Guide
The world of Battleheart Legacy is fun and deep; full of wizards, warriors, and witches. Here are some tips and tactics to help you get the most enjoyment out of this great game. | Read more »
Puzzle Roo Review
Puzzle Roo Review By Jennifer Allen on July 31st, 2014 Our Rating: :: PUZZLE-BASED TWISTUniversal App - Designed for iPhone and iPad A different take on the usual block dropping puzzle game, Puzzle Roo is quite pleasant.   | Read more »
Super Crossfire Re-Release Super Crossfi...
Super Crossfire Re-Release Super Crossfighter Coming Soon, Other Radiangames Titles Go 50% Off Posted by Ellis Spice on July 31st, 2014 [ | Read more »
Hexiled Review
Hexiled Review By Rob Thomas on July 31st, 2014 Our Rating: :: HEX SELLSUniversal App - Designed for iPhone and iPad In space, no one can hear you… spell? Hexiled is a neat concept for a word scramble puzzle, but it doesn’t go too... | Read more »
Summoners War: Sky Arena Passes 10 Milli...
Summoners War: Sky Arena Passes 10 Million Installs! Posted by Jessica Fisher on July 31st, 2014 [ permalink ] Universal App - Designed for iPhone and iPad | Read more »
Deep Loot Review
Deep Loot Review By Jennifer Allen on July 31st, 2014 Our Rating: :: DIVE DEEPUniversal App - Designed for iPhone and iPad Dive deep in this fun explore-em-up that’s a little grind heavy but ultimately quite entertaining.   | Read more »
Despicable Me: Minion Rush is One Year O...
Despicable Me: Minion Rush is One Year Old, Gets its Biggest Update Yet Posted by Jennifer Allen on July 31st, 2014 [ permalink ] Universal App - Designed for iPhone and iPad | Read more »
Fish & Shark Review
Fish & Shark Review By Jordan Minor on July 31st, 2014 Our Rating: :: FLAPPY FISHUniversal App - Designed for iPhone and iPad Fish & Shark’s beauty is only scale deep.   | Read more »

Price Scanner via MacPrices.net

All Over For Tablets Or Just A Maturing, Evol...
CNN’s David Goldman weighs in on tablet sector doom and gloom, asking rhetorically: “Is this the beginning of the end for the tablet?” Answering that, he contends that hysteria and panic are... Read more
Letterspace 1.0.1 – New Free iOS Text Editor...
Bangkok, Thailand based independent developer Sittipon Simasanti has released Letterspace, a new text editor for iPhone, iPad, and iPod touch devices. Letterspace is a note taking app with an... Read more
Save up to $130 on an iPad mini with Apple re...
The Apple Store has Certified Refurbished 2nd generation iPad minis with Retina Displays available for up to $130 off the cost of new models, starting at $339. Apple’s one-year warranty is included... Read more
iPad Cannibalization Threat “Overblown”
Seeking Alpha’s Kevin Greenhalgh observes that while many commentators think Apple’s forthcoming 5.5-inch panel iPhone 6 will cannibalize iPad sales, in his estimation, these concerns are being... Read more
Primate Labs Releases July 2014 MacBook Pro P...
Primate Labs’ John Poole has posted Geekbench 3 results for most of the new MacBook Pro models that Apple released on Tuesday. Poole observes that overall performance improvements for the new MacBook... Read more
Apple Re-Releases Bugfixed MacBook Air EFI Fi...
Apple has posted a bugfixed version EFI Firmware Update 2.9 a for MacBook Air (Mid 2011) models. The update addresses an issue where systems may take longer to wake from sleep than expected, and... Read more
Save $50 on the 2.5GHz Mac mini, plus free sh...
B&H Photo has the 2.5GHz Mac mini on sale for $549.99 including free shipping. That’s $50 off MSRP, and B&H will also include a free copy of Parallels Desktop software. NY sales tax only. Read more
Save up to $140 on an iPad Air with Apple ref...
Apple is offering Certified Refurbished iPad Airs for up to $140 off MSRP. Apple’s one-year warranty is included with each model, and shipping is free. Stock tends to come and go with some of these... Read more
$250 price drop on leftover 15-inch Retina Ma...
B&H Photo has dropped prices on 2013 15″ Retina MacBook Pros by $250 off original MSRP. Shipping is free, and B&H charges NY sales tax only: - 15″ 2.3GHz Retina MacBook Pro: $2249, $250 off... Read more
More iPad Upgrade Musings – The ‘Book Mystiqu...
Much discussed recently, what with Apple reporting iPad sales shrinkage over two consecutive quarters, is that it had apparently been widely assumed that tablet users would follow a two-year hardware... 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
Sr. Product Leader, *Apple* Store Apps - Ap...
**Job Summary** Imagine what you could do here. At Apple , great ideas have a way of becoming great products, services, and customer experiences very quickly. Bring Read more
Sr Software Lead Engineer, *Apple* Online S...
Sr Software Lead Engineer, Apple Online Store Publishing Systems Keywords: Company: Apple Job Code: E3PCAK8MgYYkw Location (City or ZIP): Santa Clara Status: Full Read more
Sr Software Lead Engineer, *Apple* Online S...
Sr Software Lead Engineer, Apple Online Store Publishing Systems Keywords: Company: Apple Job Code: E3PCAK8MgYYkw Location (City or ZIP): Santa Clara Status: Full 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
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.