Using Kendo inside a Zeppelin section is simple.

KendoZeppelin.py

%angular

<base href="http://demos.telerik.com/kendo-ui/gantt/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.material.mobile.min.css" />

<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>


<div id="example">
        <div id="gantt"></div>

        <script>
            $(document).ready(function() {
                var serviceRoot = "//demos.telerik.com/kendo-ui/service";
                var tasksDataSource = new kendo.data.GanttDataSource({
                    transport: {
                        read: {
                            url: serviceRoot + "/GanttTasks",
                            dataType: "jsonp"
                        },
                        update: {
                            url: serviceRoot + "/GanttTasks/Update",
                            dataType: "jsonp"
                        },
                        destroy: {
                            url: serviceRoot + "/GanttTasks/Destroy",
                            dataType: "jsonp"
                        },
                        create: {
                            url: serviceRoot + "/GanttTasks/Create",
                            dataType: "jsonp"
                        },
                        parameterMap: function(options, operation) {
                            if (operation !== "read") {
                                return { models: kendo.stringify(options.models || [options]) };
                            }
                        }
                    },
                    schema: {
                        model: {
                            id: "id",
                            fields: {
                                id: { from: "ID", type: "number" },
                                orderId: { from: "OrderID", type: "number", validation: { required: true } },
                                parentId: { from: "ParentID", type: "number", defaultValue: null, validation: { required: true } },
                                start: { from: "Start", type: "date" },
                                end: { from: "End", type: "date" },
                                title: { from: "Title", defaultValue: "", type: "string" },
                                percentComplete: { from: "PercentComplete", type: "number" },
                                summary: { from: "Summary", type: "boolean" },
                                expanded: { from: "Expanded", type: "boolean", defaultValue: true }
                            }
                        }
                    }
                });

                var dependenciesDataSource = new kendo.data.GanttDependencyDataSource({
                    transport: {
                        read: {
                            url: serviceRoot + "/GanttDependencies",
                            dataType: "jsonp"
                        },
                        update: {
                            url: serviceRoot + "/GanttDependencies/Update",
                            dataType: "jsonp"
                        },
                        destroy: {
                            url: serviceRoot + "/GanttDependencies/Destroy",
                            dataType: "jsonp"
                        },
                        create: {
                            url: serviceRoot + "/GanttDependencies/Create",
                            dataType: "jsonp"
                        },
                        parameterMap: function(options, operation) {
                            if (operation !== "read") {
                                return { models: kendo.stringify(options.models || [options]) };
                            }
                        }
                    },
                    schema: {
                        model: {
                            id: "id",
                            fields: {
                                id: { from: "ID", type: "number" },
                                predecessorId: { from: "PredecessorID", type: "number" },
                                successorId: { from: "SuccessorID", type: "number" },
                                type: { from: "Type", type: "number" }
                            }
                        }
                    }
                });

                var gantt = $("#gantt").kendoGantt({
                    dataSource: tasksDataSource,
                    dependencies: dependenciesDataSource,
                    views: [
                        "day",
                        { type: "week", selected: true },
                        "month"
                    ],
                    columns: [
                        { field: "id", title: "ID", width: 60 },
                        { field: "title", title: "Title", editable: true, sortable: true },
                        { field: "start", title: "Start Time", format: "{0:MM/dd/yyyy}", width: 100, editable: true, sortable: true },
                        { field: "end", title: "End Time", format: "{0:MM/dd/yyyy}", width: 100, editable: true, sortable: true }
                    ],
                    height: 700,

                    showWorkHours: false,
                    showWorkDays: false,

                    snap: false
                }).data("kendoGantt");

                $(document).bind("kendo:skinChange", function() {
                    gantt.refresh();
                });
            });
        </script>
    </div>

If you want to bind context data to the angular show use

z.angularBind("name", "Swa")
print("%angular <p>Hello {{name}}</p>")

To bring data into the context you can use something like

val sqlContext = new org.apache.spark.sql.SQLContext(sc)
import sqlContext.implicits._
import java.sql.Date
case class Log(level: String, date: Date, fileName: String)
import java.text.SimpleDateFormat
val df = new SimpleDateFormat("yyyy-mm-dd HH:mm:ss,SSS")
val logdata = pythonLogs.map { line =>
  		val s =  line.split(" ")
  		val logLevel = s(0)
  		val dateTime = df.parse(s(1) + " " + s(2))
  		val fileName = s(3).split(":")(0)
  		Log(logLevel,new Date(dateTime.getTime()), fileName)
        }.toDF()

logdata.registerTempTable("logdata")