gregoryagu · July 21, 2018 12:05
diff --git a/app.html b/app.html
 <template>
    <require from="./default-functionalities.css"></require>
    
        <ej-tab id="defaultTab">
            <ul>
                <li><a href="#steelman">Man of Steel</a></li>
              
            </ul>
            <div id="steelman" style="background-color:yellow;">
                  <ej-gantt id="gantt" 
                  e-data-source.bind="ProjectData" 
                  e-task-id-mapping="taskID" 
                  e-task-name-mapping="taskName"
                  e-start-date-mapping="startDate" 
                  e-tree-column-index="1" 
                  e-child-mapping="subtasks"
                  e-progress-mapping="progress" 
                  e-end-date-mapping="endDate">
        </ej-gantt>
            </div>
          
            </div>
        </ej-tab>
    
 </template>
diff --git a/app.js b/app.js
 export class BasicUse {
    constructor() {
      this.orientation = ej.Orientation.Vertical;
      this.properties = [{}, { paneSize: 80 }];
    
       this.AppointmentList = {
        dataSource: [
         
         {
            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'
      };
 }
 }
diff --git a/default-functionalities.css b/default-functionalities.css
 #defaultTab .col-md-3{
    width: auto;
 }
 @media (max-width: 540px) {
    #defaultTab.e-tab .e-header li > a, .e-tab .e-header li > a > span:first-child {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 45px;
    }
 }
 .flex-container-column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
 }
 .flexible {
  flex: 1 1 auto;
 }
diff --git a/index.html b/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://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>
diff --git a/main.js b/main.js
 export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-syncfusion-bridge', syncfusion => syncfusion.useAll());

  aurelia.start().then(a => a.setRoot());
 }
	<template>
	<require from="./default-functionalities.css"></require>

	<ej-tab id="defaultTab">
	<ul>
	<li><a href="#steelman">Man of Steel</a></li>

	</ul>
	<div id="steelman" style="background-color:yellow;">
	<ej-gantt id="gantt"
	e-data-source.bind="ProjectData"
	e-task-id-mapping="taskID"
	e-task-name-mapping="taskName"
	e-start-date-mapping="startDate"
	e-tree-column-index="1"
	e-child-mapping="subtasks"
	e-progress-mapping="progress"
	e-end-date-mapping="endDate">
	</ej-gantt>
	</div>

	</div>
	</ej-tab>

	</template>
	export class BasicUse {
	constructor() {
	this.orientation = ej.Orientation.Vertical;
	this.properties = [{}, { paneSize: 80 }];

	this.AppointmentList = {
	dataSource: [

	{
	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'
	};
	}
	}
	#defaultTab .col-md-3{
	width: auto;
	}
	@media (max-width: 540px) {
	#defaultTab.e-tab .e-header li > a, .e-tab .e-header li > a > span:first-child {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 45px;
	}
	}
	.flex-container-column {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	}
	.flexible {
	flex: 1 1 auto;
	}
	<!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://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>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-syncfusion-bridge', syncfusion => syncfusion.useAll());

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