| | Stumble It! | Add to Mixx! | | diigo it | | Slashdot |

Tuesday, December 16, 2008

SharePoint Calendar Item Pop-up Preview

This one is going to get a bit technical so if you're not ready to do some high-brain-powered activity, you may just want to pass this one by.

If you ARE looking to put in some effort and thought beyond just copy/pasting, then this may interest you.
The result of this project will make it possible for your users to get quick glances at the details of an event displayed on a SharePoint calendar without having to click the link and look at the page. To do it the way I did, you'll need SharePoint Designer so you can make the pop-up page. Not having SPD doesn't stop you, but it will mean that your event detail pop-ups will look strange.

So, if you're ready, let's begin:
Step 1 - Create the Calendar
  • Hopefully this is already done, but if not then it's time.
  • Make your Calendar list however you need to, but be sure to include a Calculated Column field with .AT LEAST. the following code:
    =CONCATENATE("<tag> <nobr style='font-weight:lighter;'><span onMouseOver=if(event.shiftKey){popUp('xxx')}>",[Title],"</span></nobr>")
  • You're welcome to add any other code you might want for colorification, but this code
  • MUST be included and working.
Step 2 - Create the Pop-up Display
  • In SPD, navigate to the folder where you have your calendar saved, usually it's something like "Lists > calendar".
  • Create a new ASPX file.
  • In the new ASPX file, go to "Insert > SharePoint Controls > List Form..."
  • In the pop-up window, select the calendar list that you are working with, click the "Display item form (used to view list items)" option, and uncheck the "Show standard toolbar" option.
  • You may need to set the style URL to "/_layouts/1033/styles/core.css".
  • Go to "Insert > SharePoint Controls > Web Part..." and add a "Content Editor Web Part" to the bottom of the page with the following code - it will remove the "Close" button and some other unwanted fields (like the "Workspace" field) from being displayed:
    <script type="text/javascript">
    var theTRs = document.getElementsByTagName("TR");
    var r=0;
    while (r < theTRs.length)
    { try
    { strLabel = theTRs[r].innerText || theTRs[r].textContent;
    strLabel = strLabel.replace(/\t/g,"").replace(/\n/g,"");
    if (strLabel.search("cc") == 0 || strLabel.search("Workspace") == 0)
    { theTRs[r].style.display = "none"; }
    }
    catch(err){}
    r+=1;
    }

    var theButtons = document.getElementsByTagName("INPUT");
    var b=0;
    while (b < theButtons.length)
    { try
    { if (theButtons[b].value == "Close")
    { theButtons[b].style.display = "none"; }
    }
    catch(err){}
    b+=1;
    }
    </script>
  • Name this file "popupDisplay.aspx" and remember the URL for where you save this file.
Step 3 - Customize Calendar.aspx
  • Open your browser to the Calendar.aspx page that you've been working with.
  • Go to "Site Actions > Edit Page" in the upper right and add a Content Editor Web Part to the bottom of the page.
  • Click on the "Source Editor..." button and add the following code:
    <div id='popUpDiv' style='display:none;position:absolute;'>
    <div
    onClick='hidePopUp()'
    style='border-style:solid;
    border-width:1px;
    background:red;
    position:absolute;
    top:0px;
    left:456px;
    cursor:pointer;'>
    close(x)
    </div>
    <iframe
    id='popUpFrame'
    frameborder='0'
    src=''
    style='width:520px;
    height:600px;
    border-style:solid;
    border-width:1px'>
    </iframe>
    </div>
    <script type="text/javascript">
    var theTags = document.getElementsByTagName("A");
    var i=0;
    while (i < theTags.length)
    { try
    { TagContent = theTags[i].innerText || theTags[i].textContent;
    if (TagContent.search("<tag>") >= 0)
    { strId = theTags[i].href.substr(theTags[i].href.search("ID=")+3);
    theTags[i].innerHTML = TagContent.replace(/xxx/g,strId);
    }
    }
    catch(err){}
    i=i+1;
    }

    function popUp(x)
    {
    var popUpFrame = document.getElementById("popUpFrame");
    var popUpDiv = document.getElementById("popUpDiv");
    popUpFrame.src = "http://path.to/popupDisplay.aspx?ID=" + x;
    popUpDiv.style.display = "";
    popUpDiv.style.top = "25%";
    popUpDiv.style.left = ((screen.width - 520)/2);
    }

    function hidePopUp()
    { popUpFrame.src = ""; popUpDiv.style.display = "none"; }</script>
  • Be sure to modify the "http://path.to/popupDisplay.aspx" to point to the URL you hopefully remembered from Step 2.
Now when you view the page, just hold the shift key while you hover the mouse over the event title and you should see a pop-up window showing just the details for that event.

Enjoy!

9 comments:

sanjay said...

HI
Its a Wonderful
However Its not working for Me
I followed all the steps
I think its something related to Calculated Column
Can you Please confirm the Name of the Column and also do i need to change the value
popUp('xxx')

to something else
Please reply

Ben said...

Hi Sanjay,

Sorry it's taken so long to respond. You caught me on a little vacation =)

The name of the calculated column is only relevant to the Calendar view.

* Calendar View > View Dropdown > Modify this view > Calendar Columns > Month/Week/Day View Title > [CALCULATED COLUMN]

Other than that, the name of the column isn't important. Also, the 'xxx' reference is just used for identification within the code. When the re-write code finds 'xxx' it replaces it with the ID of the item.

If this doesn't clear up your question, feel free to send screenshots of what you're looking at and I'll be happy to help.

ben[at]bradleyit.com

-Ben

Arunya said...

Hi,

This article is so good.

But popup is not working for me.
I followed ur comments step by step but not able to get popup.

I think the calculated column is not calling the Javascript function.

Please give a solution to this issue.

Ben said...

Arunya,

I'd love to help, but I can't do much without some more information about what's going on. Screenshots would be very helpful.

You can send them to me - ben(at)bradleyit.com

branovuk said...

Hi,
It is very interesting article. I am more on the admin side, but since it is not that big team, I like to help. Two questions:
1. When you said: add script, do you mean on the in the same file, right before body and html
2. When you said: "...Be sure to modify the "http://path.to/popupDisplay.aspx" to point to the URL..." - I cannot find that in your code anywhere, what I am missing?
Thanks,
Brano

Ben said...

Brano,

Sorry for taking so long to respond to you, you caught me on a weekend spent fishing with my wife's family.

As for your questions, I'm not sure which part of the article you're referring to with question #1. For question #2, however, the "http://path.to/popupDisplay.aspx" is in the 3rd line in the "function popUp(x)" block of code from Step 3.

-Ben

Surendra Singh said...

Hi,

This article is so good.

But popup is not working for me.
I followed ur comments step by step but not able to get popup.

I think the calculated column is not calling the Javascript function.

Please give a solution to this issue.

Rudy Rulz said...

HI Ben,
Thanks a Ton For awesome Article.
I have tried all the steps as you mention & its works for me with the small bug....
While reloading a page its works with shift key but its not working for another next date or dates.

I am looking for an article by which I can have a mini SharePoint 2007 calendar with a event tool tip.
If you have any suggestion the please let me know.

Thanks & Regards,
RUDY

Julio Figueroa said...

Hi Ben,

Thanks a lot for your article.

I would love to be able to edit the item from the popup menu.

I fact, I did it using an edit form. HOWEVER, I am facing two problems (one is far worse than the other)

1. The main calendar does not get updated (major)
2. I cannot close the popup after saving.

I would much appreciate if you could help me.

Cheers,
Julio