This is a migrated thread and some comments may be shown as answers.

Disabled Days with Range Selection and Multiple Calendars

3 Answers 112 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 04 Feb 2014, 05:43 AM
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

3 Answers, 1 is accepted

Sort by
0
Kostadin
Telerik team
answered on 07 Feb 2014, 08:19 AM
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.
0
Andrew
Top achievements
Rank 1
answered on 10 Feb 2014, 05:25 AM
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




0
Vasil
Telerik team
answered on 12 Feb 2014, 01:56 PM
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.
Tags
Calendar
Asked by
Andrew
Top achievements
Rank 1
Answers by
Kostadin
Telerik team
Andrew
Top achievements
Rank 1
Vasil
Telerik team
Share this question
or