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

DayPilot Lite - set color per event.

Asked by Anonymous
11 years ago.
Is it possible to assign a color to an event (and not to the whole calendar = all events)
thx,
Comment posted by Dan Letecky
11 years ago.
The API to change color of individual events is only available in DayPilot Pro. In DayPilot Lite you will have to modify the source code.
Comment posted by Rich from IT
10 years ago.

I also wanted event-specific colors for multiple people's events. This is how I tackled adding this feature:

I added a DataColorField property so that I can define a color for each event along with the ID/Name/Start/End DataTable. Just one more column, which I selectwith a jointhe user table, where the user's color is stored, joined on the userID to which the event is assigned.

These are the DayPilot Lite files I edited:

  • DayPilotCalendarProperties.cs - Added DataColorField accessor.
  • DayPilotCalendar.cs - Added dataColorField property to class definition, Added color retrieval to viewstate code, Substituted Event.Color for the event's background-color attribute.
  • Event.cs - Added Color property.

Then just rebuild your DLL and put it in your /bin.

It's not too tough, you can do it!

Comment posted by Rich from IT
10 years ago.

Forgot to mention, I also had to edit Day.cs so that the Events created inside it have a color variable.

Comment posted by Anonymous
10 years ago.

Could give an example of the code to add this property?

Thanks

Comment posted by Andrea
10 years ago.

Yes, it would be very nice you someone could post some code for example, i'm trying to get it done but i'm missing...

Comment posted by Andrea
10 years ago.

Probably this is the wrong approach to do it, because i have modified a little too much code to make it work. However this modification seem to do the job, soI post it (and maybe someone will post a better approach...)

Modifiedcode to achieve the a custom duration bar color (in italic the code, in bold my added parts)

=== Day.cs ===

private void stripAndAddEvent(Event e)
{
stripAndAddEvent(e.Start, e.End, e.PK, e.Name, e.Resource, e.DurationBarColor );
}

on the last line of the above called method:

events.Add(new Event(pk, start, end, name, resource, barColor));

=== DayPilotCalendar.cs ===

In the private fields of the class added:
private string dataBarColorField;

In renderEvent(...) added the e. to access the color of the event, instead one common for all events:

576: output.AddStyleAttribute("background-color", ColorTranslator.ToHtml(e.DurationBarColor));

in protected override void PerformDataBinding(IEnumerable retrievedData) added:

if (DataBarColorField == null || DataBarColorField == String.Empty)
throw new NullReferenceException("DataBarColorField property must be specified.");

and in the foreach loop, before items.Add

Color barColor = ColorTranslator.FromHtml(DataBinder.GetPropertyValue(dataItem, DataBarColorField, null));

=== DayPilotCalendarProperties.cs ===


[Category("Data")]
[Description("The name of the column that contains the bar color to use. ")]
public string DataBarColorField
{
get
{
return dataBarColorField;
}
set
{
dataBarColorField = value;

if (Initialized)
{
OnDataPropertyChanged();
}

}
}

=== Event.cs ===

using System.Drawing;

in the members:

public Color DurationBarColor;

public Event(string pk, DateTime start, DateTime end, string name) : this(pk, start, end, name, null)
{
this.DurationBarColor = Color.Red; // i think it is not used directly
}

public Event(string pk, DateTime start, DateTime end, string name, string resource)
{
this.PK = pk;
this.Start = start;
this.End = end;
this.Name = name;
this.Resource = resource;
this.DurationBarColor = Color.Blue; // this is the "default" color if not specified
}

/// <summary>
/// Constructor that uses the Duration Bar Color .
public Event(string pk, DateTime start, DateTime end, string name, string resource, Color durationColor)
{
this.PK = pk;
this.Start = start;
this.End = end;
this.Name = name;
this.Resource = resource;
this.DurationBarColor = durationColor;
}

=== End ==

To use it in the BindingDataTable.aspx.cs i can use something like this:

DataTable dt;

dt = new DataTable();
dt.Columns.Add("start", typeof(DateTime));
dt.Columns.Add("end", typeof(DateTime));
dt.Columns.Add("name", typeof(string));
dt.Columns.Add("id", typeof(string));
dt.Columns.Add("barColor", typeof(string));

DataRow dr;dr = dt.NewRow();
dr["id"] = dView[i].Row["Cod"];

if (XXX)
dr["barColor"] = "red";
else
dr["barColor"] = "blue";

Comment posted by Andrea
10 years ago.

a last note:

on the .aspx page you must add the property name like this:

<DayPilot:DayPilotCalendar ID="DayPilotCalendar1" runat="server" DataEndField="end"
Days="7" StartDate="2009/05/08" DataStartField="start" DataTextField="name" DataValueField="id" DataBarColorField="barColor"
HourHeight="50" EventHoverColor="Gainsboro" ........

Comment posted by Laurie T
10 years ago.
Did you get this to work for the Scheduler too? I have made the additions as you outlined and added some more to the scheduler but still can't get it to do anything but blue. :(
Comment posted by Anonymous
10 years ago.

Thanks a lot Andrea for posting the code. This helped me to reach my requirement to give different colors to different events.

Naina

Comment posted by Nayan
9 years ago.

I made the small the changes mentioned in the above code.....but I am unabloe to reflect the changes in my events w.r.t color..

Comment posted by Steve Adkins
9 years ago.

