vk-typescript-cli 1.0.0

package/src/templates/vue/Gantt.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="gantt-section">
+    <ejs-gantt
+      id="Default"
+      ref="ganttObj"
+      :dataSource="taskData"
+      :treeColumnIndex="1"
+      :taskFields="taskFields"
+      :splitterSettings="splitterSettings"
+      :labelSettings="labelSettings"
+      height="650px"
+      :taskbarHeight="25"
+      :rowHeight="46"
+      :projectStartDate="projectStartDate"
+      :projectEndDate="projectEndDate"
+      :created="onCreated"
+    >
+      <e-columns>
+        <e-column field="TaskID" width="80"></e-column>
+        <e-column
+          field="TaskName"
+          headerText="Job Name"
+          width="250"
+          clipMode="EllipsisWithTooltip"
+        ></e-column>
+        <e-column field="StartDate"></e-column>
+        <e-column field="Duration"></e-column>
+        <e-column field="Progress"></e-column>
+        <e-column field="Predecessor"></e-column>
+      </e-columns>
+    </ejs-gantt>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+
+import {
+  GanttComponent as EjsGantt,
+  ColumnsDirective as EColumns,
+  ColumnDirective as EColumn,
+  Selection
+} from '@syncfusion/ej2-vue-gantt';
+
+const ganttObj = ref<any>(null);
+
+const taskData = [
+  { TaskID: 1, TaskName: "Product concept", StartDate: new Date("04/02/2025"), EndDate: new Date("04/08/2025") },
+    { TaskID: 2, TaskName: "Define the product usage", StartDate: new Date("04/02/2025"), EndDate: new Date("04/08/2025"), Duration: 1, Progress: 30, ParentId: 1, BaselineStartDate: new Date("04/02/2025"), BaselineEndDate: new Date("04/02/2025") },
+    { TaskID: 3, TaskName: "Define the target audience", StartDate: new Date("04/02/2025"), EndDate: new Date("04/04/2025"), Duration: 2, Progress: 40, ParentId: 1 },
+    { TaskID: 4, TaskName: "Prepare product sketch and notes", StartDate: new Date("04/05/2025"), Duration: 2, Progress: 30, ParentId: 1, Predecessor: "2" },
+    { TaskID: 5, TaskName: "Concept approval", StartDate: new Date("04/08/2025"), EndDate: new Date("04/08/2025"), Duration: 0, ParentId: 1, Predecessor: "3,4", Indicators: [{ date: new Date("04/07/2025"), name: "Design Phase", tooltip: "Design phase completed", iconClass: "okIcon e-icons" }] },
+    { TaskID: 6, TaskName: "Market research", StartDate: new Date("04/09/2025"), EndDate: new Date("04/18/2025"), Progress: 30, BaselineStartDate: new Date("04/09/2025"), BaselineEndDate: new Date("04/09/2025") },
+    { TaskID: 7, TaskName: "Demand analysis", Progress: 40, ParentId: 6 },
+    { TaskID: 8, TaskName: "Customer strength", StartDate: new Date("04/09/2025"), EndDate: new Date("04/12/2025"), Duration: 4, Progress: 30, ParentId: 7, Predecessor: "5", BaselineStartDate: new Date("04/12/2025"), BaselineEndDate: new Date("04/13/2025") },
+    { TaskID: 9, TaskName: "Market opportunity analysis", StartDate: new Date("04/09/2025"), EndDate: new Date("04/12/2025"), Duration: 4, ParentId: 7, Predecessor: "5" },
+    { TaskID: 10, TaskName: "Competitor analysis", StartDate: new Date("04/15/2025"), EndDate: new Date("04/18/2025"), Duration: 4, Progress: 30, ParentId: 6, Predecessor: "7,8" },
+    { TaskID: 11, TaskName: "Product strength analysis", StartDate: new Date("04/15/2025"), EndDate: new Date("04/18/2025"), Duration: 4, Progress: 40, ParentId: 6, Predecessor: "9" },
+    { TaskID: 12, TaskName: "Research completed", StartDate: new Date("04/18/2025"), EndDate: new Date("04/18/2025"), Duration: 0, Progress: 30, ParentId: 6, Predecessor: "10", Indicators: [{ date: new Date("04/20/2025"), name: "Research completed", tooltip: "Research completed", iconClass: "description e-icons" }] },
+    { TaskID: 13, TaskName: "Product design and development", StartDate: new Date("04/19/2025"), EndDate: new Date("05/16/2025") },
+    { TaskID: 14, TaskName: "Functionality design", StartDate: new Date("04/19/2025"), EndDate: new Date("04/23/2025"), Duration: 4, Progress: 30, ParentId: 13, Predecessor: "12" },
+    { TaskID: 15, TaskName: "Quality design", StartDate: new Date("04/19/2025"), EndDate: new Date("04/23/2025"), Duration: 3, Progress: 40, ParentId: 13, Predecessor: "12" },
+    { TaskID: 16, TaskName: "Define reliability", StartDate: new Date("04/24/2025"), EndDate: new Date("04/25/2025"), Duration: 4, Progress: 30, ParentId: 13, Predecessor: "15" },
+    { TaskID: 17, TaskName: "Identifying raw materials", StartDate: new Date("04/24/2025"), EndDate: new Date("04/25/2025"), Duration: 2, ParentId: 13, Predecessor: "15" },
+    { TaskID: 18, TaskName: "Define cost plan", StartDate: new Date("04/26/2025"), EndDate: new Date("04/29/2025"), Progress: 30, ParentId: 13, Predecessor: "17" },
+    { TaskID: 19, TaskName: "Estimate manufacturing cost", StartDate: new Date("04/26/2025"), EndDate: new Date("04/29/2025"), Duration: 3, Progress: 40, ParentId: 18, Predecessor: "17" },
+    { TaskID: 20, TaskName: "Estimate selling cost", StartDate: new Date("04/26/2025"), EndDate: new Date("04/29/2025"), Duration: 3, Progress: 30, ParentId: 18, Predecessor: "17" },
+    { TaskID: 21, TaskName: "Development of final design", StartDate: new Date("04/30/2025"), EndDate: new Date("05/08/2025"), ParentId: 13 },
+    { TaskID: 22, TaskName: "Develop dimensions and design", StartDate: new Date("04/30/2025"), EndDate: new Date("05/01/2025"), Duration: 4, Progress: 30, ParentId: 21, Predecessor: "19,20" },
+    { TaskID: 23, TaskName: "Develop designs to meet industry", StartDate: new Date("05/02/2025"), EndDate: new Date("05/03/2025"), Duration: 3, Progress: 40, ParentId: 21, Predecessor: "22" },
+    { TaskID: 24, TaskName: "Include all the details", StartDate: new Date("05/06/2025"), EndDate: new Date("05/08/2025"), Duration: 4, Progress: 30, ParentId: 21, Predecessor: "23" },
+    { TaskID: 25, TaskName: "CAD - Computer Aided Design", StartDate: new Date("05/09/2025"), EndDate: new Date("05/13/2025"), Duration: 3, Predecessor: "24" },
+    { TaskID: 26, TaskName: "CAM - Computer Aided Manufacturing", StartDate: new Date("05/14/2025"), EndDate: new Date("05/16/2025"), Duration: 4, Progress: 30, Predecessor: "25" },
+    { TaskID: 27, TaskName: "Finalize the design", StartDate: new Date("04/16/2025"), EndDate: new Date("04/16/2025"), Duration: 0, Progress: 40, Predecessor: "26" },
+    { TaskID: 28, TaskName: "Prototype testing", StartDate: new Date("05/17/2025"), EndDate: new Date("05/22/2025"), Duration: 4, Progress: 30, Predecessor: "27" },
+    { TaskID: 29, TaskName: "Include feedback", StartDate: new Date("05/17/2025"), EndDate: new Date("05/22/2025"), Duration: 4, Predecessor: "28ss", Indicators: [{ date: new Date("05/30/2025"), name: "Production phase", tooltip: "Production phase completed", iconClass: "okIcon e-icons" }] },
+    { TaskID: 30, TaskName: "Manufacturing", StartDate: new Date("05/23/2025"), EndDate: new Date("05/29/2025"), Duration: 5, Progress: 30, Predecessor: "28,29" },
+    { TaskID: 31, TaskName: "Assembling material into finished goods", StartDate: new Date("05/30/2025"), EndDate: new Date("06/05/2025"), Duration: 5, Progress: 40, Predecessor: "30" },
+    { TaskID: 32, TaskName: "Final product development", StartDate: new Date("06/06/2025"), EndDate: new Date("06/13/2025"), Progress: 30 },
+    { TaskID: 33, TaskName: "Important improvement", StartDate: new Date("06/06/2025"), EndDate: new Date("06/10/2025"), Duration: 3, ParentId: 32, Predecessor: "31" },
+    { TaskID: 34, TaskName: "Customer testing and feedback", StartDate: new Date("06/11/2025"), EndDate: new Date("06/13/2025"), Duration: 4, Progress: 30, ParentId: 32, Predecessor: "33" },
+    { TaskID: 35, TaskName: "Final product development", StartDate: new Date("06/14/2025"), EndDate: new Date("06/19/2025"), Progress: 40 },
+    { TaskID: 36, TaskName: "Important improvement", StartDate: new Date("06/14/2025"), EndDate: new Date("06/19/2025"), Duration: 4, Progress: 30, ParentId: 35, Predecessor: "34" },
+    { TaskID: 37, TaskName: "Address any unforeseen issues", StartDate: new Date("06/14/2025"), EndDate: new Date("06/19/2025"), Duration: 4, Progress: 30, Predecessor: "36ss", ParentId: 35, Indicators: [{ date: new Date("06/30/2025"), name: "Sales and marketing", tooltip: "Sales and marketing", iconClass: "description e-icons" }] },
+    { TaskID: 38, TaskName: "Finalize the product", StartDate: new Date("06/20/2025"), EndDate: new Date("07/01/2025"), Progress: 40 },
+    { TaskID: 39, TaskName: "Branding the product", StartDate: new Date("06/20/2025"), EndDate: new Date("06/25/2025"), Duration: 4, Progress: 30, ParentId: 38, Predecessor: "37" },
+    { TaskID: 40, TaskName: "Marketing and presales", StartDate: new Date("06/26/2025"), EndDate: new Date("07/01/2025"), Duration: 4, ParentId: 38, Predecessor: "39" }
+];
+
+const taskFields = {
+  id: 'TaskID',
+  name: 'TaskName',
+  startDate: 'StartDate',
+  endDate: 'EndDate',
+  duration: 'Duration',
+  progress: 'Progress',
+  dependency: 'Predecessor',
+  parentID: 'ParentId'
+};
+
+const labelSettings = {
+  leftLabel: 'TaskName'
+};
+
+const splitterSettings = {
+  columnIndex: 2
+};
+
+const projectStartDate = new Date('03/26/2025');
+const projectEndDate = new Date('07/20/2025');
+
+const onCreated = (): void => {
+  const ganttInstance = ganttObj.value?.ej2Instances;
+
+  if (document.querySelector('.e-bigger') && ganttInstance) {
+    ganttInstance.rowHeight = 48;
+    ganttInstance.taskbarHeight = 28;
+  }
+};
+
+provide('gantt', [Selection]);
+</script>
+
+<style scoped>
+.gantt-section {
+  padding: 50px;
+  margin: 0 auto;
+}
+</style>

