or
$(document).ready(function() { var Priority = [ { PriorityId: "1", Action: "Lorem Ipsum Dolor Sit", Completed: true, PersonID: "2", PriorityDate: "02/22/12"}, { PriorityId: "2", Action: "Lorem Ipsum Dolor Sit", Completed: false, PersonID: "2", PriorityDate: "02/23/12"}, { PriorityId: "3", Action: "Lorem Ipsum Dolor Sit", Completed: true, PersonID: "2", PriorityDate: "02/24/12"}, { PriorityId: "4", Action: "Lorem Ipsum Dolor Sit", Completed: false, PersonID: "2", PriorityDate: "02/25/12"}, { PriorityId: "5", Action: "Lorem Ipsum Dolor Sit", Completed: true, PersonID: "2", PriorityDate: "02/26/12"}, { PriorityId: "6", Action: "Lorem Ipsum Dolor Sit", Completed: false, PersonID: "2", PriorityDate: "02/27/12"}, ]; var today = new Date(); $("#kendoCalendar").kendoCalendar({ value: today, depth: "month", format: "dd/MM/yyy", dataSource: Priority, month: { content: '<div class="custom"><#= Action #></div>' }, change: function(e) { var title = "Today's Top Priority"; var url = "top-tasks-add.aspx" var win = $(".modal-window"); if (!win.data("kendoWindow")) { // window not yet initialized win.kendoWindow({ content: url, title: title, draggable: true, modal: true, resizable: false, }).data("kendoWindow").open().center(); } else { // reopening window win.data("kendoWindow") .refresh(url) // request the URL via AJAX .title(title) .open() // open the window .center(); } } });});<div id="lefttabstrip"> <ul class="Home"> <li class="TabAct k-state-active">All Rules</li> </ul> <div id="homediv> Home text </div> <div id="mycommondiv> some controls here </div><div>
<!doctype html> <html> <head> <title>Admin: Users</title> <link href="styles/kendo.black.min.css" rel="stylesheet"/> <link href="styles/kendo.default.min.css" rel="stylesheet"/> <script src="js/jquery.min.js"></script> <script src="js/kendo.core.js"></script>
<script src="js/kendo.validator.js"></script> <script src="js/kendo.model.js"></script> <script src="js/kendo.data.js"></script> <script src="js/kendo.pager.js"></script> <script src="js/kendo.sortable.js"></script> <script src="js/kendo.draganddrop.js"></script>
<script src="js/kendo.groupable.js"></script> <script src="js/kendo.grid.js"></script> <script src="js/kendo.binder.js"></script> <script src="js/kendo.editable.js"></script> <script src="js/kendo.popup.js"></script> <script src="js/kendo.calendar.js"></script>
<script src="js/kendo.datepicker.js"></script> <script src="js/kendo.numerictextbox.js"></script> <script> function createRandomData(count) { var data = []; data = {"account_recs":[{"FirstName":"Graham","SecondName":"Fourie"}],"totals":1}; return data; } </script> </head> <body> <a href="../index.html">Back</a> <div class="description">Basic usage</div>
<div id="example" class="k-content"> <div id="grid"></div> <script> $(document).ready(function () { $("#grid").kendoGrid({ dataSource: { data: createRandomData(1) } navigatable: true, pageable: true, height: 400, toolbar: ["create", "save", "cancel"], columns: [ "SecondName", { field: "FirstName", width: "100px" }, { command: "destroy", title: " ", width: "110px" }], editable: true }); }); </script> </div> </body> </html>

