Schedule : default-functionalities

app.html

<template>    
    <div>
        <ej-schedule id="Schedule1" e-width="100%" e-height="575px" e-appointment-settings.bind="AppointmentList" e-current-date="04/03/2014">
        </ej-schedule>
    </div>
    <div id="property-window" class="box wide">
        <div class="row">
            <div class="col-sm-3 col-md-3" style="top:5px">
                <label>Orientation</label>
            </div>
            <div class="col-sm-9 col-md-9">
                <select ej-drop-down-list="e-data-source.bind:orientation;e-selected-index:0;width:100px" e-on-select.trigger="onChange($event)" id="orientation" />
            </div>
        </div>
    </div>
</template>

app.js

export class DefaultSchedule {
    onChange(args) {
      if (args.detail.value === 'Horizontal') {
        $('#Schedule1').ejSchedule({ orientation: args.detail.value.toLowerCase() });
      } else {
        $('#Schedule1').ejSchedule({ orientation: args.detail.value.toLowerCase() });
      }
    }
    constructor() {
      this.orientation = ['Vertical', 'Horizontal'];
      this.AppointmentList = {
        dataSource: [
          {
            Id: 100,
            Subject: 'Bering Sea Gold',
            StartTime: '2014/4/5 10:00:00',
            EndTime: '2014/4/5 11:00:00',
            StartTimeZone: 'UTC +05:30',
            EndTimeZone: 'UTC +05:30',
            Description: '',
            AllDay: false,
            Recurrence: false,
            Categorize: '1,3'
          }, {
            Id: 102,
            Subject: 'What Happened Next?',
            StartTime: '2014/4/4 01:00:00',
            EndTime: '2014/4/4 01:30:00',
            StartTimeZone: 'UTC +05:30',
            EndTimeZone: 'UTC +05:30',
            Description: '',
            AllDay: false,
            Recurrence: false,
            Categorize: '3,6'
          }, {
            Id: 104,
            Subject: 'Daily Planet',
            StartTime: '2014/4/3 01:00:00',
            EndTime: '2014/4/3 02:00:00',
            StartTimeZone: 'UTC +05:30',
            EndTimeZone: 'UTC +05:30',
            Description: '',
            AllDay: false,
            Recurrence: false,
            Categorize: '1,3,6'
          }, {
            Id: 105,
            Subject: 'Alaska: The Last Frontier',
            StartTime: '2014/4/3 04:00:00',
            EndTime: '2014/4/3 05:00:00',
            StartTimeZone: 'UTC +05:30',
            EndTimeZone: 'UTC +05:30',
            Description: '',
            AllDay: false,
            Recurrence: false,
            Categorize: '2,3,4,5'
          }, {
            Id: 106,
            Subject: 'Deadest Catch',
            StartTime: '2014/4/3 16:00:00',
            EndTime: '2014/4/3 17:00:00',
            StartTimeZone: 'UTC +05:30',
            EndTimeZone: 'UTC +05:30',
            Description: '',
            AllDay: false,
            Recurrence: false,
            Categorize: '2,4,6,1'
          }, {
            Id: 107,
            Subject: 'MayDay',
            StartTime: '2014/3/30 06:30:00',
            EndTime: '2014/3/30 07:30:00',
            StartTimeZone: 'UTC +05:30',
            EndTimeZone: 'UTC +05:30',
            Description: '',
            AllDay: false,
            Recurrence: false,
            Categorize: '5,3'
          }, {
            Id: 108,
            Subject: "How It's Made",
            StartTime: '2014/4/1 06:30:00',
            EndTime: '2014/4/1 07:30:00',
            StartTimeZone: 'UTC +05:30',
            EndTimeZone: 'UTC +05:30',
            Description: '',
            AllDay: false,
            Recurrence: true,
            RecurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TU;INTERVAL=1;COUNT=15',
            Categorize: '2,3,6'
          }, {
            Id: 110,
            Subject: 'MoonShiners',
            StartTime: '2014/4/2 02:00:00',
            EndTime: '2014/4/2 02:30:00',
            StartTimeZone: 'UTC +05:30',
            EndTimeZone: 'UTC +05:30',
            Description: '',
            AllDay: false,
            Recurrence: true,
            RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=5',
            Categorize: '6,2,5'
          }, {
            Id: 111,
            Subject: 'Close Encounters',
            StartTime: '2014/3/30 14:00:00',
            EndTime: '2014/3/30 15:30:00',
            StartTimeZone: 'UTC +05:30',
            EndTimeZone: 'UTC +05:30',
            Description: '',
            AllDay: false,
            Recurrence: true,
            RecurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TH;INTERVAL=1;COUNT=5',
            Categorize: '3,4,5'
          }, {
            Id: 113,
            Subject: 'HighWay Thru Hell',
            StartTime: '2014/4/1 03:00:00',
            EndTime: '2014/4/1 07:00:00',
            StartTimeZone: 'UTC +05:30',
            EndTimeZone: 'UTC +05:30',
            Description: '',
            AllDay: false,
            Recurrence: false,
            Categorize: '5,6,3'
          }, {
            Id: 115,
            Subject: 'Cash Cab',
            StartTime: '2014/3/30 15:00:00',
            EndTime: '2014/3/30 16:30:00',
            StartTimeZone: 'UTC +05:30',
            EndTimeZone: 'UTC +05:30',
            Description: '',
            AllDay: false,
            Recurrence: true,
            RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=5',
            Categorize: '1,3'
          }],
        id: 'Id',
        subject: 'Subject',
        startTime: 'StartTime',
        endTime: 'EndTime',
        startTimeZone: 'StartTimeZone',
        endTimeZone: 'EndTimeZone',
        description: 'Description',
        allDay: 'AllDay',
        recurrence: 'Recurrence',
        recurrenceRule: 'RecurrenceRule'
      };
    }
}

inde.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential Studio for JavaScript">
    <meta name="author" content="Syncfusion">
    <title>Untitled</title>
    <!-- Essential Studio for JavaScript  theme reference -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.syncfusion.com/14.2.0.28/js/web/flat-azure/ej.web.all.min.css" />
</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-syncfusion-bundles/0.0.1/config2.js"></script>
    <script>
        System.import('aurelia-bootstrapper');
    </script>
</body>
</html>

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential Studio for JavaScript">
    <meta name="author" content="Syncfusion">
    <title>Untitled</title>
    <!-- Essential Studio for JavaScript  theme reference -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.syncfusion.com/14.2.0.28/js/web/flat-azure/ej.web.all.min.css" />
</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-syncfusion-bundles/0.0.1/config2.js"></script>
    <script>
        System.import('aurelia-bootstrapper');
    </script>
</body>
</html>

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-syncfusion-bridge', syncfusion => syncfusion.useAll());

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