Calendar On No Working

by grippstick

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.metro.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<div id='container'>
    <style>
        .k-widget.k-calendar {
            width: 788px;
        }
        .k-widget.k-calendar .k-content tbody td {
            width: 50px;
            height: 75px;
        }
    </style>
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    <div id="calendar"></div>
</div>

JavaScript

var kendoCal = $('#calendar').kendoCalendar();

$("#container").on('mouseenter', 'td', function (e) {
    console.warn('in');
    //    $(this).find('.actions').fadeIn(100);
    //    $(this).find('.number').animate({
    //        color: "white"
    //    }, 100);
});
$("#container").on('mouseleave', 'td', function (e) {
    console.warn('out');
    //    $(this).find('.actions').fadeOut(100);
    //    $(this).find('.number').animate({
    //        color: "#767676;"
    //   }, 100);
});