Cashflow Calendar

The following sample shows how you can use the SpreadJS spreadsheet to create a Cashflow Calendar for your JavaScript applications. The Cash-Flow sheet displays the calendar summary in each cell using the cell template defined on the Cell Template sheet. The Data sheet contains our sample data for year 2020.

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>