Background Color for a Particular Event.

You would be better off switching to the JavaScript version of DayPilot Lite. As this is a pure client-side solution (without the server bindings) it takes just one place to change the behavior. The MVC version requires changing both the server part and the client part in most cases.

http://javascript.daypilot.org/download/

Moreover, it already supports changing the event background using the "backColor" property of the event data object:

dp.events.list = [
  {
    id: "1",
    start: "2015-10-09T14:00:00",
    end: "2015-10-09T15:00:00",
    text: "My Event",
    backColor: "red"
  }
];

See also the following tutorial on using the JavaScript version with ASP.NET MVC:

http://code.daypilot.org/17910/html5-event-calendar-open-source

Hi Dan,

Thanks for your reply, I will definitely do a POC on the Javascript version of Daypilot and will let you know. But this is not the exact thing what I have asked.

My scenario is little bit different.

In Daypilot Source Code, I have changed the class "DayPilotCalendar". In this class I have added EventBackColor property.

Now, In the daypilot-all-min.js file I have found that the event color property is changing from the css class "_event_inner". If I am changing the color in property in this css class then the color is changing.
But it is changing for all the events.

Here I have got stuck in, how can i pass event's id with my EventBackColor property to .js file so that it will change according to the event.

Regards
Manish

Hi Dan,

I have done the POC using Javascript version of Daypilot. But at the time of event rendering event is not displaying from the database.

I have used the following code to bind data.

public ActionResult Events(DateTime? start, DateTime? end)
{

var events = getdata();
var result = events
.Select(e => new JsonEvent()
{
start = e.start.ToString("s"),
end = e.end.ToString("s"),
text = e.name,
id = e.id.ToString()
})
.ToList();

return new JsonResult { Data = result };
}

But if I am doing the event creation at the time of initialization of the dp then the event is displaying

<script type="text/javascript">
var dp = new DayPilot.Calendar("dp");
dp.viewType = "Week";
dp.events.list = [
{
"id": "5",
"text": "Calendar Event 5",
"start": "2015-10-05T10:30:00",
"end": "2015-10-05T16:30:00",
"backColor": "red"
}];
dp.init();
</script>

Can you please let me what i am missing at the time of getting data from backend.

Regards
Manish

Hi Dan,

I have resolved the backend part. I have seen the backColor property is working in DayView and WeekView but it is not working in Month View.

Can you please let me know how to add color per event in Month View as I am trying to do same as DayView and WeekView.

Regards
Manish