Custom Display: Event Roll-Up in Local Date/Time

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.

How It Works

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.

Building It

The Scenario

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.

Step 1: Create 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 Click Modify Shared Page/Add Web Parts/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.

Step 2: Modify the FormatDate JavaScript to Alter the Date Output Format

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

JavaScript for Event Roll-Up in Local Date/Time

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>

Display HTML for Event Roll-Up in Local Date/Time

<tr>

</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="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>

<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>

Contents for Localized Event Roll-Up Insertion for Event Roll-Up in Local Date/Time

<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>

<![CDATA[