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

How to change colour for different days for the column events?

Asked by jordjmax
10 years ago.

All of my three events in the timetable is in green colour. I would like to for etc to have red for monday, yellow for tuesday and for the other days to have different colour too. Attached are my images, there are limited event handler so hope it can be solved too like my previous question.

public partial class number2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DayPilotCalendar1.StartDate = DayPilot.Utils.Week.FirstWorkingDayOfWeek(new DateTime(2014, 04, 03));
//DayPilotCalendar1.StartDate = DayPilot.Utils.Week.FirstWorkingDayOfWeek(DateTime.Now.AddDays(-(int)DateTime.Now.DayOfWeek).Date);
DayPilotCalendar1.DataSource = dbGetEvents(DayPilotCalendar1.StartDate, DayPilotCalendar1.Days);
DataBind();
}

}

private DataTable dbGetEvents(DateTime start, int days)
{
string constr = ConfigurationManager.ConnectionStrings["ProjectConnectionString"].ConnectionString;
SqlDataAdapter da = new SqlDataAdapter("SELECT ID, PURPOSE, [START_DATE], [END_DATE], [START_TIME], [END_TIME] FROM [Schedule]", constr);
da.SelectCommand.Parameters.AddWithValue("start", start);
da.SelectCommand.Parameters.AddWithValue("end", start.AddDays(days));
DataTable dt = new DataTable();
da.Fill(dt);

for (int i = 0; i < dt.Rows.Count; i++)
{
dt.Rows[i]["START_DATE"] = CombineDateAndTime(dt.Rows[i]["START_DATE"], dt.Rows[i]["START_TIME"]);
dt.Rows[i]["END_DATE"] = CombineDateAndTime(dt.Rows[i]["END_DATE"], dt.Rows[i]["END_TIME"]);
}

return dt;
}

public static DateTime CombineDateAndTime(object date, object time)
{
if (date == null)
{
// Add some logic for this scenario. Here are 2 examples:
//throw new ArgumentNullException("date");
//date = DateTime.MaxValue;
}
if (time == null)
{
// Add some logic for this scenario.
//throw new ArgumentNullException("time");
//time = 0;
}

DateTime dt = Convert.ToDateTime(date);
float hoursAndMinutes = Convert.ToInt32(time);

return CombineDateAndTime(dt, hoursAndMinutes);
}
public static DateTime CombineDateAndTime(DateTime date, float time)
{
int hours = Convert.ToInt32(Math.Round((decimal)time / 100, MidpointRounding.AwayFromZero));
float remainder = time - (hours * 100);
int minutes = Convert.ToInt32(Math.Round((decimal)remainder, MidpointRounding.AwayFromZero));
DateTime returnDate = date.Date.AddHours(hours).AddMinutes(minutes);
return returnDate;
}
}

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

In the current release (4.1), you will have to use e.InnerHTML in BeforeEventRender event handler to insert a div with a custom background color specified.

The next release will fix apply the color specified using e.BackgroundColor property correctly (it doesn't work in the CssOnly mode in DayPilot Lite for ASP.NET WebForms 4.1).

Comment posted by Jordjmax
10 years ago.

Ok i generated the event, how to write it? how to specify mon for this colour, tues for this colour and so on?

protected void DayPilotCalendar1_BeforeEventRender(object sender, DayPilot.Web.Ui.Events.Calendar.BeforeEventRenderEventArgs e)
{

}

<DayPilot:DayPilotCalendar ID="DayPilotCalendar1" runat="server"
DataStartField="START_DATE"
DataEndField="END_DATE"
DataTextField="Names"
DataValueField="BOOK_SNO"
EventMoveHandling="CallBack" BackColor="#0066FF" BusinessBeginsHour="8"
BusinessEndsHour="19" CssOnly="False" EventBackColor="#66FF99"
HourBorderColor="Lime" HourHalfBorderColor="#0066FF"
HourNameBackColor="#6699FF" HourNameBorderColor="#0066FF" HoverColor="#0066FF"
NonBusinessBackColor="#0066FF"
style="top: 0px; left: 0px; margin-right: 6px;" DayEndsHour="6"
HeaderDateFormat="dddd" StartDate="" CellHeight="40" EventFontSize="17pt" onbeforeeventrender="DayPilotCalendar1_BeforeEventRender"
>
</DayPilot:DayPilotCalendar>

Comment posted by Dan Letecky [DayPilot]
10 years ago.

This will work with the upcoming release:

protected void DayPilotCalendar1_BeforeEventRender(object sender, DayPilot.Web.Ui.Events.Calendar.BeforeEventRenderEventArgs e) 
{
  if (e.Start.DayOfWeek == DaysOfWeek.Monday) {
    e.BackgroundColor = "red";
  }
}

With the current version (4.1) you will need something like this:

protected void DayPilotCalendar1_BeforeEventRender(object sender, DayPilot.Web.Ui.Events.Calendar.BeforeEventRenderEventArgs e) 
{
  if (e.Start.DayOfWeek == DaysOfWeek.Monday) {
    e.Html = "<div style='position: absolute;left:0px;right:0px;top:0px;bottom:0px;background-color:red'>" + e.Text + "</div>";
  }
}

Comment posted by Jordjmax
10 years ago.

Thanks It worked

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