Hide/Display pop up calendar programetically using javascript

[Prava kafle]

Hi,

I have a webservice bound scheduler and I would like to show/hide  Schedulers' Calender  programmatically using javascript.

I used  following code but it hides the calendar and I have to click on calendar control multiple times for the pop up calendar to open. The reason I have to do this is. I need to change scheduler timerange and also update pop up calendar to match this date. I got code to match scheduler and pop up calendar to user selected date  and time but everytime date is selected, it pops up a calendar and my client does not like that.  Calendar should be updated behind the scene silently.

 

var calendarID = $telerik.$("[id$='rsTicketsSchedule_SelectedDateCalendar']").attr("id");
    var calendar = $find( calendarID );
    calendar.set_visible( false);

 

Thanks,

Prava

[Anton]

Hello,

You could show the Scheduler's calendar using:

var $ = $telerik.$;
$('.rsDatePickerActivator').click();

Regards,
Anton
Telerik by Progress

[Prava kafle]

Hi Anton,

I really appreciate your code to show Radcalender on RadScheduler. Is there any code to hide a RadCalender that's already open too?

 

Regards,

Prava

[Anton]

Hi Prava,

If it's opened you could hide it with the same piece of code.

Regards,
Anton
Telerik by Progress

[Prava kafle]

Hi Anton,

Provided code pops the calendar and then hides again. Is there any other way to silently hide calendar by modifying css of calendar and it's activator . I have to set selected date [calendar.selectDate(todayTriplet, true)] of calendar without opening it. I am  setting visibility of calendar to false and this makes the user click twice  to open calendar since it's visibility is set to false.

 

I would like to set selected date without opening calendar and also not compromise it functionality in future. user should be able to open calendar by clicking on activator. But my code breaks some logic.Is it even possible?

 

Thanks,

Prava

 

  function UpdateCalendarDate() {
                   var scheduler = $find("<%= rsTicketsSchedule.ClientID %>");
                   var calendar = $find("rsTicketsSchedule_SelectedDateCalendar");
                   var startDate = scheduler._activeModel.get_visibleRangeStart();
                   var endDate = scheduler._activeModel.get_visibleRangeEnd();
                   var todayTriplet = [startDate.getFullYear(), startDate.getMonth() + 1, startDate.getDate()];

                   var tomorrowTriplet = [endDate.getFullYear(), endDate.getMonth() + 1, endDate.getDate()];
                   var selectedDates = [todayTriplet, tomorrowTriplet];
                   calendar.set_visible(false);
                   calendar.selectDate(todayTriplet, true);
                   scheduler._datePickerCalendarExpanded = false;
                  
               }

[Anton]

Hello,

You could set the selected date of the Scheduler as in the code below:

function pageLoad()
{
    var scheduler = $find('<%=RadScheduler1.ClientID %>');
    // Are we using Web Service data binding?
    if (!scheduler.get_webServiceSettings().get_isEmpty())
    {
        scheduler.set_selectedDate(new Date());
    }
    else
    {
        alert("RadScheduler is not bound to Web Service!");
    }
}

Bare in mind that the set_selectedDate() property is available only when RadScheduler is bound to Web Service. 

Also you could set the selected date server-side as in the code below:

protected void Page_Load(object sender, EventArgs e)
{
    RadScheduler1.SelectedDate = new DateTime();
}

Regards,
Anton
Telerik by Progress

[Prava kafle]

Anton,

 

My scheduler is bound to webservice, so I have to set selected date on pop up calendar  either on next/previous button click (without opening it)/ before calendar is shown.Is there any client side prerender date for scheduler, on which I can reset calendar date without forcing scheduler to rebind.

I tried updating calendar date to scheduler date, but it forced scheduler to rebind and moved to next date .
$(document).on("click", ".rsDatePickerActivator", function (event, ui) {
         var schedulerID = $telerik.$("[id$='rsTicketsSchedule']").attr("id");
          var scheduler = $find(schedulerID);
            var startDate = scheduler._activeModel.get_visibleRangeStart();
            var endDate = scheduler._activeModel.get_visibleRangeEnd();
            var todayTriplet = [startDate.getFullYear(), startDate.getMonth() + 1, startDate.getDate()];
            var tomorrowTriplet = [endDate.getFullYear(), endDate.getMonth() + 1, endDate.getDate()];
            var selectedDates = [todayTriplet, tomorrowTriplet];
            var calendar = $find("rsTicketsSchedule_SelectedDateCalendar");
            var existSelectedDates = calendar.get_selectedDates();

            alert("existSelectedDates->" + existSelectedDates[0] + ":selectedDates-->" + selectedDates[0]);
            if (selectedDates[0] != existSelectedDates[0] ) {
                calendar.selectDate(todayTriplet, true);
            .........................
});

 

 

Thanks,

Prava

[Anton]

Hello,

I'm afraid such functionality is not supported. 

Regards,
Anton
Telerik by Progress