Load scheduled dates for selected month.

6 posts, 1 answers
  1. Temp
    Temp avatar
    55 posts
    Member since:
    May 2007

    Posted 25 Jun 2012 Link to this post

    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.

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 28 Jun 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Scott
    Scott avatar
    15 posts
    Member since:
    Aug 2012

    Posted 27 Jul 2012 Link to this post

    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
  5. Answer
    Scott
    Scott avatar
    15 posts
    Member since:
    Aug 2012

    Posted 30 Jul 2012 Link to this post

    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);
        }
  6. Temp
    Temp avatar
    55 posts
    Member since:
    May 2007

    Posted 05 Aug 2012 Link to this post

    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
  7. Scott
    Scott avatar
    15 posts
    Member since:
    Aug 2012

    Posted 06 Aug 2012 Link to this post

    Glad I could help.

    Scott
Back to Top
Kendo UI is VS 2017 Ready