Kendo

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div id="grid"></div>

JavaScript

$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        pageSize: 10,
        serverPaging: true
    },
    height: 400,
    pageable: true,
    columns: ["OrderID", "Freight","ShipName",
    {
        field: "ShipCity",
        width: 300,
        template: '<div id="calendar_#=OrderID#"/>'
    }],
    dataBound: function() {
        this.table.find("div[id^=calendar]").kendoCalendar();
    }
});