This section walks through the process of modifying a roll-up display with JavaScript to display events that are localized to the current user’s time zone.
These procedures require the following:
o The Events with Time Zone Template, which will be used by the roll-up to display data
o An Event list
o The Event SpreadSheet Roll-Up Advanced web part – The DWP for this web part will be modified to achieve the desired functionality
o Display HTML and JavaScript, made available here, that will alter the display of the roll-up so that it shows events in the user’s local time zone
These are the items that you need to change to alter the default display of the web part.
1. JavaScript (click here)
o ShowAttachment – Returns the Paper Clip image if attachments exist for the event
o ShowWorkspace – Returns the Workspace image and URL if an Event Workspace exists for the event
o ShowRecurrence – Returns the Recurrence image if the event is of a recurring type
o ShowNext – Displays the Next link if there are more items to be displayed. Connected to Maximum Results Returned.
o ShowPrevious – Displays the Previous link if previous items exist to be displayed. Connected to Maximum Results Returned.
o ChangeDateToLocale – Changes the date entered to the local date and outputs the result
o CheckTimeZone – Checks the local time zone to look for the current Daylight Savings Time status
o FormatDate – Formats the date to a specific design
2. Display HTML (click here)
IMPORTANT! When copying and pasting from the online help into FrontPage, hard returns may be inserted. These will need to be removed to avoid any errors.
If you look at the table in Spreadsheet Roll-Up Advanced, you will see that a number of fields from the List being searched are referenced with a “%”, both before and after the item. These include both the field headers (%Title Header%, %Location Header%, %Begin Header%, %End Header%) and the field values (%DisplayItemURL%, %Workspace%, %Attachments%, %Recurrence%, %Title%, %End%, %Begin%, %Time Zone%, %Location%, %NextURL%, %PreviousURL%). When working with Events with Time Zone, these are the fields available to you while building your custom solution.
These procedures begin with the assumption that you have created an Events with Time Zone List with the Events with Time Zone List Template, provided to you with the Workplace Suite, in your site and have filled it in with some test data. You have a personal Dashboard at http://site/yoursite/, where you want add the Localized Events roll-up.
1. Add an Event Spreadsheet Roll-Up Advanced web part to the zone where the roll-up is to be displayed.
2. Export the roll-up as a .dwp file
o Click on the Actions menu and then Export…
o Save the file on your computer as Localized Events.dwp
3. Delete the generic Spreadsheet Roll-Up Advanced web part from your site
o Click on the Actions menu and then Delete.
o Click OK to confirm.
4. Edit Localized Events.dwp on your computer
o Change the title of the web part by replacing the text between the <Title></Title> tags with Localized Events.
o Insert the content found here (click here) between the last property tags and then save the dwp file.
5. Import your modified web part to your personal site, http://site/yoursite/.
o Place the page in Edit mode and select the Add a Web Part link
o Click the Advanced Web Part gallery and options link
o Click the small arrow on the right-hand side of the Browse bar and select Import
o Enter the name and location of your .dwp file or click Browse to find it on your computer
o Click Upload
6. Drag the uploaded web part to the zone where your roll-up should be displayed.
7. The administration interface is displayed so you can select the site and lists from which you want to roll up data. Once you have made these selections, close the administration interface. The Events roll-up will be displayed with items in your local time zone.
1. Locate
the JavaScript Function Format Date by locating the return line with the
following text:
return strMonth + "/" + strDay + "/" + strYear + " " +
strHour + ":" + strMinute + " " + strAMPM;
2. Change this text to output the date and time in the desired format. The default date format is: 01/01/2001 12:00 AM
For further assistance with available date output capabilities, a “How To” can be accessed at http://www.w3schools.com/js/js_obj_date.asp
<script language="javascript">
function ShowAttachment(strAttachment)
{
if (strAttachment == "-1")
{
document.write('<img src=\"_layouts/images/attachhd.gif\">');
}
else
{
document.write(' ');
}
}
function ShowWorkspace(strWorkspace, strTarget)
{
if (strWorkspace != "")
{
var arrHoldLink = strWorkspace.split(",");
document.write('<a target=\"" + strTarget + "\" href=\"" + arrHoldLink[0] + "\"><img border=\"0\"
src=\"_layouts/images/mtgicon.gif\"></a>');
}
else
{
document.write(' ');
}
}
function ShowReccurence(strReccurence)
{
if (strReccurence == "-1")
{
document.write('<img src=\"_layouts/images/recur.gif\">');
}
else
{
document.write(' ');
}
}
function ShowNext(strNext)
{
if (strNext != "")
{
strNext = strNext.replace("javascript:\" OnClick=\"javascript:SubmitFormPost(\"","");
strNext = strNext.replace("\");return false;\"","");
document.write('<a href=\"javascript:\" OnClick=\'javascript:SubmitFormPost(\"' + strNext + '\");return false;\'>Next<img
valign=\"abs_bottom\" src=\"_layouts/images/marr.gif\" border=\"0\"></a>');
}
else
{
document.write(' ');
}
}
function ShowPrevious(strPrevious)
{
if (strPrevious != "")
{
strPrevious = strPrevious.replace("javascript:\" OnClick=\"javascript:SubmitFormPost(\"","");
strPrevious = strPrevious.replace("\");return false;\"","");
document.write('<a href=\"javascript:\" OnClick=\'javascript:SubmitFormPost(\"' + strPrevious + '\");return false;\'><img
valign=\"abs_bottom\" src=\"_layouts/images/marrrtl.gif\" border=\"0\">Previous</a>');
}
else
{
document.write(' ');
}
}
function ChangeDateToLocale(strDate, strTZ)
{
var strHoldTimeZone = strTZ;
if ((strDate != null) && (strDate != ""))
{
if (strTZ.indexOf("GMT") >= 0)
{
strTZ = strTZ.substring(4,10);
strTZ = strTZ.replace(":","");
}
else
{
strTZ = strTZ.substring(0,5);
strTZ = strTZ.replace(":","");
strTZ = "+" + strTZ;
}
var dtNewDate = new Date(strDate + " " + strTZ);
var strNewDate = dtNewDate.toLocaleString();
//document.write (new Date().toString());
if (strNewDate != "")
{
var dtNewDate = new Date(strNewDate);
if (checkTimeZone())
{
if (strHoldTimeZone.indexOf("*") >= 0)
{}
else
{
dtNewDate = dtNewDate.setHours(dtNewDate.getHours() - 1);
}
}
else
{
if (new Date().toString().indexOf("ST") >= 0)
{
if (strHoldTimeZone.indexOf("*") >= 0)
{}
else
{
dtNewDate = dtNewDate.setHours(dtNewDate.getHours() - 1);
}
}
}
document.write (FormatDate(dtNewDate));
}
}
}
function checkTimeZone() {
var rightNow = new Date();
var date1 = new Date(rightNow.getFullYear(), 0, 1, 0, 0, 0, 0);
var date2 = new Date(rightNow.getFullYear(), 6, 1, 0, 0, 0, 0);
var temp = date1.toGMTString();
var date3 = new Date(temp.substring(0, temp.lastIndexOf(" ")-1));
var temp = date2.toGMTString();
var date4 = new Date(temp.substring(0, temp.lastIndexOf(" ")-1));
var hoursDiffStdTime = (date1 - date3) / (1000 * 60 * 60);
var hoursDiffDaylightTime = (date2 - date4) / (1000 * 60 * 60);
if (hoursDiffDaylightTime == hoursDiffStdTime) {
return false;
} else {
return true;
}
}
function FormatDate(dtDate)
{
if (dtDate != "")
{
var holdDate = new Date(dtDate);
var strMonth = "";
var strDay = "";
var strYear = "";
var strHour = "";
var strMinute = "";
var strAMPM = "AM";
strHour = holdDate.getHours().toString();
if (strHour == "0") { strHour = "12"; strAMPM = "AM";}
else if (strHour == "1") { strHour = "01"; strAMPM = "AM"; }
else if (strHour == "2") { strHour = "02"; strAMPM = "AM"; }
else if (strHour == "3") { strHour = "03"; strAMPM = "AM"; }
else if (strHour == "4") { strHour = "04"; strAMPM = "AM"; }
else if (strHour == "5") { strHour = "05"; strAMPM = "AM"; }
else if (strHour == "6") { strHour = "06"; strAMPM = "AM"; }
else if (strHour == "7") { strHour = "07"; strAMPM = "AM"; }
else if (strHour == "8") { strHour = "08"; strAMPM = "AM"; }
else if (strHour == "9") { strHour = "09"; strAMPM = "AM"; }
else if (strHour == "10") { strHour = "10"; strAMPM = "AM"; }
else if (strHour == "11") { strHour = "11"; strAMPM = "AM"; }
else if (strHour == "12") { strHour = "12"; strAMPM = "PM"; }
else if (strHour == "13") { strHour = "01"; strAMPM = "PM"; }
else if (strHour == "14") { strHour = "02"; strAMPM = "PM"; }
else if (strHour == "15") { strHour = "03"; strAMPM = "PM"; }
else if (strHour == "16") { strHour = "04"; strAMPM = "PM"; }
else if (strHour == "17") { strHour = "05"; strAMPM = "PM"; }
else if (strHour == "18") { strHour = "06"; strAMPM = "PM"; }
else if (strHour == "19") { strHour = "07"; strAMPM = "PM"; }
else if (strHour == "20") { strHour = "08"; strAMPM = "PM"; }
else if (strHour == "21") { strHour = "09"; strAMPM = "PM"; }
else if (strHour == "22") { strHour = "10"; strAMPM = "PM"; }
else if (strHour == "23") { strHour = "11"; strAMPM = "PM"; }
strMinute = holdDate.getMinutes().toString();
if (strMinute == "0") { strMinute = "00"; }
else if (strMinute == "1") { strMinute = "01"; }
else if (strMinute == "2") { strMinute = "02"; }
else if (strMinute == "3") { strMinute = "03"; }
else if (strMinute == "4") { strMinute = "04"; }
else if (strMinute == "5") { strMinute = "05"; }
else if (strMinute == "6") { strMinute = "06"; }
else if (strMinute == "7") { strMinute = "07"; }
else if (strMinute == "8") { strMinute = "08"; }
else if (strMinute == "9") { strMinute = "09"; }
strMonth = holdDate.getMonth();
if (strMonth == "0") { strMonth = "01"; }
else if (strMonth == "1") { strMonth = "02"; }
else if (strMonth == "2") { strMonth = "03"; }
else if (strMonth == "3") { strMonth = "04"; }
else if (strMonth == "4") { strMonth = "05"; }
else if (strMonth == "5") { strMonth = "06"; }
else if (strMonth == "6") { strMonth = "07"; }
else if (strMonth == "7") { strMonth = "08"; }
else if (strMonth == "8") { strMonth = "09"; }
else if (strMonth == "9") { strMonth = "10"; }
else if (strMonth == "10") { strMonth = "11"; }
else if (strMonth == "11") { strMonth = "12"; }
strDay = holdDate.getDate();
if (strDay == "1") { strDay == "01"; }
else if (strDay == "2") { strDay == "02"; }
else if (strDay == "3") { strDay == "03"; }
else if (strDay == "4") { strDay == "04"; }
else if (strDay == "5") { strDay == "05"; }
else if (strDay == "6") { strDay == "06"; }
else if (strDay == "7") { strDay == "07"; }
else if (strDay == "8") { strDay == "08"; }
else if (strDay == "9") { strDay == "09"; }
strYear = holdDate.getFullYear();
return strMonth + "/" + strDay + "/" + strYear + " " + strHour + ":" + strMinute + " " + strAMPM;
}
else
{
return "";
}
}
</script>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="ms-smallsectionline" align="center"><img src="_layouts/images/recur.gif"></td>
<td class="ms-smallsectionline" align="center"><img src="_layouts/images/attachhd.gif"></td>
<td class="ms-smallsectionline" align="center"><img src="_layouts/images/mtgicnhd.gif"></td>
<td class="ms-smallsectionline" align="left"><%Title Header%></td>
<td class="ms-smallsectionline" align="left"><%Location Header%></td>
<td class="ms-smallsectionline" align="left"><%Begin Header%></td>
<td class="ms-smallsectionline" align="left"><%End Header%></td>
</tr>
<END>
<tr>
<td class="ms-smallsectionline" width="3%" align="center" valign="top"><script
language="javascript">ShowReccurence("<%Recurrence%>")</script></td>
<td class="ms-smallsectionline" width="3%" align="center" valign="top"><script
language="javascript">ShowAttachment("<%Attachments%>", "_self")</script></td>
<td class="ms-smallsectionline" width="4%" align="center" valign="top"><script
language="javascript">ShowWorkspace("<%Workspace%>")</script></td>
<td class="ms-smallsectionline" width="30%" align="left" valign="top"><a href="<%DisplayItemURL%>"
target="_self"><%Title%></a> </td>
<td class="ms-smallsectionline" width="16%" align="left" valign="top"><%Location%> </td>
<td class="ms-smallsectionline" width="22%" align="left" valign="top"><script
language="javascript">ChangeDateToLocale("<%Begin%>", "<%Time Zone%>")</script> </td>
<td class="ms-smallsectionline" width="22%" align="left" valign="top"><script
language="javascript">ChangeDateToLocale("<%End%>", "<%Time Zone%>")</script> </td>
</tr>
<END>
<tr valign="bottom">
<td valign="abs_bottom" align="left" colspan="4"><script
language="javascript">ShowPrevious('<%PreviousURL%>')</script></td>
<td valign="abs_bottom" align="right" colspan="3"><script
language="javascript">ShowNext('<%NextURL%>')</script></td>
</tr>
</table>
<ListTemplates xmlns="CorasWSC.Event.SpreadSheet.RollUp"><?xml version='1.0' ?><Lists><List><ListType>Events</ListType><ListTypeName>EventTZ</ListTypeName><NumberOfFields>22</NumberOfFields><OrderBy>Title, Attachments, BeginDATE, EndDATE, Description, Location, Recurrence, Workspace,
TimeZone</OrderBy><ListFields>Title,Attachments,Begin~DATE,End~DATE,Description,Location,Recurrence,Workspace,Time
Zone</ListFields><DisplayPer>,,,,,,,,</DisplayPer><SearchFields>Title,Attachments,Begin~DATE,End~DATE,Description,Location
,Recurrence,Workspace,Time Zone</SearchFields></List></Lists></ListTemplates> <DontConvertHttp xmlns="CorasWSC.Event.SpreadSheet.RollUp">true</DontConvertHttp> <DateFormat xmlns="CorasWSC.Event.SpreadSheet.RollUp">MM/dd/yyyy, hh:mm:ss tt</DateFormat>
<Display xmlns="CorasWSC.Document.SpreadSheet.RollUp">
<![CDATA[
<script language="javascript">
function ShowAttachment(strAttachment)
{
if (strAttachment == "-1")
{
document.write('<img src=\"_layouts/images/attachhd.gif\">');
}
else
{
document.write(' ');
}
}
function ShowWorkspace(strWorkspace, strTarget)
{
if (strWorkspace != "")
{
var arrHoldLink = strWorkspace.split(",");
document.write('<a target=\"" + strTarget + "\" href=\"" + arrHoldLink[0] + "\"><img border=\"0\"
src=\"_layouts/images/mtgicon.gif\"></a>');
}
else
{
document.write(' ');
}
}
function ShowReccurence(strReccurence)
{
if (strReccurence == "-1")
{
document.write('<img src=\"_layouts/images/recur.gif\">');
}
else
{
document.write(' ');
}
}
function ShowNext(strNext)
{
if (strNext != "")
{
strNext = strNext.replace("javascript:\" OnClick=\"javascript:SubmitFormPost(\"","");
strNext = strNext.replace("\");return false;\"","");
document.write('<a href=\"javascript:\" OnClick=\'javascript:SubmitFormPost(\"' + strNext + '\");return false;\'>Next<img
valign=\"abs_bottom\" src=\"_layouts/images/marr.gif\" border=\"0\"></a>');
}
else
{
document.write(' ');
}
}
function ShowPrevious(strPrevious)
{
if (strPrevious != "")
{
strPrevious = strPrevious.replace("javascript:\" OnClick=\"javascript:SubmitFormPost(\"","");
strPrevious = strPrevious.replace("\");return false;\"","");
document.write('<a href=\"javascript:\" OnClick=\'javascript:SubmitFormPost(\"' + strPrevious + '\");return false;\'><img
valign=\"abs_bottom\" src=\"_layouts/images/marrrtl.gif\" border=\"0\">Previous</a>');
}
else
{
document.write(' ');
}
}
function ChangeDateToLocale(strDate, strTZ)
{
var strHoldTimeZone = strTZ;
if ((strDate != null) && (strDate != ""))
{
if (strTZ.indexOf("GMT") >= 0)
{
strTZ = strTZ.substring(4,10);
strTZ = strTZ.replace(":","");
}
else
{
strTZ = strTZ.substring(0,5);
strTZ = strTZ.replace(":","");
strTZ = "+" + strTZ;
}
var dtNewDate = new Date(strDate + " " + strTZ);
var strNewDate = dtNewDate.toLocaleString();
//document.write (new Date().toString());
if (strNewDate != "")
{
var dtNewDate = new Date(strNewDate);
if (checkTimeZone())
{
if (strHoldTimeZone.indexOf("*") >= 0)
{}
else
{
dtNewDate = dtNewDate.setHours(dtNewDate.getHours() - 1);
}
}
else
{
if (new Date().toString().indexOf("ST") >= 0)
{
if (strHoldTimeZone.indexOf("*") >= 0)
{}
else
{
dtNewDate = dtNewDate.setHours(dtNewDate.getHours() - 1);
}
}
}
document.write (FormatDate(dtNewDate));
}
}
}
function checkTimeZone() {
var rightNow = new Date();
var date1 = new Date(rightNow.getFullYear(), 0, 1, 0, 0, 0, 0);
var date2 = new Date(rightNow.getFullYear(), 6, 1, 0, 0, 0, 0);
var temp = date1.toGMTString();
var date3 = new Date(temp.substring(0, temp.lastIndexOf(" ")-1));
var temp = date2.toGMTString();
var date4 = new Date(temp.substring(0, temp.lastIndexOf(" ")-1));
var hoursDiffStdTime = (date1 - date3) / (1000 * 60 * 60);
var hoursDiffDaylightTime = (date2 - date4) / (1000 * 60 * 60);
if (hoursDiffDaylightTime == hoursDiffStdTime) {
return false;
} else {
return true;
}
}
function FormatDate(dtDate)
{
if (dtDate != "")
{
var holdDate = new Date(dtDate);
var strMonth = "";
var strDay = "";
var strYear = "";
var strHour = "";
var strMinute = "";
var strAMPM = "AM";
strHour = holdDate.getHours().toString();
if (strHour == "0") { strHour = "12"; strAMPM = "AM";}
else if (strHour == "1") { strHour = "01"; strAMPM = "AM"; }
else if (strHour == "2") { strHour = "02"; strAMPM = "AM"; }
else if (strHour == "3") { strHour = "03"; strAMPM = "AM"; }
else if (strHour == "4") { strHour = "04"; strAMPM = "AM"; }
else if (strHour == "5") { strHour = "05"; strAMPM = "AM"; }
else if (strHour == "6") { strHour = "06"; strAMPM = "AM"; }
else if (strHour == "7") { strHour = "07"; strAMPM = "AM"; }
else if (strHour == "8") { strHour = "08"; strAMPM = "AM"; }
else if (strHour == "9") { strHour = "09"; strAMPM = "AM"; }
else if (strHour == "10") { strHour = "10"; strAMPM = "AM"; }
else if (strHour == "11") { strHour = "11"; strAMPM = "AM"; }
else if (strHour == "12") { strHour = "12"; strAMPM = "PM"; }
else if (strHour == "13") { strHour = "01"; strAMPM = "PM"; }
else if (strHour == "14") { strHour = "02"; strAMPM = "PM"; }
else if (strHour == "15") { strHour = "03"; strAMPM = "PM"; }
else if (strHour == "16") { strHour = "04"; strAMPM = "PM"; }
else if (strHour == "17") { strHour = "05"; strAMPM = "PM"; }
else if (strHour == "18") { strHour = "06"; strAMPM = "PM"; }
else if (strHour == "19") { strHour = "07"; strAMPM = "PM"; }
else if (strHour == "20") { strHour = "08"; strAMPM = "PM"; }
else if (strHour == "21") { strHour = "09"; strAMPM = "PM"; }
else if (strHour == "22") { strHour = "10"; strAMPM = "PM"; }
else if (strHour == "23") { strHour = "11"; strAMPM = "PM"; }
strMinute = holdDate.getMinutes().toString();
if (strMinute == "0") { strMinute = "00"; }
else if (strMinute == "1") { strMinute = "01"; }
else if (strMinute == "2") { strMinute = "02"; }
else if (strMinute == "3") { strMinute = "03"; }
else if (strMinute == "4") { strMinute = "04"; }
else if (strMinute == "5") { strMinute = "05"; }
else if (strMinute == "6") { strMinute = "06"; }
else if (strMinute == "7") { strMinute = "07"; }
else if (strMinute == "8") { strMinute = "08"; }
else if (strMinute == "9") { strMinute = "09"; }
strMonth = holdDate.getMonth();
if (strMonth == "0") { strMonth = "01"; }
else if (strMonth == "1") { strMonth = "02"; }
else if (strMonth == "2") { strMonth = "03"; }
else if (strMonth == "3") { strMonth = "04"; }
else if (strMonth == "4") { strMonth = "05"; }
else if (strMonth == "5") { strMonth = "06"; }
else if (strMonth == "6") { strMonth = "07"; }
else if (strMonth == "7") { strMonth = "08"; }
else if (strMonth == "8") { strMonth = "09"; }
else if (strMonth == "9") { strMonth = "10"; }
else if (strMonth == "10") { strMonth = "11"; }
else if (strMonth == "11") { strMonth = "12"; }
strDay = holdDate.getDate();
if (strDay == "1") { strDay == "01"; }
else if (strDay == "2") { strDay == "02"; }
else if (strDay == "3") { strDay == "03"; }
else if (strDay == "4") { strDay == "04"; }
else if (strDay == "5") { strDay == "05"; }
else if (strDay == "6") { strDay == "06"; }
else if (strDay == "7") { strDay == "07"; }
else if (strDay == "8") { strDay == "08"; }
else if (strDay == "9") { strDay == "09"; }
strYear = holdDate.getFullYear();
return strMonth + "/" + strDay + "/" + strYear + " " + strHour + ":" + strMinute + " " + strAMPM;
}
else
{
return "";
}
}
</script>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="ms-smallsectionline" align="center"><img src="_layouts/images/recur.gif"></td>
<td class="ms-smallsectionline" align="center"><img src="_layouts/images/attachhd.gif"></td>
<td class="ms-smallsectionline" align="center"><img src="_layouts/images/mtgicnhd.gif"></td>
<td class="ms-smallsectionline" align="left"><%Title Header%></td>
<td class="ms-smallsectionline" align="left"><%Location Header%></td>
<td class="ms-smallsectionline" align="left"><%Begin Header%></td>
<td class="ms-smallsectionline" align="left"><%End Header%></td>
</tr>
<END>
<tr>
<td class="ms-smallsectionline" width="3%" align="center" valign="top"><script
language="javascript">ShowReccurence("<%Recurrence%>")</script></td>
<td class="ms-smallsectionline" width="3%" align="center" valign="top"><script
language="javascript">ShowAttachment("<%Attachments%>", "_self")</script></td>
<td class="ms-smallsectionline" width="4%" align="center" valign="top"><script
language="javascript">ShowWorkspace("<%Workspace%>")</script></td>
<td class="ms-smallsectionline" width="30%" align="left" valign="top"><a href="<%DisplayItemURL%>"
target="_self"><%Title%></a> </td>
<td class="ms-smallsectionline" width="16%" align="left" valign="top"><%Location%> </td>
<td class="ms-smallsectionline" width="22%" align="left" valign="top"><script
language="javascript">ChangeDateToLocale("<%Begin%>", "<%Time Zone%>")</script> </td>
<td class="ms-smallsectionline" width="22%" align="left" valign="top"><script
language="javascript">ChangeDateToLocale("<%End%>", "<%Time Zone%>")</script> </td>
</tr>
<END>
<tr valign="bottom">
<td valign="abs_bottom" align="left" colspan="4"><script
language="javascript">ShowPrevious('<%PreviousURL%>')</script></td>
<td valign="abs_bottom" align="right" colspan="3"><script
language="javascript">ShowNext('<%NextURL%>')</script></td>
</tr>
</table>
]]>
</Display>