asked on

Display multiple entries in Calendar Control using DayRender Event

Hello EE,

I have the following code below that works fine displaying a Calendar's Cell with the Background Color and text. But the problem that I now face is that a user can have multiple entries for any given date. A user can Walk, Run, Swim and Golf for the date 8/11 and I need a way to display those different entries along with each entries color (color coded) for easier viewing.

My code as is follows below. I could really use alot of help on this post. I have had other EE members help me so far but this post was out of the range from my previous post.

I'm using ASP.NET 4.0 C#. I'm NOT using any third party controls. I have to use ASP.NET Calendar Control.

Thanks in advance!!

CODEBEHIND:

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class ApplicationProcess_Secure_PhysicalActivityLog : System.Web.UI.Page
{
string[,] palArr = null;

protected void Page_Load(object sender, EventArgs e)
{
hf_AppID.Value = Session["pi_id"].ToString();

RetrieveCalendarNames();

if (!IsPostBack)
{
getPalDates();
}
}

//GET AVAILABLE DATE AND ITS CORRESPONDING NAME IN AN ARRAY
protected void getPalDates()
{
int pi_id = Convert.ToInt32(Session["pi_id"]);

SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["WellnessChoice"].ConnectionString);

SqlCommand cmd = new SqlCommand();
cmd.CommandText = "WellnessChoice_RetrieveDatesForCalendar";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = conn;

cmd.Parameters.AddWithValue("@pi_id", SqlDbType.Int).Value = pi_id;

DataTable dtDates = new DataTable();

SqlDataAdapter adp = new SqlDataAdapter();

try
{
conn.Open();

adp.SelectCommand = cmd;
adp.Fill(dtDates);
palArr = new string[13, 32];
for (int iCnt = 0; iCnt <= dtDates.Rows.Count - 1; iCnt++)
{
Calendar1.SelectedDates.Add(Convert.ToDateTime(dtDates.Rows[0]["pal_date"]));
DateTime dm = Convert.ToDateTime(dtDates.Rows[iCnt]["pal_date"]);
palArr[dm.Month, dm.Day] = dtDates.Rows[iCnt]["palv_code"].ToString() + "|" + dtDates.Rows[iCnt]["palv_id"].ToString();
}
}

catch (Exception ex)
{
ex.Message.ToString();
}

finally
{
conn.Close();
}
}

//CUSTOMIZE UR CALENDAR RENDER EVENT NOW
protected void MyCal_DayRender(object sender, DayRenderEventArgs e)
{
// remove if (!IsPostBack) if running into Render errors
if (!IsPostBack)
{
CalendarDay day = (CalendarDay)e.Day;
TableCell cell = (TableCell)e.Cell;

// if (!day.IsOtherMonth)
if (!day.IsOtherMonth && palArr[day.Date.Month, day.Date.Day] != null)
{
string palName = palArr[day.Date.Month, day.Date.Day];

if (palName != null)
{
var p = palName.Split('|');
if (p[1].ToString() == "2")
{
e.Cell.BackColor = System.Drawing.Color.FromArgb(120, 255, 138, 215);
}
else if (p[1].ToString() == "3")
{
e.Cell.BackColor = System.Drawing.Color.FromArgb(120, 255, 138, 140);
}
else if (p[1].ToString() == "4")
{
e.Cell.BackColor = System.Drawing.Color.FromArgb(120, 255, 181, 138);
}
else if (p[1].ToString() == "5")
{
e.Cell.BackColor = System.Drawing.Color.FromArgb(120, 255, 204, 138);
}
else if (p[1].ToString() == "6")
{
e.Cell.BackColor = System.Drawing.Color.FromArgb(120, 255, 229, 138);
}
else if (p[1].ToString() == "7")
{
e.Cell.BackColor = System.Drawing.Color.FromArgb(120, 255, 254, 138);
}
else if (p[1].ToString() == "8")
{
e.Cell.BackColor = System.Drawing.Color.FromArgb(120, 221, 255, 138);
}
else if (p[1].ToString() == "9")
{
e.Cell.BackColor = System.Drawing.Color.FromArgb(120, 146, 249, 134);
}
else if (p[1].ToString() == "10")
{
e.Cell.BackColor = System.Drawing.Color.FromArgb(120, 138, 238, 255);
}
else if (p[1].ToString() == "11")
{
e.Cell.BackColor = System.Drawing.Color.FromArgb(120, 136, 199, 252);
}
else if (p[1].ToString() == "12")
{
e.Cell.BackColor = System.Drawing.Color.FromArgb(120, 133, 146, 246);
}
else if (p[1].ToString() == "13")
{
e.Cell.BackColor = System.Drawing.Color.FromArgb(120, 195, 131, 242);
}

Label lbl = new Label();
lbl.Text = "<br>" + p[0];
e.Cell.Controls.Add(lbl);
}
}
}
}

