why e.CssClass doesn't load the css?

Asked by Camilla
4 years ago.

Hello

1. I have Daypilot Month and in this event, I have this code

protected void DayPilotMonth1_BeforeEventRender(object sender, DayPilot.Web.Ui.Events.Month.BeforeEventRenderEventArgs e)
{
    e.CssClass = "CalendarEventCellCustom";

2. I have the css file in a folder --> Inside/assets/css/CalendarEventCellCustom.css

3. In the CSS, I have this

.month_default_event_inner {
    border-left-color: darkred;
    border-left-width: 3px;
}

4. I run the page, and I don't see the CSS applied.

5. *If I do this, the CSS is loaded. Adding it to the aspx page:

<link href="../../Inside/assets/css/CalendarEventCellCustom.css" rel="stylesheet" />

But this defeats the purpose. I want to load the CSS in BeforeEventRender based on some conditions. Putting it in aspx page applies it to everything.

So, why doesn't e.CssClass = "CalendarEventCellCustom"; work?

how-to asp.net

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

The CssClass property specifies the CSS class that will be applied to the DOM element (in this case an event) in addition to the built-in CSS classes. It's not the name of the stylesheet file.

You can apply a custom class like this:

1. Specify the custom class for selected events (this is what you already do):

protected void DayPilotMonth1_BeforeEventRender(object sender, DayPilot.Web.Ui.Events.Month.BeforeEventRenderEventArgs e)
{
   e.CssClass = "special-event";

2. Add a special selector to your stylesheet (Inside/assets/css/CalendarEventCellCustom.css) that targets the element using the custom class:

.special-event .month_default_event_inner {
  border-left-color: darkred;
  border-left-width: 3px;
}

3. Include the CSS file in the ASPX page:

<link href="../../Inside/assets/css/CalendarEventCellCustom.css" rel="stylesheet" />

4. Make sure that the selector in your CSS file is specific enough to override the built-in theme. You can check the styles using browser developer tools/element inspector (Ctrl-Shift-C or Command-Option-C). Click the target element to see what styles are applied.

If you are not sure about the selector, just add "!important" to the style definition.

Comment posted by Camilla
4 years ago.

Thanks! now I get it :) I'll try it and post back if I have other questions.

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

why e.CssClass doesn't load the css?

Products

Learn

Get Support

DayPilot Pro