<template>
    <div>
      <ej-tab id="defaultTab" 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)' 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>