The demo make extensive use of the following powerful SpreadJS features:
SEQUENCE/FILTER to return multiple results to a range of cells based on one formula.
RANGEBLOCKSPARKLINE to allow you to define a multiple-row/column template and apply that custom template to a cell.
It also uses Conditional Formatting to color the cash shortfalls days (negative ending balance) with RED, the days with a positive ending balance with GREEN, and the neutral ones with BLACK.
Furthermore, it uses CellClick Event to extract the list of all the transactions that have happened when the user selects a date from the calendar.
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 5 });
initSpread(spread);
};
function initSpread(spread) {
if (!spread) {
return;
}
spread.fromJSON(cashflow_calendar);
var cashflowSheet = spread.getSheetFromName("Cash-Flow");
// on day selection, update a cell used in filtering the data to show detailed transaction list
cashflowSheet.bind(GC.Spread.Sheets.Events.SelectionChanged, function (sender, args) {
const sheet = args.sheet;
const row = args.newSelections[0].row;
const col = args.newSelections[0].col;
if ((row < 3 || row >= 3 + 6)
|| (col < 1 || col >= 1 + 7))
return;
// set the current date cell so that FILTER would update.
sheet.setValue(10, 1, sheet.getValue(row, col));
});
}
<!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/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/cashflow_calendar.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" style="width:100%;height:100%"></div>
</div>
</body>
</html>
