Home Unanswered Active Tags New Question

Changing the CSS/Style for Mothly Calendar

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.

Asked by Anonymous 3 years ago.
Replies
Unfortunately, not yet.
Comment posted by Dan Letecky 3 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 Max 3 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 Dan Letecky 3 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 Ken 1 year 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 Dan Letecky 1 year 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 9 months 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 ?

Comment posted by Paul 8 months ago.
New Reply
This reply is
Your name (optional):

DayPilot for ASP.NET WebForms, DayPilot for ASP.NET MVC, DayPilot for Java