SharePoint Notes

Popup Description balloon for Calendar Items

Calendar List can be used to share information about events, appointments, meetings and etc.

While I was using this list, I found that it will be better to popup its Description value when a user mouse over to each item cause it basically doesn't. Here's what the common columns of Calendar List are.

Column Name Description
Title (required) Single line of text
Location Single line of text
Start Time (required) Date and time
End Time (required) Date and time
Description Multiple lines of text

Unfortunately, Description column type is "Multiple lines of text" which means this column contains HTML tags that this have to be processed to remove HTML tags before showing its value. Here is a Display Item image and a raw value of Description column. 

  # Display Item

ex) Raw? Description Value

<div>OCS R2 Verification Call for VSP</div>
<div>I support OC engineers to get it done successfully!</div>
<div>Bold:<strong>&nbsp;Bold</strong> </div>
<div><font color="#ff9900"><font color="#000000">Font Color:</font> Orange</font></div>


So, I need to remove HTML tags and I used Regular Expression.
ex) System.Text.RegularExpressions.Regex.Replace(Description Column Value, "<[^>]*>", string.Empty)

But where should I edit for this??? The answer is DefaultTemplates.ascx under
12 Hive\TEMPLATE\CONTROLTEMPLATES\... You can change this directly or override into new one. Calendar List has 3 ways "Day", "Week", "Month" to show Items and you need to change three Templates and they are.

  1. 2477: CalendarViewMonthItemTemplate
  2. 2539: CalendarViewDayItemTemplate
  3. 2617: CalendarViewWeekItemTemplate

    [Line Number: Template Name]

It is time to edit this template. Find A tag and put the title attribute with this codes and execute IISRESET.


title="<%# System.Text.RegularExpressions.Regex.Replace(DataBinder.Eval(Container,"DataItem.Description",""), "<[^>]*>", string.Empty)%>"


Now you can see the poping up Description value if you mouse over to any item that has Description value.

  # Demo poping up Description value

Add comment