locked
Show only month and year and hide days in calender control. RRS feed

  • Question

  • User420834038 posted

    Hello,

    I want to show only months and year in calender control and hide days,

    Kindly help...

    Monday, May 11, 2020 9:51 AM

Answers

  • User-1330468790 posted

    Hi,  Priyanka.talekar,

     

    Here is another option: you could use the calendar control in ajax toolkit.

    More details, you could refer to below demo:

    .aspx Page and script:

    <body>
    
        <form id="SelectMonth" runat="server">
    
            <div>
    
                <asp:ScriptManager ID="CalendarManagaer" runat="server"></asp:ScriptManager>
    
                <asp:TextBox ID="chooseMonth" runat="server" ReadOnly="true"></asp:TextBox>
    
                <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server"
    
                    OnClientShown="onCalendarShown"
    
                    TargetControlID="chooseMonth"
    
                    BehaviorID="Calendar1"
    
                    Format="yyyy-MM" />
    
            </div>
    
        </form>
    
        <script src="Scripts/jquery-3.4.1.js" type="text/javascript"></script>
    
        <script>
    
            function onCalendarShown() {
    
                var cal = $find("Calendar1");
    
                //Setting the default mode to month
    
                cal._switchMode("months", true);
    
               //Iterate every month Item and attach click event to it
    
                if (cal._monthsBody) {
    
                    for (var i = 0; i < cal._monthsBody.rows.length; i++) {
    
                        var row = cal._monthsBody.rows[i];
    
                        for (var j = 0; j < row.cells.length; j++) {
    
                            Sys.UI.DomEvent.addHandler(row.cells[j].firstChild, "click", call);
    
                        }
    
                    }
    
                }
    
            }
    
            function call(eventElement) {
    
                var target = eventElement.target;
    
                switch (target.mode) {
    
                    case "month":
    
                        var cal = $find("Calendar1");
    
                        cal._visibleDate = target.date;
    
                        cal.set_selectedDate(target.date);
    
                        cal._blur.post(true);
    
                        cal.raiseDateSelectionChanged();
    
                        break;
    
                }
    
            }
    
        </script>
    
    </body>

    Result:

     

     

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 12, 2020 9:22 AM

