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

why e.CssClass doesn't load the css?

Asked by Camilla
15 days 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?

Answer posted by Dan Letecky [DayPilot]
15 days 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
15 days ago.

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

New Reply
This reply is
Your name (optional):