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

Hide/Display pop up calendar programetically using javascript

7 Answers 64 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Prava kafle
Top achievements
Rank 1
Prava kafle asked on 21 Nov 2016, 10:49 PM

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

7 Answers, 1 is accepted

Sort by
0
Anton
Telerik team
answered on 23 Nov 2016, 01:49 PM
Hello,

You could show the Scheduler's calendar using:

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

Regards,
Anton
Telerik by Progress
Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
0
Prava kafle
Top achievements
Rank 1
answered on 23 Nov 2016, 01:52 PM

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

0
Anton
Telerik team
answered on 23 Nov 2016, 02:40 PM
Hi Prava,

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

Regards,
Anton
Telerik by Progress
Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
0
Prava kafle
Top achievements
Rank 1
answered on 28 Nov 2016, 11:03 PM

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;
                  
               }

0
Anton
Telerik team
answered on 01 Dec 2016, 08:03 AM
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
Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
0
Prava kafle
Top achievements
Rank 1
answered on 01 Dec 2016, 01:12 PM

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

0
Anton
Telerik team
answered on 05 Dec 2016, 09:47 AM
Hello,

I'm afraid such functionality is not supported. 

Regards,
Anton
Telerik by Progress
Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
Tags
Scheduler
Asked by
Prava kafle
Top achievements
Rank 1
Answers by
Anton
Telerik team
Prava kafle
Top achievements
Rank 1
Share this question
or