Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
arsalan
75
how to add Custom day in webmonthcalendar Control client side
posted

i try to add custom day in webMonthCalender control on client side, when user select multiple dates they will add in custom day array, and holiday css will be applied to custom days,

i have write this code but nothing will happen ,

 function addCustom() {

        var calendar = $find('<%=WebMonthCalendar1.ClientID%>');                
        var days = calendar.get_selectedDates();
 
        for (var i = 0; i < days.length; i++) {
            if (days[i] != null && days[i] != "") {         
             
    calendar.addCustomDay(days[i].getFullYear(), days[i].getMonth(), days[i].getDate(), days[i].getDay(), false, "H", 'holiday');


 
            }
        }
    }

this fuction is fire on click event of button,

the "holiday"css is include on page which is given below

.holiday
{
    background-color:Blue !important;
}

day is adding in custom day but css is not applying ;

i verify it by alert(customday[0].css); it showing "holiday".

why it is not applying .

kindly help me what im doing wrong , thanks

 

 

  • 24497
    posted

    Hi Arsalan,

    I apologize for delay, because that question missed my attention.

    I think that in your codes you use wrong methods of Date object. The getDay() returns day of the week, but not day of the month, and getMonth() returns values in range of 0-11, but not in range of 1-12.

    I wrote for you example to add/remove custom day for the selected date in calendar. To test, you may copy/paste those codes in any aspx.

    <style type="text/css">   
       .red { color: Red; }    
    </style>
    <script type="text/javascript">
     function addDay()
     {
      var cal = $find('WebMonthCalendar1');
      var date = cal.get_selectedDate();
      if (!date)
       return;
      var year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate();
      var days = cal.get_customDays();
      var i = days ? days.length : 0;
      while(i-- > 0)
      {
       // check if day already exists
       if(days[i].day == day && days[i].month == month && days[i].year == year)
        return;
      }
      cal.addCustomDay(year, month, day, -1, null, null, 'red');
      cal.repaint();
     }
     function removeDay()
     {
      var cal = $find('WebMonthCalendar1');
      var date = cal.get_selectedDate();
      if (!date)
       return;
      var year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate();
      var days = cal.get_customDays();
      var len = days ? days.length : 0, i = len;
      while(i-- > 0)
      {
       // find day
       if(days[i].day == day && days[i].month == month && days[i].year == year)
        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"></ig:WebMonthCalendar>
    <input type="button" value="AddCustom" onclick="addDay()" />
    <input type="button" value="RemoveCustom" onclick="removeDay()" />