New to Kendo UI for jQuery? Download free 30-day trial

Dynamically Display the Selected Calendar Dates

Environment

Product Version 2017.3 1026
Product Progress® Telerik® UI Calendar for ASP.NET Core

Description

How can I make the Calendar dynamically display the selected dates in another widget or container?

Solution

  1. Enable the multiple selection of the Calendar through its selectable property (set it to "multiple").
  2. Subscribe for the change event of the Calendar.
  3. Update a preferable container by appending the selected values of the Calendar with span elements.
<div class="demo-section k-content" style="text-align: center;">
    <div id="result" style="width:300px; margin:0 auto;"></div>

    <div id="calendar"></div>
</div>
<script>
    $(document).ready(function() {

        $("#calendar").kendoCalendar({
            selectable: "multiple",
            change: onChange
        });
    })

    function onChange(e) {

        var dates = e.sender.selectDates()
        updateResult(dates);
    }

    function updateResult(dates) {
        if (dates.length > 0) {
            var result = "";
            for (var i = 0; i < dates.length; i++) {
                var newdate = kendo.toString(dates[i], "yyyy/MM/dd");
                result += "<span class='selectedName'>" + newdate + "</span>";
            }
        } else {
            result = "No dates selected.";
        }
        $("#result").html(result);
    }
</script>
<style>
    #result {
        padding-bottom: 15px;
    }

    #result:after {
        content: '';
        display: block;
        clear: both;
    }

    .selectedName {
        padding: 5px 10px;
        background: #aaa;
        color: white;
        float: left;
        margin-right: 5px;
        margin-bottom: 5px;
        border-radius: 10px;
    }
</style>
In this article