protected void MyCal_MonthChange(object sender, MonthChangedEventArgs e)
{
getPalDates();
}

protected void MyCal_SelectionChanged(object sender, EventArgs e)
{
calendarExt.Show();

if (!IsPostBack)
{
RetrieveCalendarNames();
}
}

protected void RetrieveCalendarNames()
{
if (!IsPostBack)
{
SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["WellnessChoice"].ConnectionString);

SqlCommand cmd = new SqlCommand();
cmd.CommandText = "WellnessChoice_TestTest";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = conn;

try
{
conn.Open();

SqlDataReader rdr = cmd.ExecuteReader();

ddl_Name.DataSource = rdr;
ddl_Name.DataValueField = "palv_id";
ddl_Name.DataTextField = "palv_names";
ddl_Name.DataBind();

rdr.Close();
}

catch (Exception ex)
{
ex.Message.ToString();
}

finally
{
conn.Close();
}
}
}

protected void btn_SavePhysicalActivityLog_Click(object sender, EventArgs e)
{
SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["WellnessChoice"].ConnectionString);

SqlCommand cmd = new SqlCommand();
cmd.CommandText = "WellnessChoice_InsertPhysicalActivityLog";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = conn;

cmd.Parameters.AddWithValue("@pi_id", SqlDbType.Int).Value = hf_AppID.Value;
cmd.Parameters.AddWithValue("@palv_id", SqlDbType.Int).Value = ddl_Name.SelectedItem.Value;
cmd.Parameters.AddWithValue("@pal_date", SqlDbType.DateTime).Value = Calendar1.SelectedDate.ToShortDateString();
//cmd.Parameters.AddWithValue("@pal_id", SqlDbType.Int).Value = hf_pal_id.Value;

try
{
conn.Open();
cmd.ExecuteNonQuery();
}

catch (Exception ex)
{
// ex.Message.ToString();
lblSaveError.Text = ("Error on insert: " + ex.Message.ToString());
}

finally
{
Response.Redirect("PhysicalActivityLog.aspx");
conn.Close();
}
}
}

HTML MARKUP:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PhysicalActivityLog.aspx.cs" Inherits="ApplicationProcess_Secure_PhysicalActivityLog" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Wellness Choice Program - Physical Activity Log</title>
<link rel="stylesheet" href="../../css/main.css" type="text/css" />
</head>
<body>
<form id="form1" runat="server" defaultfocus="txtFirstName">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="../../images/logo.png" alt="The Wellness Choice Program Logo" />
</div>
<div id="nav">
</div>
</div>
<div id="content">
<div id="primary">
<h1>Physical Activity Log</h1>
<asp:Button runat="server" ID="targetBtn" style="display:none;"/>
<asp:Panel runat="server" style="display:none;" CssClass="modalPopup" ID="calendarPopup" Width="300px" Height="300px">

