Member Avatar for rashmigs84

Hi,
Can anyone tell me how to create calendar using javascript using asp.net2005?

Thank you.

  • 2 Contributors
  • 2 Replies
  • 87 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by rashmigs84

Dani AI

Generated

asked for a faster way to jump to a year; pointed to the ASP.NET Calendar control but that is server-side and navigation triggers postbacks. A lightweight client-side calendar redraws instantly when a year is typed. In WebForms, reference the real client id of a server TextBox with <%= txtYear.ClientID %> so your script finds the control rendered on the page.

Here is a compact, cross-browser example you can drop into an ASP.NET 2.0 page (use an HTML button so it does not post back):

<asp:TextBox ID="txtYear" runat="server" Text="2025" />
<input type="button" id="go" value="Go" />
<div id="cal"></div>

<script type="text/javascript">
(function(){
  function renderCalendar(container, month, year){
    var first = new Date(year, month, 1);
    var daysInMonth = new Date(year, month + 1, 0).getDate();
    var start = first.getDay();
    var html = '<table><tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr><tr>';
    for(var i=0;i<start;i++) html += '<td></td>';
    for(var d=1; d<=daysInMonth; d++){
      if(((start + d - 1) % 7) === 0 && d>1) html += '</tr><tr>';
      html += '<td>' + d + '</td>';
    }
    var rem = (start + daysInMonth) % 7;
    if(rem !== 0) for(var k=rem;k<7;k++) html += '<td></td>';
    html += '</tr></table>';
    container.innerHTML = html;
  }

  var yearEl = document.getElementById('<%= txtYear.ClientID %>');
  var calEl = document.getElementById('cal');
  var go = document.getElementById('go');

  function attach(el, evt, fn){
    if(el.addEventListener) el.addEventListener(evt, fn, false);
    else if(el.attachEvent) el.attachEvent('on' + evt, fn);
    else el['on' + evt] = fn;
  }

  var goHandler = function(){
    var y = parseInt(yearEl.value, 10) || new Date().getFullYear();
    renderCalendar(calEl, 0, y);
  };

  attach(go, 'click', goHandler);
  attach(yearEl, 'keydown', function(e){
    e = e || window.event;
    var code = e.keyCode || e.which;
    if(code === 13){ if(e.preventDefault) e.preventDefault(); goHandler(); return false; }
  });

  goHandler();
})();
</script>

Tips: validate user input (range/sanity), consider input type="number" for better UX, and add ARIA/keyboard support for accessibility. If you prefer a ready-made widget with year dropdowns, use a datepicker like jQuery UI Datepicker (jQuery UI Datepicker) and enable changeYear: true and yearRange for quick jumps. If server-side logic must run on year change, wrap the server control in an UpdatePanel to avoid a full page reload.

Recommended Answers

All 2 Replies

Member Avatar for majestic0110

Hi there Rashmi, here is a great link with sample code for the asp.net calendar control:

Hope this helps. It does not require javascript :)

Member Avatar for rashmigs84

hi,
i wanted to use javascript because if i want to change the year not by clicking the forward or backward sign it takes long time. something which is quicker than this method. May be like if i write the year what i want in some textbox it displays the calendar. Please can i get the solution for this.

Thank you.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.