Refresh Calendar

7 posts, 0 answers
  1. OfficeHeart
    OfficeHeart avatar
    99 posts
    Member since:
    Aug 2008

    Posted 07 Feb 2013 Link to this post

    Hi,

    Is there a way to fresh the calendar? I fill the dates from a datasource and I don't want to get all the events from a whole year.

    Thanks,
    Martin
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 11 Feb 2013 Link to this post

    Hello Martin,

    Refresh method is not provided by the client API of the Calendar widget. However you can destroy and re-create it with new array of dates.

    Kind regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Patrick
    Patrick avatar
    1 posts
    Member since:
    Feb 2013

    Posted 25 Feb 2013 Link to this post

    Hi Petur,

    Would you be able to provide an example of destroying and recreating a calendar appropriately with new dates (to be used within the success function of an ajax call)

    Below is the code I have so far. When the ajax call is made, max and min are changed, but the template/ dates are not applied when the calendar is recreated.

    Any help would be greatly appreciated.

    Thanks!
    Pat


    The initial calendar is created using the MVC razor syntax in a form:

                      @(Html.Kendo().Calendar()
                          .Name("calendar")
                           .MonthTemplate("# if ($.inArray(+data.date, blackoutDates) != -1) { #" +
                                "<div class=\"blackout-date-style\">&nbsp;</div>" +
                            "# } #" +
                            "#= data.value #")  
                          .Format("MM/dd/yyyy")                   
                          .HtmlAttributes(new { style = "width:330px" })
                          .Events(e => e.Change("onCalendarChange").Navigate("onNavigate")))                    


    the .destroy() call is made inside the success section of the $.ajax call

    success: function (data)
    {
      $("#calendar").data("kendoCalendar").destroy();

    // Convert the start and end dates from JSON.
            var beginDate = parseJsonDate(data.BeginDate);
            var endDate = parseJsonDate(data.EndDate);

    // Convert the array of blackout dates for the calendar
            ConvertBackDateDays(data.BlackoutDates);

    //HACK: to remove the tables and div from old calendar.
    //TODO need appropriate way to remove Kendo UI Calendar from DOM.
    $("#calendar > table").remove();
           
    $("#calendar > div").remove();

    // recreate the calendar to apply min, max
            $("#calendar").kendoCalendar({
                        min: beginDate,
                        max: endDate,
                        month: {
                            // template for dates in month view
                            content: "# if ($.inArray(+data.date, blackoutDates) != -1) { #" +
                                "<div class=\"blackout-date-style\">&nbsp;</div>" +
                                "# } #" +
                                "#= data.value #"
                        }
                    });
    }
    ... 
    additional javascript
    ....

    // function to convert the json dates into javascript dates for the Kendo Calendar.
    function ConvertBackDateDays(backDateArray) {
            blackoutDates = [];
            $.each(backDateArray, function (index, currentDate) {
                 var convertedDate = parseJsonDate(currentDate);
                blackoutDates.push(convertedDate);
            });
        }

    function parseJsonDate(jsonDateString) {
            return new Date(parseInt(jsonDateString.replace('/Date(', '')));
        }

    // set it to an initial value for testing.
     var today = new Date(), blackoutDates = [
            +new Date(today.getFullYear(), today.getMonth(), 8),
            +new Date(today.getFullYear(), today.getMonth(), 12)];
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 27 Feb 2013 Link to this post

    Hello Martin,

    Basically it does not matter if you are using Ajax or not - destroying the widget and re-creating should be no difference.

    Please check the attached project - I hope this helps.

    Kind regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. John
    John avatar
    3 posts
    Member since:
    Feb 2013

    Posted 23 Aug 2013 Link to this post

    Hello, 

    I have looked through the refresh calendar example and I am using the refresh functionality from it, but still getting a kendo calendar $(...).data(...) is undefined. This happens when I try to destroy the calendar. It is inconsistent, although about every ten calendar refreshes it will happen. 

    My usage is different in that I am not using the MVC calendar extension. 

    Below is the relevant code. Any suggestions are appreciated. 
            
            updateCalendar = function (bAssignments, date) {
                    $('#calendar').data('kendoCalendar').destroy();
                    $('#calendar').empty();
                    calendar = null;
                    events = [];
                 
                    // JSONP call to get new events on JSONP complete, initializeCalendar is called
                    getActivitiesAndEvents(bAssignments, date);
                    calendar = $("#calendar").data("kendoCalendar");
            }

            function initializeCalendar() {
           
                    $("#calendar").kendoCalendar({
                        value: selectedDate,
                        start: "month",
                        depth: "month",
                        min: new Date(getMinDate()),
                        max: new Date(getMaxDate()),
                        footer: ' ',
                        dates: events,
                        navigate: function (e) {
                            onCalendarNavigate(e);
                        },
                        change: function (e) {
                            OnCalendarChange(e);
                        },
                        month: {
                            content:
                                ("# if ($.inArray(+data.date, events) != -1) { #" +
                                            "<div class=\"" + "driveDay" + "\">" +
                                    "# } #" +
                                    "#= data.value #" + "</div>")
                        }
                    });
                    calendar = $("#calendar").data("kendoCalendar");
            }


            function setCalendarSelectedDate() {
                    if (selectedDate.getMonth()) {
                        calendar.value(selectedDate.getMonth() + 1 + '/' + selectedDate.getDate() + '/' + selectedDate.getFullYear());
                    }
            }

           
  7. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 27 Aug 2013 Link to this post

    Hello John,

    Share with us some example that we can run so we can further investigate your case, since we do not see any potential issues.

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. John
    John avatar
    3 posts
    Member since:
    Feb 2013

    Posted 27 Aug 2013 Link to this post

    Hello Petur,

    Thank you for responding.

    The error happens in the updateCalendar method at the following line:   $('#calendar').data('kendoCalendar').destroy() when the calendar has already been destroyed and waiting to be recreated when the jsonp call returns.  I have added an ajax waiting spinner to prevent the updateCalendar method from being called until the JSONP has returned and recreated the calendar.

    Thanks again.

    John

Back to Top
Kendo UI is VS 2017 Ready