Form Setup:
1. Create your form with the field needing the calendar pop-up. For this example, I am using a field with the name "MyDateFld".
2. Next to the field create passthru HTML.
type: <a href="javascript:puCal('MyDateFld', '<ComputedText>')">Calendar</a>
Note: Don't type <Computed Text>, this is Computed Text, The text should compute to @WebDbName. This will pass the db's path to the function.
3. Next add the function to the JS Header of the form.
function puCal(fldnm, dbpathnm) {
window.open("/" + dbpathnm + "/PCal!OpenForm&fldnm=" + fldnm, "Calendar", 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=200,height=200')
}
Note: this function takes the field name passed by the user clicking the Calendar link and opens a new window for the calendar specifying the form we are about to create below and passing to that form the name of the field.
4. Create the new calendar form named PCal. (If you change this name, change the name in step 3 above, too.)
5. Create a hidden Computed When Composed (CWC) text field, FldNm, to hold the value of the field name passed by the puCal function. Give it the following formula:
@URLQueryString("fldnm")
6. Create a hidden Computed (C) date/time field, StartDate, to hold the starting date. Give it the following formula:
tmpdate:=@URLQueryString("sdt");
@If(tmpdate=""; @Date(@Today); @TextToTime(tmpdate))
Note: the sdt value will only be passed when the user moves months.
7. Using passthru HTML, create a table containing 2 rows (for the navigation line and the weeks) and 7 columns (one for each day). Our table layout will look similar to the one below with the top row having 3 columns spanned/merged.
<< | < | Cur. Mo. | > | >> |
Su | M | T | W | H | F | Sa |
 | | | | | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | | | | | | |
Below is the HTML code for the 1st two table rows above. Add this passthru HTML to the form just below the two hidden fields.
<table>
<tr><td> << </td><td> < </td><td colspan=3> Cur. Mo. </td><td> > </td><td> >> </td></tr>
<tr><td>Su</td><td>M</td><td>T</td><td>W</td><td>H</td><td>F</td><td>Sa</td></tr>
Note: the <<, <, Cur. Mo., >, and >> are all actually <ComputedText> links. The numbers we will add later. Below is the code to assign for each <ComputedText> formula.
<< - back one year:
tmpdate:=@Text(@Adjust(StartDate; -1; 0; 0; 0; 0; 0));
{<a href="/"} + @WebDbName + {/PCal!OpenForm&fldnm=} + FldNm + {&sdt=} + tmpdate + {"> << </a>}
>> - forward one year:
tmpdate:=@Text(@Adjust(StartDate; 1; 0; 0; 0; 0; 0));
{<a href="/"} + @WebDbName + {/PCal!OpenForm&fldnm=} + FldNm + {&sdt=} + tmpdate + {"> >> </a>}
< - back one month:
tmpdate:=@Text(@Adjust(StartDate; 0; -1; 0; 0; 0; 0));
{<a href="/"} + @WebDbName + {/PCal!OpenForm&fldnm=} + FldNm + {&sdt=} + tmpdate + {"> < </a>}
> - forward one month:
tmpdate:=@Text(@Adjust(StartDate; 0; 1; 0; 0; 0; 0));
{<a href="/"} + @WebDbName + {/PCal!OpenForm&fldnm=} + FldNm + {&sdt=} + tmpdate + {"> > </a>}
Cur. Mo.:
tmpDate:=StartDate;
@Select(@Month(tmpdate); "Jan"; "Feb"; "Mar"; "Apr"; "May"; "Jun"; "Jul"; "Aug"; "Sep"; "Oct"; "Nov"; "Dec") + " " + @Text(@Year(tmpDate))
8. Add the remaining rows of the passthru table. The actual days will be created using the <ComputedText> within the passthru line lines below.
<tr> <ComputedText> </tr>
</table>
Add the following code to the <ComputedText>.
Note: This new code is by Daniel Koffler, 2004. His code is better than my old code. I have made adjustments to it, to shoe-horn it into my existing field names.
REM {Domino Popup Calendar Widget -- Daniel Koffler 2004};
tmpdate:= @Date(StartDate);
REM {-*-*- Get Starting Parameters -*-*-};
FirstOMonth := @Adjust(tmpdate; 0; 0; -(@Day(tmpdate) - 1); 0; 0; 0);
tDayNum := @Weekday(FirstOMonth);
tMonth := @Month(FirstOMonth);
REM {-*-*- Cycle through all slots in table -*-*-};
tmpDates:="";
@For(n :=1; n<=42; n:= n + 1;
nDate:= @Adjust(FirstOMonth; 0; 0; (n - tDayNum); 0; 0; 0);
tDayTxt := @Right("0" + @Text(@Day(nDate)); 2);
tLink:={<a href="#" onClick="opener.document.forms[0].} + FldNm +{.value = '} +@Text(nDate;"D0")+ {';window.close()">} + tDayTxt + "</a></td>";
dspDate := @If(@Month(nDate) != tMonth; {<td class="otherMonth" ></td> };
@If(nDate = @Today;{<td class="today">} +tLink;{<td class="thisMonth">}+tLink));
dspDate:=@If(@Modulo(n;7) =0; dspDate+"</tr><tr>";dspDate);
tmpDates:=tmpDates : dspDate
);
REM {-*-*- Print Results. -*-*-};
@Implode(tmpDates)
previous page
|