How can I have different colors for the calendar Items?
Example All my meetings should be Blue, All my LunchAppointment items should be Green, etc...
I store EventType in my database and have access to it through CalendarExtensions
EventType = 1 for meetings
EventType = 2 for lunch etc..

Hi,
you should store additional information about calendar item in its property "Extensions".
You can easily set items color with help of item template and item mapping properties.
For instance you can define your item color in method "LoadItems" of web-service and assign its string value to "Extensions" property of calendar item:

item.Extensions = ColorTranslator.ToHtml(MyColor);

In this case in your item mapping element like this must be present:

..., {\"id\":\"myContainer\", \"property\":\"style.backgroundColor\", \"value\":\"Extensions\"},...

You can create your own extension object with public properties "BgColor" and "ForeColor" and assign it to "Extentions" property of calendar item.

BgColor will contain string color of item. ForeColor will contain string item font color. In this case your item mapping will contain the following elements:

...{\"id\":\"myContainer\", \"property\":\"style.backgroundColor\", \"value\":\"Extensions.BgColor\"},{\"id\":\"myContainer\", \"property\":\"style.color\", \"value\":\"Extensions.ForeColor\"}...

Hope this helps.

This is what I am looking for. But, instead of color I need to display different text or image based on property value on the client.

How can I pass the extenstions property to a javascript function to build the right html?

Eg:

"{\"id\":\"region\",\"property\":\"innerHTML\",\"value\":\"Extensions.Region\"},"

and in the client I have a function:

RenderRegion(o)
{

   if( o == 'something' )
   {
         return "Something was returned";
   }
   elseif( o == "something else")
   {
         return "<img src="somthing.gif" />";
   }
   else
   {
         return "<img src="x.gif" />";
   }

}

I tried:

{\"id\":\"sla\",\"property\":\"innerHTML\",\"value\":\"RenderRegion(Extensions.Region)\"},
But this did not work. Any suggestions?

Thanks.

Hi,
"value" property in item mapping must contain a valid java-script expression that uses calendar item properties (not name of any java-script function) http://docs.mediachase.com/doku.php?id=calendar:30:api#calendar_item_template_and_calendar_item_mapping. You have to assign item properties on server side (in web-service method LoadItems). In your case server code can look like this:

CalendarItem ci = new CalendarItem(...);
if(...) {ci.Extensions = "<img src='somthing.gif' />";} else { ci.Extensions = "<img src='x.gif' />";}

In this case your item mapping will be the following:

{\"id\":\"sla\",\"property\":\"innerHTML\",\"value\":\"Extensions\"}

If you have more complex Extensions object for calendar item, your object can contain public string property "ImagePath" for instance. In this case your server code can look like this:

if(...) {myObject.ImagePath = "<img src='somthing.gif' />";} else { myObject.ImagePath = "<img src='x.gif' />";}
ci.Extensions = myObject;

In this case item mapping will be the following:

{\"id\":\"sla\",\"property\":\"innerHTML\",\"value\":\"Extensions.ImagePath\"}

Hope this helps.