How do we use the extentions/extensions when creating the calendar item and trying to access those items in the ItemMapping.  For example, if I want to specify a color for the font in the Extensions field, how would I be able to access that in the item mapping by using say Extensions.color?

Hi,
you can assign any object to Extensions property of calendar item.
For instance you have a "div" with id="MyId" in item template and you want to set some font color inside it.
You can put html color string to item extensions:
item.Extenstions = "#ffffcc";
In this case your item mapping can look like this:
...{\"id\":\"MyId\",\"property\":\"style.color\", \"value\":\"Extentions\"}...

Or you assign object with public string field or property "Color" which will contain html color.
In this case your item mapping can look like this:
...{\"id\":\"MyId\",\"property\":\"style.color\", \"value\":\"Extentions.Color\"}...

Hope this helps.

Okay, but I'm finding I can't assign a value to more than one property for a given ID.  For example, I can't both apply the property innerHTML and style.color to one ID - this does not work:
[{\"id\":\"MyId\",\"property\":\"innerHTML\", \"value\":\"Title\"},{\"id\":\"MyId\",\"property\":\"style.color\", \"value\":\"Extentions\"}]

Hi,
yes you are right. This is limitation of client databinding in current version. We'll try to remove it in future releases.

I don't think this restriction has been removed in the latest version.
I still have problem assigning value to more then one property of a given ID

Any idea

Hi,
please post here your item template and your item mapping. 

I'm using VB.NET for my application. Here is the ItemTemplate for Day view

ItemTemplate = "<div id=""T1"" style=""height:1px; font-size:1px; line-height:1px; margin:0px 2px;""></div>" + _
                       "<div id=""T2"" style=""height:1px; font-size:1px; line-height:1px; margin:0px 1px;""></div>" + _
                       "<div id=""T3"" style=""height:100%;"">" + _
                        "<table id=""Header"" border=""0"" cellpadding=""2"" width=""100%"" cellspacing=""0"" style=""width:100%; font-weight:bold; font-size:11px; color:#ffffff; table-layout:fixed; overflow:hidden; font-family:Verdana,Sans-serif;"">" + _
                            "<tr mcc_action=""move"">" + _
                                "<td style=""cursor:move; overflow:hidden;"" unselectable=""on"">" + _
                                    "<table><tr>" + _
                                        "<td><span id=""sHour"" ></span>:<span id=""sMinute""></span></td>" + _
                                        "<td><img border='0' width='9px' height='7px' src='../Images/g_repeat_white.gif' id=""isRecurring""/></td>" + _
                                        "</tr>" + _
                                    "</table>" + _
                                "</td>" + _
                            "</tr>" + _
                        "</table>" + _
                        "<div id=""title"" style=""cursor:default; color:#ffffff; font-family:Verdana,Sans-serif; font-size:11px;"" unselectable=""on""></div>" + _
                        "<div id=""resizer"" mcc_action=""resize"" style=""font-size:5px; line-height:5px; position:absolute; bottom: 5px; height:5px; width:100%; z-index:11; cursor:s-resize;"">" + _
                            "<table width=""100%"" height=""100%""><tr><td align=""center"" style=""color:#ffffff"">--------------</td></tr></table>" + _
                        "</div>" + _
                        "</div>" + _
                        "<div style=""position:absolute; bottom:0px; width:100%;"">" + _
                            "<div id=""Footer"" style=""height:1px; font-size:1px; line-height:1px;""></div>" + _
                        "</div>"

The ItemTemplateMapping is below

itemMapping = "[" + _
                            "{""id"":""T1"",""property"":""style.backgroundColor"",""value"":""Extensions.Color1""}," + _
                            "{""id"":""T2"",""property"":""style.backgroundColor"",""value"":""Extensions.Color1""}," + _
                            "{""id"":""T3"",""property"":""style.backgroundColor"",""value"":""Extensions.Color2""}," + _
                            "{""id"":""T3"",""property"":""style.borderLeftColor"",""value"":""Extensions.Color1""}," + _
                            "{""id"":""T3"",""property"":""style.borderRightColor"",""value"":""Extensions.Color1""}," + _
                            "{""id"":""Header"",""property"":""style.backgroundColor"",""value"":""Extensions.Color1""}," + _
                            "{""id"":""title"",""property"":""innerHTML"",""value"":""Title""}," + _
                            "{""id"":""sHour"",""property"":""innerHTML"",""value"":""StartDate.getHours()<10?'0'+item.StartDate.getHours():item.StartDate.getHours()""}," + _
                            "{""id"":""sMinute"",""property"":""innerHTML"",""value"":""StartDate.getMinutes()<10?'0'+item.StartDate.getMinutes():item.StartDate.getMinutes()""}," + _
                            "{""id"":""isRecurring"",""property"":""style.display"",""value"":""Extensions.IsRecurring==true ? 'block':'none'""}," + _
                            "{""id"":""Footer"",""property"":""style.backgroundColor"",""value"":""Extensions.Color1""}," + _
                            "{""id"":""Footer"",""property"":""style.borderLeftColor"",""value"":""Extensions.Color1""}," + _
                            "{""id"":""Footer"",""property"":""style.borderRightColor"",""value"":""Extensions.Color1""}" + _
                        "]"
Everything works fine except the second and third property value mapping never gets applied to the DIV tag "T3". The first property get applied to DIV Tag "T3" without any problem. Same problem for the DIV Tag "Footer"

Hi,
just add to "style" attribute of divs "T3" and "Footer" properties "border-left" and "border-right" with values "solid 1px" in item template:

...
"<div id=""T3"" style=""height:100%; border-left:solid 1px; border-right:solid 1px;"">"
...
"<div id=""Footer"" style=""height:1px; font-size:1px; line-height:1px; border-left:solid 1px; border-right:solid 1px;""></div>"
...

Hope this helps.

Hi,
I have already tried that and it doesn't work. As soon as I put the styles as you mentioned above, the border show up but they get the default Black color for the border irrespective of what color i specify in my itemTemplateMapping. Please see in the attached picture. Any other ideas?

Hi,
what object do you assign to "Extensions" property of calendar item in web-service method "LoadItems". Does this object contain public string properties "Color1" and "Color2". What values do you assign to these properties? 

Thanks for looking into it.

I have Extensions Object with Public string properties Color1 and Color2.
In my last post you can see the Dark Green and Light Green colors for the event item. Those colors are applied from the Extension Objects Color1 & Color2 properties. That means there is no problem with the Extension Object. The issue is somewhere else.

Hi,
please download "clean" evaluation web-sample from http://www.mediachase.com/Profile/CustomerDownloads.aspx. Replace "Default.asmx.cs" and "GoogleCalendar.ascx.cs" files with the ones from the attacment. Rebuild web-sample and create not recurring item with some title in Week or Day view. You'll see colored left and right borders around div with title as in attached screenshot.

List of changes:
An instance of "MyExtensions" class is assigned to "Extensions" property of calendar item. This class has public properties "IsRecurring" (bool), Color1 (string), and Color2 (string).

CalendarItem it = new CalendarItem(dr["Id"].ToString(), dr["Title"].ToString(), ((DateTime)dr["StartDate"]).ToString("yyyy.M.d.H.m.s"), ((DateTime)dr["EndDate"]).ToString("yyyy.M.d.H.m.s"), dr["Description"].ToString(), (bool)dr["IsAllDay"], new MyExtensions(false, "yellow", "red"));

In multiday item template "solid 1px" left and right borders were added to title div. In multiday item mapping the following lines were added for title div:

..."{\"id\":\"title\",\"property\":\"style.borderLeftColor\",\"value\":\"Extensions.Color1\"},"+
"{\"id\":\"title\",\"property\":\"style.borderRightColor\",\"value\":\"Extensions.Color2\"}," +...

"Default.asmx.cs" and "GoogleCalendar.ascx.cs" files in zip archive. 

I downloaded the latest version of Calendar 3.2.1 and everything is working now. I did n't had to change any of my code. Thanks for the help.

Thank you for choosing our software.

Mediachase