dtaalbers/app.html

## app.html
<template>
  <require from="aurelia-kendoui-bridge/scheduler/scheduler"></require>
  <require from="aurelia-kendoui-bridge/combobox/combobox"></require>
  <require from="aurelia-kendoui-bridge/datepicker/datepicker"></require>

  <div id="example">
    <div class="box wide">
      <div class="box-col">
        <h4>Current Date</h4>
        <input ak-datepicker="k-value.two-way: currentDate" />
      </div>
      <div class="box-col">
        <h4>Current View</h4>
        <ak-combobox k-value.two-way="currentView">
          <select>
            <option value="agenda">Agenda</option>
            <option value="day">Day</option>
            <option value="month">Month</option>
            <option value="week">Week</option>
          </select>
        </ak-combobox>
      </div>
    </div>


    <ak-scheduler k-date.bind="date"
                 k-start-time.bind="startTime"
                 k-height.bind="400"
                 k-timezone="Etc/UTC"
                 k-views.bind="views"
			              k-on-change.delegate="schedulerSelectionChange($event.detail)"
                 k-data-source.bind="dataSource"
                 k-selectable.bind="true"
                 k-on-navigate.delegate="navigate($event)"
                 k-widget.bind="scheduler">
    </ak-scheduler>
  </div>
</template>

## app.js
import {bindable} from 'aurelia-templating';

export class Api {
  @bindable currentView = 'week';
  @bindable currentDate = new Date('2013/6/13');
  date = new Date('2013/6/13');
  startTime = new Date('2013/6/13 7:00');


  currentViewChanged() {
    this.scheduler.view(this.currentView);
  }

  currentDateChanged() {
    this.scheduler.date(this.currentDate);
  }

  schedulerSelectionChange(){
  }

  navigate(event) {
    console.log('event', event.detail.view, event.detail.action, event.detail.date);
  }

  views = [
    'day',
    { type: 'week', selected: true },
    'month',
    'agenda',
    'timeline'
  ];

  dataSource = {
    batch: true,
    transport: {
      read: {
        url: '//demos.telerik.com/kendo-ui/service/tasks',
        dataType: 'jsonp'
      },
      update: {
        url: '//demos.telerik.com/kendo-ui/service/tasks/update',
        dataType: 'jsonp'
      },
      create: {
        url: '//demos.telerik.com/kendo-ui/service/tasks/create',
        dataType: 'jsonp'
      },
      destroy: {
        url: '//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' }
        }
      }
    }
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia KendoUI bridge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/1.0.0-beta.1.0.6/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge');

  aurelia.start().then(a => a.setRoot());
}
	<template>
	<require from="aurelia-kendoui-bridge/scheduler/scheduler"></require>
	<require from="aurelia-kendoui-bridge/combobox/combobox"></require>
	<require from="aurelia-kendoui-bridge/datepicker/datepicker"></require>

	<div id="example">
	<div class="box wide">
	<div class="box-col">
	<h4>Current Date</h4>
	<input ak-datepicker="k-value.two-way: currentDate" />
	</div>
	<div class="box-col">
	<h4>Current View</h4>
	<ak-combobox k-value.two-way="currentView">
	<select>
	<option value="agenda">Agenda</option>
	<option value="day">Day</option>
	<option value="month">Month</option>
	<option value="week">Week</option>
	</select>
	</ak-combobox>
	</div>
	</div>


	<ak-scheduler k-date.bind="date"
	k-start-time.bind="startTime"
	k-height.bind="400"
	k-timezone="Etc/UTC"
	k-views.bind="views"
	k-on-change.delegate="schedulerSelectionChange($event.detail)"
	k-data-source.bind="dataSource"
	k-selectable.bind="true"
	k-on-navigate.delegate="navigate($event)"
	k-widget.bind="scheduler">
	</ak-scheduler>
	</div>
	</template>
	import {bindable} from 'aurelia-templating';

	export class Api {
	@bindable currentView = 'week';
	@bindable currentDate = new Date('2013/6/13');
	date = new Date('2013/6/13');
	startTime = new Date('2013/6/13 7:00');


	currentViewChanged() {
	this.scheduler.view(this.currentView);
	}

	currentDateChanged() {
	this.scheduler.date(this.currentDate);
	}

	schedulerSelectionChange(){
	}

	navigate(event) {
	console.log('event', event.detail.view, event.detail.action, event.detail.date);
	}

	views = [
	'day',
	{ type: 'week', selected: true },
	'month',
	'agenda',
	'timeline'
	];

	dataSource = {
	batch: true,
	transport: {
	read: {
	url: '//demos.telerik.com/kendo-ui/service/tasks',
	dataType: 'jsonp'
	},
	update: {
	url: '//demos.telerik.com/kendo-ui/service/tasks/update',
	dataType: 'jsonp'
	},
	create: {
	url: '//demos.telerik.com/kendo-ui/service/tasks/create',
	dataType: 'jsonp'
	},
	destroy: {
	url: '//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' }
	}
	}
	}
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia KendoUI bridge</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/1.0.0-beta.1.0.6/config2.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-kendoui-bridge');

	aurelia.start().then(a => a.setRoot());
	}