CODEWITHSUNDEEP
kendo-uitypescript
sheamus
sheamus

Reputation: 3153

Extending Kendo's AgendaView (from Scheduler) using TypeScript

I am trying to extend the kendo scheduler using typescript.

Here is a working example using JS: http://jsbin.com/ucaB/1/edit

But I can't get it working in TypeScript.

I think I am close: 

var CustomAgenda = (<any>kendo.ui).AgendaView.extend(
{
    endDate: () =>
    {
        var self = this;
        var d = (<any>kendo.ui).AgendaView.fn.endDate.call(self);
        return (<any>kendo).date.addDays(d, 21);
    }
});

But obviously my 'this' reference is wrong. The kendo typings file also doesn't expose kendo.date, or AgendaView, which makes things a little messy.

Maybe I am going about it wrong, this sure feels ugly...

Upvotes: 0

Views: 525

Answers (2)

sheamus
sheamus

Reputation: 3153

Here is a more 'typescripty' method I came up with based on an answer to another question in the kendo forums. It uses datejs, but could easily be adapted to work without.

/// <reference path="../../typings/datejs/datejs.d.ts" />

declare module kendo.ui
{
    class AgendaView implements kendo.ui.SchedulerView
    {
        startDate(): IDateJS;
        endDate(): IDateJS;
    }
}

class MonthlyAgendaView extends kendo.ui.AgendaView
{
    endDate(): IDateJS
    {
        var date = this.startDate().clone();
        date.moveToLastDayOfMonth();
        return date;
    }
}

Upvotes: 1

basarat
basarat

Reputation: 275957

In this particular case you dont want to capture the this outside the endDate function. So just use function and not ()=>: 

var CustomAgenda = (<any>kendo.ui).AgendaView.extend(
{
    endDate: function()
    {
        var self = this;
        var d = (<any>kendo.ui).AgendaView.fn.endDate.call(self);
        return (<any>kendo).date.addDays(d, 21);
    }
});

This video might help clear things up a bit : https://www.youtube.com/watch?v=tvocUcbCupA&hd=1

Upvotes: 1

Related Questions