SeedCodeCalendar12

Web Direct Integration

Note: Web Direct support is included in SeedCode calendar version 7.25 and higher (version 7.25 is a paid upgrade from earlier versions). Check out our version history for more.

How can I add the Web Direct calendar to my existing calendar deployment?

These instructions will add both the new Web Direct layouts and support for FileMaker Server 13's new Perform Script on Server (PSOS).

The new web direct layouts have been added to the Pro Calendar as of version 7.25 If you have a calendar earlier than that you have two options for adding the Web Direct interface to your solutions:

Paste the new code into your version.

Pasting can be a lot of work, but it's not hard work and the instructions which follow will walk you through it step-by step. This is way to go if you've pasted the calendar into your file ("embedded" it, instead of "linking" it).

This is also the way to go if you've heavily modified your instance of the calendar, as re-integrating would mean those mods need to be redone.

Re-integrate the new calendar with your database.

This is a more compelling option if you've linked the calendar to your file instead of embedding it. If you then link this new calendar (again, instead of embedding it) you'll skip the somewhat tedious layout creation needed to get all the Web Direct layouts into your file.

This is also what you'd do if you have an older calendar--older than say version 6.17-- or if you have SeedCode Complete. While you can paste the WebDirect code into older calendars, you first need to bring them up to version 6.25, which is a lot of work. So re-integrating is likely the best bet unless you've made a LOT of mods to your calendar.

If this is what you'd like to do, simply follow the "linking" instructions here: Quick Integration.

Pasting the Web Direct Calendar into your Calendar

Tips

One tip: the most common mistake folks make integrating the calendar (or moving any FMP code from file to file) is not performing steps in order. FileMaker is very sensitive to the order in which new code is pasted into a file--create layouts before you paste in a script looking for that layout and all will be well; past the script in before the layout expected in that script has been created and you'll have some busted code that is particularly hard to unravel.

So, even if you're an experienced developer, follow the steps here carefully and in order--at for your first calendar. =)

Step 1 of 10: Table Occurrence Changes

Begin by backing up your file (really).

You'll add two new table occurrences to the relationship graph in order to support the Web Direct features of the new calendar. Both are instances of tables you already have (i.e. there are no new tables to make).

Navigate to the Relationships tab of the Manage Database window and click the "+" button in the lower left to create each of these new table occurrences:

"GanttBars" based on the table CalendarInterface

"CalendarInterfaceColors" based on CalendarColors.

Don't connect these to anything now, we'll do that in step 4 below.

Step 2 of 10: Import Theme(s)

In your file, select Manage / Themes from FileMaker's File menu and click the "Import" button. Select the the new copy of the calendar you've downloaded and you'll see a couple themes to import. Import all the Web Direct themes (beginning "SC Web Direct Cal") you'd like to use in your file. You'll pick one of these themes to get started with in the next step below.

Step 3 of 10: New Blank Layouts

FileMaker is really sensitive to the order of the following operations. In this step we'll create blank layouts with the correct layout names, and then after we've pasted in the scripts that refer to these layouts we'll return to paste the calendar objects on to these layouts in step 8.

This is most easily done by creating the first layout listed below, and duplicating it to create the others. Here is how to create that first layout:

Create the layout and then visit Layout Setup and uncheck the box beside "Show field frames when record is active". Click on the views tab and disable all but form view.

Delete the header and footer part. Make the layout body white.

Base the layout on one of the themes you imported above. Also uncheck the box to enable QuickFind.

Switch the "Show records from" drop-down to make the layout based on "CalendarInterface" (all the layouts below will be based on this).

Keep duplicating and renaming layouts until you're through the list below. Don't assign your own names to any layouts now--even if you'd like to--you can rename them again after you're up and running, providing your abide by a few rules here. Make sure layout names are spelled exactly as they are below.