Assuming you are using Andrea's solution, add the following bolded text to DayPilotScheduler.cs:

First:

public class DayPilotScheduler : DataBoundControl, IPostBackEventHandler
{
internal List<Day> days;

private string dataStartField;
private string dataEndField;
private string dataTextField;
private string dataValueField;
private string dataResourceField;
private string dataBarColorField;

Second (in renderEvent):

Comment out this line: // output.AddStyleAttribute("background-color", ColorTranslator.ToHtml(EventBackColor));

Color c = ColorTranslator.FromHtml(p.DurationBarColor);

output.AddStyleAttribute("background-color", ColorTranslator.ToHtml(c));

Third (in #region Properties)

/// <summary>
/// Gets or sets the Name of the column that contains the bar color to /// use for events
/// </summary>
[Category("Data")]
[Description("The name of the column that contains the bar color to use for events. ")]
public string DataBarColorField
{
get
{
return dataBarColorField;
}
set
{
dataBarColorField = value;

if (Initialized)
{
OnDataPropertyChanged();
}
}
}

Fourth (in PerformDataBinding):

if (String.IsNullOrEmpty(DataBarColorField))
{
throw new NullReferenceException("DataBarColorField property must be specified.");
}

In the foreach (object dataItem in retrievedData)

string barcolor = DataBinder.GetPropertyValue(dataItem, DataBarColorField, null);

((ArrayList)ViewState["Items"]).Add(new Event(val, start, end, name, resourceId, barcolor));

This is my test data:

Dim dt As DataTable
dt = New DataTable()
dt.Columns.Add("id", GetType(String))
dt.Columns.Add("start", GetType(DateTime))
dt.Columns.Add("end", GetType(DateTime))
dt.Columns.Add("name", GetType(String))
dt.Columns.Add("barcolor", GetType(String))
dt.Columns.Add("nullfield", GetType(String))

Dim dr As DataRow
...
dr = dt.NewRow()
dr("id") = 4
dr("start") = Convert.ToDateTime("3/11/2010")
dr("end") = Convert.ToDateTime("3/13/2010")
dr("name") = "Event 4"
dr("barcolor") = "#FFE303" 'Yellow
dr("nullfield") = String.Empty
dt.Rows.Add(dr)
...

DayPilotScheduler1.DataSource = dt
DayPilotScheduler1.DataBind()

Happy coding :)

Comment posted by Steve Adkins
9 years ago.

Using the ForeColor property of the control.

Add this line to the renderEvent(Day d, Event p, HtmlTextWriter output) routine:

output.AddStyleAttribute("color", ColorTranslator.ToHtml(ForeColor));

Comment posted by Anonymous
9 years ago.

I follow the post to change the coding.

But all of my event display only in red. Can any one help me?

Comment posted by Toni PEINOIT
9 years ago.

Hi,

I tryed to implement different colors for my different kinds of events in an DayPilot Light Calendar but it doesn't work...

In the Day.cs class, I got two problems:

- Error 1 No overload for method 'stripAndAddEvent' takes 6 arguments C:\Users\Asphalt\.vplls\Documents\Visual Studio 2010\Projects\project\trunk\DayPilot\Source\Web\Ui\Day.cs 72 13 DayPilot

and

- Error 2 The name 'barColor' does not exist in the current context C:\Users\Asphalt\.vplls\Documents\Visual Studio 2010\Projects\project\trunk\DayPilot\Source\Web\Ui\Day.cs 106 66 DayPilot

Could you help me please. It's an important project for me.

Thanks for your help - Toni

Comment posted by Jcvp
8 years ago.

Thanks a lot!!!

best Regards!

Comment posted by Anonymous
8 years ago.

@Toni PEINOIT:

in Day.cs: just add a new parameter in 'stripAndAddEvent'

ORIGINAL: private void stripAndAddEvent(DateTime start, DateTime end, string pk, string name, string resource)

CHANGED: private void stripAndAddEvent(DateTime start, DateTime end, string pk, string name, string resource, Color barColor)

Comment posted by Ahmad
8 years ago.

Helo every one,

I applied all above coding techniques to set different event background color depends upon my data coming from DB. but its not working any one did this please send the dll or code at gulahmadmcs@yahoo.com

Thank you

Answer posted by Melissa
8 years ago.

If anyone is still having trouble getting the calendar solution to work I had to add things I added to Andrea's solution to get it to work for me.

In the DayPilotCalendar.cs I added

void PerformDataBinding(IEnumerable retrievedData) {
items.Add(new Event(pk, start, end, name, <b>barColor</b>));

and in the Events.cs

public Event(string pk, DateTime start, DateTime end, string name, <b>Color durationColor</b>)
: this(pk, start, end, name, null)
{
this.DurationBarColor = <b>durationColor; </b>// i think it is not used directly
}

I haven't been studing this problem too long so I am honestly not 100% sure of what I am doing, but it was a cheap fix if helps.

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

It's now possible to set custom calendar event properties using BeforeEventRender event in DayPilot Lite for ASP.NET WebForms 3.1 release:

http://www.daypilot.org/daypilot-lite-for-asp-net-webforms-3-1.html

It works for both the Calendar and the Scheduler. See the following howto:

http://kb.daypilot.org/37327/how-to-show-calendar-events-with-custom-background-color-in/

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