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

Changing the CSS/Style for Mothly Calendar

Asked by Anonymous
11 years ago.

Is there way I can change the CSS and styles for month view?

I want to use styles of my website and make the calendar blend with my website theme.

Thanks in advance.

Comment posted by Dan Letecky
11 years ago.
Unfortunately, not yet.
Comment posted by Max
11 years ago.
Does this mean that if you purchase dayPilot you are stuck with the yellow/greay colours shown in the demos?
Comment posted by Dan Letecky
11 years ago.
No, of course not.

You are able to change it using DayPilotMonth properties and server-side rendering events (BeforeEventRender, BeforeCellRender). But you can't change it by a global CSS class definition at the moment (e.g. by settting .daypilot_event class to show red text).

Sorry for the confusion!
Comment posted by Ken
8 years ago.

Dan,

Has there been an update to this? I know this post is two years old and we're hoping so! What we are trying to accomplish is a schema where alternative rows (weeks) have different styles applied.

Ken

Comment posted by Dan Letecky
8 years ago.

The CSS support has been added since that time.

You can take a look here:

www.daypilot.org/month-css-class-styling.html

A special class is applied to day cell, cell header (day number), header (days of week), and event. I've added a new mechanism in build 2117 (see the sandbox), that will help you with your task:

  1. In BeforeCellRender, you can set a CssClass property. This class will be added to the existing cell classes.
  2. You can use a code like this to set it to different values depending on a row. You may want to use another week number algorithm (this one will not work properly for weeks starting on Sunday).
    protected void DayPilotMonth1_BeforeCellRender(object sender, DayPilot.Web.Ui.Events.Month.BeforeCellRenderEventArgs e)
    {
        e.CssClass = Week.WeekNrISO8601(e.Start)%2 == 0 ? "even" : "odd";
    }

But remember to clear the default cell colors (BackColor, NonBusinessBackColor). Otherwise the color set by your CSS will be overriden.

Comment posted by Paul
8 years ago.

I am trying to set the event back color dynamically. I have the following code in DayPilotMonth1_BeforeEventRender

if (e.Value == "441")
{
e.BackgroundColor = "#ECFF73";

e.InnerHTML = String.Format

}

That does not seem to work. I confirmed that the event handler was fired becase the InnerHTML tag works. Can you help ?

Comment posted by Paul
8 years ago.

Is there any way to change the event border color ? For example, instead of doing e.BackgroundColor, I would like to change the BorderColor of each event ?

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