Display calnder in gridview? In Asp.net? - asp.net

Question

In web application, How can i display current month calender in gridview, i mean calender dates as a columns. can you please tell me how can i start the coding or is there any reference. Thank you.

Answer 1

Display calendar in gridview using c# Asp.net
Using client side code:
<div class="col-lg-12 col-md-12 col-sm-12" style="padding-right: 15px;">
<div class="row panel panel-default" style="margin-bottom: 5px; padding: 10px; border-radius: 4px; border: 1px solid #c5c5c5; background: #f5f5f5;">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding: 0px;">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 table-responsive" style="padding-bottom: 5px;">
<div class="col-md-1">
<label style="font-size: medium;">Month</label>
<asp:DropDownList ID="drpMonth" runat="server"
ClientIDMode="Static" CssClass="chart-type form-control" Style="font-size: 14px;">
<asp:ListItem Text="Jan" Value="1"></asp:ListItem>
<asp:ListItem Text="Feb" Value="2"></asp:ListItem>
<asp:ListItem Text="Mar" Value="3"></asp:ListItem>
<asp:ListItem Text="Apr" Value="4"></asp:ListItem>
<asp:ListItem Text="May" Value="5"></asp:ListItem>
<asp:ListItem Text="Jun" Value="6"></asp:ListItem>
<asp:ListItem Text="Jul" Value="7"></asp:ListItem>
<asp:ListItem Text="Aug" Value="8"></asp:ListItem>
<asp:ListItem Text="Sep" Value="9"></asp:ListItem>
<asp:ListItem Text="Oct" Value="10"></asp:ListItem>
<asp:ListItem Text="Nov" Value="11"></asp:ListItem>
<asp:ListItem Text="Dec" Value="12"></asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-md-1">
<label style="font-size: medium;">Year</label>
<asp:DropDownList ID="drpYear" runat="server"
ClientIDMode="Static" CssClass="chart-type form-control" Style="font-size: 14px; padding: 6px 10px;">
</asp:DropDownList>
</div>
<div class="col-md-2 dv-appointment">
<label style="color: #f5f5f5;">retrieve button text</label>
<asp:Button runat="server" ID="btnRetrieve" OnClick="btnRetrieve_Click" CssClass="btn btn-success" Text="Retrieve" />
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="text-align: center;">
<label title="" style="font-size: 18px !important; font-weight: 300 !important; color: #f12f2f;">
<%--Click on date to schedule a new appointment--%>
**Select date on the calendar to create a new appointment
</label>
</div>
<asp:Calendar DayStyle-Height="68px" ID="clAppointment" OnDayRender="clAppointment_DayRender"
runat="server" BackColor="#f1fbf0" BorderColor="#999999" BorderWidth="1px" DayNameFormat="Short" NextPrevStyle-ForeColor="#FFFFFF" NextPrevStyle-CssClass="pd-left-right"
names="Verdana" size="20pt" ForeColor="#484848" Height="100%" ShowGridLines="True"
Width="100%" Font-Bold="True" Font-Size="Medium" FirstDayOfWeek="Sunday">
<SelectedDayStyle BackColor="#CCCCFF"></SelectedDayStyle>
<SelectorStyle BackColor="#FFCC66"></SelectorStyle>
<TodayDayStyle ForeColor="#FF6600" BackColor="#bce0cc"></TodayDayStyle>
<OtherMonthDayStyle ForeColor="#d2a87e82"></OtherMonthDayStyle>
<%--#CC9966--%>
<DayHeaderStyle BackColor="#bce4ab" CssClass="text-center" Height="3px" Font-Bold="True" Font-Size="Medium"></DayHeaderStyle>
<TitleStyle BackColor="#666666" Font-Size="Medium" ForeColor="White" Font-Bold="True" Height="8.8px"></TitleStyle>
</asp:Calendar>
</div>
</div>
Using server side Code:
using System;
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Commerce.Clinics
{
public partial class Appointment_Calendar : BaseClass
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
int CurrentYear = DateTime.Now.Year;
drpMonth.SelectedValue = DateTime.Now.Month.ToString();
drpYear.Items.Add(new ListItem(Convert.ToString(CurrentYear - 1), Convert.ToString(CurrentYear - 1)));
drpYear.Items.Add(new ListItem(Convert.ToString(CurrentYear), Convert.ToString(CurrentYear)));
drpYear.Items.Add(new ListItem(Convert.ToString(CurrentYear + 1), Convert.ToString(CurrentYear + 1)));
drpYear.SelectedValue = Convert.ToString(CurrentYear);
string strMinDate = Convert.ToInt32(drpMonth.SelectedValue) + "/" + "01/" + Convert.ToString(CurrentYear);
string strMaxDate = Convert.ToInt32(drpMonth.SelectedValue) + "/" + DateTime.DaysInMonth(CurrentYear, Convert.ToInt32(drpMonth.SelectedValue)) + "/" + Convert.ToString(CurrentYear);
Session["ScheduleDate"] = GetBookedAppointmentByClinic(strMinDate, strMaxDate);
}
}
protected void clAppointment_DayRender(object sender, DayRenderEventArgs x)
{
int ApptBooked = 0;
string booked = "", booked1 = "";
TableCell cell = (TableCell)x.Cell;
if (Convert.ToInt32(SessionFactory.CurrentUser.LocationId) != 0)
{
x.Day.IsSelectable = false;
CalendarDay day = (CalendarDay)x.Day;
DataTable dtbooked = (DataTable)Session["ScheduleDate"];
DataRow[] drSelect = dtbooked.Select("apptdate='" + day.Date.ToString("MM/dd/yyyy") + "'");
if (drSelect.Length > 0)
{
ApptBooked = Convert.ToInt32(drSelect[0]["apptcount"]);
}
if (ApptBooked > 0)
{
booked = "<font color='#b53737'>";
booked1 = "</font>";
}
if (day.IsOtherMonth)
{
x.Cell.Text = "";
x.Cell.BackColor = System.Drawing.Color.White;
}
//else if (day.Date.ToString("dddd") == "Saturday" || day.Date.ToString("dddd") == "Sunday")
//{
// cell.BackColor = System.Drawing.Color.White;
//}
// Bind Booked appotionment for spacific location and department.
//else if (ucLocationDept.LocationId != "0" && ucLocationDept.DepartmentId != "0")
//{
else if (day.Date < DateTime.Today.Date && ApptBooked == 0)
{
}
else
{
cell.Controls.Add(new LiteralControl("<br/><a class='schedlnk' style='font-size:medium;color:green;cursor:pointer;' href=EmployeeAppointment.aspx?date=" + day.Date.ToString("MM/dd/yyyy") + ">" + booked + +ApptBooked + " Booked " + booked1 + "</a>"));
}
/*}
else
{
cell.Controls.Add(new LiteralControl("<br/><a class='schedlnk' style='font-size:medium;color:green;cursor:pointer;'>" + booked + ApptBooked + " Booked" + booked1 + "</a>"));
}*/
}
}
public DataTable GetBookedAppointmentByClinic(string StartDate, string EndDate)
{
SqlParameter[] PM = new SqlParameter[]
{
new SqlParameter("#Mode", "Mode_Name"),
new SqlParameter("#StartDate", StartDate),
new SqlParameter("#EndDate", EndDate),
new SqlParameter("#LocationId", Convert.ToInt32(SessionFactory.CurrentUser.LocationId)),
};
DataTable dt = SqlHelper.ExecuteDataset(new SqlConnection(SqlHelper.GetConnectionString()), CommandType.StoredProcedure, "ProcName", PM).Tables[0];
return dt;
}
#endregion
protected void btnRetrieve_Click(object sender, EventArgs e)
{
clAppointment.SelectedDates.Clear();
clAppointment.VisibleDate = new DateTime(Convert.ToInt32(drpYear.SelectedValue), Convert.ToInt32(drpMonth.SelectedValue), 1);
string strMinDate = Convert.ToString(drpYear.SelectedValue) + "-" + Convert.ToString(drpMonth.SelectedValue) + "-01";
string strMaxDate = Convert.ToString(drpYear.SelectedValue) + "-" + Convert.ToString(drpMonth.SelectedValue) + "-" + DateTime.DaysInMonth(Convert.ToInt32(drpYear.SelectedValue), Convert.ToInt32(drpMonth.SelectedValue));
Session["ScheduleDate"] = GetBookedAppointmentByClinic(strMinDate, strMaxDate);
}
}
}

Answer 2

add a TemplateField to your GridView and insert a calendar to the TemplateField, like this:
<asp:GridView ID="GridView1" runat="server" DataSourceID="ObjectDataSource1" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Calendar ID="Calendar2" runat="server"></asp:Calendar>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>