Microsoft Technical Issues

Do you want to change the colors of the weekend in the Ajax Calendar extender control.
You have to change the behaviour of a AJAX Control Tool Kit in this way.Fllow my method.

add CSS to AjaX Control Tool Kit Solution >> Calendar Folder >> Calendar.css
Add one more line..

.ajax__calendar_container {padding:4px;cursor:default;width:170px;font-size:11px;text-align:center;font-family:tahoma,verdana,helvetica;}
.ajax__calendar_body {height:139px;width:170px;position:relative;overflow:hidden;margin:auto;}
.ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years {top:0px;left:0px;height:139px;width:170px;position:absolute;text-align:center;margin:auto;}
.ajax__calendar_container TABLE {padding:0px;margin:0px;font-size:11px;}
.ajax__calendar_container TD {padding:0px;margin:0px;font-size:11px;}
.ajax__calendar_header {height:20px;width:100%;}
.ajax__calendar_prev {cursor:pointer;width:15px;height:15px;float:left;background-repeat:no-repeat;background-position:50% 50%;background-image:url(<%=WebResource("AjaxControlToolkit.Calendar.arrow-left.gif")%>);}
.ajax__calendar_next {cursor:pointer;width:15px;height:15px;float:right;background-repeat:no-repeat;background-position:50% 50%;background-image:url(<%=WebResource("AjaxControlToolkit.Calendar.arrow-right.gif")%>);}
.ajax__calendar_title {cursor:pointer;font-weight:bold;}
.ajax__calendar_footer {height:15px;}
.ajax__calendar_today {cursor:pointer;padding-top:3px;}
.ajax__calendar_dayname {height:17px;width:17px;text-align:right;padding:0 2px;}
.ajax__calendar_day {height:17px;width:18px;text-align:right;padding:0 2px;cursor:pointer;}
.ajax__calendar_month {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
.ajax__calendar_year {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
.ajax__calendar .ajax__calendar_container {border:1px solid #646464;background-color:#ffffff;color:#000000;}
.ajax__calendar .ajax__calendar_footer {border-top:1px solid #f5f5f5;}
.ajax__calendar .ajax__calendar_dayname {border-bottom:1px solid #f5f5f5;}
.ajax__calendar .ajax__calendar_day {border:1px solid #ffffff;}
.ajax__calendar .ajax__calendar_month {border:1px solid #ffffff;}
.ajax__calendar .ajax__calendar_year {border:1px solid #ffffff;}
.ajax__calendar .ajax__calendar_active .ajax__calendar_day {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
.ajax__calendar .ajax__calendar_active .ajax__calendar_month {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
.ajax__calendar .ajax__calendar_active .ajax__calendar_year {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
.ajax__calendar .ajax__calendar_other .ajax__calendar_day {background-color:#ffffff;border-color:#ffffff;color:#646464;}
.ajax__calendar .ajax__calendar_other .ajax__calendar_year {background-color:#ffffff;border-color:#ffffff;color:#646464;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_day {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_month {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_year {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_title {color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_today {color:#0066cc;}
//the upper line is already there.....you have to add this css line
.ajax__calendar .ajax__calendar_new .ajax__calendar_day {color:Red;}

in then CalendarBehavior.js file add code...(modified only bold one) Line Number 1048

for (var week = 0; week < weekrow =" this._daysBody.rows[week];" dayofweek =" 0;" daycell =" weekRow.cells[dayOfWeek].firstChild;" title =" currentDate.localeFormat(" date =" currentDate;" currentdate =" new">

if (dtf.ShortestDayNames[(dayOfWeek + firstDayOfWeek) % 7] == "Su") {
//if sunday then change the color  
Sys.UI.DomElement.addCssClass(dayCell.parentNode, "ajax__calendar_new");  }
if (dtf.ShortestDayNames[(dayOfWeek + firstDayOfWeek) % 7] == "Sa") {
//if saturday then chagne the color  
Sys.UI.DomElement.addCssClass(dayCell.parentNode, "ajax__calendar_new");  }
} }

/// you will find this in _performLayout: function() { 
/// Updates the various views of the calendar to match the current selected and visible dates
/// 
switch (this._mode) {
case "days":

If this helps you please give me your comment and put your new suggestions here.

Ajax Calendar control has only one view to display the date.But some of people are not familiar with this view and they want the old classic view with drop downs to select dates.This is what who are looking for the custom calendar control.You can use this as a user control and just drag and drop to the design view to use it.



.aspx

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>

 <%--onFocus="javascript:this.blur();" autocomplete="off"--%>
*

  
  

  
  

   
   

   
  
  
  

 
      
          









              
          
      
  
  

.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Quote_Engine_CustomAjaxCalender : System.Web.UI.UserControl
{
public string DateTextFromValue
{
  get { return DateTextFrom.Text; }
  set { DateTextFrom.Text = value; }
}

public Boolean DateTextRequired
{
  get { return DateTextFromRequired.Enabled; }
  set { DateTextFromRequired.Enabled = value; }
}

public string DateTextRequiredText
{
  get { return DateTextFromRequired.ErrorMessage; }
  set { DateTextFromRequired.ErrorMessage = value; }
}

//private string theDateTextFrom;

protected void Page_Load(object sender, EventArgs e)
{
  if (!Page.IsPostBack)
  {
      Populate_MonthList();
      Populate_YearList();

      DateTime dt;
      if (DateTextFrom.Text != "")
      {
          dt = DateTime.Parse(DateTextFrom.Text);
          Calendar1.TodaysDate = dt;
      }
  }
}

// SET THE FIRST CALENDAR (FROM DATE)
public void Set_Calendar(object Sender, EventArgs E)
{
  string theDate = drpCalMonth.SelectedItem.Value + " 1, " + drpCalYear.SelectedItem.Value;
  DateTime dtFoo;
  dtFoo = System.Convert.ToDateTime(theDate);
  Calendar1.TodaysDate = dtFoo;
}

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
  // Popup result is the selected date
  drpCalMonth.SelectedIndex = Calendar1.SelectedDate.Month - 1;
  drpCalYear.SelectedItem.Selected = false;
  drpCalYear.Items.FindByValue(Calendar1.SelectedDate.Year.ToString()).Selected = true;

  // Popup result is the selected date
  //PopupControlExtender1.Commit(Calendar1.SelectedDate.ToShortDateString());
  PopupControlExtender1.Commit(Calendar1.SelectedDate.ToString("dd/MM/yyyy"));

}

// INNOVATIVE CALENDARS VIA AJAX THAT ALLOW USER TO PICK MONTH AND DATE VIA DROPDOWN
void Populate_MonthList()
{
  drpCalMonth.Items.Add("January");
  drpCalMonth.Items.Add("February");
  drpCalMonth.Items.Add("March");
  drpCalMonth.Items.Add("April");
  drpCalMonth.Items.Add("May");
  drpCalMonth.Items.Add("June");
  drpCalMonth.Items.Add("July");
  drpCalMonth.Items.Add("August");
  drpCalMonth.Items.Add("September");
  drpCalMonth.Items.Add("October");
  drpCalMonth.Items.Add("November");
  drpCalMonth.Items.Add("December");
  //string strMonth;

  //if (DateTextFrom.Text == "")
  //    strMonth = DateTime.Now.ToString("MMMM");
  //else

  //    strMonth = Convert.ToDateTime(DateTextFrom.Text).ToString("MMMM");
  //drpCalMonth.Items.FindByValue(strMonth).Selected = true;
}

// POPULATE THE YEARLIST FROM 20 YEARS AGO TO ONE YEAR HENCE
void Populate_YearList()
{
  int intYear;


  // Year list can be changed by changing the lower and upper
  // limits of the For statement
  for (intYear = DateTime.Now.Year - 10; intYear <= DateTime.Now.Year + 10; intYear++)        {            drpCalYear.Items.Add(intYear.ToString());        }         //if (DateTextFrom.Text == "")        //    drpCalYear.Items.FindByValue(DateTime.Now.Year.ToString()).Selected = true;        //else        //{        //    string strYear = Convert.ToDateTime(DateTextFrom.Text).Year.ToString();        //    drpCalYear.Items.FindByValue(strYear).Selected = true;        //}    } }  

Most of the people like to give a different look and feel to the calendar control. There are two themes for Ajax Calendar. This will help you to modify your calendar view.

/* Start - Calander Styles */
.ajax__calendar_container
{padding:4px;position:absolute;cursor:default;width:170px;font-size:11px;
text-align:center;font-family:tahoma,verdana,helvetica;}
.ajax__calendar_body
{height:139px;width:170px;position:relative;overflow:hidden;margin:auto; }
.ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years
{top:0px;left:0px;height:139px;width:170px;position:absolute;
text-align:center;margin:auto;}
.ajax__calendar_container TABLE {font-size:11px;}
.ajax__calendar_header {height:20px; background-color:#63B2DB;width:100%;}
.ajax__calendar_prev
{cursor:pointer;width:15px;height:15px;float:left;
background-repeat:no-repeat;background-position:50% 50%;
background-image:
url();}
.ajax__calendar_next
{cursor:pointer;width:15px;height:15px;float:right;
background-repeat:no-repeat;background-position:50% 50%;
background-image:
url();}
.ajax__calendar_title {cursor:pointer;font-weight:bold;}
.ajax__calendar_footer {height:15px; background-color:#63B2DB;}
.ajax__calendar_today {cursor:pointer;padding-top:3px;}
.ajax__calendar_dayname {height:17px;width:18px;text-align:right;padding:0 2px;}
.ajax__calendar_day
{height:17px;width:18px;text-align:right;padding:0 2px;cursor:pointer;}
.ajax__calendar_month
{height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
.ajax__calendar_year
{height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
.ajax__calendar .ajax__calendar_container
{border:1px solid #646464;background-color:#ffffff;color:#000000;}
.ajax__calendar .ajax__calendar_footer {border-top:1px solid #f5f5f5;}
.ajax__calendar .ajax__calendar_dayname {border-bottom:1px solid #f5f5f5;}
.ajax__calendar .ajax__calendar_day {border:1px solid #ffffff;}
.ajax__calendar .ajax__calendar_month {border:1px solid #ffffff;}
.ajax__calendar .ajax__calendar_year {border:1px solid #ffffff;}
.ajax__calendar .ajax__calendar_active .ajax__calendar_day
{background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
.ajax__calendar .ajax__calendar_active .ajax__calendar_month
{background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
.ajax__calendar .ajax__calendar_active .ajax__calendar_year
{background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
.ajax__calendar .ajax__calendar_other .ajax__calendar_day
{background-color:#ffffff;border-color:#ffffff;color:#ffffff;cursor:default;}
.ajax__calendar .ajax__calendar_other .ajax__calendar_month
{background-color:#ffffff;border-color:#ffffff;color:#ffffff;cursor:default;}
.ajax__calendar .ajax__calendar_other .ajax__calendar_year
{background-color:#ffffff;border-color:#ffffff;color:#ffffff;cursor:default;}
.ajax__calendar .ajax__calendar_today .ajax__calendar_day
{background-color:#fff2a8;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_day
{background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_month
{background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_year
{background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_title {color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_today {color:#0066cc;}

/* End - Calander Styles */

This is the second theme and you should use the class name inside the calendar control like this.

.aspx

 

.css

/*Start Cal Theme */
.cal_The .ajax__calendar_container

{
background-color: #63B2DB; border:solid 0px #cccccc;

}

.cal_The .ajax__calendar_header

{
background-color: #63B2DB; margin-bottom: 4px;

}

.cal_The .ajax__calendar_title
{

}

.cal_The .ajax__calendar_next,

.cal_The .ajax__calendar_prev

{
color: #004080; padding-top: 3px;

}

.cal_The .ajax__calendar_body

{
background-color: #FFFFFF; border: solid 1px #cccccc;
/*e9e9e9*/
}

.cal_The .ajax__calendar_dayname

{
text-align:center; font-weight:bold; margin-bottom: 4px; margin-top: 2px;
background-color: #ffffff;
}

.cal_The .ajax__calendar_day

{
text-align:center;

}

.cal_The .ajax__calendar_hover .ajax__calendar_day,

.cal_The .ajax__calendar_hover .ajax__calendar_month,

.cal_The .ajax__calendar_hover .ajax__calendar_year,

.cal_The .ajax__calendar_active

{
color: #004080; font-weight:bold; background-color: #ffffff;

}

.cal_The .ajax__calendar_today

{
font-weight:bold;

}

.cal_The .ajax__calendar_other,

.cal_The .ajax__calendar_hover .ajax__calendar_today,

.cal_The .ajax__calendar_hover .ajax__calendar_title

{
color: #bbbbbb;

}
/*End Cal Theme*/

I have added the simple example for the above style sheet as the Deepak's request.

There is not a method to validate future or past date in Ajax CalendarExtender Control. This is the JavaScript to set validate the Ajax calendar for future date. If you want to validate past date ,you have to do only change the comparison symbol.

    <script language="javascript" type="text/javascript">
        function checkDate(sender,args)
            {       
                if (sender._selectedDate < new Date())
                {
                    alert("You must select a date in the future.");
                   
                    //create the date
                    var myDate = new Date();
                    //add a day to the date
                    myDate.setDate(myDate.getDate() + 1);
                    sender._selectedDate = myDate;  //new Date();
                    // set the date back to the current date
                    sender._textbox.set_Value(sender._selectedDate.format(sender._format))
                }

            }

    </script>

I have posted a solution before for an Ajax calendar with drop downs.But there is a control called CalendarExtenderPlus .you can find it from http://lionsden.co.il/codeden/?p=222 .This control has developed by Hanan Schwartzberg.But there were some issues.Anyway Hanan could fix some of the issues.But I noted there was an issue when we are using this control with other Ajax controls.The issue was can not select a date after the first selection.Because calendar control is getting stuck.We were sending more than 30 messages to each other to figure out the issue.Anyway finally I could find the issue.That was 2 java script errors.
The error was
Microsoft JScript runtime error: Sys.InvalidOperationException: Type Sys.Timer has already been registered.

Anyway I found this solution for this.You should modify the ScriptManager code like this.Then everything will work fine.Thank you very much for your great work Hanan.I just put pepper and salt on to it.

        runat="server"
        EnablePageMethods="true"  
        EnableScriptGlobalization="true"  
        ScriptMode="Release" />

I recommend to install AJAX Control Toolkit May 2009 Release or later version like Version 3.0.30512 for best result with this.