Refresh Calendar

[OfficeHeart]

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

[Petur Subev]

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

[Patrick]

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)];

[Petur Subev]

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

[John]

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

       

[Petur Subev]

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

[John]

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