<asp:Label ID="lblName" runat="server" CssClass="label" Text="Select Event to Perform: "></asp:Label><br />
<asp:DropDownList ID="ddl_Name" CssClass="ddl" runat="server"></asp:DropDownList><br /><br />
<br />
<asp:HiddenField ID="hf_AppID" runat="server" />
<asp:HiddenField ID="hf_pal_id" runat="server" />
<asp:Button ID="btn_SavePhysicalActivityLog" runat="server" Text="Save" onclick="btn_SavePhysicalActivityLog_Click" />
<asp:Button ID="CancelBtn" Text="Cancel" runat="server" /><br />
<asp:Label ID="lblSaveError" runat="server"></asp:Label>
</asp:Panel>
<asp:ModalPopupExtender ID="calendarExt"
runat="server"
TargetControlID="targetBtn"
PopupControlID="calendarPopup"
CancelControlID="CancelBtn"
BackgroundCssClass="modalBackground"
/>
<asp:Calendar ID="Calendar1" runat="server" BackColor="White"
BorderColor="#CCCCCC" BorderWidth="1px" Font-Names="Verdana" Font-Size="8pt"
ForeColor="#333333" Height="400px" Width="520px"
OnDayRender="MyCal_DayRender" OnVisibleMonthChanged="MyCal_MonthChange" OnSelectionChanged="MyCal_SelectionChanged" DayNameFormat="Shortest"
ShowGridLines="True">
<DayHeaderStyle Font-Bold="True" BackColor="#027ABB" ForeColor="White"
Height="30px" />
<NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
<OtherMonthDayStyle ForeColor="#CC9966" />
<SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
<SelectorStyle BackColor="#FFCC66" />
<TitleStyle BackColor="#73BE1E"
Font-Bold="True" Font-Size="9pt" ForeColor="White" />
<TodayDayStyle BackColor="#CCCCCC" ForeColor="#333333" />
</asp:Calendar>
<br />
</div>
<div id="secondary">
<h1></h1>
<ul>
<li><asp:HyperLink ID="hl_HealthRiskAssess" runat="server" NavigateUrl="~/ApplicationProcess/Secure/HealthRiskAssess.aspx">Health Risk Assessment</asp:HyperLink></li>
<li><asp:HyperLink ID="hl_AnnualPhysical" runat="server" NavigateUrl="~/ApplicationProcess/Secure/AnnualPhysical.aspx">Annual Physical</asp:HyperLink></li>
<li><asp:HyperLink ID="hl_PreventiveScreenings" runat="server" NavigateUrl="~/ApplicationProcess/Secure/PreventiveScreenings.aspx">Preventive Screenings</asp:HyperLink></li>
<li><asp:HyperLink ID="hl_GeneralHealthOne" runat="server" NavigateUrl="~/ApplicationProcess/Secure/GeneralHealthAwarnessProgramOne.aspx">General Health Awareness Program 1</asp:HyperLink></li>
<li><asp:HyperLink ID="hl_GeneralHealthTwo" runat="server" NavigateUrl="~/ApplicationProcess/Secure/GeneralHealthAwarnessProgramTwo.aspx">General Health Awareness Program 2</asp:HyperLink></li>
<li><asp:HyperLink ID="hl_GeneralHealthThree" runat="server" NavigateUrl="~/ApplicationProcess/Secure/GeneralHealthAwarnessProgramThree.aspx">General Health Awareness Program 3</asp:HyperLink></li>
<li>Physical Activity Log</li>
</ul>
</div>
</div>
<div id="footer">
</div>
</div>
</form>
</body>
</html>

libby9284

Hello again! You can add multiple labels to a cell in your dayrender code. I've done this on a site I built for someone else but without the color changing aspect.

My solution to this on that site was to get all events for the month and loop through all of them for each dayrender event, checking if the date of the DB event item matched the dayrender date and then adding the labels to that event if it matched. A hash or dictionary probably would have been more efficient but it works well enough as it is for that site.

Below is an example, tbl is a DataTable object and t is a DateTime object. The code runs when the DayRender event fires

if (tbl.Rows.Count != 0 && tbl.Rows[0].ItemArray.Length != 0)
        {
           // each row is an event for the calendar
            for (int i = 0; i < tbl.Rows.Count; i++)
            {
                t = (DateTime)tbl.Rows[i].ItemArray[1];
              
                // check the day of the event from the DB matches the date of the dayrender event
                if (t.Day == e.Day.Date.Day && t.Month == e.Day.Date.Month)
                {
                    // event exists for this day in the calendar
                    myLabel.CssClass = "eventLabel";

                    // set the label text to the title of the event
                    myLabel.Text = "<br/>" + (string)tbl.Rows[i].ItemArray[2];//+ "<br/>";

                    // give the label an ID
                    myLabel.ID = "eventLabel" + e.Day.Date.Month + "_" + e.Day.Date.Day;

                    // add the label
                    e.Cell.Controls.Add(myLabel);

                    // reset label object for the top of the loop
                    myLabel = new Label();
                }
            }
        }