Calendar - Day View
Calendar - Day View - no Side Menu
Calendar - Day Simple View
Calendar - Day Simple View - no Side Menu
Calendar - Week View
Calendar - Week View - no Side Menu
Calendar - Week Simple View
Calendar - Week Simple View - no Side Menu
Calendar - Month View
Calendar - Month View - no Side Menu
Calendar - Schedule View
Calendar - Schedule View - no Side Menu
Calendar - Grid View
Calendar - Grid View - no Side Menu
Calendar - Gantt View
Calendar - Gantt View - no Side Menu
Calendar Color Records Part 2
Calendar - Week View Dark
Calendar - Week View Bright

Now change those last two layouts to the alternate themes "SC WDirect Cal Dark" and "...Bright" (if you've added them).

Get in the habit of pausing after every step to backup your file.

Step 4 of 10: New Fields & Relationships

The new Web Direct calendar requires a whole slew of new fields to be added to the CalendarInterface and CalendarRows tables. The easiest way to do this is to open the new version of the calendar you've downloaded, sort the fields by creation order, and copy the fields shown in blue below; then paste these into the tables in you file.

For the CalendarInterface table (click for a larger image)...

(There are even more fields than shown here: your last field will be "timepickerdown")

For the CalendarRows table (click for a larger image)...

Lastly there is one new field to create in the CalendarColors table. Add a container field named "ColorContainer".

Once those fields are in place you can return to the Relationships tab of Manage Database and create relationships to the two new table occurrences you created in step 1.

Please create the following relationships:

From "CalendarRows::Common" = "GanttBars::Common". No creation options needed.

From "CalendarInterface::Preview_SelectedColorFieldValue_Glob" = "CalendarInterfaceColors::Name". No creation options needed.

From "CalendarInterface::Preview_SelectedID" = "ToDoList::ID" where the ToDoList side has "Allow creation..." turned on.

Finally delete the relationship you may already have between CalendarRows and SampleEvents (or whatever you're calling your events table) and create this relationship instead:

From "CalendarInterface::Preview_SelectedID" to "SampleEvents::ID" where the SampleEvents side has "Allow creation..." turned on.

Double check your work against the relationship graph in the new copy of the calendar you've downloaded. You should be able to arrange your relationships (at least the calendar interface side) to look exactly like ours:

Step 5 of 10: Changed Fields

There area only two existing calendar fields that have changed in this new version. Please edit the fields CalendarRows::CalendarColorReptCalc and SampleEvents::z_sc_ColorCalc and replace their definitions with those copied from the new calendar you just downloaded.

Note that you'll also be changing this field type of each from Text to Container. Don't forget to do that.

After making these changes the colors in your calendar won't appear correctly until the end of our integration here, but don't worry.

Step 6 of 10: New Scripts

Copy the folder of scripts named "New Scripts for Web Direct" from our new version of the calendar and paste or import it into your file.

It is unlikely that you have any scripts in your solution with exactly the same names as these, but if you do it will cause problems. So find FileMaker's Import.log file (in the same folder as your FileMaker file, or in the FileMaker application folder) and scan the recent entries for the scripts you just imported. If you see any without "0" errors, change the name of your original script, then rename our newly created script, removing "copy" from its name.

Once all the new scripts are in place you can return to the layouts created in step 3 and assign two script triggers to each of them except layout "Calendar Color Records Part 2":

OnRecordLoad run the script "Load Calendar Layout"

OnRecordCommit run the script "Event On Commit"

Step 7 of 10: Changed Scripts

The following scripts have been changed in the new calendar, either to accommodate Web Direct or to fix bugs. These are not scripts you've likely changed so please copy the contents of each of the following scripts from the new file and paste it into your file replacing the steps in your versions of these scripts:

Check System Formats
Demo Date
Apply Color Settings { Close ; DontRefresh }
Load Calendar Layout
Toggle Use Simlple Views
Switch to Simple View?
Date Previous
Date Next
Date Specific ( Date )
Time Earlier
Time Later
Refresh Calendar
Insert into Calendar { Column }
Insert into Calendar - Write Event { No Content }
Load records into Gantt Chart
Date Zoom in on Gantt
Date Zoom out on Gantt
Gantt Date Range ( Spread )
Create Edit Delete Event ( SourceNo ) { Operation , Hide, DateStart , DateEnd , TimeStart ... }
Load Calendar Color Coding
Halt Layout Based Script Triggers

We also made changes in the script "Upon Opening". If you've changed what layout the script goes to at the end, you'll want to copy our new version of this script's steps into your file, but then add your alterations back, going to the layout of your choice at the end. Note that you know have two potential layout endings, one for Web Direct and one for FileMaker Pro.

You'll also have to edit the "Load Calendar Settings - On Startup --- Edit Configuration Here ---" script. If you haven't modified any of the settings in this script in your file, then you can just copy/paste the entire contents from the new file into yours (like you did with the other scripts above). However, if you have modified your settings, you'll want to remove the step that sets the $$sc_ColorDefault variable, and replace the two nested If[] clauses that follow the "Double check display graphics" comment. (You'll see a new sub script named "Load Calendar Graphics Part 2".)

Step 8 of 10: New Layout Contents

Now that we've imported all the requisite scripts, we can revisit each of the layouts created in step 3 and paste the calendar objects on to that layout.

You'll be warned that you'll be increasing the height of each layout; that's OK.

While the layout heights in FileMaker 13 take care of themselves automatically, the layout widths do not. You'll need to manually move the right edge of the layout out to the same place it is on the layouts in our file (for most layouts this at 1170px, though there are often objects extending past that to the right).

If you've imported our alternate themes you'll also want to add a body color to the bodies of the "...Dark" and "...Bright" layouts, employing the body color used in the original layout.

Step 9 of 10: Change the contents of a couple existing layouts .

As you know, the Web Direct calendar introduces a new way for us to render our event colors: we're now doing these as container fields instead of colored text. You can switch the desktop calendar to use this method as well--and you'll want to so that you only have one place to define color.

You've already got the fields and scripts in place for this. Now you just need to replace the objects on the layout "Assign Colors" with the objects from that layout in the new version of the calendar. Go do that now.

Once you have, when you enter browse mode you likely won't see any colors in the "Color Pallets" side of the screen. No problem: run the script "Upon Opening". This may tell you it needs to update some colors and that this could take a few minutes. Go ahead and agree to that.

When you can see colors in the pallets you'll want to assign some colors to your statuses as the ones you've previously assigned won't be there anymore. Assign colors to your statuses, then click "apply" and continue with the instructions below. You're almost done. If you want to use colors that aren't here, create any little 20px x 20px swatch of color (even a FileMaker colored rectangle will do) and paste it in along side your status. At this point your Web Direct layouts should look good but your original calendar layouts still need some cleaning up.

Step 10 of 10: Cleaning Up

There are a few things you'll want to clean up in the next section, but having run the Upon Opening script in the step above you should now see the web direct layouts working.

From the layout menu select any of the "Calendar... View" layouts you pasted in from the new calendar and you should see your events in them.

If you do, congratulations, you'll just clean up a few layouts below before you're all done. If you don't see your events, double check that you added the script triggers in step 6 above. If you did and you still don't see things working, please take a look at our troubleshooting page or get in touch--we'll ask you to send us a copy of your files and we can likely determine what's wrong.

Cleaning Up.

There are a few more things you'll want to do--some more layouts you'll want to edit--now that you have the guts of the new calendar working.

Changing the way colors are displayed on your old calendar layouts.

In order to get your new colors looking correct in the Desktop calendar layouts you'll need to make a formatting change to each tab of the calendar. If you haven't modified your layouts extensively you might want to just copy and paste the layout content from the new file. But if you want to mod your existing layouts, the method is is best explained in a video, so please watch this:

https://www.youtube.com/watch?v=juVxU5BtBSA

Formatting the Event Popover to match your data

The details of your events are shown in a popover in Web Direct. You'll follow the instructions here to format these popovers to show fields from your records: Formatting Event Popovers.

Simplifying your Splash layout for Web Direct

You'll see that the Splash layout in the new calendar is pretty simple and devoid of gradients. We did this to make the first-open experience in Web Direct as fast as possible. I'd suggest doing the same with your splash layout, but you can see how it feels and simplify it only if you need to.