Hi  bgnanaprakash,

I was sorted out the above problem by using mouse down event. Below is the code I used.

        function calendarMouseDown(cal, args) {

            var id = cal.idFromMouse(args.get_browserEvent());           

            if (id < 0 || id > 41)

                return;

            var day = cal.get_days()[id];

            var selectedType = document.getElementById("txtHiddenHolidayType").value;

            var oldStyle = "";

            if (selectedType != "") {

                var style = GetSelectedStyle(selectedType);

                if (cal._cd0 != null) {

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

                        if (cal._cd0[i].day == day.get_day() && cal._cd0[i].month == day.get_month() && cal._cd0[i].year == day.get_year()) {

                            oldStyle = cal._cd0[i].css;                            

                            break;

                        }

                    }

                }

            }

            if (style == oldStyle) {

                var arrMonths = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

                var strDate_Style = "" + " " + arrMonths[day.get_month() - 1] + " " + day.get_day() + " " + "xx" + " " + "xxx" + " " + day.get_year() + "#" + 7 + "%";

                document.getElementById("txtHiddenDateCollection").value = document.getElementById("txtHiddenDateCollection").value + strDate_Style;

                cal.addCustomDay(day.get_year(), day.get_month(), day.get_day(), "", "", "", "Trading_Day");                

                isUnSelect = 'True';

            }

            else

                isUnSelect = 'False';

        }

But still I’m having a problem. That is removing custom days. Please sagest me a way to remove custom days of the control. 

Hi Hasithi,

It is not clear what you are doing in your codes and what behavior you expect. Block of codes with calendarMouseDown function means nothing without the rest of logic in your application.
I did not find any codes related to selection-change on mouse-down (or maybe different event?) which you mentioned in your notes.

So, I will try to explain how calendar work. If you process mousedown and do not cancel it, then calendar will do its default action and select clicked day. If you do not want default action on mouse-down, then you may cancel that event and if you want, then you may select another day instead. To select day, you may use set_selectedDate(Date) member of calendar.

If day is already selected, then click on that day will not change selection and no selection events will be raised.

To remove custom day on client, you may use get_customDays(), find day within that array which you want to remove and remove it from array.

In example below you may prevent default select-action by uncommenting last 2 lines in calendarMouseDown:

  <script type="text/javascript">
 function calendarMouseDown(cal, args)
 {
  var id = cal.idFromMouse(args.get_browserEvent());          
  if(id < 0 || id > 41)
   return;
  var day = cal.get_days()[id];
  var days = cal.get_customDays();
  var i = days ? days.length : 0;
  while(i-- > 0)
  {
   // check if day already exists
   if(days[i].day == day.get_day() && days[i].month == day.get_month() && days[i].year == day.get_year())
    return;
  }
  cal.addCustomDay(day.get_year(), day.get_month(), day.get_day(), -1, null, null, 'red');
  //args.set_cancel(true);
  //cal.repaint();
 }
 function removeDay()
 {
  var cal = $find('<%=WebMonthCalendar1.ClientID%>');
  var days = cal.get_customDays();
  var len = days ? days.length : 0;
  var i = len;
  while(i-- > 0)
  {
   // search for day you want to remove
   // for example remove custom date with day==3
   if(days[i].day == 3)
    break;
  }
  if(i < 0)
   return;
  if(i < len - 1)
   days[i] = days[len - 1];
  days.length--;
  cal.repaint();
 }
 </script>
 <ig:WebMonthCalendar ID="WebMonthCalendar1" runat="server">
  <ClientEvents MouseDown="calendarMouseDown" />
 </ig:WebMonthCalendar>
 <input type="button" value='remove' onclick="removeDay()" />