Remove/transparent event border

You should be able to use a custom CSS class for this special event (set e.CssClass in BeforeEventRender event handler).

Since build 7.4.2948 you can use CellMarginBottom property to specify minimal space below the events in day cell - this might be an easier solution.

You can download it in the sandbox:
http://www.daypilot.org/sandbox/

Thank you for the reply. Question though, In the demos in the sandbox, there is no use of CellMarginBottom and there is no documentation on this site for it. What input is CellMarginBottom looking for? You are right it does seem like the easier route to take.

Ive also been looking at the documentation and demos of the use of 'e.CssClass=...' and I dont fully understand how I would make a css class which showed "border-style:none;" Here are the ways ive tried to go about this (to no avail):

1) in the .aspx: <style type="text/css">..... .noBorder{ border-style:none; }, in .cs: e.CssClass = .noBorder
2) in the .cs: e.CssClass = "border-style:none !important;"; (with and without "important")
3) in the .cs: e.CssClass = "noBorder"
4) in the .cs: e.CssClass = "style='noBorder'"

...the list goes on in a bunch of variants of these. So im not sure how to incorporate either suggestion.

Thanks

Kevin:

1. The sandbox now includes a demo of the CellMarginBottom:

http://www.daypilot.org/sandbox/Month/CellMarginBottom.aspx

Using CellMarginBottom, you can specify the minimal distance between the last event in a day and the cell bottom (in pixels). Example:

<DayPilot:DayPilotMonth 
    ID="DayPilotMonth1" 
    runat="server" 
    ...
    CellMarginBottom="30"
    ...
    >
</DayPilot:DayPilotMonth>

2. Using e.CssClass, you can specify the name of the CSS class to be added to the event box. I will describe it for the CssOnly mode (CssOnly="true"). The legacy CssOnly="false" mode is not as flexible.

Let's say you use the traditional monthly event calendar css theme: http://themes.daypilot.org/month/theme/y2fyg5 using CssClassPrefix="traditional".

This will use .traditional_event class for the event div and .traditional_event_inner for the inner event div (each event consists of two divs).

These css classes are defined in the theme as follows:

.traditional_event { 
}

.traditional_event_inner { 
	position: absolute;
	margin: 0px;
	color: #000000;
	background-color: #ffffff;
	padding: 3px;
	border: 1px solid #666666;
	
	left: 0px;
	right: 2px;
	top: 0px;
	bottom: 3px;
	-moz-box-shadow:
		1px 2px 3px rgba(000,000,000,0.3);
	-webkit-box-shadow:
		1px 2px 3px rgba(000,000,000,0.3);
	box-shadow:
		1px 2px 3px rgba(000,000,000,0.3);	
}

You can see that all the styles are defined on the inner div (.traditional_event_inner). So that's the one we need to override.

If you use e.CssClass="empty" in BeforeEventRender it will add .empty CSS class to the event div (at the same level as .traditional_event). So in order to remove the border (and shadow) from the "empty" event you need to add the following to the theme:

.empty .traditional_event_inner { 
	border: 0px none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

See also: http://kb.daypilot.org/77032/list-of-css-classes-used-in-cssonly-mode-month/

Oh i get it!! you have to physically go into the CSS and add a class then call it in the e.CssClass. I thought you could create the class and attach it to the div somehow. Thanks!