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

Background Color for a Particular Event.

Asked by Manish
4 years ago.

Hi,

I am using Daypilot lite for MVC. I have downloaded the source code and modified daypilot-all-min.js file. Now I am able to change the event color from a list of color saved in my database. But it is changing all the event's color.
I want to set particular color for particular event.

Is there any way to send event id along with color and change the color, because i am not getting how the id is binding with the event creation function.

Please help me out.

Regards
Manish

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

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

Comment posted by Manish
4 years ago.

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

Comment posted by Manish
4 years ago.

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

Comment posted by Manish
4 years ago.

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

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