Hello,

My client wants to incorporate travel time into appointments.  I'm thinking of changing Calendar.MultiDayView.ItemTemplate to include differently colored bars on either side or both sides of the appointment.  I have already added new fields to the CalendarItems table.  I'm not immediately sure how you size the item based on the hours it is scheduled for.  Can you please point me in the right direction for this task?

 

Thank you.

Hi,
height of item is based on item duration and property "GridRowHeight" in MultiDay view.   Number of rows that item occupies depends on item duration. If your colored bar has the same height as item you can place absolute positioned "div" with height "100%" and "top" - "0px" inside item template. Store color of the bar in item "Extensions" property like in the following post: http://www.mediachase.com/Community/forums/permalink/9766/10248/ShowThread.aspx#10248

Hope this helps.

Hi,

I am beginning to play with item templates, for starters just changed the color.  At run-time, the color does not apply, nor does the original green show up.  Why?

Here is my revision:

oCalendar.MultiDayView.ItemTemplate = "<div id=\"main\" style=\"width:100%; backgroundColor:green; height:100%; border: solid 1px #000; \">" +

"<span style='float:left;'><img border='0' src='Images/o_repeat_white.gif' id=\"isRecurring\"/></span>" +

"<div id=\"title\" mcc_action=\"move\" style=\"font-weight:bold;cursor:move; min-width:20px;\" unselectable=\"on\"></div>"+

"<div id=\"description\" unselectable=\"on\"></div>"+

"<div mcc_action=\"resize\" style=\"line-height:1px; font-size:1px; position:absolute; bottom:0px; height:1px; width:100%; border-bottom: solid 1px #000; z-index:11; cursor:s-resize;\"></div>"+

"<div style=\"position:absolute; height:100%; width:1px; right:0px; top:0px; z-ndex:11; border-right: solid 1px #000;\"></div></div>";

oCalendar.MultiDayView.ItemMapping = "[{\"id\":\"title\",\"property\":\"innerHTML\",\"value\":\"Title\"}," +

"{\"id\":\"description\",\"property\":\"innerHTML\",\"value\":\"Description\"}," +

"{\"id\":\"isRecurring\", \"property\":\"style.display\", \"value\":\"Extensions==true ? 'block':'none'\"},"

+"{\"id\":\"main\", \"property\":\"style.backgroundColor\", \"value\":\"Extensions.BackColor\"}]";

Thanks

Hi,
original green is not applied because CSS property has name "background-color" (not "backgroundColor"). But style DHTML property has name "backgroundColor". So in item template you should use CSS names, in item mapping you should use DHTML names.

Have you added public string property "BackColor" to item extensions in web-service method "LoadItems"?

Thanks.  This fix makes sure the original green shows.  But it does not change to the color provided in the item creation code (in default.asmx.cs):

CalendarItem it = new CalendarItem(reader["Id"].ToString(), reader["Title"].ToString(), isd.ToString("yyyy.M.d.H.m.s"), ied.ToString("yyyy.M.d.H.m.s"), reader["Description"].ToString(), (bool)reader["IsAllDay"], new CustomExtensions("red"));

Anatoly

Hi,
please post here interface of your "CustomExtensions" class.

Here it is - thanks:

 

using System;

using System.Data;

using System.Configuration;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

namespace AKC.BusinessObjects

{

public class CustomExtensions

{

public string BackColor = "";

public CustomExtensions()

{

// This is the no parameter constructor method.

// First Constructor

}

public CustomExtensions(string NewBackColor)

{

BackColor = NewBackColor;

// This is the constructor with one parameter.

// Second Constructor

}

}

}

Hi,
try to make public class property (not field):

private string backColor = "";
public string BackColor
{
get {return backColor;}
set {backColor = value;}
}

In constructor initialize "BackColor".

Hope this helps.

Sorry - that didn't make any difference.

Thanks,

Anatoly

Hi,
if you have custom client side event handlers try to show what value Extensions.BackColor contains. Your java-script code for this purpose can look like this:

alert(eventArgs.Extensions);
alert(eventArgs.Extensions.BackColor);

Please write what you get after first alert and after the second one.

Hi,

I have not created any handlers of my own yet - might not get around to it for a couple of days with all the other tasks.  Can you please point me where I can plug in this script?

Thanks,

 

Anatoly

Actually, turns out I was dealing with recurring items and had not supplied the Extension object for that case.  My apology.  It's working now.

anatoly

One more thing.  The recurring symbol no longer shows up.  I think you are passing it along with Extensions somehow?  What do you think?

Thanks again!

Hi,
yes recurrence flag is stored in extensions. You can add this flag to your CustomExtension object. 

"{\"id\":\"isRecurring\", \"property\":\"style.display\", \"value\":\"Extensions==true ? 'block':'none'\"}

So, I need to add a new Boolean property to my custom extensions class?

Thank you.