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

How do I change the colors of the event headers in version 7?

Asked by Phil
9 years ago.

When I change to CssOnly I can no longer change the colors of the events. What am I doing wrong?

Comment posted by E
9 years ago.

I'm getting the same thing. It seems that this entire thing was changed a little and now supports BackgroundImage and BackgroundRepeat properties, but these seem to be ignored when CssOnly is true...

Would be great to get this sorted so we can use the Css theme options.

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

If you switch to CssOnly the DOM structure of the event will be much simpler (just two nested div, the custom HTML is inside).

It's difficult to override the look defined by CSS (in most defined using multiple CSS properties) using a single BackgroundColor.

So all inline style event customization options are disabled in this version. Except of:

  • e.CssClass
  • e.InnerHTML

I realize this is limiting as you have to predefine the css classes you are going to use.

I'm still looking for the best approach. This should get better in 7.1 release.

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

The latest sandbox build (7.0.2643) now uses the following BeforeEventRender handler on the main Scheduler page:

http://www.daypilot.org/sandbox/Scheduler/

    protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
    {
        int id = 0;
        int.TryParse(e.Value, out id);

        if (id % 2 == 0)
        {
            e.CssClass = "scheduler_green_red";
        }
    }

This should work in most cases. You will have a finite number of event types anyway.

e.BackgroundColor is now enabled and will be applied to the inner event div (the one with prefix_event_inner class). But if you use a gradient background in the CSS it will not be overriden by a plain background color style (background-color) defined using e.BackgroundColor.

Comment posted by Phil
9 years ago.

Thanks for the reply - another thing I noticed - if you use cssOnly you can no longer visualise events with partial hours e.g. 8:24am to 9:47am. The css stuff looks very nice though.

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

Duration bars are now (7.0.2647) supported in the CssOnly mode as well:

http://www.daypilot.org/sandbox/Scheduler/ThemeGreenWithBar.aspx

They are fully stylable. An example from scheduler_green.css theme:

.scheduler_green_event_bar
{
  top: 3px;
  left: 4px;
  right: 4px;
  height: 2px;
  background-color: #8aaa00;
}

.scheduler_green_event_bar_inner  
{
  position: absolute;
  height: 2px;
  background-color: #C4F100;
}

BeforeEventRender/e.BorderColor, e.BackgroundImage, and e.BackgroundRepeat work now too.

Comment posted by Phil
9 years ago.

great! :)

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