Overview

GanttSheet can use different calendars, and you can configure the settings of each. Try changing the options in the demo below to configure the calendar.

Built-in Calendars There are 3 built-in calendars that can be applied to a GanttSheet: standard (8:00 to 17:00, Monday to Friday) hours24(24 hours a day, seven days a week) nightShift (starts at 11:00 p.m. on Monday and ends at 4:00 a.m. on Saturday, from 11:00 p.m. to 8:00 a.m. the next day) Calendar Settings Calendar Settings define some properties mainly for calculation duration. Week Start - The first day of the week, the default value is Sunday. Default Start/End Time - Daily work start/end time, default start time is 8:00 am and end time is 5:00 pm. Hours per day - The length of hours in a work day, the default value is 8 hours. Hours per week - The length of the work week, the default value is 40 hours. Days per month - The length of the work month, the default value is 20 days. Duration Unit - The unit of measurement for working hours, the default is days. Default duration decimal digits - The Time precision reserved for calculation, default length is 3.
/*REPLACE_MARKER*/ /*DO NOT DELETE THESE COMMENTS*/ import { Component, NgModule, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { SpreadSheetsModule } from '@mescius/spread-sheets-angular'; import GC from '@mescius/spread-sheets'; import "@mescius/spread-sheets-tablesheet"; import "@mescius/spread-sheets-ganttsheet"; import './styles.css'; declare var SplitView: any; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { spread: GC.Spread.Sheets.Workbook; ganttSheet: GC.Spread.Sheets.GanttSheet; hostStyle = { width: '100%', height: '100%' }; initSpread($event: any) { this.spread = $event.spread; let spread = this.spread; spread.suspendPaint(); spread.clearSheets(); this.initDataSource(spread); this.initGanttSheet(spread); spread.resumePaint(); initSplitView(spread); } initDataSource(spread) { var tableName = "Gantt_Id"; var baseApiUrl = getBaseApiUrl(); var apiUrl = baseApiUrl + "/" + tableName; var dataManager = spread.dataManager(); var myTable = dataManager.addTable("myTable", { batch: true, remote: { read: { url: apiUrl } }, schema: { hierarchy: { type: "Parent", column: "parentId" }, columns: { id: { isPrimaryKey: true }, taskNumber: { dataType: "rowOrder" } } } }); this.myTable = myTable; } initGanttSheet(spread) { var ganttSheet = spread.addSheetTab(0, "GanttSheet", GC.Spread.Sheets.SheetType.ganttSheet); var view = this.myTable.addView("ganttView", [ { value: "taskNumber", caption: "NO.", width: 60 }, { value: "name", caption: "Task Name", width: 200 }, { value: "duration", caption: "Duration", width: 90 }, { value: "predecessors", caption: "Predecessors", width: 120, visible: false } ]); view.fetch().then(function() { ganttSheet.bindGanttView(view); }); this.ganttSheet = ganttSheet; } onCurrentCalendarChanged() { var currentCalendarItem = document.getElementById("current-calendar"); var calendarType = currentCalendarItem.value; var calendar = GC.Spread.Sheets.GanttSheet.Calendar[calendarType]; this.ganttSheet.project.calendar = calendar; } updateSettings() { var ganttSheet = this.ganttSheet; var startDayItem = document.getElementById("start-day"); var defaultStartTimeItem = document.getElementById("default-start-time"); var defaultFinishTimeItem = document.getElementById("default-finish-time"); var hoursPerDayItem = document.getElementById("hours-per-day"); var hoursPerWeekItem = document.getElementById("hours-per-week"); var daysPerMonthItem = document.getElementById("days-per-month"); var durationUnitItem = document.getElementById("duration-unit"); var decimalDigitsItem = document.getElementById("decimal-digits"); var startDay = Number(startDayItem.value); var defaultStartTime = defaultStartTimeItem.value; var defaultFinishTime = defaultFinishTimeItem.value; var hoursPerDay = Number(hoursPerDayItem.value); var hoursPerWeek = Number(hoursPerWeekItem.value); var daysPerMonth = Number(daysPerMonthItem.value); var durationUnit = durationUnitItem.value; var decimalDigits = Number(decimalDigitsItem.value); var project = ganttSheet.project; ganttSheet.suspendPaint(); project.suspendSchedule(); project.calendarSettings.weekStartOn = startDay; var startTime = defaultStartTime.split(":"); project.calendarSettings.defaultStartTime = { hour: Number(startTime[0]), minute: Number(startTime[1]) }; var finishTime = defaultFinishTime.split(":"); project.calendarSettings.defaultFinishTime = { hour: Number(finishTime[0]), minute: Number(finishTime[1]) }; project.calendarSettings.hoursPerDay = hoursPerDay; project.calendarSettings.hoursPerWeek = hoursPerWeek; project.calendarSettings.daysPerMonth = daysPerMonth; project.calendarSettings.defaultDurationUnit = durationUnit; project.calendarSettings.defaultDurationDecimalDigits = decimalDigits; project.resumeSchedule(); ganttSheet.resumePaint(); } } function initSplitView(spread) { var host = document.getElementById("split-view"); var content = host.getElementsByClassName("split-content")[0]; var panel = host.getElementsByClassName("split-panel")[0]; new SplitView({ host: host, content: content, panel: panel, refreshContent: function() { spread.refresh(); } }); } function getBaseApiUrl() { return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api'; } @NgModule({ imports: [BrowserModule, SpreadSheetsModule], declarations: [AppComponent], exports: [AppComponent], bootstrap: [AppComponent] }) export class AppModule {} enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule);
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/spread/source/splitView/splitView.css"> <!-- Polyfills --> <script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script> <script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script> <!-- SystemJS --> <script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <!-- plugins --> <script src="$DEMOROOT$/spread/source/splitView/SplitView.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.import('@angular/compiler'); System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('$DEMOROOT$/en/lib/angular/license.ts'); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html>
<div id="split-view" class="sample-tutorial"> <gc-spread-sheets class="sample-spreadsheets split-content" [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)"></gc-spread-sheets> <div class="options-container split-panel"> <div class="option-block"> <div class="option-row option-title"> Config the calendar. </div> <div class="option-row selection-box"> <label for="current-calendar">Current Calendar</label> <select id="current-calendar" (change)="onCurrentCalendarChanged()"> <option value="standard" selected="selected">Standard</option> <option value="hours24">24 Hours</option> <option value="nightShift">Night Shift</option> </select> </div> </div> <div class="option-block"> <div class="option-row selection-box"> <label for="start-day">Week Starts On</label> <select id="start-day"> <option value="0" selected="selected">Sunday</option> <option value="1">Monday</option> <option value="2">Tuesday</option> <option value="3">Wednesday</option> <option value="4">Thursday</option> <option value="5">Friday</option> <option value="6">Saturday</option> </select> </div> <div class="option-row input-box"> <label for="default-start-time">Default Start Time</label> <input type="text" id="default-start-time" value="8:00" /> <div class="option-info valid">* valid value: 24HR, format 8:00</div> </div> <div class="option-row input-box"> <label for="default-finish-time">Default Finish Time</label> <input type="text" id="default-finish-time" value="17:00" /> <div class="option-info valid">* valid value: 24HR, format 17:00</div> </div> <div class="option-row input-box"> <label for="hours-per-day">Hours Per Day</label> <input type="text" id="hours-per-day" value="8" /> <div class="option-info valid">* valid value: number</div> </div> <div class="option-row input-box"> <label for="hours-per-week">Hours Per Week</label> <input type="text" id="hours-per-week" value="40" /> <div class="option-info valid">* valid value: number</div> </div> <div class="option-row input-box"> <label for="days-per-month">Days Per Month</label> <input type="text" id="days-per-month" value="20" /> <div class="option-info valid">* valid value: number</div> </div> <div class="option-row selection-box"> <label for="duration-unit">Duration Unit</label> <select id="duration-unit"> <option value="Month">Month</option> <option value="Week">Week</option> <option value="Day" selected>Day</option> <option value="Hour">Hour</option> <option value="Minute">Minute</option> </select> </div> <div class="option-row input-box"> <label for="decimal-digits">Duration Decimal Digits</label> <input type="text" id="decimal-digits" value="3" /> <div class="option-info valid">* valid value: number</div> </div> <div class="option-row"> <input type="button" id="update-settings" class="option-button" value="Update Settings" (click)="updateSettings()" /> </div> </div> </div> </div>
.option-block { background: #fff; padding: 8px; margin: 12px 0; border-radius: 4px; border: 1px dashed #82bc00; box-shadow: 0px 0 6px 0 rgba(0,0,0,0.1); } .option-block.toggle { border: 1px dotted #f7a711; } .option-row { font-size: 14px; box-sizing: border-box; padding: 4px 0; } .option-title { font-weight: bold; color: #656565; } .option-info { font-size: 12px; color: #919191; margin-top: 6px; font-weight: normal; } .option-info.valid { color: #82bc00; } .option-info.toggle { color: #f7a711; } .option-button { width: 100%; padding: 0; line-height: 20px; background: #82bc00; color: #fff; transition: 0.3s; cursor: pointer; outline: none; border-radius: 4px; box-sizing: border-box; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3); border: none; } .option-button:hover { background: #82bc00; color: #fff; box-shadow: 0 3px 8px 0 rgba(0,0,0,0.4); } .option-checkbox { background: #fff; border: 1px dashed #f7a711; color: #f7a711; padding: 2px 4px; transition: 0.3s; box-sizing: border-box; cursor: pointer; } .option-checkbox.active { color: #fff; background: #f7a711; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3); border-radius: 4px; } .selection-box { position: relative; } .selection-box > select { text-align: left; width: 100%; height: 20px; padding: 0; line-height: 20px; background: transparent; border: none; border-bottom: 2px solid #656565; color: #656565; transition: 0.3s; cursor: pointer; outline: none; box-sizing: border-box; } .selection-box > select > option { background: white; } .selection-box > select:focus { border-bottom: 2px solid #82bc00; color: #82bc00; box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3); } .selection-box > label { position: absolute; cursor: pointer; font-size: 12px; color: #fff; background: #656565; padding: 0 4px; right: 0; top: 6px; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3); } .input-box { position: relative; } .input-box > input[type=text] { width: 100%; background: transparent; border: none; color: #656565; border-bottom: 2px solid #656565; outline: none; box-sizing: border-box; transition: 0.3s; } .input-box > input[type=text]:focus { color: #82bc00; border-bottom: 2px solid #82bc00; } .input-box > label { cursor: pointer; position: absolute; right: 0; top: 5px; font-size: 12px; color: #fff; background: #656565; padding: 0 4px; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3); }
(function (global) { System.config({ transpiler: 'ts', typescriptOptions: { tsconfig: true }, meta: { 'typescript': { "exports": "ts" }, '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'core-js': 'npm:core-js/client/shim.min.js', 'zone': 'npm:zone.js/fesm2015/zone.min.js', 'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js', '@angular/core': 'npm:@angular/core/fesm2022', '@angular/common': 'npm:@angular/common/fesm2022/common.mjs', '@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs', '@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs', '@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs', '@angular/router': 'npm:@angular/router/fesm2022/router.mjs', '@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs', 'jszip': 'npm:jszip/dist/jszip.min.js', 'typescript': 'npm:typescript/lib/typescript.js', 'ts': './plugin.js', 'tslib':'npm:tslib/tslib.js', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js', '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-tablesheet': 'npm:@mescius/spread-sheets-tablesheet/index.js', '@mescius/spread-sheets-ganttsheet': 'npm:@mescius/spread-sheets-ganttsheet/index.js', '@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'ts' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, "node_modules/@angular": { defaultExtension: 'mjs' }, "@mescius/spread-sheets-angular": { defaultExtension: 'mjs' }, '@angular/core': { defaultExtension: 'mjs', main: 'core.mjs' } } }); })(this);