New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial

Using Javascript jQuery and CSS

Updated over 6 months ago

The advanced form renders specific css classes and unique IDs for the elements inside it. This makes it easy to customize it using JavaScript/jQuery and CSS.This topic shows a few common scenarios. A sample can be donwloaded from here.

Hide the all day checkbox

ASPNET

<style type="text/css">
	ul li.rsAllDayWrapper 
	{
		visibility: hidden;
	}
</style>

Color the text of the labels in the advanced form

ASPNET

<style type="text/css">
	.rsAdvOptions label, div.RadInput .riLabel
	{
		color: Green;
	}
			
	div.RecurrenceEditor ul li label, .RecurrenceEditor ul li, .RecurrenceEditor label
	{
		color: Orange;
	}	
</style>

Hide the recurrence panel and adjusts the height of the advanced options panel

ASPNET

<style type="text/css">
	.RecurrenceEditor 
	{
		visibility:hidden;
	}
	.rsAdvOptionsScroll
	{
		height: auto !important;   
	}		
</style>

Find the description client object and set its empty message

JavaScript

<script type="text/javascript">
	function clientFormCreated(sender, args) {
		var mode = args.get_mode();
		if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert ||
			mode == Telerik.Web.UI.SchedulerFormMode.AdvancedEdit) {
			var descriptionJQueryObject = $telerik.$("[id$='Form_Description']");
			var descriptionRadTextBoxObject = $find(descriptionJQueryObject.attr("id"));
			descriptionRadTextBoxObject.set_emptyMessage("Add more details about the appointment here.");
		}
	}		
</script>

Change end date/time automatically when start date/time changes

JavaScript

	    
<script type="text/javascript">
function clientFormCreated(sender, args) {
	var $ = $telerik.$;

	var mode = args.get_mode();
	if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert ||
			mode == Telerik.Web.UI.SchedulerFormMode.AdvancedEdit) {
		var startDatejQueryObject = $("[id$='Form_StartDate']");
		var startDatePicker = $find(startDatejQueryObject.attr("id"));

		var startTimejQueryObject = $("[id$='Form_StartTime']");
		var startTimePicker = $find(startTimejQueryObject.attr("id"));

		startDatePicker.add_dateSelected(StartDateSelected);
		startTimePicker.add_dateSelected(StartTimeSelected);
	}
}
function StartDateSelected(sender, args) {
	var $ = $telerik.$;
	var endDatejQueryObject = $("[id$='Form_EndDate']");
	var endDatePicker = $find(endDatejQueryObject.attr("id"));
	var newDate = new Date(args.get_newValue());
	endDatePicker.set_selectedDate(newDate);
}
function StartTimeSelected(sender, args) {
	var $ = $telerik.$;

	var endTimejQueryObject = $("[id$='Form_EndTime']");
	var endTimePicker = $find(endTimejQueryObject.attr("id"));

	var newTime = new Date(args.get_newDate());
	newTime.setHours(newTime.getHours() + 1);

	endTimePicker.get_dateInput().set_value(newTime.format('HH:mm'))
}
</script>

<%--Web Service Binding--%>

<script type="text/javascript">
function clientFormCreated(sender, args) {
	var $ = $telerik.$;

	var mode = args.get_mode();

	var startDateJQueryObject,
		startDatePicker,
		startTimejQueryObject,
		startTimePicker;

	if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert) {

		startDateJQueryObject = $("[id$='AdvancedInsertForm_StartDate']");
		startDatePicker = $find(startDateJQueryObject.attr("id"));

		startTimejQueryObject = $("[id$='AdvancedInsertForm_StartTime']");
		startTimePicker = $find(startTimejQueryObject.attr("id"));

		startDatePicker.add_dateSelected(StartDateSelected_AdvancedInsert);
		startTimePicker.add_dateSelected(StartTimeSelected_AdvancedInsert);

	} else if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedEdit) {
		startDatejQueryObject = $("[id$='AdvancedEditForm_StartDate']");
		startDatePicker = $find(startDatejQueryObject.attr("id"));

		startTimejQueryObject = $("[id$='AdvancedEditForm_StartTime']");
		startTimePicker = $find(startTimejQueryObject.attr("id"));

		startDatePicker.add_dateSelected(StartDateSelected_AdvancedEdit);
		startTimePicker.add_dateSelected(StartTimeSelected_AdvancedEdit);
	}
}
function StartDateSelected_AdvancedInsert(sender, args) {
	var $ = $telerik.$;
	var endDatejQueryObject = $("[id$='AdvancedInsertForm_EndDate']");
	var endDatePicker = $find(endDatejQueryObject.attr("id"));
	var newDate = new Date(args.get_newValue());
	endDatePicker.set_selectedDate(newDate);
}
function StartDateSelected_AdvancedEdit(sender, args) {
	var $ = $telerik.$;
	var endDatejQueryObject = $("[id$='AdvancedEditForm_EndDate']");
	var endDatePicker = $find(endDatejQueryObject.attr("id"));
	var newDate = new Date(args.get_newValue());
	endDatePicker.set_selectedDate(newDate);
}
function StartTimeSelected_AdvancedInsert(sender, args) {
	var $ = $telerik.$;

	var endTimejQueryObject = $("[id$='AdvancedInsertForm_EndTime']");
	var endTimePicker = $find(endTimejQueryObject.attr("id"));

	var newTime = new Date(args.get_newDate());
	newTime.setHours(newTime.getHours() + 1);

	endTimePicker.get_dateInput().set_value(newTime.format('HH:mm'))
}
function StartTimeSelected_AdvancedEdit(sender, args) {
	var $ = $telerik.$;

	var endTimejQueryObject = $("[id$='AdvancedEditForm_EndTime']");
	var endTimePicker = $find(endTimejQueryObject.attr("id"));

	var newTime = new Date(args.get_newDate());
	newTime.setHours(newTime.getHours() + 1);

	endTimePicker.get_dateInput().set_value(newTime.format('HH:mm'))
}

