function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Tyler DahleTyler Dahle 

Using external javascript library objects in lightning component (Kendo UI)

I am trying to use kendo UI in a lightning component to get a scheduler to be a custom lightning component. My component is:
 
<aura:component >
	<ltng:require
    	styles="{!join(',', $Resource.kendoUI + '/kendo-ui/styles/kendo.silver.min.css', $Resource.kendoUI + '/kendo-ui/styles/kendo.default.mobile.min', $Resource.kendoUI + '/kendo-ui/styles/kendo.default.min')}"
    	scripts="{!join(',', $Resource.kendoUI + '/kendo-ui/js/jquery.min.js', $Resource.kendoUI + '/kendo-ui/js/kendo.all.min.js', $Resource.kendoUI + '/kendo-ui/js/kendo.timezones.min.js')}"/>
    <aura:attribute name="scheduler" type="Object"/>
    <aura:handler name="init" value="{!this}" action="{!c.schedulerInit}"/>
    
	<div aura:id="{!v.scheduler}"></div>

</aura:component>

and controller is:
({
	schedulerInit : function(component, event, helper) {
		var scheduler = component.find("scheduler");
        console.log(scheduler);
        scheduler.kendoScheduler({
        date: new Date("2013/6/13"),
        startTime: new Date("2013/6/13 07:00 AM"),
        height: 600,
        views: [
            "day",
            { type: "workWeek", selected: true },
            "week",
            "month",
            "agenda",
            { type: "timeline", eventHeight: 50}
        ],
        timezone: "Etc/UTC",
        dataSource: {
            batch: true,
            transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/tasks",
                    dataType: "jsonp"
                },
                update: {
                    url: "https://demos.telerik.com/kendo-ui/service/tasks/update",
                    dataType: "jsonp"
                },
                create: {
                    url: "https://demos.telerik.com/kendo-ui/service/tasks/create",
                    dataType: "jsonp"
                },
                destroy: {
                    url: "https://demos.telerik.com/kendo-ui/service/tasks/destroy",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            schema: {
                model: {
                    id: "taskId",
                    fields: {
                        taskId: { from: "TaskID", type: "number" },
                        title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                        start: { type: "date", from: "Start" },
                        end: { type: "date", from: "End" },
                        startTimezone: { from: "StartTimezone" },
                        endTimezone: { from: "EndTimezone" },
                        description: { from: "Description" },
                        recurrenceId: { from: "RecurrenceID" },
                        recurrenceRule: { from: "RecurrenceRule" },
                        recurrenceException: { from: "RecurrenceException" },
                        ownerId: { from: "OwnerID", defaultValue: 1 },
                        isAllDay: { type: "boolean", from: "IsAllDay" }
                    }
                }
            },
            filter: {
                logic: "or",
                filters: [
                    { field: "ownerId", operator: "eq", value: 1 },
                    { field: "ownerId", operator: "eq", value: 2 }
                ]
            }
        },
        resources: [
            {
                field: "ownerId",
                title: "Owner",
                dataSource: [
                    { text: "Alex", value: 1, color: "#f8a398" },
                    { text: "Bob", value: 2, color: "#51a0ed" },
                    { text: "Charlie", value: 3, color: "#56ca85" }
                ]
            }
        ]
    });
	}
})

which is just the kendo UI scheduler demo example on their website, just trying to see if I can get it to show up at all. However, I cannot doing it like this. My application is simply:
 
<aura:application access="GLOBAL" extends="ltng:outApp">
    <c:kendo_test />
</aura:application>

but when I preview, I just get a forever loading sign with no errors popping up on the screen or chrome dev tools console. The console.log in the controller is not being hit and printed on the console at all... 

Does anyone have experience using kendo or any kind of outside objects in lightning components and can help me by showing me how to call them? I assume I cannot set 'type' of te attribute to 'kendoScheduler'... but then I don't know how to call the scheduler function to initialize it. I tried doing aura:method after the scheduler div in the component, but that didn't work either.

Thank you for any help!
Abhijith E 4Abhijith E 4
Hello @tyler,

Could you please let me know if you have managed to find a resolution/workaround for this issue. 

Thanks in advance.
Regards,
Abhijith