All replies

  • User409696431 posted

    Which calendar control are you using?  The <asp:Calendar>, or the Ajax toolkit calendar?

    If you are using <asp:Calendar>, it wasn't designed to only display month and year.  Are you expecting people to be able to select a month?

    You can set up the calendar control to select a day, or to select either a day or a week,  or to select a day, a week, or a month, or to be able to select nothing.  You can't set it up to only select a month.  See the Calendar.SelectionMode. (https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.calendar.selectionmode?view=netframework-4.8 )

    And when you do set it up to be able to select a day, a week, or a month, the selector for the month is in the same row as the headers for the days.  This means that if you want to use it and hide the days, you'll need to use CSS to do it, choosing to display:none the th (headers) for the days (the month selection isn't in a th, so it won't be hidden), and display:none all the rows for the days.   And you'll still be left with the month being selected by clicking on an indicator below the Month/Year display.

    So, it can be done, but rather awkwardly:

    <head runat="server">
        <title>Calendar Demo</title>
        <style type="text/css">
            table#Calendar1 tr:nth-child(2) th {
                display:none;
            }
            table#Calendar1 tr:nth-child(n+3) {
                display:none;
            }
    
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Calendar ID="Calendar1" runat="server" SelectionMode="DayWeekMonth" SelectMonthText="Select the Month">
                </asp:Calendar>
            </div>
        </form>
    </body>

    Monday, May 11, 2020 6:18 PM
  • User-1330468790 posted

    Hi,  Priyanka.talekar,

     

    Here is another option: you could use the calendar control in ajax toolkit.

    More details, you could refer to below demo:

    .aspx Page and script:

    <body>
    
        <form id="SelectMonth" runat="server">
    
            <div>
    
                <asp:ScriptManager ID="CalendarManagaer" runat="server"></asp:ScriptManager>
    
                <asp:TextBox ID="chooseMonth" runat="server" ReadOnly="true"></asp:TextBox>
    
                <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server"
    
                    OnClientShown="onCalendarShown"
    
                    TargetControlID="chooseMonth"
    
                    BehaviorID="Calendar1"
    
                    Format="yyyy-MM" />
    
            </div>
    
        </form>
    
        <script src="Scripts/jquery-3.4.1.js" type="text/javascript"></script>
    
        <script>
    
            function onCalendarShown() {
    
                var cal = $find("Calendar1");
    
                //Setting the default mode to month
    
                cal._switchMode("months", true);
    
               //Iterate every month Item and attach click event to it
    
                if (cal._monthsBody) {
    
                    for (var i = 0; i < cal._monthsBody.rows.length; i++) {
    
                        var row = cal._monthsBody.rows[i];
    
                        for (var j = 0; j < row.cells.length; j++) {
    
                            Sys.UI.DomEvent.addHandler(row.cells[j].firstChild, "click", call);
    
                        }
    
                    }
    
                }
    
            }
    
            function call(eventElement) {
    
                var target = eventElement.target;
    
                switch (target.mode) {
    
                    case "month":
    
                        var cal = $find("Calendar1");
    
                        cal._visibleDate = target.date;
    
                        cal.set_selectedDate(target.date);
    
                        cal._blur.post(true);
    
                        cal.raiseDateSelectionChanged();
    
                        break;
    
                }
    
            }
    
        </script>
    
    </body>

    Result:

     

     

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 12, 2020 9:22 AM
  • User420834038 posted

    Hi, Sean Fang

    I am getting the error at CalenderExtender as it is not known element. 

    And how to use OnselectionChanged method in calender extender.

    Kindly help...

    Wednesday, May 13, 2020 9:28 AM
  • User409696431 posted
    You need to install the toolkit from devexpress before you can use it. Did you do that?
    Wednesday, May 13, 2020 3:43 PM
  • User-1330468790 posted

    Hi,  Priyanka.talekar

      

    AjaxControlToolkit is not built into this IDE, you need to install it to use it.

    For how to use the OnClientDateSelectionChanged property in Calendar Extender, It is slightly different from the OnSelectionChanged event of the Calendar control, but I suggest you can refer to these cases:

    https://forums.asp.net/t/1610663.aspx

    https://www.dotnetcurry.com/aspnet-ajax/149/aspnet-calendar-extender-control-tips

      

    Best regards,

    Sean

    Thursday, May 14, 2020 10:30 AM
  • User420834038 posted

    Hi KathyW,

    Yes i installed toolkit. but still its giving me same error.

    Kindly help.

    Thursday, May 14, 2020 11:47 AM
  • User420834038 posted

    Hi sean Fang,

    i installed AjaxControlTookit but still its showing me same error as CalenderExtender is not known element.

    Kindly help.

    Thursday, May 14, 2020 11:52 AM
  • User420834038 posted

    Hi sean Fang,

    i installed AjaxControlTookit but still its showing me same error as CalenderExtender is not known element.

    Kindly help.

    Thursday, May 14, 2020 11:52 AM
  • User-1330468790 posted

    Hi Priyanka.talekar,

      

    I was wondering if you have completed the whole process of the installation?

    It is not like installing other packages that you need to do one more step to integrate the AjaxToolKit with Visual Studio - Adding the AjaxToolKit to the ToolBox. 

    Could you please check if you could find "CalendarExtender" in the ToolBox as below shows?

    .

    If you could not, you might have met this common problem.

    You could refer to this link to complete the installation: Add AJAX Control Toolkit In Visual Studio

    Moreover, you might need to register the AjaxToolKit assembly in the .aspx Page.

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

      

    However, if you find that the above steps have been performed correctly and the problem still occurs, could you please provide me with more information for reproducing your problem?

    • VS version
    • Sample code for the page
    • ASP.NET/core version
    • Would be better: web.config.

    That way, I would be able to target the problem and find a way to help you solve it.

     

    Hope this can help you.

    Best regards,

    Sean

    Friday, May 15, 2020 3:44 AM
  • User420834038 posted

    Hi Sean Fang,

    Yes i have installed it correctly.

    I can see the Ajax control toolkit in my VS ToolBox.

    And i have put the register assembly also in .aspx page.

    anyways i will provide you the information, kindly check below,

    • VS Version - 14.0
    • Sample Code for the page

    <%@ Page Title="" Language="C#" MasterPageFile="~/Attendancemaster.Master" AutoEventWireup="true"
    CodeBehind="BindEmpAttendance.aspx.cs" Inherits="Attendancesystem.BindEmpAttendance" EnableEventValidation="false" %>

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <style>
    .underline {
    text-decoration:underline;
    /*border-bottom: 2px solid currentColor;*/
    }

    .ui-datepicker-calendar {
    display: none;
    }

    </style>
    <script src="Scripts/jquery-3.4.1.js" type="text/javascript"></script>

    <script>

    function onCalendarShown() {

    var cal = $find("Calendar1");

    //Setting the default mode to month

    cal._switchMode("months", true);

    //Iterate every month Item and attach click event to it

    if (cal._monthsBody) {

    for (var i = 0; i < cal._monthsBody.rows.length; i++) {

    var row = cal._monthsBody.rows[i];

    for (var j = 0; j < row.cells.length; j++) {

    Sys.UI.DomEvent.addHandler(row.cells[j].firstChild, "click", call);

    }

    }

    }

    }

    function call(eventElement) {

    var target = eventElement.target;

    switch (target.mode) {

    case "month":

    var cal = $find("Calendar1");

    cal._visibleDate = target.date;

    cal.set_selectedDate(target.date);

    cal._blur.post(true);

    cal.raiseDateSelectionChanged();

    break;

    }

    }
    </script>

    <section id="main">
    <div class="container">
    <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
    <h3 ><b><span class="underline">Employees Attendance Report</span> </b></h3>
    <br />


    <div class="row">
    <div class="col-md-12 col-lg-12 col-sm-12">
    <strong>
    <label>Select Date: </label>
    </strong>
    <asp:ScriptManager ID="CalendarManagaer" runat="server"></asp:ScriptManager>

    <asp:TextBox ID="chooseMonth" runat="server" ReadOnly="true"></asp:TextBox>

    <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" OnClientShown="onCalendarShown"
    TargetControlID="chooseMonth" BehaviorID="Calendar1" Format="yyyy-MM" />
    </div>
    </div>
    <br />

    <div class="row col-md-12 col-sm-12 col-lg-12">
    <div class="col-md-4">
    <asp:Button ID="btnexportg" runat="server" CssClass="btn btn-success" Text="Export Data" OnClick="btnexportg_Click" />
    <asp:Button ID="btnclear" runat="server" CssClass="btn btn-dark" Text="Clear" OnClick="btnclear_Click" />
    </div>
    </div>
    <br />
    <div style="overflow:auto; width: 100%; height: auto;" class=" row col-md-12 col-sm-12 col-lg-12">
    <asp:GridView ID="bindempatt" runat="server" class="table table-responsive table-striped table-hover tab-content table-bordered"
    FooterStyle-HorizontalAlign="Center" AllowPaging="false" EnableViewState="true" AllowSorting="true"
    Style="overflow: auto; height:500px;" CellPadding="4" GridLines="Horizontal" EmptyDataText="There is no Employee."
    BorderStyle="Double" BorderWidth="3px" OnPageIndexChanging="bindempatt_PageIndexChanging"
    OnSorting="bindempatt_Sorting" HeaderStyle-ForeColor="White" HeaderStyle-BackColor="Gray">
    <%--<AlternatingRowStyle BackColor="#CCCCCC" />--%>
    <Columns>
    <asp:TemplateField HeaderText="Sr.No ">
    <ItemTemplate>
    <%# Container.DataItemIndex + 1 %>
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    <%--<Columns>
    <asp:BoundField DataField="EmpID" HeaderText="EmpID" SortExpression="EmpID" />
    <asp:BoundField DataField="EmpName" HeaderText="Employee Name" SortExpression="EmpName" />
    <asp:BoundField DataField="EmailID" HeaderText="Email ID" SortExpression="EmailID" />
    <asp:BoundField DataField="ContactNo" HeaderText="Contact No" SortExpression="ContactNo" />
    <asp:BoundField DataField="PunchIn" HeaderText="Punch In" SortExpression="PunchIn" />
    <asp:BoundField DataField="PunchOut" HeaderText="Punch Out" SortExpression="PunchOut" />
    <asp:BoundField DataField="TotalTimeWorked" HeaderText="Time Worked" SortExpression="TotalTimeWorked" />
    </Columns>--%>
    <FooterStyle BackColor="#CCCC99" />
    <HeaderStyle BackColor="#808080" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
    <RowStyle BackColor="" HorizontalAlign="Center" />
    <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#FBFBF2" />
    <SortedAscendingHeaderStyle BackColor="#848384" />
    <SortedDescendingCellStyle BackColor="#EAEAD3" />
    <SortedDescendingHeaderStyle BackColor="#575357" />

    </asp:GridView>
    </div>
    </div>
    </div>
    </div>
    </section>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" />
    <script type="text/javascript">
    $(function() {
    $("#datepicker").datepicker({
    format: "mm-yyyy",
    viewMode: "months",
    minViewMode: "months"
    });
    });
    </script>
    </asp:Content>

    • ASP.NET/Core Version - 4.8
    • web.config

    <?xml version="1.0"?>
    <!--
    For more information on how to configure your ASP.NET application, please visit
    http://go.microsoft.com/fwlink/?LinkId=169433
    -->
    <configuration>
    <connectionStrings>
    <add name="sql" connectionString="Data Source=sl-laptop-090;Initial Catalog=Attendancsystem;Integrated Security=True" providerName="System.Data.SqlClient"/>
    </connectionStrings>
    <system.web>
    <compilation debug="true" targetFramework="4.5.2">
    <assemblies>
    <add assembly="System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>
    <add assembly="System.Web.Extensions.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
    </assemblies>
    </compilation>
    <httpRuntime targetFramework="4.5.2"/>
    <httpModules>
    <add name="ApplicapagestionInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web"/>
    </httpModules>
    </system.web>
    <system.codedom>
    <compilers>
    <compiler language="c#;cs;csharp" extension=".cs" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:6 /nowarn:1659;1699;1701"/>
    <compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:14 /nowarn:41008 /define:_MYTYPE=\&quot;Web\&quot; /optionInfer+"/>
    </compilers>
    </system.codedom>
    <system.webServer>
    <defaultDocument enabled="true">
    <files>
    <clear/>
    <add value="Login.aspx"/>
    </files>
    </defaultDocument>
    <validation validateIntegratedModeConfiguration="false"/>
    <modules>
    <remove name="ApplicationInsightsWebTracking"/>
    <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web" preCondition="managedHandler"/>
    </modules>
    </system.webServer>
    </configuration>

    Kindly help.

    Thank you

    Friday, May 15, 2020 9:43 AM
  • User420834038 posted

    Hi Sean Fang,

    Now its working fine,

    Can u now help me with other issue that, i am showing data in grid view and on that calender selection i want show the records as per the selection, now i have written the code for which i am passing the parameter by creating SP but it is for asp:calender but now i want for calender extender, so how to make it like that.

    This is my method for binding the monthly data

    public void bindemployeeattendance(string sMonth,string year)
    {

    SqlConnection con = new SqlConnection(connStr);
    con.Open();
    com = new SqlCommand("SP_ATTENDANCEREPORT", con);
    com.CommandType = CommandType.StoredProcedure;
    com.Parameters.AddWithValue("@MONTH", Convert.ToInt32(sMonth));
    com.Parameters.AddWithValue("@YEAR", Convert.ToInt32(year));
    sqlda = new SqlDataAdapter(com);
    ds1 = new DataSet();
    sqlda.Fill(ds1);
    bindempatt.DataSource = ds1;
    bindempatt.DataBind();
    con.Close();
    }

    And this was the code for asp:Calender in which i was calling my method.

    protected void datepicker_SelectionChanged(object sender, EventArgs e)
    {
    string smonth = datepicker.SelectedDate.Month.ToString();
    string year = datepicker.SelectedDate.Year.ToString();
    bindemployeeattendance(smonth, year);
    }

    So this was for asp:Calender Selected indexchange so how to do for CalenderExtender.

    Kindly Suggest.

    Friday, May 15, 2020 12:36 PM
  • User-1330468790 posted

    Hi priyanka.talekar,

      

    I'm glad to see that you have solved your issue.
    I suggest you could mark the answer if you think it is right and helpful.

    This will help other people who faces the same issue to find the right answer faster.

    Regarding your new issue, I suggest you could post it in a new thread so that we will be able to focus on it without considering the topic we discussed in this thread.

      

    Best regards,

    Sean

    Sunday, May 17, 2020 8:52 AM
  • User420834038 posted

    Hi Sean Fang,

    Its not the other issue, this issue related to this topic only, so i request you to suggest me the solution in this thread, it will be easy for me.

    Thanks 

    Monday, May 18, 2020 5:51 AM
  • User-1330468790 posted

    Hi priyanka.talekar,

     

    Sorry that I didn't identify the problem carefully and just had a glimpse of your words "Can u now help me with other issue that".

     

    If you want to fetch the data from the code behind, you could refer to below codes which I have posted in this thread.

    Foreground code:

    <form id="SelectMonth" runat="server">
    
            <div>
    
                <asp:ScriptManager ID="CalendarManagaer" runat="server"></asp:ScriptManager>
    
                <asp:TextBox ID="time" runat="server"></asp:TextBox>
    
                <asp:HiddenField runat="server" ID="hiddenTime" />
    
                <asp:TextBox ID="chooseMonth" runat="server" ></asp:TextBox>
    
                <asp:Button runat="server" ID="ChangeBtn" Style="display: none" OnClick="ChangeBtn_Click" />
    
     
    
                <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server"
    
                    OnClientShown="onCalendarShown"
    
                    OnClientDateSelectionChanged="onChanged"
    
                    TargetControlID="chooseMonth"
    
                    BehaviorID="Calendar1"
    
                    Format="yyyy-MM" />
    
            </div>
    
        </form>
    
    <script src="Scripts/jquery-3.4.1.js" type="text/javascript"></script>
    
        <script>
    
            function onChanged(sender, args) {
    
                var value = sender.get_selectedDate();
    
     
    
                $("#hiddenTime").val(value.getFullYear() + "-" + (value.getMonth()+1));
    
                $("#ChangeBtn").click();
    
            }
    
    function onCalendarShown(){…}
    
    function call(eventElement){…}

    Code behind:

    protected void Calendar_SelectionChanged(object sender, EventArgs e)
    
            {
    
                Calendar time = (Calendar)sender;
    
                chooseMonth.Text = time.SelectedDate.Year.ToString()+"-"+time.SelectedDate.Month.ToString();
    
                //do somethig here
    
            }
    
     
    
            protected void ChangeBtn_Click(object sender, EventArgs e)
    
            {
    
                time.Text = hiddenTime.Value;
    
    //do somethig here
    
            }

    Demo:

     

    There are two threads with the similar topic as below:

    https://forums.asp.net/t/1610663.aspx

    https://www.dotnetcurry.com/aspnet-ajax/149/aspnet-calendar-extender-control-tips   

     

    Hope this can help you.

    Best regards,

    Sean

    Monday, May 18, 2020 10:19 AM