0

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.

Surya sasidhar
  • 29,607
  • 57
  • 139
  • 219

2 Answers2

1

Display calendar in gridview using c# Asp.net enter image description here

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);
        }
    }
}
Fezal halai
  • 756
  • 7
  • 14
0

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>
st mnmn
  • 3,555
  • 3
  • 25
  • 32
  • the ObjectDataSource is to bound the gridView to data. you can do it in other ways. did my answer help you? – st mnmn Mar 29 '12 at 06:46
  • @Suryasasidhar: ObjectDataSource1 is a datasource control to fetch data to be shown in gridview. [More about datasource controls:](http://msdn.microsoft.com/en-us/library/ms227679.aspx) – cyborg007 Mar 29 '12 at 06:53
  • No Mr St mnmn, it is not my requiremnet, ya i know objectdatasource1 is toboudn the gridview but what that contain – Surya sasidhar Mar 29 '12 at 07:24
  • this is the definision of my objectDataSource. in my case it contains a dictionary of strings and in the gridView you can see the keys and Values of the dictionary. so, What is your requirement? – st mnmn Mar 29 '12 at 07:34