Clear selection for the user combobox if no room is selected

JavaScript

<script type="text/javascript">
	function clientFormCreated(sender, args) {
		var $ = $telerik.$;
		var mode = args.get_mode();
		if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert ||
					mode == Telerik.Web.UI.SchedulerFormMode.AdvancedEdit) {
			var RoomComboBox = $find($("[id$='Form_ResRoom']").attr("id"));
			RoomComboBox.add_selectedIndexChanged(SelectedIndexChangedHandler);
		}
	}
	function SelectedIndexChangedHandler(sender, args) {
		var $ = $telerik.$;
		if (args.get_item().get_value() == "NULL") {
			var UserComboBox = $find($("[id$='Form_ResUser']").attr("id"));
			var emptyItem = UserComboBox.findItemByValue("NULL");
			emptyItem.select();
		}
	}
</script>

Hide the "no end date" option in the recurrence panel

JavaScript

<script type="text/javascript">
		function clientFormCreated(sender, args) {
			var $ = $telerik.$;
			var mode = args.get_mode();
			if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert ||
				mode == Telerik.Web.UI.SchedulerFormMode.AdvancedEdit) {
				$(".rsAdvRecurrenceRangePanel li:eq(0)").hide();
				$(".rsAdvRecurrenceRangePanel li:eq(1) span input").attr("checked", "checked");
			}
		}
</script>

 <%--Web Service Binding--%>
 
 <script type="text/javascript">
	function clientFormCreated(sender, args) {
		var $ = $telerik.$;
		var mode = args.get_mode();
		if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert) {
			var recurrencePanelInsertJQueryObject = $("[id$='AdvancedInsertForm_RecurrencePanel']");
			recurrencePanelInsertJQueryObject.find(".rsAdvRecurrenceRangePanel li:eq(0)").hide();
			recurrencePanelInsertJQueryObject.find(".rsAdvRecurrenceRangePanel li:eq(1) span input").attr("checked", "checked");
		} else if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedEdit) {
			if (args.get_appointment().get_recurrenceState() == 0) {
				var recurrencePanelEditJQueryObject = $("[id$='AdvancedEditForm_RecurrencePanel']");
				recurrencePanelEditJQueryObject.find(".rsAdvRecurrenceRangePanel li:eq(0)").hide();
				recurrencePanelEditJQueryObject.find(".rsAdvRecurrenceRangePanel li:eq(1) span input").attr("checked", "checked");
			}
		}
	}
</script>

Hide the "hourly" option and the first two days for the "weekly" option in the recurrence panel

JavaScript

<script type="text/javascript">
	function clientFormCreated(sender, args) {
		var $ = $telerik.$;
		var mode = args.get_mode();
		if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert ||
			mode == Telerik.Web.UI.SchedulerFormMode.AdvancedEdit) {

			$(".rsRecurrenceOptionList li:eq(0)").hide();
			$("[id$='RadScheduler1_Form_RecurrencePatternPanel']").css("height", "80px");
			$(".rsAdvWeekly_WeekDays li:eq(0)").hide();
			$(".rsAdvWeekly_WeekDays li:eq(1)").hide();
		}
	}
</script>

<%--Web Service Binding--%>

<script type="text/javascript">
	function clientFormCreated(sender, args) {
		var $ = $telerik.$;
		var mode = args.get_mode();
		if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert) {
			var recurrencePanelInsertJQueryObject = $("[id$='AdvancedInsertForm_RecurrencePanel']");
			recurrencePanelInsertJQueryObject.find(".rsRecurrenceOptionList li:eq(0)").hide();
			recurrencePanelInsertJQueryObject.find("[id$='RadScheduler1_Form_RecurrencePatternPanel']").css("height", "80px");
			recurrencePanelInsertJQueryObject.find(".rsAdvWeekly_WeekDays li:eq(0)").hide();
			recurrencePanelInsertJQueryObject.find(".rsAdvWeekly_WeekDays li:eq(1)").hide();
		} else if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedEdit) {
			var recurrencePanelEditJQueryObject = $("[id$='AdvancedEditForm_RecurrencePanel']");
			recurrencePanelEditJQueryObject.find(".rsRecurrenceOptionList li:eq(0)").hide();
			recurrencePanelEditJQueryObject.find("[id$='RadScheduler1_Form_RecurrencePatternPanel']").css("height", "80px");
			recurrencePanelEditJQueryObject.find(".rsAdvWeekly_WeekDays li:eq(0)").hide();
			recurrencePanelEditJQueryObject.find(".rsAdvWeekly_WeekDays li:eq(1)").hide();
		}
	}
</script>

When handling the OnClientFormCreated event, in order to check if the RadScheduler is bound to a web service the following code could be used:

JavaScript

<script type="text/javascript">
	function clientFormCreated(sender, args) {
		if (sender.get_webServiceSettings().get_path() == null) {
			//Server-Side Binding 
		}else {
			//Web Service Binding
		}
	}
</script>