search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Remove/transparent event border

Asked by Kevin Fauver
8 years ago.

The month calendar I use is very cluttered and close together. To try to add space between the dates so it is not as cluttered, im trying to add an empty event. I have the empty event inheriting the background color but can't seem to do the same with the border. So if there was a way to remove the border or change the color to "inherit" or a specific color, that would be awesome. Is this possible?

In short, I want to keep borders around actual events, but remove the border around my empty events. Thanks!!

Answer posted by Dan Letecky [DayPilot]
8 years ago.

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:

Comment posted by Kevin Fauver
8 years ago.

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.

Comment posted by Kevin Fauver
8 years ago.

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.


Comment posted by Dan Letecky [DayPilot]
8 years ago.


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

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


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: 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;
		1px 2px 3px rgba(000,000,000,0.3);
		1px 2px 3px rgba(000,000,000,0.3);
		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:

Comment posted by Kevin Fauver
8 years ago.

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!

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.