Load scheduled dates for selected month.

[Temp]

Could someone please show me an example of how we could load an array of dates when a user selects a month?

What I am trying to achieve is very similar to the customizing templates example, except when a user changes months I need to dynamically load the "special" days from the database via ajax and run the array against the calendar to highlight the days from the array.

This is instead of loading every single possible special day as we cannot predict what month the user will look at.

I know there is a navigate event, but unsure how to determine if the user is at the day level of the calendar and what the current month is, if we can get that info we can load the dates, but then unsure how to go through the days in the calendar and style them.

[Alexander Valchev]

Hi Michael,

I am afraid that this scenario is not supported - the "special" dates cannot be loaded dynamically at the navigate event.
Regarding view level of the calendar, you can retrieve it through the internal _view property of the widget. For example:

function onNavigate() {
    this._view.name
}

Regards,
Alexander Valchev
the Telerik team

[Scott]

I was able to get the highlighted dates after an AJAX call by grabbing the anchor tag and setting the inner DIVs class. Here's my full code.

<style scoped="scoped">

    #calendar .k-content {

        height: 200px;

    }

 

    .timeRejected

    {

        font-weight: bold;

        color: Red;

    }

 

    .timeSubmitted

    {

        font-weight: bold;

    }

</style>

@(Html.Kendo().Calendar()

        .Name("calendar")

        .Value(DateTime.Today)

        .HtmlAttributes(new { style = "width:330px" })

        .Footer("Today - #=kendo.toString(data, 'd') #")

        .MonthTemplate("<div> #= data.value # </div>" )

        .Events(e => e.Change("calendarChange").Navigate("calendarNavigate"))                 

)

$(document).ready(function () {

         highlightDates(@DateTime.Today.Year, @DateTime.Today.Month);

    });

 

    function calendarChange() {

        console.log("Change :: " + kendo.toString(this.value(), 'd'));

    }

 

    function calendarNavigate() {

        console.log(this);

    }

 

    function highlightDates(year, month) {

        $.getJSON('@Url.Action("CalendarEntries", "Demo")', {

            year: year,

            month: month

        },

            function (result) {

 

                $.each(result, function (index1, model) {

                    var splitTime = model.FormattedStartDate.split("/");

                    var month = splitTime[0] - 1; //Calendar month is zero-based.

                    var day = splitTime[1];

                    var year = splitTime[2];

                    var reformattedDate = year + '/' + month + '/' + day;

 

                    var dateDiv = $('a.k-link[data-value="' + reformattedDate + '"]').find('div');

 

                    if (model.Status.indexOf('Rejected') > -1) //Rejected

                    {

                        if (!dateDiv.hasClass('timeRejected')) {

                            dateDiv.removeClass('timeSubmitted'); //Rejected takes precedence over submitted time.

                            dateDiv.addClass('timeRejected');

                        }

                    }

 

                    if (!dateDiv.hasClass('timeRejected')

                        && !dateDiv.hasClass('timeSubmitted')) {

                        dateDiv.addClass('timeSubmitted');

                    }

            });

        });

    }

Now what I'm wanting to know is how to get the currently displayed month. I looked through the event that happens after navigation and can't seem to find a property that I can key from to get the month. Any help would be appreciated.

Thanks!

Scott

[Scott]

Never mind. I figured it out. The _current property on the calendar is a date object and gets updated when you change months. Below is the updated 'calendarNavigate' function.

function calendarNavigate() {

        var month = this._current.getMonth() + 1;

        var year = this._current.getFullYear();

        highlightDates(year, month);

    }

[Temp]

Thanks so much for that Scott, I had a look at what you've done and got what I needed from that. Very very helpful and thanks for posting.
Hopefully this is standard functionality in the very near future as to me it seems like very basic necessity for a calendar that navigates month by month and isn't a date selector.
Thanks again!
Mike

[Scott]

Glad I could help.

Scott