This is a migrated thread and some comments may be shown as answers.
Load scheduled dates for selected month.
5 Answers 175 Views
This is a migrated thread and some comments may be shown as answers.
Temp
Top achievements
Rank 1
Temp asked on 26 Jun 2012, 02:22 AM
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.

5 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 28 Jun 2012, 04:05 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Scott
Top achievements
Rank 1
answered on 27 Jul 2012, 02:42 PM
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
0
Accepted
Scott
Top achievements
Rank 1
answered on 30 Jul 2012, 08:28 PM
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);
    }
0
Temp
Top achievements
Rank 1
answered on 06 Aug 2012, 12:22 AM
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
0
Scott
Top achievements
Rank 1
answered on 06 Aug 2012, 01:09 PM
Glad I could help.

Scott
Asked by
Temp
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Scott
Top achievements
Rank 1
Temp
Top achievements
Rank 1
Share this question
or