Schedule : default-functionalities

app.html

<template>    
    <div>
      <ej-tab id="defaultTab" e-on-before-active.trigger = 'beforeActive($event)'  e-on-item-active.trigger="onitemActive($event)" e-on-create.trigger ='create($event)'>
      <ul>
        <li><a href="#children">Sub-Tasks</a></li>
		<li><a href="#calendar">Calendar</a></li>
        
	  </ul>

      <div id="children">
       <div>Default</div>
      </div>
      <div id="calendar">
        <div class="cols-sample-area">
        <ej-schedule id="Schedule1" e-width="100%" e-height="575px" e-appointment-settings.bind="AppointmentList" e-on-action-complete.trigger = 'OnComplete($event.detail)' e-current-date="04/03/2014">
        </ej-schedule>
      </div>
	 </div>
    </ej-tab>
    </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() });
      }
    }
    
    onitemActive(args) {
        if (args.detail.activeIndex == 1) {
          $(".cols-sample-area").ejWaitingPopup({ showOnInit: true });
            var obj = $("#Schedule1").data("ejSchedule");
            obj.refreshScroller(); 
        }
        else{
          $(".cols-sample-area").ejWaitingPopup("hide");	 
        }
    }
    
    beforeActive(args){
      if (args.detail.activeIndex == 1){
     // $(".cols-sample-area").ejWaitingPopup({ showOnInit: true });
      }else{
          $(".cols-sample-area").ejWaitingPopup("hide");	
        }
      }
    create(ars){
     //  $(".cols-sample-area").ejWaitingPopup({ showOnInit: true });
       //var obj = ej.Schedule.prototype._dragStop;
           //  ej.Schedule.prototype._dragStop = function (args) {          
			// $(".cols-sample-area").ejWaitingPopup({ showOnInit: true });              
			// var proxy=this;
			// setTimeout(function(){ obj.call(proxy,args); }, 5);				
      //     }
    }
    
    OnComplete(args) {
			if(args.requestType=="appointmentDrag"){
			 $(".cols-sample-area").ejWaitingPopup("hide");	
			}
			}
    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'
      };
    }
}

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/16.2.0.41/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());
}