package/src/templates/vue/GanttView.vue

@@ -0,0 +1,7 @@
+<template>
+  <Gantt />
+</template>
+
+<script setup>
+import Gantt from '../components/Gantt.vue'
+</script>

package/src/templates/vue/Grid.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="grid-container">
+    <ejs-grid
+      :height='350'
+      :dataSource="data"
+      :allowSorting="true"
+      :allowFiltering="true"
+      :filterSettings="filterSettings"
+      :allowSelection="true"
+      :toolbar="toolbar"
+      :editSettings="editSettings"
+    >
+      <e-columns>
+        <e-column
+          field="OrderID"
+          headerText="Order ID"
+          width="120"
+          textAlign="Right"
+          type="number"
+          :isPrimaryKey="true"
+          :validationRules="orderIdRules"
+        >
+        </e-column>
+
+       <e-column
+          field="CustomerName"
+          headerText="Customer Name"
+          width="150"
+          :validationRules="customerIdRule"
+        >
+        </e-column>
+
+        <e-column
+          field="OrderDate"
+          headerText="Order Date"
+          width="130"
+          format="yMd"
+          editType="datepickeredit"
+          :validationRules="customerIdRule"
+        >
+        </e-column>
+
+        <e-column
+          field="Freight"
+          headerText="Freight"
+          width="120"
+          textAlign="Right"
+          format="C2"
+          editType="numericedit"
+          :validationRules="freightRules"
+        >
+        </e-column>
+
+        <e-column
+          field="ShippedDate"
+          headerText="Shipped Date"
+          width="130"
+          textAlign="Right"
+          format="yMd"
+          editType="datepickeredit"
+        >
+        </e-column>
+
+        <e-column
+          field="ShipCountry"
+          headerText="Ship Country"
+          width="150"
+        >
+        </e-column>
+      </e-columns>
+    </ejs-grid>
+  </div>
+</template>
+
+<script setup>
+import { provide, ref } from 'vue';
+import {
+  GridComponent as EjsGrid,
+  ColumnsDirective as EColumns,
+  ColumnDirective as EColumn,
+  Page,
+  Sort,
+  Filter,
+  Toolbar,
+  Edit,
+  Selection
+} from '@syncfusion/ej2-vue-grids';
+
+const data = ref([
+    { 'OrderID': 10248, 'CustomerName': 'Maria ', 'OrderDate': new Date('1996-07-04'), 'ShippedDate': new Date('1996-07-16'), 'Freight': 32.38, 'ShipCountry': 'France' },
+    { 'OrderID': 10249, 'CustomerName': 'Ana Trujillo', 'OrderDate': new Date('1996-07-05'), 'ShippedDate': new Date('1996-07-10'), 'Freight': 11.61, 'ShipCountry': 'Germany' },
+    { 'OrderID': 10250, 'CustomerName': 'Antonio Moreno', 'OrderDate': new Date('1996-07-08'), 'ShippedDate': new Date('1996-07-12'), 'Freight': 65.83, 'ShipCountry': 'Brazil' },
+    { 'OrderID': 10251, 'CustomerName': 'Thomas Hardy', 'OrderDate': new Date('1996-07-08'), 'ShippedDate': new Date('1996-07-15'), 'Freight': 41.34, 'ShipCountry': 'France' },
+    { 'OrderID': 10252, 'CustomerName': 'Christina Berglund', 'OrderDate': new Date('1996-07-09'), 'ShippedDate': new Date('1996-07-11'), 'Freight': 51.3, 'ShipCountry': 'Belgium' },
+    { 'OrderID': 10253, 'CustomerName': 'Hanna Moos', 'OrderDate': new Date('1996-07-10'), 'ShippedDate': new Date('1996-07-16'), 'Freight': 58.17, 'ShipCountry': 'Brazil' },
+    { 'OrderID': 10254, 'CustomerName': 'Frédérique Citeaux', 'OrderDate': new Date('1996-07-11'), 'ShippedDate': new Date('1996-07-23'), 'Freight': 22.98, 'ShipCountry': 'Switzerland' },
+    { 'OrderID': 10255, 'CustomerName': 'Martín Sommer', 'OrderDate': new Date('1996-07-12'), 'ShippedDate': new Date('1996-07-15'), 'Freight': 148.33, 'ShipCountry': 'Switzerland' },
+    { 'OrderID': 10256, 'CustomerName': 'Laurence Lebihan', 'OrderDate': new Date('1996-07-15'), 'ShippedDate': new Date('1996-07-17'), 'Freight': 13.97, 'ShipCountry': 'Brazil' },
+    { 'OrderID': 10257, 'CustomerName': 'Elizabeth Lincoln', 'OrderDate': new Date('1996-07-16'), 'ShippedDate': new Date('1996-07-22'), 'Freight': 81.91, 'ShipCountry': 'Venezuela' },
+    { 'OrderID': 10258, 'CustomerName': 'Victoria Ashworth', 'OrderDate': new Date('1996-07-17'), 'ShippedDate': new Date('1996-07-23'), 'Freight': 140.51, 'ShipCountry': 'Austria' },
+    { 'OrderID': 10259, 'CustomerName': 'Patricio Simpson', 'OrderDate': new Date('1996-07-18'), 'ShippedDate': new Date('1996-07-25'), 'Freight': 3.25, 'ShipCountry': 'Mexico' },
+    { 'OrderID': 10260, 'CustomerName': 'Francisco Chang', 'OrderDate': new Date('1996-07-19'), 'ShippedDate': new Date('1996-07-29'), 'Freight': 55.09, 'ShipCountry': 'Germany' },
+    { 'OrderID': 10261, 'CustomerName': 'Yang Wang', 'OrderDate': new Date('1996-07-19'), 'ShippedDate': new Date('1996-07-30'), 'Freight': 3.05, 'ShipCountry': 'Brazil' },
+    { 'OrderID': 10262, 'CustomerName': 'Pedro Afonso', 'OrderDate': new Date('1996-07-22'), 'ShippedDate': new Date('1996-07-25'), 'Freight': 48.29, 'ShipCountry': 'USA' }
+  ]);
+
+const filterSettings = ref({
+  type: 'Excel'
+});
+
+const toolbar = ref(['Add', 'Edit', 'Delete', 'Update', 'Cancel']);
+
+const editSettings = ref({
+  allowEditing: true,
+  allowAdding: true,
+  allowDeleting: true
+});
+
+const customerIdRule = {
+  required: true,
+  minLength: 5
+};
+
+const orderIdRules = {
+  required: true,
+  number: true
+};
+
+const freightRules = {
+  required: true,
+  min: 0
+};
+
+provide('grid', [Page, Sort, Filter, Toolbar, Edit, Selection]);
+</script>
+
+<style scoped>
+.grid-container {
+  margin: 50px 90px;
+}
+</style>

