Home/ Questions/Q 9179375
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T17:46:49+00:00

This is a very basic question – how do I create Kendo UI controls/how

  • 0

This is a very basic question – how do I create Kendo UI controls/how do get the Kendo widgets to show?

eg. I tried this for the calendar control.
I copied the js files to a js folder

  • min
  • web
  • vsdoc
  • calendar

and linked the 2 style files.

when I have the following script to instantiate a calendar widget

<script>
    $(document).ready(function () {
        $("#cal").kendoCalendar({
            value: new Date(),
            min: new Date(1950, 0, 1),
            max: new Date(2049, 11, 31)
        });
    });
</script>

But I get an error at instantiating the calendar at .kendoCalendar().

Can someone help me with this?

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You just need to include:

    <!-- Kendo UI Web styles-->
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>

<!-- jQuery scripts-->
<script src="js/jquery.min.js" type="text/javascript"></script>

<!-- Kendo UI Web scripts-->
<script src="js/kendo.web.min.js" type="text/javascript"></script>

    kendo.web.min.js includes all the widgets. It’s enough including this.

    You didn’t mention jquery.min.js. Check that you also have it.

    This is the HTML:

    <div id="cal" name="cal"/>

    EDIT: Complete example using files fomr KendoUI CDN:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>OnaBai - KendoUI Calendar example</title>
    <!-- Kendo UI Web styles-->
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet"/>
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet"/>

    <!-- Kendo UI Web scripts-->
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.web.min.js"></script>

    <!-- Initialize Form Elements -->
    <script type="text/javascript">
        $(document).ready(function () {
            $("#cal").kendoCalendar({
                value: new Date(),
                min  : new Date(1950, 0, 1),
                max  : new Date(2049, 11, 31)
            });
        });
    </script>

</head>
<body>
<div id="cal" name="cal"/>
</body>
</html>
    • 0