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

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

Latest Forum Discussions

See All

Tokkun Studio unveils alpha trailer for...
We are back on the MMORPG news train, and this time it comes from the sort of international developers Tokkun Studio. They are based in France and Japan, so it counts. Anyway, semantics aside, they have released an alpha trailer for the upcoming... | Read more »
Win a host of exclusive in-game Honor of...
To celebrate its latest Jujutsu Kaisen crossover event, Honor of Kings is offering a bounty of login and achievement rewards kicking off the holiday season early. [Read more] | Read more »
Miraibo GO comes out swinging hard as it...
Having just launched what feels like yesterday, Dreamcube Studio is wasting no time adding events to their open-world survival Miraibo GO. Abyssal Souls arrives relatively in time for the spooky season and brings with it horrifying new partners to... | Read more »
Ditch the heavy binders and high price t...
As fun as the real-world equivalent and the very old Game Boy version are, the Pokemon Trading Card games have historically been received poorly on mobile. It is a very strange and confusing trend, but one that The Pokemon Company is determined to... | Read more »
Peace amongst mobile gamers is now shatt...
Some of the crazy folk tales from gaming have undoubtedly come from the EVE universe. Stories of spying, betrayal, and epic battles have entered history, and now the franchise expands as CCP Games launches EVE Galaxy Conquest, a free-to-play 4x... | Read more »
Lord of Nazarick, the turn-based RPG bas...
Crunchyroll and A PLUS JAPAN have just confirmed that Lord of Nazarick, their turn-based RPG based on the popular OVERLORD anime, is now available for iOS and Android. Starting today at 2PM CET, fans can download the game from Google Play and the... | Read more »
Digital Extremes' recent Devstream...
If you are anything like me you are impatiently waiting for Warframe: 1999 whilst simultaneously cursing the fact Excalibur Prime is permanently Vault locked. To keep us fed during our wait, Digital Extremes hosted a Double Devstream to dish out a... | Read more »
The Frozen Canvas adds a splash of colou...
It is time to grab your gloves and layer up, as Torchlight: Infinite is diving into the frozen tundra in its sixth season. The Frozen Canvas is a colourful new update that brings a stylish flair to the Netherrealm and puts creativity in the... | Read more »
Back When AOL WAS the Internet – The Tou...
In Episode 606 of The TouchArcade Show we kick things off talking about my plans for this weekend, which has resulted in this week’s show being a bit shorter than normal. We also go over some more updates on our Patreon situation, which has been... | Read more »
Creative Assembly's latest mobile p...
The Total War series has been slowly trickling onto mobile, which is a fantastic thing because most, if not all, of them are incredibly great fun. Creative Assembly's latest to get the Feral Interactive treatment into portable form is Total War:... | Read more »

Price Scanner via MacPrices.net

Early Black Friday Deal: Apple’s newly upgrad...
Amazon has Apple 13″ MacBook Airs with M2 CPUs and 16GB of RAM on early Black Friday sale for $200 off MSRP, only $799. Their prices are the lowest currently available for these newly upgraded 13″ M2... Read more
13-inch 8GB M2 MacBook Airs for $749, $250 of...
Best Buy has Apple 13″ MacBook Airs with M2 CPUs and 8GB of RAM in stock and on sale on their online store for $250 off MSRP. Prices start at $749. Their prices are the lowest currently available for... Read more
Amazon is offering an early Black Friday $100...
Amazon is offering early Black Friday discounts on Apple’s new 2024 WiFi iPad minis ranging up to $100 off MSRP, each with free shipping. These are the lowest prices available for new minis anywhere... Read more
Price Drop! Clearance 14-inch M3 MacBook Pros...
Best Buy is offering a $500 discount on clearance 14″ M3 MacBook Pros on their online store this week with prices available starting at only $1099. Prices valid for online orders only, in-store... Read more
Apple AirPods Pro with USB-C on early Black F...
A couple of Apple retailers are offering $70 (28%) discounts on Apple’s AirPods Pro with USB-C (and hearing aid capabilities) this weekend. These are early AirPods Black Friday discounts if you’re... Read more
Price drop! 13-inch M3 MacBook Airs now avail...
With yesterday’s across-the-board MacBook Air upgrade to 16GB of RAM standard, Apple has dropped prices on clearance 13″ 8GB M3 MacBook Airs, Certified Refurbished, to a new low starting at only $829... Read more
Price drop! Apple 15-inch M3 MacBook Airs now...
With yesterday’s release of 15-inch M3 MacBook Airs with 16GB of RAM standard, Apple has dropped prices on clearance Certified Refurbished 15″ 8GB M3 MacBook Airs to a new low starting at only $999.... Read more
Apple has clearance 15-inch M2 MacBook Airs a...
Apple has clearance, Certified Refurbished, 15″ M2 MacBook Airs now available starting at $929 and ranging up to $410 off original MSRP. These are the cheapest 15″ MacBook Airs for sale today at... Read more
Apple drops prices on 13-inch M2 MacBook Airs...
Apple has dropped prices on 13″ M2 MacBook Airs to a new low of only $749 in their Certified Refurbished store. These are the cheapest M2-powered MacBooks for sale at Apple. Apple’s one-year warranty... Read more
Clearance 13-inch M1 MacBook Airs available a...
Apple has clearance 13″ M1 MacBook Airs, Certified Refurbished, now available for $679 for 8-Core CPU/7-Core GPU/256GB models. Apple’s one-year warranty is included, shipping is free, and each... Read more

Jobs Board

Seasonal Cashier - *Apple* Blossom Mall - J...
Seasonal Cashier - Apple Blossom Mall Location:Winchester, VA, United States (https://jobs.jcp.com/jobs/location/191170/winchester-va-united-states) - Apple Read more
Seasonal Fine Jewelry Commission Associate -...
…Fine Jewelry Commission Associate - Apple Blossom Mall Location:Winchester, VA, United States (https://jobs.jcp.com/jobs/location/191170/winchester-va-united-states) Read more
Seasonal Operations Associate - *Apple* Blo...
Seasonal Operations Associate - Apple Blossom Mall Location:Winchester, VA, United States (https://jobs.jcp.com/jobs/location/191170/winchester-va-united-states) - Read more
Hair Stylist - *Apple* Blossom Mall - JCPen...
Hair Stylist - Apple Blossom Mall Location:Winchester, VA, United States (https://jobs.jcp.com/jobs/location/191170/winchester-va-united-states) - Apple Blossom Read more
Cashier - *Apple* Blossom Mall - JCPenney (...
Cashier - Apple Blossom Mall Location:Winchester, VA, United States (https://jobs.jcp.com/jobs/location/191170/winchester-va-united-states) - Apple Blossom Mall Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.