package/src/templates/vue/GridView.vue

@@ -0,0 +1,7 @@
+<template>
+  <Grid />
+</template>
+
+<script setup>
+import Grid from '../components/Grid.vue'
+</script>

package/src/templates/vue/PDFViewer.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="pdf-viewer-container">
+    <ejs-pdfviewer
+      id="container"
+      :documentPath="documentPath"
+      :resourceUrl="resourceUrl"
+      :style="{ height: '640px', display: 'block' }"
+    >
+    </ejs-pdfviewer>
+  </div>
+</template>
+
+<script setup>
+import { provide, ref } from 'vue';
+
+import {
+  PdfViewerComponent as EjsPdfviewer,
+  Toolbar,
+  Magnification,
+  Navigation,
+  LinkAnnotation,
+  BookmarkView,
+  ThumbnailView,
+  Print,
+  TextSelection,
+  TextSearch,
+  Annotation,
+  FormFields,
+  FormDesigner,
+  PageOrganizer
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+const documentPath = ref('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf');
+
+const resourceUrl = ref('https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib');
+
+provide('PdfViewer', [
+  Toolbar,
+  Magnification,
+  Navigation,
+  LinkAnnotation,
+  BookmarkView,
+  ThumbnailView,
+  Print,
+  TextSelection,
+  TextSearch,
+  Annotation,
+  FormFields,
+  FormDesigner,
+  PageOrganizer
+]);
+</script>
+
+<style scoped>
+.pdf-viewer-container {
+  margin: 50px 90px;
+}
+</style>

package/src/templates/vue/PDFViewerView.vue

@@ -0,0 +1,7 @@
+<template>
+  <PDFViewer />
+</template>
+
+<script setup>
+import PDFViewer from '../components/PDFViewer.vue'
+</script>

package/src/templates/vue/RTE.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="rte-container">
+    <ejs-richtexteditor>
+        <h2>Welcome to the Rich Text Editor Demo!</h2><p>The Rich Text Editor control is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p><h4>Flexible Editing!</h4><p>For a better editing experience, the Angular Rich Text Editor component offers a variety of tools and choices. So, you can quickly insert <strong>images</strong>, <strong>videos</strong>, <strong>hyperlinks</strong>, and <strong>tables</strong>; <strong>merge table cells</strong>; and configure.</p><p>You can easily format the text and paragraphs by setting the editor’s foreground and <strong>background colors</strong>, <strong>font type</strong>, <strong>italicization</strong>, <strong>adding ordered </strong>and <strong>unordered custom lists</strong>, <strong>underlining</strong>, <strong>strikethrough</strong>, and <strong>bolding</strong>.<br><br></p><p><img alt="Editor Features Overview" src="https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png" width="400" height="200" class="e-img-left"></p>         
+    </ejs-richtexteditor>
+  </div>
+</template>
+
+<script>
+import { RichTextEditorComponent, Toolbar, Link, Image, QuickToolbar, HtmlEditor, Table, Video, Audio, PasteCleanup, ClipBoardCleanup, AutoFormat } from "@syncfusion/ej2-vue-richtexteditor";
+
+export default {
+    components: {
+      'ejs-richtexteditor': RichTextEditorComponent
+    },
+    provide:{
+        richtexteditor:[Toolbar, Link, Image, QuickToolbar, HtmlEditor, Table, Video, Audio, PasteCleanup, ClipBoardCleanup, AutoFormat]
+    }
+}
+</script>
+
+<style scoped>
+.rte-container {
+  padding: 70px;
+  margin: 0 auto;
+}
+</style>

package/src/templates/vue/RTEView.vue

@@ -0,0 +1,7 @@
+<template>
+  <RTE />
+</template>
+
+<script setup>
+import RTE from '../components/RTE.vue'
+</script>

package/src/templates/vue/Scheduler.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="schedule-section">
+    <ejs-schedule
+      ref="scheduleObj"
+      height="650px"
+      :selectedDate="selectedDate"
+      :eventSettings="eventSettings"
+      :dragStart="onDragStart"
+    >
+      <e-views>
+        <e-view option="Day"></e-view>
+        <e-view option="Week"></e-view>
+        <e-view option="WorkWeek"></e-view>
+        <e-view option="Month"></e-view>
+        <e-view option="Agenda"></e-view>
+      </e-views>
+    </ejs-schedule>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { provide } from 'vue';
+
+import {
+  ScheduleComponent as EjsSchedule,
+  ViewsDirective as EViews,
+  ViewDirective as EView,
+  Day,
+  Week,
+  WorkWeek,
+  Month,
+  Agenda,
+  Resize,
+  DragAndDrop
+} from '@syncfusion/ej2-vue-schedule';
+
+import { extend } from '@syncfusion/ej2-base';
+
+interface DragEventArgs {
+  navigation?: {
+    enable: boolean;
+  };
+}
+
+const dataSource: Object[] = [
+  { "Id": 1, "Subject": "Explosion of Betelgeuse Star", "Location": "Space Center USA", "StartTime": "2021-01-10T04:00:00.000Z", "EndTime": "2021-01-10T05:30:00.000Z", "CategoryColor": "#1aaa55" },
+    { "Id": 2, "Subject": "Thule Air Crash Report", "Location": "Newyork City", "StartTime": "2021-01-11T06:30:00.000Z", "EndTime": "2021-01-11T08:30:00.000Z", "CategoryColor": "#357cd2" },
+    { "Id": 3, "Subject": "Blue Moon Eclipse", "Location": "Space Center USA", "StartTime": "2021-01-12T04:00:00.000Z", "EndTime": "2021-01-12T05:30:00.000Z", "CategoryColor": "#7fa900" },
+    { "Id": 4, "Subject": "Meteor Showers in 2021", "Location": "Space Center USA", "StartTime": "2021-01-13T07:30:00.000Z", "EndTime": "2021-01-13T09:00:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 5, "Subject": "Milky Way as Melting pot", "Location": "Space Center USA", "StartTime": "2021-01-14T06:30:00.000Z", "EndTime": "2021-01-14T08:30:00.000Z", "CategoryColor": "#00bdae" },
+    { "Id": 6, "Subject": "Mysteries of Bermuda Triangle", "Location": "Bermuda", "StartTime": "2021-01-14T04:00:00.000Z", "EndTime": "2021-01-14T05:30:00.000Z", "CategoryColor": "#f57f17" },
+    { "Id": 7, "Subject": "Glaciers and Snowflakes", "Location": "Himalayas", "StartTime": "2021-01-15T05:30:00.000Z", "EndTime": "2021-01-15T07:00:00.000Z", "CategoryColor": "#1aaa55" },
+    { "Id": 8, "Subject": "Life on Mars", "Location": "Space Center USA", "StartTime": "2021-01-16T03:30:00.000Z", "EndTime": "2021-01-16T04:30:00.000Z", "CategoryColor": "#357cd2" },
+    { "Id": 9, "Subject": "Alien Civilization", "Location": "Space Center USA", "StartTime": "2021-01-18T05:30:00.000Z", "EndTime": "2021-01-18T07:30:00.000Z", "CategoryColor": "#7fa900" },
+    { "Id": 10, "Subject": "Wildlife Galleries", "Location": "Africa", "StartTime": "2021-01-20T05:30:00.000Z", "EndTime": "2021-01-20T07:30:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 11, "Subject": "Best Photography 2021", "Location": "London", "StartTime": "2021-01-21T04:00:00.000Z", "EndTime": "2021-01-21T05:30:00.000Z", "CategoryColor": "#00bdae" },
+    { "Id": 12, "Subject": "Smarter Puppies", "Location": "Sweden", "StartTime": "2021-01-08T04:30:00.000Z", "EndTime": "2021-01-08T06:00:00.000Z", "CategoryColor": "#f57f17" },
+    { "Id": 13, "Subject": "Myths of Andromeda Galaxy", "Location": "Space Center USA", "StartTime": "2021-01-06T05:00:00.000Z", "EndTime": "2021-01-06T07:00:00.000Z", "CategoryColor": "#1aaa55" },
+    { "Id": 14, "Subject": "Aliens vs Humans", "Location": "Research Center of USA", "StartTime": "2021-01-05T04:30:00.000Z", "EndTime": "2021-01-05T06:00:00.000Z", "CategoryColor": "#357cd2" },
+    { "Id": 15, "Subject": "Facts of Humming Birds", "Location": "California", "StartTime": "2021-01-19T04:00:00.000Z", "EndTime": "2021-01-19T05:30:00.000Z", "CategoryColor": "#7fa900" },
+    { "Id": 16, "Subject": "Sky Gazers", "Location": "Alaska", "StartTime": "2021-01-22T05:30:00.000Z", "EndTime": "2021-01-22T07:30:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 17, "Subject": "The Cycle of Seasons", "Location": "Research Center of USA", "StartTime": "2021-01-11T00:00:00.000Z", "EndTime": "2021-01-11T02:00:00.000Z", "CategoryColor": "#00bdae" },
+    { "Id": 18, "Subject": "Space Galaxies and Planets", "Location": "Space Center USA", "StartTime": "2021-01-11T11:30:00.000Z", "EndTime": "2021-01-11T13:00:00.000Z", "CategoryColor": "#f57f17" },
+    { "Id": 19, "Subject": "Lifecycle of Bumblebee", "Location": "San Fransisco", "StartTime": "2021-01-14T00:30:00.000Z", "EndTime": "2021-01-14T02:00:00.000Z", "CategoryColor": "#7fa900" },
+    { "Id": 20, "Subject": "Alien Civilization", "Location": "Space Center USA", "StartTime": "2021-01-14T10:30:00.000Z", "EndTime": "2021-01-14T12:30:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 21, "Subject": "Alien Civilization", "Location": "Space Center USA", "StartTime": "2021-01-10T08:30:00.000Z", "EndTime": "2021-01-10T10:30:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 22, "Subject": "The Cycle of Seasons", "Location": "Research Center of USA", "StartTime": "2021-01-12T09:00:00.000Z", "EndTime": "2021-01-12T10:30:00.000Z", "CategoryColor": "#00bdae" },
+    { "Id": 23, "Subject": "Sky Gazers", "Location": "Greenland", "StartTime": "2021-01-15T09:00:00.000Z", "EndTime": "2021-01-15T10:30:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 24, "Subject": "Facts of Humming Birds", "Location": "California", "StartTime": "2021-01-16T07:00:00.000Z", "EndTime": "2021-01-16T09:00:00.000Z", "CategoryColor": "#7fa900" }
+];
+
+const data = extend([], dataSource, undefined, true) as Record<string, any>[];
+
+const selectedDate = new Date(2021, 0, 10);
+
+const eventSettings = {
+  dataSource: data
+};
+
+const onDragStart = (args: DragEventArgs): void => {
+  if (args.navigation) {
+    args.navigation.enable = true;
+  }
+};
+
+provide('schedule', [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]);
+</script>
+
+<style scoped>
+.schedule-section {
+  padding: 50px;
+  margin: 0 auto;
+}
+</style>

package/src/templates/vue/SchedulerView.vue

@@ -0,0 +1,7 @@
+<template>
+  <Scheduler />
+</template>
+
+<script setup>
+import Scheduler from '../components/Scheduler.vue'
+</script>

package/src/templates/vue/SpreadsheetEditor.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="spreadsheet-container">
+    <ejs-spreadsheet
+      ref="spreadsheet"
+      :openUrl="openUrl"
+      :saveUrl="saveUrl"
+      @created="onCreated"
+    >
+      <e-sheets>
+        <e-sheet name="Car Sales Report">
+          <e-ranges>
+            <e-range :dataSource="defaultData"></e-range>
+          </e-ranges>
+
+          <e-rows>
+            <e-row :index="12">
+              <e-cells>
+                <e-cell
+                  :index="4"
+                  value="Total Amount:"
+                  :style="boldRight"
+                ></e-cell>
+
+                <e-cell
+                  formula="=SUM(F2:F12)"
+                  :style="bold"
+                ></e-cell>
+              </e-cells>
+            </e-row>
+          </e-rows>
+
+          <e-columns>
+            <e-column :width="180"></e-column>
+            <e-column :width="130"></e-column>
+            <e-column :width="130"></e-column>
+            <e-column :width="180"></e-column>
+            <e-column :width="130"></e-column>
+            <e-column :width="120"></e-column>
+          </e-columns>
+        </e-sheet>
+      </e-sheets>
+    </ejs-spreadsheet>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import {
+  SpreadsheetComponent as EjsSpreadsheet,
+  SheetsDirective as ESheets,
+  SheetDirective as ESheet,
+  RangesDirective as ERanges,
+  RangeDirective as ERange,
+  RowsDirective as ERows,
+  RowDirective as ERow,
+  CellsDirective as ECells,
+  CellDirective as ECell,
+  ColumnsDirective as EColumns,
+  ColumnDirective as EColumn
+} from '@syncfusion/ej2-vue-spreadsheet';
+
+const spreadsheet = ref(null);
+
+const openUrl = 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open';
+
+const saveUrl = 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save';
+
+const defaultData = ref([
+  { "Customer Name": "Romona Heaslip", "Model": "Taurus", "Color": "Aquamarine", "Payment Mode": "Debit Card", "Delivery Date": "07-11-2015", "Amount": "8529.22" },
+  { "Customer Name": "Clare Batterton", "Model": "Sparrow", "Color": "Pink", "Payment Mode": "Cash On Delivery", "Delivery Date": "07-13-2016", "Amount": "17866.19" },
+  { "Customer Name": "Eamon Traise", "Model": "Grand Cherokee", "Color": "Blue", "Payment Mode": "Net Banking", "Delivery Date": "09-04-2015", "Amount": "13853.09" },
+  { "Customer Name": "Julius Gorner", "Model": "GTO", "Color": "Aquamarine", "Payment Mode": "Credit Card", "Delivery Date": "12-15-2017", "Amount": "2338.74" },
+  { "Customer Name": "Jenna Schoolfield", "Model": "LX", "Color": "Yellow", "Payment Mode": "Credit Card", "Delivery Date": "10-08-2014", "Amount": "9578.45" },
+  { "Customer Name": "Marylynne Harring", "Model": "Catera", "Color": "Green", "Payment Mode": "Cash On Delivery", "Delivery Date": "07-01-2017", "Amount": "19141.62" },
+  { "Customer Name": "Vilhelmina Leipelt", "Model": "7 Series", "Color": "Goldenrod", "Payment Mode": "Credit Card", "Delivery Date": "12-20-2015", "Amount": "6543.30" },
+  { "Customer Name": "Barby Heisler", "Model": "Corvette", "Color": "Red", "Payment Mode": "Credit Card", "Delivery Date": "11-24-2014", "Amount": "13035.06" },
+  { "Customer Name": "Karyn Boik", "Model": "Regal", "Color": "Indigo", "Payment Mode": "Debit Card", "Delivery Date": "05-12-2014", "Amount": "18488.80" },
+  { "Customer Name": "Jeanette Pamplin", "Model": "S4", "Color": "Fuscia", "Payment Mode": "Net Banking", "Delivery Date": "12-30-2014", "Amount": "12317.04" },
+  { "Customer Name": "Cristi Espinos", "Model": "TL", "Color": "Aquamarine", "Payment Mode": "Credit Card", "Delivery Date": "12-18-2013", "Amount": "6230.13" }
+]);
+
+const boldRight = {
+  fontWeight: 'bold',
+  textAlign: 'right'
+};
+
+const bold = {
+  fontWeight: 'bold'
+};
+
+const onCreated = () => {
+  const spreadsheetObj = spreadsheet.value?.ej2Instances;
+
+  if (spreadsheetObj) {
+    spreadsheetObj.cellFormat(
+      {
+        fontWeight: 'bold',
+        textAlign: 'center',
+        verticalAlign: 'middle'
+      },
+      'A1:F1'
+    );
+
+    spreadsheetObj.numberFormat('$#,##0.00', 'F2:F12');
+    spreadsheetObj.numberFormat('m/d/yyyy', 'E2:E12');
+  }
+};
+</script>
+
+<style scoped>
+.spreadsheet-container {
+  padding: 50px;
+  margin: 0 auto;
+}
+</style>

package/src/templates/vue/SpreadsheetEditorView.vue

@@ -0,0 +1,7 @@
+<template>
+  <SpreadsheetEditor />
+</template>
+
+<script setup>
+import SpreadsheetEditor from '../components/SpreadsheetEditor.vue'
+</script>