Hide/Display pop up calendar programetically using javascript

8 posts, 0 answers
  1. Prava kafle
    Prava kafle avatar
    217 posts
    Member since:
    Apr 2010

    Posted 21 Nov 2016 Link to this post

    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

  2. Anton
    Admin
    Anton avatar
    81 posts

    Posted 23 Nov 2016 Link to this post

    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.
  3. Prava kafle
    Prava kafle avatar
    217 posts
    Member since:
    Apr 2010

    Posted 23 Nov 2016 in reply to Anton Link to this post

    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

  4. Anton
    Admin
    Anton avatar
    81 posts

    Posted 23 Nov 2016 Link to this post

    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.
  5. Prava kafle
    Prava kafle avatar
    217 posts
    Member since:
    Apr 2010

    Posted 28 Nov 2016 in reply to Anton Link to this post

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

  6. Anton
    Admin
    Anton avatar
    81 posts

    Posted 01 Dec 2016 Link to this post

    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.
  7. Prava kafle
    Prava kafle avatar
    217 posts
    Member since:
    Apr 2010

    Posted 01 Dec 2016 Link to this post

    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

  8. Anton
    Admin
    Anton avatar
    81 posts

    Posted 05 Dec 2016 Link to this post

    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.
Back to Top