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

Disabled Days with Range Selection and Multiple Calendars

3 Answers 180 Views

Calendar

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

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">

<html xmlns='http://www.w3.org/1999/xhtml'>

<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

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

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.