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
Struski
725
Disable dates on WebCalendar
posted

Hello. Can I show a webcalendar, with certain dates disabled? What I want to do is to run a query on my db, get the dates that are free, and disable the other dates, in order for the user not to be able to choose these - not free - dates. I would really like to change the backcolor of these dates too.

Is there a way to do that?

Parents
  • 24497
    posted

    Hi,

    That is possible, but it can be done on client only and requires some knowledge of javascript. You can process ClientSideEvents.Click to cancel mouse click action, you may process ClientSideEvents.RenderDay to customize appearance of days in calendar, and you also may pass array of dates from server for those client events. Below example will process those events and use listOfDates as array container for [year,month,day] disabled dates passed from server.

    <style type="text/css">.grayCss{background:#E0E0E0;color:#808080;}</style>

    <script type="text/javascript">
    //array of disabled dates
    //line below will be passed from server. Uncomment it for test before server implementation
    //var listOfDates = [[2008,5,5],[2008,5,6],[2009,2,7],[2009,2,10]];
    function WebCalendarView1_RenderDay(oCalendarView, oEvent, day)
    {
         var i = listOfDates ? listOfDates.length : 0;
         while(i-- > 0)
     {
           var item = listOfDates[i];
           if(day.year == item[0] && day.month == item[1] && day.day == item[2])
       {
         day.css +=     ' grayCss';
             //day.element.style.color = '#C0C0C0';
           }
     }
    }
    function WebCalendarView1_Click(oCalendarView, oEvent, element)
    {
          if(!element) return;
          var css1 = element.className, css2 = element.parentNode.className;
          if(css1.indexOf(' grayCss') >= 0 || css2.indexOf(' grayCss') >= 0)
        oEvent.cancel =     true;
      //it is also possible to find actual day from element.id (from digits after _id)
    }
    </script>

    <igsch:WebCalendarView ID="WebCalendarView1" runat="server" WebScheduleInfoID="WebScheduleInfo1" >
      <ClientEvents RenderDay="WebCalendarView1_RenderDay" Click="WebCalendarView1_Click"></ClientEvents>
    </igsch:WebCalendarView>

    protected void Page_Load(object sender, EventArgs e)
    {
     System.Text.    StringBuilder dates = new System.Text.StringBuilder();
     dates.Append(    "<script type=\"text/javascript\">");
     dates.Append(    "var listOfDates=[");
     //
         DateTime d = DateTime.Now.AddDays(1);
     dates.Append(    "[").Append(d.Year).Append(",").Append(d.Month).Append(",").Append(d.Day).Append("]");
         //
         d = DateTime.Now.AddDays(3);
     dates.Append(    ",");
     dates.Append(    "[").Append(d.Year).Append(",").Append(d.Month).Append(",").Append(d.Day).Append("]");
         //
         d = DateTime.Now.AddDays(4);
     dates.Append(    ",");
     dates.Append(    "[").Append(d.Year).Append(",").Append(d.Month).Append(",").Append(d.Day).Append("]");
     //
         dates.Append("];");
     dates.Append(    "</script>");
         this.Page.RegisterClientScriptBlock("badDates", dates.ToString());
    }

Reply Children