Disabled Days with Range Selection and Multiple Calendars

4 posts, 0 answers
  1. Andrew
    Andrew avatar
    5 posts
    Member since:
    Feb 2014

    Posted 03 Feb 2014 Link to this post

    Howdy,

    I can't seem to get the disabled days function to be working after I combined it with the Data Selector Range Demo (http://demos.telerik.com/aspnet-ajax/calendar/examples/functionality/rangeselection/defaultcs.aspx)

    DefaultVB.aspx
    <%@ Page CodeFile="DefaultVB.aspx.vb" Language="vb" AutoEventWireup="false"  Inherits="testlayouts_samples_rangeselection_DefaultVB" %>
      
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <head>
        <title>ASP.NET Calendar Demo - Range Selection</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
        <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
             <script type="text/javascript">
                 // necessary to disable the weekends on client-side navigation
                 function OnDayRender(calendarInstance, args) {
                     // convert the date-triplet to a javascript date
                     // we need Date.getDay() method to determine
                     // which days should be disabled (e.g. every Saturday (day = 6) and Sunday (day = 0))               
                     var jsDate = new Date(args.get_date()[0], args.get_date()[1] - 1, args.get_date()[2]);
                     if (jsDate.getDay() == 0 || jsDate.getDay() == 6) {
                         var otherMonthCssClass = "rcOutOfRange";
                         args.get_cell().className = otherMonthCssClass;
                         // replace the default cell content (anchor tag) with a span element
                         // that contains the processed calendar day number -- necessary for the calendar skinning mechanism
                         args.get_cell().innerHTML = "<span>" + args.get_date()[2] + "</span>";
                         // disable selection and hover effect for the cell
                         args.get_cell().DayId = "";
                     }
                 }
                </script>
            <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
            </telerik:RadAjaxLoadingPanel>
        </telerik:RadCodeBlock>
        <h3 class="qsfSubtitle">Multi Month View with enabled AutoPostBack</h3>
         
             
                <table>
                                    <tr>
                        <td colspan="2">
      
                            <label for="RaddatePicker1">Start Date: </label>
                            <telerik:RadDatePicker runat="server" ID="RadDatePicker1">
                            </telerik:RadDatePicker>
                            <label for="RadDatePicker2">End Date: </label>
                            <telerik:RadDatePicker runat="server" ID="RadDatePicker2">
                            </telerik:RadDatePicker>
                            <asp:Button runat="server" ID="Button1" Text="Set range" OnClick="Button1_Click">
                            </asp:Button>
                        </td>
                    </tr>
                </table>
             
            <br />
            <telerik:RadCalendar runat="server" ID="RadCalendar2" AutoPostBack="true" MultiViewColumns="2"
                MultiViewRows="1" RangeSelectionMode="ConsecutiveClicks" EnableViewSelector="true" OnDayRender="Calendar_OnDayRender">
            </telerik:RadCalendar>
            <br />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
            DefaultLoadingPanelID="RadAjaxLoadingPanel2">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadDatePicker1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar2" UpdatePanelCssClass="" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadDatePicker2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar2" UpdatePanelCssClass="" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="Button1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar2" UpdatePanelCssClass="" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadCalendar2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadDatePicker1" UpdatePanelCssClass="" />
                        <telerik:AjaxUpdatedControl ControlID="RadDatePicker2" UpdatePanelCssClass="" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" Skin="Default">
        </telerik:RadAjaxLoadingPanel>
        </form>
    </body>
    </html>

    DefaultVB.aspx.vb

    Imports Telerik.Web.UI
     
    Partial Class testlayouts_samples_rangeselection_DefaultVB
        Inherits System.Web.UI.Page
     
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            ' necessary not to repeat the special days on postback
            If Not Page.IsPostBack Then
                RadDatePicker1.Calendar.SpecialDays.Clear()
            End If
        End Sub
     
     
        Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
            If RadDatePicker1.SelectedDate.HasValue AndAlso RadDatePicker2.SelectedDate.HasValue Then
                RadCalendar2.RangeSelectionStartDate = RadDatePicker1.SelectedDate.Value
                RadCalendar2.RangeSelectionEndDate = RadDatePicker2.SelectedDate.Value
            Else
                'RadAjaxpanel1.Alert("To set range of dates in RadCalendar you need to choose both Start and End date")
                RadAjaxManager1.Alert("To set range of dates in RadCalendar you need to choose both Start and End date")
            End If
        End Sub
     
        Protected Overrides Sub OnPreRender(ByVal e As EventArgs)
            MyBase.OnPreRender(e)
     
            Dim calendarMinDate As New DateTime(1980, 1, 1)
            Dim calendarMaxDate As New DateTime(2099, 12, 30)
            If RadCalendar2.RangeSelectionStartDate <> calendarMinDate AndAlso RadCalendar2.RangeSelectionEndDate <> calendarMaxDate Then
                RadDatePicker1.SelectedDate = RadCalendar2.RangeSelectionStartDate
                RadDatePicker2.SelectedDate = RadCalendar2.RangeSelectionEndDate
            Else
                RadDatePicker1.Clear()
                RadDatePicker2.Clear()
            End If
        End Sub
     
        ' necessary to disable the weekend days on first page load
        Protected Sub Calendar_OnDayRender(ByVal sender As Object, ByVal e As Telerik.Web.UI.Calendar.DayRenderEventArgs)
            ' modify the cell rendered content for the days we want to be disabled (e.g. every Saturday and Sunday)
            If (e.Day.Date.DayOfWeek = DayOfWeek.Saturday Or e.Day.Date.DayOfWeek = DayOfWeek.Sunday) Then
                ' if you are using the skin bundled as a webresource("Default"), the Skin property returns empty string
                Dim calendarSkin = RadDatePicker1.Calendar.Skin
                If (calendarSkin = "") Then
                    calendarSkin = "Default"
                End If
                Dim otherMonthCssClass As String = "rcOutOfRange"
     
                ' clear the default cell content (anchor tag) as we need to disable the hover effect for this cell
                e.Cell.Text = ""
                e.Cell.CssClass = otherMonthCssClass ' set new CssClass for the disabled calendar day cells (e.g. look like other month days here)
     
                ' render a span element with the processed calendar day number instead of the removed anchor -- necessary for the calendar skinning mechanism
                Dim label As Label = New Label
                label.Text = e.Day.Date.Day.ToString
                e.Cell.Controls.Add(label)
     
                ' disable the selection for the specific day
                Dim calendarDay As RadCalendarDay = New RadCalendarDay
                calendarDay.Date = e.Day.Date
                calendarDay.IsSelectable = False
                calendarDay.ItemStyle.CssClass = otherMonthCssClass
                RadDatePicker1.Calendar.SpecialDays.Add(calendarDay)
            End If
        End Sub
     
    End Class
  2. Kostadin
    Admin
    Kostadin avatar
    1713 posts

    Posted 07 Feb 2014 Link to this post

    Hello Andrew,

    Our developers will need some additional time to investigate the cause for this behavior. As soon as we have some progress on this matter we will let you know in this forum thread.

    Regards,
    Kostadin
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andrew
    Andrew avatar
    5 posts
    Member since:
    Feb 2014

    Posted 09 Feb 2014 Link to this post

    Hi Kostadin,

    I have managed to get the days to be disabled on the RadCalendar2 using the 
     Protected Sub RadCalendar2 _DayRender(ByVal sender As Object, ByVal e As Telerik.Web.UI.Calendar.DayRenderEventArgs) Handles RadCalendar2 .DayRender sub.

    But I can't work out how to set the DayRender on a shared calendar using the following code:


    Dim popupCal As New RadCalendar()
    popupCal.ID = "sharedDynamicCalendar"
    popupCal.EnableMultiSelect = False
    popupCal.EnableMonthYearFastNavigation = False
    popupCal.UseColumnHeadersAsSelectors = False
    popupCal.UseRowHeadersAsSelectors = False
    sharedPopupPlaceHolder.Controls.Add(popupCal)
    RadDatePicker1.SharedCalendar = popupCal

    (from http://www.telerik.com/help/aspnet-ajax/calendar-shared-calendars.html)

    I thought something like popupCal.Calendar.OnDayRender or something similar would work. But I can't find it.

    Thanks

    Andrew




  5. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 12 Feb 2014 Link to this post

    Hi Andrew,

    You can use the AddHandler keyword for adding handler to this event server side. Here is an example code:

    VB:
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
     
        Dim popupCal As New RadCalendar()
        popupCal.ID = "sharedDynamicCalendar"
        '...
        AddHandler popupCal.DayRender, AddressOf popupCal_DayRender
     
        'to handle client side event if you want:
        popupCal.ClientEvents.OnDayRender = "ClientSideDayRender"
     
    End Sub
     
    Private Sub popupCal_DayRender(sender As Object, e As Telerik.Web.UI.Calendar.DayRenderEventArgs)
        'place your code here
    End Sub

    Aspx:
    <script type="text/javascript">
        function ClientSideDayRender(sender, args)
        {
            //sender will be the calendar
        }
    </script>



    Regards,
    Vasil
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top