From 6c41c14f6539a96c5ef88584b34757de29a3b809 Mon Sep 17 00:00:00 2001
From: Ray <sympatheticfire@gmail.com>
Date: Sun, 26 Apr 2026 20:20:27 +0100
Subject: [PATCH] Nightly

---
 demo-test.html => demo.html                |  71 +--
 package.json                               |   7 +-
 src/references/canvas-container.js         | 229 ++++++++
 src/references/canvas.js                   | 446 ++++++++++++++
 src/references/extensions.dist.js          |   6 +
 src/timeline/background-canvas.js          | 243 ++++++++
 src/timeline/timeline-background-canvas.js |   6 +-
 src/timeline/timeline-event-items.js       |  10 +
 src/timeline/timeline-events.js            |  16 +
 src/timeline/timeline-options.js           |  89 +++
 src/timeline/timeline.js                   | 653 ++++++++++++---------
 src/timeline/timeline.scss                 |  19 +
 webpack.config.js                          |  14 +-
 13 files changed, 1484 insertions(+), 325 deletions(-)
 rename demo-test.html => demo.html (87%)
 create mode 100644 src/references/canvas-container.js
 create mode 100644 src/references/canvas.js
 create mode 100644 src/references/extensions.dist.js
 create mode 100644 src/timeline/background-canvas.js
 create mode 100644 src/timeline/timeline-event-items.js
 create mode 100644 src/timeline/timeline-events.js
 create mode 100644 src/timeline/timeline-options.js
 create mode 100644 src/timeline/timeline.scss

diff --git a/demo-test.html b/demo.html
similarity index 87%
rename from demo-test.html
rename to demo.html
index 39d733c..2576c6e 100644
--- a/demo-test.html
+++ b/demo.html
@@ -10,15 +10,7 @@
   <!-- <script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
   <!-- <link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
 
-  <script src="dist//timeline.min.js"></script>
-
-  <!-- <script src="bbtimeline.js"></script> -->
-  <!-- <script src="bbtimeline-canvas.js"></script> -->
-  <!-- <script src="bbtimeline-background-canvas.js"></script> -->
-  <!-- <script src="bbtimeline-flourish-canvas.js"></script> -->
-  <!-- <script src="bbtimeline-foreground-canvas.js"></script> -->
-
-  <!-- <script src="bbtimeline.min.js"></script> -->
+  <script src="dist/timeline.dist.js"></script>
 
   <title></title>
 </head>
@@ -134,46 +126,47 @@ textarea {
 
 
 #myCanvas {
-  border-style: solid;
+  /* border-style: solid;
   border-width: 1px;
-  border-color: #000000;
+  border-color: #000000; */
   width: 100%;
   height: 300px;
-  padding: 0;
-  margin: 0;
+  /* padding: 0; */
+  /* margin: 0; */
 }
 
+
   </style>
 
   <script>
 
-var timeline1 = new LiteRyzJS.Timeline("myCanvas");
-timeline1.OnMouseDown = function(sender, e, event) {
-  LogInfo("");
-  LogInfo("OnMouseDown");
-  LogInfo(JSON.stringify(sender));
-  LogInfo(JSON.stringify(e));
-  LogInfo(JSON.stringify(event));
-  LogInfo("");
-}
-timeline1.OnClick = function(sender, e, event) {
-  LogInfo("");
-  LogInfo("OnClick");
-  LogInfo(JSON.stringify(sender));
-  LogInfo(JSON.stringify(e));
-  LogInfo(JSON.stringify(event));
-  LogInfo("");
-}
-timeline1.OnDblClick = function(sender, e, event) {
-  LogInfo("");
-  LogInfo("OnDblClick");
-  LogInfo(JSON.stringify(sender));
-  LogInfo(JSON.stringify(e));
-  LogInfo(JSON.stringify(event));
-  LogInfo("");
-}
+var timeline1 = new LiteRyzJS.Timeline(document.getElementById("myCanvas"), {});
+// timeline1.OnMouseDown = function(sender, e, event) {
+//   LogInfo("");
+//   LogInfo("OnMouseDown");
+//   LogInfo(JSON.stringify(sender));
+//   LogInfo(JSON.stringify(e));
+//   LogInfo(JSON.stringify(event));
+//   LogInfo("");
+// }
+// timeline1.OnClick = function(sender, e, event) {
+//   LogInfo("");
+//   LogInfo("OnClick");
+//   LogInfo(JSON.stringify(sender));
+//   LogInfo(JSON.stringify(e));
+//   LogInfo(JSON.stringify(event));
+//   LogInfo("");
+// }
+// timeline1.OnDblClick = function(sender, e, event) {
+//   LogInfo("");
+//   LogInfo("OnDblClick");
+//   LogInfo(JSON.stringify(sender));
+//   LogInfo(JSON.stringify(e));
+//   LogInfo(JSON.stringify(event));
+//   LogInfo("");
+// }
 
-SetToday();
+// SetToday();
 
 
 
diff --git a/package.json b/package.json
index 4abe6c5..7163bd6 100644
--- a/package.json
+++ b/package.json
@@ -2,10 +2,15 @@
   "name": "LiteRyzJS/Timeline",
   "version": "0.2.0.121",
   "devDependencies": {
+    "css-loader": "^7.1.2",
+    "sass": "^1.77.8",
+    "sass-loader": "^16.0.0",
+    "style-loader": "^4.0.0",
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4"
   },
   "scripts": {
-    "build": "webpack"
+    "build": "webpack",
+    "watch": "webpack --watch"
   }
 }
\ No newline at end of file
diff --git a/src/references/canvas-container.js b/src/references/canvas-container.js
new file mode 100644
index 0000000..f8133dd
--- /dev/null
+++ b/src/references/canvas-container.js
@@ -0,0 +1,229 @@
+class CanvasContainer {
+
+  constructor(el) {
+    const a = this;
+
+    a.el = el;
+
+    a.Layer = [];
+    a.BorderWidth = 2;
+    a.ScrollbarWidth = 11;
+    a.Padding = {
+      Top: 0,
+      Right: 0,
+      Bottom: 0,
+      Left: 0
+    };
+    a.EnableDock = true;
+
+    a.#initialiseComponents();
+  }
+
+  #initialiseComponents() {
+    const a = this;
+
+    a.ClearLayers();
+
+    // a.Invalidate();
+    // a.Clear();
+  }
+
+
+  get FlowContainer() {
+    return this.el.getElementsByTagName("div")[0];
+  }
+
+  get Height() {
+    const a = this;
+
+    if (a.Layer.length <= 0) {
+      return 0;
+    }
+
+    return Document.getHeight(a.Layer[0].el);
+  }
+
+  set Height(value) {
+    const a = this;
+
+    // if (a.el != null) {
+    //   a.el.style.height = value + "px";
+    // }
+
+    if (a.FlowContainer != null) {
+      a.FlowContainer.style.height = value + "px";
+    }
+
+    // if (a.CanvasContainer != null) {
+    //   a.CanvasContainer.style.height = value + "px";
+    // }
+
+    // if (a.CanvasContext != null) {
+    //   a.CanvasContext.canvas.height = value;
+    // }
+
+    a.Layer.forEach((e, i) => {
+      e.Height = value;
+    });
+  }
+
+  get Width() {
+    const a = this;
+
+    if (a.Layer.length <= 0) {
+      return 0;
+    }
+
+    return Document.getWidth(a.Layer[0].el);
+  }
+
+  set Width(value) {
+    const a = this;
+
+    // if (a.el != null) {
+    //   a.el.style.width = value + "px";
+    // }
+
+    if (a.FlowContainer != null) {
+      a.FlowContainer.style.width = value + "px";
+    }
+
+    // if (a.CanvasContainer != null) {
+    //   a.CanvasContainer.style.width = value + "px";
+    // }
+
+    // if (a.CanvasContext != null) {
+    //   a.CanvasContext.canvas.width = value;
+    // }
+
+    a.Layer.forEach((e, i) => {
+      e.Width = value;
+    });
+  }
+
+  get Size() {
+    return {
+      W: this.Width,
+      H: this.Height
+    };
+  }
+
+  set Size(value) {
+    this.Width = value.W;
+    this.Height = value.H;
+  }
+
+  get ClientRectangle() {
+    const a = this;
+
+    return {
+      X: a.Padding.Left,
+      Y: a.Padding.Top,
+      W: (a.Width - (a.Padding.Left + a.Padding.Right)),
+      H: (a.Height - (a.Padding.Top + a.Padding.Bottom))
+    };
+  }
+
+  get Rectangle() {
+    const a = this;
+
+    return {
+      X: 0,
+      Y: 0,
+      W: a.Width,
+      H: a.Height
+    };
+  }
+
+
+  Clear() {
+    const a = this;
+
+    // if (a.CanvasContext == null) {
+    //   return;
+    // }
+
+    // a.CanvasContext.clearRect(0, 0, a.CanvasContext.canvas.width, a.CanvasContext.canvas.height);
+
+    a.Layer.forEach((e, i) => {
+      e.Clear();
+    });
+  }
+
+  ClearLayers() {
+    const a = this;
+
+    if (a.el != null) {
+      a.el.innerHTML = "<div class='border'></div>";
+    }
+
+    a.Layer = [];
+
+    a.Invalidate();
+  }
+
+  AddLayer() {
+    const a = this;
+
+    if (a.el == null) {
+      return;
+    }
+
+    const divList = a.el.getElementsByTagName("div");
+    if (divList.length <= 0) {
+      return;
+    }
+
+    // Add another canvas element
+    Document.appendHtml(divList[0], "canvas");
+
+    const canvasList = a.el.getElementsByTagName("canvas");
+    const result = canvasList[(canvasList.length - 1)];
+
+    return result;
+  }
+
+  Invalidate() {
+    const a = this;
+
+    if (a.EnableDock) {
+      a.FlowContainer.style.width = "100%";
+    }
+
+    const w = (a.Layer.length <= 0 ? 0 : Document.getWidth(a.Layer[0].el));
+    const h = (a.Layer.length <= 0 ? 0 : Document.getHeight(a.Layer[0].el));
+
+    if (w > (Document.getWidth(a.FlowContainer) + (a.BorderWidth * 2))) {
+      a.FlowContainer.classList.add("scroll-x");
+      a.FlowContainer.style.height = (h + a.ScrollbarWidth) + "px";
+    } else {
+      a.FlowContainer.classList.remove("scroll-x");
+      a.FlowContainer.style.height = h + "px";
+    }
+
+    a.Layer.forEach(e => {
+      if (typeof(e.Invalidate) != "undefined") {
+        e.Invalidate();
+      }
+    });
+
+    let offsetTop = 0;
+
+    a.Layer.forEach((e, i) => {
+      if (i <= 0) {
+        return;
+      }
+
+      // Correct positon because of position-relative to keep container overflow working
+      const h = Document.getHeight(a.Layer[(i - 1)].el);
+
+      offsetTop += h;
+
+      a.Layer[i].el.style.top = "-" + offsetTop + "px";
+    });
+  }
+
+}
+
+
+export default CanvasContainer;
\ No newline at end of file
diff --git a/src/references/canvas.js b/src/references/canvas.js
new file mode 100644
index 0000000..96def09
--- /dev/null
+++ b/src/references/canvas.js
@@ -0,0 +1,446 @@
+class Canvas {
+  constructor(el) {
+    const a = this;
+
+    a.el = el;
+
+    a.BorderWidth = 2;
+
+    a.#initialiseComponents();
+  }
+
+  #initialiseComponents() {
+    const a = this;
+
+    if (a.el == null) {
+      return;
+    }
+
+    a.Clear();
+    a.Invalidate();
+  }
+
+
+  get CanvasContext() {
+    return this.el.getContext("2d");
+  }
+
+  get Height() {
+    const a = this;
+
+    if (a.el == null) {
+      return 0;
+    }
+
+    return Document.getHeight(a.el);
+  }
+
+  set Height(value) {
+    const a = this;
+
+    if (a.el != null) {
+      a.el.style.height = value + "px";
+    }
+
+    if (a.CanvasContext != null) {
+      a.CanvasContext.canvas.height = value;
+    }
+  }
+
+  get Width() {
+    const a = this;
+
+    if (a.el == null) {
+      return 0;
+    }
+
+    return Document.getWidth(a.el);
+  }
+
+  set Width(value) {
+    const a = this;
+
+    if (a.el != null) {
+      a.el.style.width = value + "px";
+    }
+
+    if (a.CanvasContext != null) {
+      a.CanvasContext.canvas.width = value;
+    }
+  }
+
+  get Size() {
+    return {
+      W: this.Width,
+      H: this.Height
+    };
+  }
+
+  set Size(value) {
+    this.Width = value.W;
+    this.Height = value.H;
+  }
+
+  get Rectangle() {
+    const a = this;
+
+    return {
+      X: 0,
+      Y: 0,
+      W: a.Width,
+      H: a.Height
+    };
+  }
+
+
+  Clear() {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    a.CanvasContext.clearRect(0, 0, a.CanvasContext.canvas.width, a.CanvasContext.canvas.height);
+  }
+
+  DrawArrowS(rectangle, penColour, options) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    const opt = Object.assign({
+      LineWidth: 1,
+      LineDash: [],
+      FillColour: null
+    }, options);
+
+    // Adjust for pen discrepancy
+    rectangle.X += 0.5;
+    rectangle.Y += 0.5;
+    rectangle.W -= opt.LineWidth;
+    rectangle.H -= opt.LineWidth;
+
+    a.CanvasContext.beginPath();
+    a.CanvasContext.strokeStyle = penColour;
+    a.CanvasContext.lineWidth = opt.LineWidth;
+    a.CanvasContext.setLineDash(opt.LineDash);
+
+    a.CanvasContext.moveTo(rectangle.X, rectangle.Y);
+    a.CanvasContext.lineTo((rectangle.X + rectangle.W), rectangle.Y);
+    a.CanvasContext.lineTo((rectangle.X + Math.half(rectangle.W)), (rectangle.Y + rectangle.H));
+
+    a.CanvasContext.closePath();
+
+    if (opt.FillColour != null) {
+      a.CanvasContext.fillStyle = opt.FillColour;
+      a.CanvasContext.fill();
+    }
+
+    a.CanvasContext.stroke();
+  }
+
+  DrawCircle(x, y, width, penColour, options) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    const opt = Object.assign({
+      LineWidth: 1,
+      LineDash: [],
+      FillColour: null
+    }, options);
+
+    let rectangle = {
+      X: x + Math.half(width),
+      Y: y + Math.half(width),
+      W: Math.half(width),
+      H: Math.half(width)
+    };
+
+    // Adjust for pen discrepancy
+    rectangle.X += 0.5;
+    rectangle.Y += 0.5;
+    rectangle.W -= Math.half(opt.LineWidth);
+    rectangle.H -= Math.half(opt.LineWidth);
+
+    a.CanvasContext.beginPath();
+    a.CanvasContext.strokeStyle = penColour;
+    a.CanvasContext.lineWidth = opt.LineWidth;
+    a.CanvasContext.setLineDash(opt.LineDash);
+
+    a.CanvasContext.arc(rectangle.X, rectangle.Y, rectangle.W, 0, 2 * Math.PI, false);
+
+    a.CanvasContext.closePath();
+
+    if (opt.FillColour != null) {
+      a.CanvasContext.fillStyle = opt.FillColour;
+      a.CanvasContext.fill();
+    }
+
+    a.CanvasContext.stroke();
+  }
+
+  DrawDiamond(rectangle, penColour, options) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    const opt = Object.assign({
+      LineWidth: 1,
+      LineDash: [],
+      FillColour: null
+    }, options);
+
+    // Adjust for pen discrepancy
+    rectangle.X += 0.5;
+    rectangle.Y += 0.5;
+    rectangle.W -= opt.LineWidth;
+    rectangle.H -= opt.LineWidth;
+
+    a.CanvasContext.beginPath();
+    a.CanvasContext.strokeStyle = penColour;
+    a.CanvasContext.lineWidth = opt.LineWidth;
+    a.CanvasContext.setLineDash(opt.LineDash);
+
+    a.CanvasContext.moveTo((rectangle.X + Math.half(rectangle.W)), rectangle.Y);
+    a.CanvasContext.lineTo((rectangle.X + rectangle.W), (rectangle.Y + Math.half(rectangle.H)));
+    a.CanvasContext.lineTo((rectangle.X + Math.half(rectangle.W)), (rectangle.Y + rectangle.H));
+    a.CanvasContext.lineTo(rectangle.X, (rectangle.Y + Math.half(rectangle.H)));
+
+    a.CanvasContext.closePath();
+
+    if (opt.FillColour != null) {
+      a.CanvasContext.fillStyle = opt.FillColour;
+      a.CanvasContext.fill();
+    }
+
+    a.CanvasContext.stroke();
+  }
+
+  DrawRectangle(rectangle, penColour, options) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    const opt = Object.assign({
+      LineWidth: 1,
+      LineDash: [],
+      FillColour: null
+    }, options);
+
+    // Adjust for pen discrepancy
+    rectangle.X += 0.5;
+    rectangle.Y += 0.5;
+    rectangle.W -= opt.LineWidth;
+    rectangle.H -= opt.LineWidth;
+
+    a.CanvasContext.beginPath();
+    a.CanvasContext.strokeStyle = penColour;
+    a.CanvasContext.lineWidth = opt.LineWidth;
+    a.CanvasContext.setLineDash(opt.LineDash);
+    a.CanvasContext.rect(rectangle.X, rectangle.Y, rectangle.W, rectangle.H);
+
+    if (opt.FillColour != null) {
+      a.CanvasContext.fillStyle = opt.FillColour;
+      a.CanvasContext.fill();
+    }
+
+    a.CanvasContext.closePath();
+    a.CanvasContext.stroke();
+  }
+
+  DrawLine(startX, startY, finishX, finishY, penColour, options) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    const opt = Object.assign({
+      LineWidth: 1,
+      LineDash: []
+    }, options);
+
+    startY -= 0.5;
+    // y -= penWidth;
+
+    a.CanvasContext.beginPath();
+    a.CanvasContext.strokeStyle = penColour;
+    a.CanvasContext.lineWidth = opt.LineWidth;
+    a.CanvasContext.setLineDash(opt.LineDash);
+    a.CanvasContext.moveTo(startX, startY);
+    a.CanvasContext.lineTo(finishX, finishY);
+    a.CanvasContext.stroke();
+  }
+
+  DrawLines(points, penColour, options) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    if (points == null) {
+      return;
+    }
+
+    if (points.length <= 0) {
+      return;
+    }
+
+    const opt = Object.assign({
+      LineWidth: 1,
+      LineDash: []
+    }, options);
+
+    a.CanvasContext.beginPath();
+    a.CanvasContext.strokeStyle = penColour;
+    a.CanvasContext.lineWidth = opt.LineWidth;
+    a.CanvasContext.setLineDash(opt.LineDash);
+
+    a.CanvasContext.moveTo(points[0].X, points[0].Y);
+
+    for (let i=1; i<points.length; i++) {
+      a.CanvasContext.lineTo(points[i].X, points[i].Y);
+    }
+
+    a.CanvasContext.stroke();
+  }
+
+  DrawHorizontalLine(x, y, width, penColour, options) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    const opt = Object.assign({
+      LineWidth: 1,
+      LineDash: []
+    }, options);
+
+    y -= 0.5;
+    // y -= penWidth;
+
+    a.CanvasContext.beginPath();
+    a.CanvasContext.strokeStyle = penColour;
+    a.CanvasContext.lineWidth = opt.LineWidth;
+    a.CanvasContext.setLineDash(opt.LineDash);
+    a.CanvasContext.moveTo(x, y);
+    a.CanvasContext.lineTo((x + width), y);
+    a.CanvasContext.stroke();
+  }
+
+  DrawText(x, y, text, font, foreColour, options) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    const opt = Object.assign({
+      Align: "left"
+    }, options);
+
+    a.CanvasContext.font = font;
+    a.CanvasContext.fillStyle = foreColour;
+    a.CanvasContext.textAlign = opt.Align;
+    a.CanvasContext.textBaseline = "top";
+
+    a.CanvasContext.fillText(text, x, y);
+  }
+
+  DrawVerticalLine(x, y, height, penColour, options) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    const opt = Object.assign({
+      LineWidth: 1,
+      LineDash: [],
+      Precise: false
+    }, options);
+
+    if (!opt.Precise) {
+      x -= 0.5;
+      y -= opt.LineWidth;
+    }
+
+    a.CanvasContext.beginPath();
+    a.CanvasContext.strokeStyle = penColour;
+    a.CanvasContext.lineWidth = opt.LineWidth;
+     a.CanvasContext.setLineDash(opt.LineDash);
+    a.CanvasContext.moveTo(x, y);
+    a.CanvasContext.lineTo(x, (y + height));
+    a.CanvasContext.stroke();
+  }
+
+  FillText(rectangle, text, font, foreColour, options) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    const opt = Object.assign({
+      Align: "center",
+      VAlign: "middle"
+    }, options);
+
+    a.CanvasContext.font = font;
+    a.CanvasContext.fillStyle = foreColour;
+    a.CanvasContext.textAlign = opt.Align;
+    // a._ctx.textBaseline = verticalAlign;
+    a.CanvasContext.textBaseline = "top";
+
+    const size = a.CanvasContext.measureText(text);
+    const x = rectangle.X + Math.half(rectangle.W);
+    let y = rectangle.Y;
+
+    switch (opt.VAlign) {
+      case "center":
+      case "middle":
+        y += Math.half((rectangle.H - size.fontBoundingBoxDescent)) + size.fontBoundingBoxAscent;
+        break;
+      case "bottom":
+        y += (rectangle.H - size.fontBoundingBoxDescent);
+        break;
+      case "top":
+      default:
+        break;
+    }
+
+    a.CanvasContext.fillText(text, x, y);
+  }
+
+  MeasureText(font, value) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return null;
+    }
+
+    a.CanvasContext.font = font;
+
+    const size = a.CanvasContext.measureText(value);
+
+    return {
+      W: size.width,
+      H: Math.round(size.fontBoundingBoxDescent + size.fontBoundingBoxAscent)
+    };
+  }
+
+}
+
+
+export default Canvas;
\ No newline at end of file
diff --git a/src/references/extensions.dist.js b/src/references/extensions.dist.js
new file mode 100644
index 0000000..fcc14b6
--- /dev/null
+++ b/src/references/extensions.dist.js
@@ -0,0 +1,6 @@
+/*!
+  * Part of LiteRyzJS v0.1.0.397
+  * Copyright 2023-2024 Ray Lam (https://www.hiimray.co.uk)
+  *
+  */
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.LiteRyzJS=e():t.LiteRyzJS=e()}(this,(()=>(()=>{var t={814:()=>{Array.isEmpty=function(t){return"array"!=Object.getDataType(t)||t.length<=0},Array.toFlatten=function(t,e,r){for(let n=0;n<t.length;n++)r.push(t[n]),null!=typeof t[n][e]&&t[n][e].length>0&&Array.toFlatten(t[n][e],e,r)},Array.prototype.addRange=function(t){return null==t||t.forEach((t=>{this.push(t)})),this},Array.prototype.all=function(t,e){for(let r=0;r<this.length;r++)if(null==t){if(this[r]!=e)return!1}else if(void 0!==this[r][t]&&this[r][t]!=e)return!1;return!0},Array.prototype.any=function(t,e){for(let r=0;r<this.length;r++)if(null==t){if(this[r]==e)return!0}else if(void 0!==this[r][t]&&this[r][t]==e)return!0;return!1},Array.prototype.copy=function(){return JSON.parse(JSON.stringify(this))},Array.prototype.count=function(t,e){let r=0;for(let n=0;n<this.length;n++)null==t?this[n]==e&&r++:void 0!==this[n][t]&&this[n][t]==e&&r++;return r},Array.prototype.countMany=function(...t){let e=0;return t.forEach((t=>{e+=this.count(t.propName,t.value)})),e},Array.prototype.create=function(t,e){let r=[];for(let n=0;n<t;n++)r.push(e);return r},Array.prototype.flatten=function(t){let e=[];return Array.toFlatten(this,t,e),e},Array.prototype.get=function(t){return t<0||t>=this.length?"":this[t]},Array.prototype.index=function(t,e){const r=this.indexes(t,e);return r.length<=0?null:r[0]},Array.prototype.indexes=function(t,e){let r=[];for(let n=0;n<this.length;n++)null==t?this[n]==e&&r.push(n):void 0!==this[n][t]&&this[n][t]==e&&r.push(n);return r},Array.prototype.insert=function(t,e){return t<0?this.splice(0,0,e):t>=this.length?this.push(e):this.splice(t,0,e),this},Array.prototype.joinIfNotNullOrWhitespace=function(t){let e="";for(let r=0;r<this.length;r++)String.isNullOrWhitespace(this[r])||(String.isNullOrWhitespace(e)||(e+=t),e+=this[r]);return e},Array.prototype.first=function(t,e){for(let r=0;r<this.length;r++)if(void 0!==this[r][t]&&this[r][t]==e)return this[r];return null},Array.prototype.forEachTree=function(t,e){for(let r=0;r<this.length;r++){if(!1===e(this[r]))return;if(!(this[r][t].length<=0)&&!1===this[r][t].forEachTree(t,e))return}},Array.prototype.orderBy=function(t){return this.sort((function(e,r){return e[t]<r[t]?-1:e[t]>r[t]?1:0})),this},Array.prototype.orderByDesc=function(t){return this.sort((function(e,r){return e[t]<r[t]?1:e[t]>r[t]?-1:0})),this},Array.prototype.remove=function(t){let e=[];for(let r=0;r<this.length;r++)this[r]==t&&e.push(r);for(let t=e.length-1;t>=0;t--)this.removeAt(e[t]);return this},Array.prototype.removeAt=function(t){return t<0||t>=this.length||this.splice(t,1),this},Array.prototype.removeRange=function(t){for(let e=0;e<t.length;e++)this.remove(t[e]);return this},Array.prototype.notSelect=function(t,e){let r=[];for(let n=0;n<this.length;n++)void 0!==this[n][t]&&this[n][t]!=e&&r.push(this[n]);return r},Array.prototype.select=function(t,e){let r=[];for(let n=0;n<this.length;n++)void 0!==this[n][t]&&this[n][t]==e&&r.push(this[n]);return r},Array.prototype.selectMany=function(...t){let e=this;return t.forEach((t=>{e=e.select(t.propName,t.value)})),e},Array.prototype.toList=function(t){let e=[];return this.forEach((r=>{null!=typeof r[t]&&e.push(r[t])})),e},Array.prototype.sortTree=function(t,e){this.orderBy(e);for(let r=0;r<this.length;r++)this[r][t].length<=0||this[r][t].orderBy(e)}},523:()=>{Boolean.isFalse=function(t){return!!String.isNullOrUndefined(t)||t.toString().containsCI("false","f","y","0","x")},Boolean.isTrue=function(t){return!String.isNullOrUndefined(t)&&t.toString().containsCI("true","t","n","1","o")},Boolean.ifTrue=function(t,e,r){return Boolean.isTrue(t)?e:r}},579:()=>{Date.addDays=function(t,e){let r=new Date(t);return r.addDays(e),r},Date.addMonths=function(t,e){let r=new Date(t);return r.addMonths(e),r},Date.addYears=function(t,e){let r=new Date(t);return r.addYears(e),r},Date.max=function(t,e){return null==t?e:null==e?t:new Date(t)<=new Date(e)?new Date(e):new Date(t)},Date.min=function(t,e){return null==t?e:null==e?t:new Date(t)<=new Date(e)?new Date(t):new Date(e)},Date.diffDays=function(t,e){return Math.ceil((new Date(e).getTime()-new Date(t).getTime())/864e5)},Date.today=function(){let t=new Date;return t.setHours(0),t.setMinutes(0),t.setSeconds(0),t.setMilliseconds(0),t},Date.prototype.addDays=function(t){this.setDate(this.getDate()+parseInt(t))},Date.prototype.addMonths=function(t){this.setMonth(this.getMonth()+parseInt(t))},Date.prototype.addYears=function(t){this.setFullYear(this.getFullYear()+parseInt(t))},Date.prototype.toCString=function(t){let e=t;return e=e.replace("fffffff",this.getMilliseconds().toString().padStart(7,"0")),e=e.replace("ffffff",this.getMilliseconds().toString().padStart(6,"0")),e=e.replace("fffff",this.getMilliseconds().toString().padStart(5,"0")),e=e.replace("yyyy",this.getFullYear().toString().padStart(4,"0")),e=e.replace("MMMM","{1}"),e=e.replace("dddd","{2}"),e=e.replace("ffff",this.getMilliseconds().toString().padStart(4,"0")),e=e.replace("yyy",this.getFullYear().toString().padStart(3,"0")),e=e.replace("MMM","{3}"),e=e.replace("ddd","{4}"),e=e.replace("fff",this.getMilliseconds().toString().padStart(3,"0")),e=e.replace("zzz",""),e=e.replace("yy",this.getFullYear().toString().slice(-2)),e=e.replace("MM",(this.getMonth()+1).toString().padStart(2,"0")),e=e.replace("dd",this.getDate().toString().padStart(2,"0")),e=e.replace("HH",this.getHours().toString().padStart(2,"0")),e=e.replace("hh",(this.getHours()>12?this.getHours()-12:this.getHours()).toString().padStart(2,"0")),e=e.replace("mm",this.getMinutes().toString().padStart(2,"0")),e=e.replace("ss",this.getSeconds().toString().padStart(2,"0")),e=e.replace("ff",this.getMilliseconds().toString().padStart(2,"0")),e=e.replace("tt","{5}"),e=e.replace("zz",""),e=e.replace("y",this.getFullYear().toString()),e=e.replace("M",(this.getMonth()+1).toString()),e=e.replace("d",this.getDate().toString()),e=e.replace("H",this.getHours().toString()),e=e.replace("h",(this.getHours()>12?this.getHours()-12:this.getHours()).toString()),e=e.replace("m",this.getMinutes().toString()),e=e.replace("s",this.getSeconds().toString()),e=e.replace("z",""),e=e.replace("t","{6}"),e=e.replace("Z",""),e=e.replace("{1}",this.toLocaleString("default",{month:"long"})),e=e.replace("{2}",this.toLocaleString("default",{weekday:"long"})),e=e.replace("{3}",this.toLocaleString("default",{month:"short"})),e=e.replace("{4}",this.toLocaleString("default",{weekday:"short"})),e=e.replace("{5}",this.getHours()>=12?"PM":"AM"),e=e.replace("{6}",this.getHours()>=12?"P":"A"),e}},874:()=>{Document.ready=async function(t){!async function(){"loading"!==document.readyState?t():document.addEventListener("DOMContentLoaded",(function(){t()}))}()},Document.getWidth=function(t){return null==t||void 0===t?0:t.offsetWidth||t.innerWidth||t.clientWidth},Document.getHeight=function(t){return null==t||void 0===t?0:t.offsetHeight||t.innerHeight||t.clientHeight},Document.appendHtml=function(t,e){const r=document.createElement(e);t.appendChild(r)},Document.addClass=function(t,e){t.classList.contains(e)||t.classList.add(e)},Document.removeClass=function(t,e){t.classList.contains(e)&&t.classList.remove(e)}},705:()=>{Math.randomN=function(t,e){return t=Math.ceil(t),e=Math.floor(e),Math.floor(Math.random()*(e-t)+t)},Math.average=function(t){let e=0;return t.forEach((t=>{e+=parseFloat(t)})),e/t.length},Math.avg=function(...t){let e=0;return t.forEach((t=>{e+=parseFloat(t)})),e/t.length},Math.half=function(t){return t/2}},428:()=>{Object.isNullOrUndefined=function(t){return void 0===t||null==t},Object.getDataType=function(t){return String.isNullOrUndefined(t)?"null":"object"==typeof t?Array.isArray(t)?"array":"object":typeof t}},930:()=>{String.isNullOrUndefined=function(t){return void 0===t||null==t},String.isNullOrWhitespace=function(t){return!!String.isNullOrUndefined(t)||("string"==typeof t?t.trim().length<=0:t.toString().trim().length<=0)},String.joinIfNotNullOrWhitespace=function(t,...e){let r="";for(let n=0;n<e.length;n++)String.isNullOrWhitespace(e[n])||(String.isNullOrWhitespace(r)||(r+=t),r+=e[n]);return r},String.prototype.contains=function(...t){for(let e of t)if(this==e)return!0;return!1},String.prototype.containsCI=function(...t){for(let e of t)if(this.toLowerCase()==e.toLowerCase())return!0;return!1},String.prototype.encodeHtmlLinks=function(){return value.replace(/(http[s]{0,1}:\/\/[^\s]+)/g,"<a href='$1'>$1</a>")},String.prototype.toTitleCase=function(){let t=this;return t=t.replace(/([A-Z]{1})/g," $1"),t=t.trim(),t=t.charAt(0).toUpperCase()+t.substr(1),t},String.prototype.getFilename=function(){return this.substring(this.lastIndexOf("/")+1)}},323:()=>{Window.goToTop=function(){Window.scrollTo(0,0)},Window.fragment={get:function(){if(!window.location.hash)return null;const t=window.location.hash.indexOf("?");return t<0?window.location.hash.substring(1):window.location.hash.substring(1,t)},getQuery:function(){if(!window.location.hash)return null;let t=window.location.hash;const e=t.indexOf("?");if(e<0)return null;t=hasQueryString.substring(e+1);const r=new URLSearchParams(t),n={};for(const[t,e]of r.entries())n[t]=e;return n},clear:function(){location.hash="",history.replaceState("","",location.pathname)}}}},e={};function r(n){var o=e[n];if(void 0!==o)return o.exports;var i=e[n]={exports:{}};return t[n](i,i.exports,r),i.exports}r.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return r.d(e,{a:e}),e},r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return(()=>{"use strict";r.r(n),r(814),r(523),r(579),r(874),r(705),r(428),r(930),r(323)})(),n})()));
\ No newline at end of file
diff --git a/src/timeline/background-canvas.js b/src/timeline/background-canvas.js
new file mode 100644
index 0000000..a85c100
--- /dev/null
+++ b/src/timeline/background-canvas.js
@@ -0,0 +1,243 @@
+import Canvas from '../references/canvas.js';
+
+
+class BackgroundCanvas extends Canvas {
+  Options = null;
+  Debug = false;
+
+  StartDate = new Date();
+  // Duration = 30;
+  // StartOfWeek = 1;
+  // RowCount = 8;
+
+
+  constructor(el) {
+    super(el);
+  }
+
+
+  get ClientRectangle() {
+    const a = this;
+
+    return {
+      X: a.Options.Padding.Left,
+      Y: a.Options.Padding.Top,
+      W: (a.Width - (a.Options.Padding.Left + a.Options.Padding.Right)),
+      H: (a.Height - (a.Options.Padding.Top + a.Options.Padding.Bottom))
+    };
+  }
+
+
+  // get HeaderRow1Rectangle() {
+  //   return {
+  //     X: 0,
+  //     Y: 0,
+  //     W: this.Width,
+  //     H: (this.Options.HeaderRow.Height[0] - this.Options.BorderWidth)
+  //   };
+  // }
+
+  // get HeaderRow2Rectangle() {
+  //   const a = this;
+
+  //   return {
+  //     X: 0,
+  //     Y: this.Options.HeaderRow.Height[0],
+  //     W: this.Width,
+  //     H: (this.Options.HeaderRow.Height[1] - this.Options.BorderWidth)
+  //   };
+  // }
+
+  // get HeaderHeight() {
+  //   const a = this;
+
+  //   return a.Options.HeaderRow.Height[0] + a.Options.HeaderRow.Height[1];
+  // }
+
+
+  Load(startDate) {
+    const a = this;
+
+    a.StartDate = new Date(startDate);
+  //   a.Duration = duration;
+  //   a.StartOfWeek = startOfWeek;    // 1 = Monday
+  //   a.RowCount = rowCount;
+  }
+
+  Invalidate() {
+    const a = this;
+
+    if (a.Options == null) {
+      return;
+    }
+
+    if (a.Debug) {
+      a.DrawRectangle(a.ClientRectangle, "red", {});
+    }
+
+    const y = Math.floor(a.ClientRectangle.Y + Math.half(a.ClientRectangle.H) + Math.half(a.Options.AxisLine.Width));
+
+    a.DrawHorizontalLine(a.ClientRectangle.X, y, a.ClientRectangle.W, a.Options.AxisLine.Colour);
+
+    const days = Math.floor(a.ClientRectangle.W / a.Options.XAxisLine.Spacing);
+
+    for(var i=0; i<=days; i++) {
+      const x = (a.ClientRectangle.X + (i * a.Options.XAxisLine.Spacing));
+
+      if ((i % a.Options.XAxisLine.SegmentCount) == 0) {
+        a.DrawVerticalLine(x, y, a.Options.XAxisLine.DayLineLength, a.Options.XAxisLine.DayLineColour, {
+          LineWidth: a.Options.XAxisLine.DayLineWidth,
+          Precise: true
+        });
+      } else {
+        a.DrawVerticalLine(x, y, a.Options.XAxisLine.HourLineLength, a.Options.XAxisLine.HourLineColour, {
+          LineWidth: a.Options.XAxisLine.HourLineWidth,
+          Precise: true
+        });
+      }
+
+    }
+
+    // if (a.StartDate == null) {
+    //   return;
+    // }
+
+    // a.#drawChartHeader();
+    // a.#drawColumnLayout();
+    // a.#drawRowLayout();
+  }
+
+  // #drawChartHeader() {
+  //   const a = this;
+
+  //   const displayDays = a.Duration + 2;
+
+  //   if (a.Debug) {
+  //     a.DrawRectangle(a.HeaderRow1Rectangle, "red", {});
+  //     a.DrawRectangle(a.HeaderRow2Rectangle, "orange", {});
+  //   }
+
+  //   let startDate = new Date(a.StartDate);
+  //   startDate.addDays(-1);
+
+  //   // Draw horizontal line under months
+  //   a.#drawHorizontalLine(a.Options.HeaderRow.Height[0]);
+
+  //   // Draw vertical lines for dates
+  //   for (let i=1; i<displayDays; i++) {
+  //     a.DrawVerticalLine((a.Options.DayWidth * i), (a.Options.HeaderRow.Height[0] + a.Options.BorderWidth), (a.Options.HeaderRow.Height[1] - a.Options.BorderWidth), a.Options.BorderColour, {});
+  //   }
+
+  //   // Draw horizontal line under dates
+  //   a.#drawHorizontalLine(a.HeaderHeight);
+
+  //   // Write dates
+  //   for (let i=0; i<displayDays; i++) {
+  //     const date = Date.addDays(startDate, i);
+  //     const x = (a.Options.DayWidth * i);
+
+  //     // Draw month
+  //     if (date.getDate() == 1) {
+  //       const size = a.MeasureText(a.Options.DateFont, "#");
+  //       const monthPoint = {
+  //         X: (x + 2),
+  //         Y: Math.half(a.Options.HeaderRow.Height[0] - size.H)
+  //       };
+
+  //       a.DrawText(monthPoint.X, monthPoint.Y, date.toCString("MMMM"), a.Options.DateFont, a.Options.DateForeColour);
+  //     }
+
+  //     // Draw day
+  //     const dateRectangle = {
+  //       X: x,
+  //       Y: a.Options.HeaderRow.Height[0],
+  //       W: a.Options.DayWidth - a.Options.BorderWidth,
+  //       H: (a.Options.HeaderRow.Height[1] - a.Options.BorderWidth)
+  //     };
+
+  //     a.FillText(dateRectangle, date.getDate(), a.Options.DateFont, a.Options.DateForeColour);
+
+  //     if (a.Debug) {
+  //       a.DrawRectangle(dateRectangle, "red", {});
+  //     }
+
+  //   }
+  // }
+
+  // #drawColumnLayout() {
+  //   const a = this;
+
+  //   const height = a.Height;
+  //   const displayDays = a.Duration + 2;
+
+  //   let startDate = new Date(a.StartDate);
+  //   startDate.addDays(-1);
+
+  //   // Write dates
+  //   for (let i=0; i<displayDays; i++) {
+  //     const date = Date.addDays(startDate, i);
+  //     const x = (a.Options.DayWidth * i);
+
+  //     const dateRectangle = {
+  //       X: x,
+  //       Y: a.HeaderHeight,
+  //       W: a.Options.DayWidth - a.Options.BorderWidth,
+  //       H: height - a.Options.BorderWidth
+  //     };
+
+  //     // Fill background for Saturday and Sunday
+  //     if (date.getDay() == 6) {
+  //       a.DrawRectangle(dateRectangle, a.Options.Column.SatColour, { FillColour: a.Options.Column.SatColour });
+  //     } else if (date.getDay() == 0) {
+  //       a.DrawRectangle(dateRectangle, a.Options.Column.SunColour, { FillColour: a.Options.Column.SunColour });
+  //     }
+
+  //     // Draw vertical date lines
+  //     if (a.StartOfWeek == date.getDay()) {
+  //       if (a.Options.ShowStartDayOfWeekLine) {
+  //         a.DrawVerticalLine(dateRectangle.X, a.HeaderHeight, dateRectangle.H, a.Options.BorderColour, {});
+  //       }
+  //     } else {
+  //       if (a.Options.ShowDateLines) {
+  //         a.DrawVerticalLine(dateRectangle.X, a.HeaderHeight, dateRectangle.H, a.Options.BorderColour, { LineDash: a.Options.BorderDashPattern });
+  //       }
+  //     }
+
+  //   }
+  // }
+
+  // #drawRowLayout() {
+  //   const a = this;
+
+  //   for (let i=0; i<a.RowCount; i++) {
+  //     const rowRectangle = {
+  //       X: 0,
+  //       Y: (a.HeaderHeight + (a.Options.Row.Height * i)),
+  //       W: a.Width,
+  //       H: (a.Options.Row.Height - a.Options.BorderWidth)
+  //     };
+
+  //     if (a.Options.ShowRowStripes) {
+  //       if ((i % 2) == 1) {
+  //         a.DrawRectangle(rowRectangle, a.Options.Row.BackColour, { FillColour: a.Options.Row.BackColour });
+  //       }
+  //     }
+
+  //     if (a.Options.ShowRowLines) {
+  //       a.DrawHorizontalLine(0, (rowRectangle.Y + a.Options.Row.Height), rowRectangle.W, a.Options.BorderColour, { LineDash: a.Options.BorderDashPattern });
+  //     }
+
+  //   }
+  // }
+
+  // #drawHorizontalLine(y) {
+  //   const a = this;
+  //   const width = a.Width;
+
+  //   a.DrawHorizontalLine(0, y, width, this.Options.BorderColour);
+  // }
+
+}
+
+
+export default BackgroundCanvas;
\ No newline at end of file
diff --git a/src/timeline/timeline-background-canvas.js b/src/timeline/timeline-background-canvas.js
index ce6bbce..fe329f1 100644
--- a/src/timeline/timeline-background-canvas.js
+++ b/src/timeline/timeline-background-canvas.js
@@ -1,3 +1,5 @@
+import '../references/extensions.dist.js';
+
 import TimelineCanvas from './timeline-canvas.js';
 
 
@@ -165,12 +167,12 @@ class TimelineBackgroundCanvas extends TimelineCanvas {
       //   // Don't write first date
       // } else {
         // Write date (dd)
-        a.drawText(e.X, posDayY, a.Parent.DateToString(date, "dd"), a.Options.Axis.Font, a.Options.Axis.LabelColour, "center");
+        a.drawText(e.X, posDayY, date.toCString("dd"), a.Options.Axis.Font, a.Options.Axis.LabelColour, "center");
       // }
 
       // Write month (MMMM) on first of the month
       if (writeLabel) {
-        a.drawText(e.X, posMonthY, a.Parent.DateToString(date, "MMMM yyyy"), a.Options.Axis.Font, a.Options.Axis.LabelColour, "left");
+        a.drawText(e.X, posMonthY, date.toCString("MMMM yyyy"), a.Options.Axis.Font, a.Options.Axis.LabelColour, "left");
       }
     });
   }
diff --git a/src/timeline/timeline-event-items.js b/src/timeline/timeline-event-items.js
new file mode 100644
index 0000000..88ee004
--- /dev/null
+++ b/src/timeline/timeline-event-items.js
@@ -0,0 +1,10 @@
+class TimelineEventItems {
+  Title = "";
+  Description = "";
+  Link = "";
+  Tag = null;
+
+}
+
+
+export default TimelineEventItems;
\ No newline at end of file
diff --git a/src/timeline/timeline-events.js b/src/timeline/timeline-events.js
new file mode 100644
index 0000000..b29391b
--- /dev/null
+++ b/src/timeline/timeline-events.js
@@ -0,0 +1,16 @@
+class TimelineEvents {
+  Date = "";
+  Label = "";
+  Position = {
+    X: 0,
+    Y: 0
+  };
+  Events = [];
+  HitBox = null;
+  BorderColour = "#3A5D9C";
+  BackColour = "#D4DEEF";
+
+}
+
+
+export default TimelineEvents;
\ No newline at end of file
diff --git a/src/timeline/timeline-options.js b/src/timeline/timeline-options.js
new file mode 100644
index 0000000..9e248dd
--- /dev/null
+++ b/src/timeline/timeline-options.js
@@ -0,0 +1,89 @@
+class TimelineOptions {
+  Padding = {
+    Left: 20,
+    Top: 20,
+    Right: 20,
+    Bottom: 0
+  };
+
+  AxisLine = {
+    Colour: "#555555",
+    Width: 2
+  };
+
+  XAxisLine = {
+    Spacing: 6,
+    SegmentCount: 4,
+
+    DayLineLength: 20,
+    DayLineWidth: 2,
+    DayLineColour: "#9E9E9E",
+
+    // NoPartPerDay: 4,
+    // HourLineSpace: 6,
+
+    HourLineLength: 10,
+    HourLineWidth: 2,
+    HourLineColour: "#EAEAEA",
+
+  };
+
+
+  // DayWidth = 24;
+  // HeaderRow = {
+  //   Height: [ 20, 20 ]
+  // };
+  // Row = {
+  //   Height: 28,
+  //   BackColour: "rgba(235, 235, 235, 0.3)",
+  //   Task: {
+  //     Height: 14,
+  //     BorderColour: "#555555",
+  //     FillColour: "#D8EEDB"
+  //   },
+  //   OrphanTask: {
+  //     Height: 14,
+  //     BorderColour: "#555555",
+  //     FillColour: "#9CC2E6"
+  //   },
+  //   ChildTask: {
+  //     Height: 14,
+  //     BorderColour: "#555555",
+  //     FillColour: "#FFF5C1"
+  //   },
+  //   CollatedTask: {
+  //     Height: 6,
+  //     BorderColour: "#555555",
+  //     FillColour: "#555555"
+  //   }
+  // };
+  // Column = {
+  //   SatColour: "rgba(233, 237, 239, 0.8)",
+  //   SunColour: "rgba(233, 237, 239, 0.9)"
+  // };
+  // Line = {
+
+  //   Colour: "#555555",
+  //   Width: 1,
+  //   ArrowSize: 5
+  // };
+  // HotTrackLine = {
+  //   Colour: "#D04437",
+  //   Width: 1
+  // };
+  // DateFont = "7pt sans-serif";
+  // DateForeColour = "#636363";
+  // BorderWidth = 1;
+  // BorderColour = "#B8B8B8";
+  // BorderDashPattern = [1, 1];
+  // EnableHotTracking = true;
+  // MinimumRowCount = 6;
+  // ShowDateLines = true;
+  // ShowStartDayOfWeekLine = true;
+  // ShowRowLines = true;
+  // ShowRowStripes = true;
+
+}
+
+
+export default TimelineOptions;
\ No newline at end of file
diff --git a/src/timeline/timeline.js b/src/timeline/timeline.js
index 599d2ba..3d7a036 100644
--- a/src/timeline/timeline.js
+++ b/src/timeline/timeline.js
@@ -1,364 +1,453 @@
-import TimelineBackgroundCanvas from './timeline-background-canvas.js';
-import TimelineFlourishCanvas from './timeline-flourish-canvas.js';
-import TimelineForegroundCanvas from './timeline-foreground-canvas.js';
+import '../references/extensions.dist.js';
+
+import TimelineEvents from './timeline-events.js';
+import TimelineEventItems from './timeline-event-items.js';
+
+import TimelineOptions from './timeline-options.js';
+
+import CanvasContainer from '../references/canvas-container.js';
+import BackgroundCanvas from './background-canvas.js';
+// import ForegroundCanvas from './foreground-canvas.js';
+// import FlourishCanvas from './flourish-canvas.js';
+
+import './timeline.scss';
+
+
+// import TimelineBackgroundCanvas from './timeline-background-canvas.js';
+// import TimelineFlourishCanvas from './timeline-flourish-canvas.js';
+// import TimelineForegroundCanvas from './timeline-foreground-canvas.js';
 
 
 class Timeline {
-  constructor(el) {
+  Options = null;
+  CanvasContainer = null;
+
+  StartDate = new Date();
+
+  #debug = false;
+
+
+  constructor(el, options) {
     const a = this;
 
-    a.Container = document.getElementById(el);
-    a.Padding = {
-      Left: 20,
-      Top: 20,
-      Right: 20,
-      Bottom: 0
-    };
-    a.Size = {
-      W: a.Container.innerWidth || a.Container.clientWidth,
-      H: a.Container.innerHeight || a.Container.clientHeight
-    };
-    a.Layer = {
-      Background: null,
-      Flourish: null,
-      Markers: null
-    };
+    a.Options = Object.assign(new TimelineOptions(), options);
+    a.CanvasContainer = new CanvasContainer(el);
 
-    a.DateParsePattern = "yyyy-MM-dd";
+    // a.Container = document.getElementById(el);
+        // a.Padding = {
+        //   Left: 20,
+        //   Top: 20,
+        //   Right: 20,
+        //   Bottom: 0
+        // };
+    // a.Size = {
+    //   W: a.Container.innerWidth || a.Container.clientWidth,
+    //   H: a.Container.innerHeight || a.Container.clientHeight
+    // };
+    // a.Layer = {
+    //   Background: null,
+    //   Flourish: null,
+    //   Markers: null
+    // };
 
-    a.HotTrack  = {
-      Colour: "#F57C00",
-      Width: 3
-    };
+    // a.DateParsePattern = "yyyy-MM-dd";
 
-    a.Events = [];
-    a.StartDate = a.DateToInternalString(new Date());
-    a.ShowDate = a.StartDate;
-    a.ShowMarkerLabel = true;
+    // a.HotTrack  = {
+    //   Colour: "#F57C00",
+    //   Width: 3
+    // };
 
-    a.Enabled = false;
-    a.Debug = false;
-    a.EnableHotTracking = true;
+    // a.Events = [];
+    // a.StartDate = a.DateToInternalString(new Date());
+    // a.ShowDate = a.StartDate;
+    // a.ShowMarkerLabel = true;
 
-    a.initialiseComponents();
+    // a.Enabled = false;
+    // a.Debug = false;
+    // a.EnableHotTracking = true;
+
+    a.#initialiseComponents();
   }
 
-  initialiseComponents() {
+  #initialiseComponents() {
     const a = this;
 
-    a.Container.innerHTML = "<canvas></canvas><canvas></canvas><canvas></canvas>";
+    // a.Container.innerHTML = "<canvas></canvas><canvas></canvas><canvas></canvas>";
 
-    const canvasList = a.Container.getElementsByTagName("canvas");
+    // const canvasList = a.Container.getElementsByTagName("canvas");
 
-    a.Layer.Background = new TimelineBackgroundCanvas(a, canvasList[0]);
-    a.Layer.Flourish = new TimelineFlourishCanvas(a, canvasList[1]);
-    a.Layer.Markers = new TimelineForegroundCanvas(a, canvasList[2]);
+    // a.Layer.Background = new TimelineBackgroundCanvas(a, canvasList[0]);
+    // a.Layer.Flourish = new TimelineFlourishCanvas(a, canvasList[1]);
+    // a.Layer.Markers = new TimelineForegroundCanvas(a, canvasList[2]);
 
+    a.#initialiseComponents_AddBackgroundCanvas();
+
+    // Invalidate every canvas
+    a.CanvasContainer.Invalidate();
+
+    // Document.removeClass(a.CanvasContainer.FlowContainer, "border");
+    Document.addClass(a.CanvasContainer.FlowContainer, "literyzjs-timeline");
+
+    a.Debug = true;
+
+    a.Invalidate();
   }
 
-
-  get CTX() {
-    return a.Layer.Markers.CTX;
-  }
-
-  get NewEvent() {
+  #initialiseComponents_AddBackgroundCanvas() {
     const a = this;
 
-    return {
-      Date: "",
-      Label: "",
-      Position: { X: 0, Y: 0 },
-      Events: [],
-      HitBox: null,
-      BorderColour: a.Layer.Markers.Options.Marker.BorderColour,
-      BackColour: a.Layer.Markers.Options.Marker.BackColour
-    };
+    const layer = a.CanvasContainer.AddLayer();
+
+    const canvasLayer = new BackgroundCanvas(layer);
+    canvasLayer.Options = a.Options;
+
+    a.CanvasContainer.Layer.push(canvasLayer);
   }
 
-  get NewEventItem() {
-    return {
-      Title: "",
-      Description: "",
-      Link: "",
-      Tag: null
-    };
+
+  get Debug() {
+    return this.#debug;
   }
 
-  get VisibleDays() {
-    const a = this;
-    const clientWidth = (a.Size.W - (a.Padding.Left + a.Padding.Right));
-
-    return Math.floor(clientWidth / (a.XAxis.NoPartPerDay * a.XAxis.HourLineSpace));
-  }
-
-  get VisibleStartDate() {
+  set Debug(value) {
     const a = this;
 
-    return a.ConvertToDate(a.ShowDate);
-  }
+    a.#debug = value;
 
-  get VisibleEndDate() {
-    const a = this;
-
-    let date = a.ConvertToDate(a.ShowDate);
-    date.setDate(date.getDate() + a.VisibleDays);
-
-    // Minus one for lead up
-    date.setDate(date.getDate() - 1);
-
-    return a.DateToString(date, a.DateParsePattern);
-  }
-
-  get VisibleEvents() {
-    const a = this;
-    let result = [];
-
-    a.Layer.Background.XAxisPositions.forEach(function (e) {
-      const event = a.FindEvent(e.Date);
-      if (event == null) {
+    a.CanvasContainer.Layer.forEach(e => {
+      if (typeof(e.Debug) == "undefined") {
         return;
       }
 
-      // Set offsetX on current view
-      event.Position.X = e.X;
-
-      result.push(event);
+      e.Debug = value;
     });
 
-    return result;
-  }
-
-  get XAxis() {
-    const a = this;
-
-    return a.Layer.Background.Options.XAxis;
   }
 
 
-  AddEvent(date, label, options) {
-    const a = this;
 
-    const _options = Object.assign(a.NewEventItem, options);
+  // get CTX() {
+  //   return a.Layer.Markers.CTX;
+  // }
 
-    let event = a.FindEvent(date);
-    if (event == null) {
-      let newEvent = a.NewEvent;
-      newEvent.Date = date;
+  // get NewEvent() {
+  //   const a = this;
 
-      a.Events.push(newEvent);
+  //   return {
+  //     Date: "",
+  //     Label: "",
+  //     Position: { X: 0, Y: 0 },
+  //     Events: [],
+  //     HitBox: null,
+  //     BorderColour: a.Layer.Markers.Options.Marker.BorderColour,
+  //     BackColour: a.Layer.Markers.Options.Marker.BackColour
+  //   };
+  // }
 
-      event = a.FindEvent(date);
-    }
+  // get NewEventItem() {
+  //   return {
+  //     Title: "",
+  //     Description: "",
+  //     Link: "",
+  //     Tag: null
+  //   };
+  // }
 
-    if (label != null) {
-      event.Label = label;
-    }
+  // get VisibleDays() {
+  //   const a = this;
+  //   const clientWidth = (a.Size.W - (a.Padding.Left + a.Padding.Right));
 
-    event.Events.push(_options);
-  }
+  //   return Math.floor(clientWidth / (a.XAxis.NoPartPerDay * a.XAxis.HourLineSpace));
+  // }
+
+  // get VisibleStartDate() {
+  //   const a = this;
+
+  //   return a.ConvertToDate(a.ShowDate);
+  // }
+
+  // get VisibleEndDate() {
+  //   const a = this;
+
+  //   let date = a.ConvertToDate(a.ShowDate);
+  //   date.setDate(date.getDate() + a.VisibleDays);
+
+  //   // Minus one for lead up
+  //   date.setDate(date.getDate() - 1);
+
+  //   return date.toCString(a.DateParsePattern);
+  // }
+
+  // get VisibleEvents() {
+  //   const a = this;
+  //   let result = [];
+
+  //   a.Layer.Background.XAxisPositions.forEach(function (e) {
+  //     const event = a.FindEvent(e.Date);
+  //     if (event == null) {
+  //       return;
+  //     }
+
+  //     // Set offsetX on current view
+  //     event.Position.X = e.X;
+
+  //     result.push(event);
+  //   });
+
+  //   return result;
+  // }
+
+  // get XAxis() {
+  //   const a = this;
+
+  //   return a.Layer.Background.Options.XAxis;
+  // }
+
+
+  // AddEvent(date, label, options) {
+  //   const a = this;
+
+  //   const _options = Object.assign(new TimelineEvents(), options);
+
+  //   let event = a.FindEvent(date);
+  //   if (event == null) {
+  //     let newEvent = a.NewEvent;
+  //     newEvent.Date = date;
+
+  //     a.Events.push(newEvent);
+
+  //     event = a.FindEvent(date);
+  //   }
+
+  //   if (label != null) {
+  //     event.Label = label;
+  //   }
+
+  //   event.Events.push(_options);
+  // }
 
   Clear() {
     const a = this;
 
-    a.Layer.Background.Clear();
-    a.Layer.Flourish.Clear();
-    a.Layer.Markers.Clear();
+    a.CanvasContainer.Layer[0].Load(new Date());
 
-    a.StartDate = a.DateToInternalString(new Date());
-    a.ShowDate = a.StartDate;
-    a.Enabled = false;
-    a.Events = [];
+    // a.Layer.Background.Clear();
+    // a.Layer.Flourish.Clear();
+    // a.Layer.Markers.Clear();
+
+    // a.StartDate = a.DateToInternalString(new Date());
+    // a.ShowDate = a.StartDate;
+    // a.Enabled = false;
+    // a.Events = [];
   }
 
-  DeleteMarker(date)
-  {
-    const a = this;
+  // DeleteMarker(date)
+  // {
+  //   const a = this;
 
-    for (let i=0; i<a.Events.length; i++) {
-      if (a.Events[i].Date != date) {
-        continue;
-      }
+  //   for (let i=0; i<a.Events.length; i++) {
+  //     if (a.Events[i].Date != date) {
+  //       continue;
+  //     }
 
-      a.Events.splice(i, 1);
-    }
-  }
+  //     a.Events.splice(i, 1);
+  //   }
+  // }
 
-  FindDatePosition(date) {
-    const a = this;
-    const points = a.Layer.Background.XAxisPositions;
+  // FindDatePosition(date) {
+  //   const a = this;
+  //   const points = a.Layer.Background.XAxisPositions;
 
-    for (let i=0; i<points.length; i++) {
-      if (points[i].Date == date){
-        return points[i];
-      }
-    }
+  //   for (let i=0; i<points.length; i++) {
+  //     if (points[i].Date == date){
+  //       return points[i];
+  //     }
+  //   }
 
-    return null;
-  }
+  //   return null;
+  // }
 
-  FindEvent(date) {
-    const a = this;
+  // FindEvent(date) {
+  //   const a = this;
 
-    for (let i=0; i<a.Events.length; i++) {
-      if (a.Events[i].Date == date) {
-        return a.Events[i];
-      }
-    }
+  //   for (let i=0; i<a.Events.length; i++) {
+  //     if (a.Events[i].Date == date) {
+  //       return a.Events[i];
+  //     }
+  //   }
 
-    return null;
-  }
+  //   return null;
+  // }
 
-  FindEventsByCoords(x, y, addmargin) {
-    const a = this;
+  // FindEventsByCoords(x, y, addmargin) {
+  //   const a = this;
 
-    for (let i=0; i<a.Events.length; i++) {
-      const e = a.Events[i].HitBox;
-      if (a.Events[i].HitBox == null) {
-        continue;
-      }
+  //   for (let i=0; i<a.Events.length; i++) {
+  //     const e = a.Events[i].HitBox;
+  //     if (a.Events[i].HitBox == null) {
+  //       continue;
+  //     }
 
-      let x2 = (e.X + e.W);
-      let y2 = (e.Y + e.H);
+  //     let x2 = (e.X + e.W);
+  //     let y2 = (e.Y + e.H);
 
-      if (addmargin) {
-        y2 += a.Layer.Markers.Options.Label.Margin.Y;
-      }
+  //     if (addmargin) {
+  //       y2 += a.Layer.Markers.Options.Label.Margin.Y;
+  //     }
 
-      if ((x >= e.X) && (x <= x2) && (y >= e.Y) && (y <= y2)){
-        return a.Events[i];
-      }
-    }
+  //     if ((x >= e.X) && (x <= x2) && (y >= e.Y) && (y <= y2)){
+  //       return a.Events[i];
+  //     }
+  //   }
 
-    return null;
-  }
+  //   return null;
+  // }
 
   Load(startDate) {
     const a = this;
 
     a.StartDate = startDate;
 
-    a.Show(startDate);
+    a.CanvasContainer.Layer[0].Load(a.StartDate);
+
+
+  //   a.Show(startDate);
   }
 
-  Show(date) {
+  // Show(date) {
+  //   const a = this;
+
+  //   if (a.ConvertToDate(date) < a.ConvertToDate(a.StartDate)) {
+  //     date = a.StartDate;
+  //   }
+
+  //   a.ShowDate = date;
+  //   a.Enabled = true;
+
+  //   a.Invalidate(true, true);
+  // }
+
+  // ShowNext() {
+  //   const a = this;
+
+  //   let date = a.VisibleStartDate;
+  //   date.setDate(date.getDate() + (a.VisibleDays - 1));
+
+  //   a.Show(a.DateToInternalString(date));
+  // }
+
+  // ShowPrevious() {
+  //   const a = this;
+
+  //   let date = a.VisibleStartDate;
+  //   date.setDate(date.getDate() - (a.VisibleDays - 1));
+
+  //   a.Show(a.DateToInternalString(date));
+  // }
+
+  // UpdateLabel(date, label) {
+  //   const a = this;
+
+  //   let event = a.FindEvent(date);
+  //   if (event == null) {
+  //     return;
+  //   }
+
+  //   event.Label = label;
+
+  //   a.Invalidate(false, true);
+  // }
+
+  // UpdateMarker(date, borderColour, backColour) {
+  //   const a = this;
+
+  //   let event = a.FindEvent(date);
+  //   if (event == null) {
+  //     return;
+  //   }
+
+  //   event.BorderColour = borderColour;
+  //   event.BackColour = backColour;
+
+  //   a.Invalidate(false, true);
+  // }
+
+          // Invalidate(redrawAxis, redrawMarkers) {
+          //   const a = this;
+
+          //   if (redrawAxis) a.Layer.Background.Invalidate();
+
+          //   a.Layer.Flourish.Clear();
+
+          //   if (redrawMarkers) a.Layer.Markers.Invalidate();
+
+          // }
+
+  Invalidate() {
     const a = this;
 
-    if (a.ConvertToDate(date) < a.ConvertToDate(a.StartDate)) {
-      date = a.StartDate;
-    }
+    a.CanvasContainer.Clear();
 
-    a.ShowDate = date;
-    a.Enabled = true;
+    const width = Document.getWidth(a.CanvasContainer.el);
+    const height = Document.getHeight(a.CanvasContainer.el);
 
-    a.Invalidate(true, true);
+    a.CanvasContainer.Size = {
+      W: width,
+      H: height
+    };
+
+    a.CanvasContainer.Invalidate();
   }
 
-  ShowNext() {
-    const a = this;
 
-    let date = a.VisibleStartDate;
-    date.setDate(date.getDate() + (a.VisibleDays - 1));
+  // DateToString(date, pattern) {
+  //   let result = pattern;
 
-    a.Show(a.DateToInternalString(date));
-  }
+  //   result = result.replace("fffffff", date.getMilliseconds().toString().padStart(7, '0'));
+  //   result = result.replace("ffffff", date.getMilliseconds().toString().padStart(6, '0'));
+  //   result = result.replace("fffff", date.getMilliseconds().toString().padStart(5, '0'));
+  //   result = result.replace("yyyy", date.getFullYear().toString().padStart(4, '0'));
+  //   result = result.replace("MMMM", "{1}");
+  //   result = result.replace("dddd", "{2}");
+  //   result = result.replace("ffff", date.getMilliseconds().toString().padStart(4, '0'));
+  //   result = result.replace("yyy", date.getFullYear().toString().padStart(3, '0'));
+  //   result = result.replace("MMM", "{3}");
+  //   result = result.replace("ddd", "{4}");
+  //   result = result.replace("fff", date.getMilliseconds().toString().padStart(3, '0'));
+  //   result = result.replace("zzz", "");
+  //   result = result.replace("yy", date.getFullYear().toString().slice(-2));
+  //   result = result.replace("MM", (date.getMonth() + 1).toString().padStart(2, '0'));
+  //   result = result.replace("dd", date.getDate().toString().padStart(2, '0'));
+  //   result = result.replace("HH", date.getHours().toString().padStart(2, '0'));
+  //   result = result.replace("hh", (date.getHours() > 12 ? (date.getHours() - 12) : date.getHours()).toString().padStart(2, '0'));
+  //   result = result.replace("mm", date.getMinutes().toString().padStart(2, '0'));
+  //   result = result.replace("ss", date.getSeconds().toString().padStart(2, '0'));
+  //   result = result.replace("ff", date.getMilliseconds().toString().padStart(2, '0'));
+  //   result = result.replace("tt", "{5}");
+  //   result = result.replace("zz", "");
+  //   result = result.replace("y", date.getFullYear().toString());
+  //   result = result.replace("M", (date.getMonth() + 1).toString());
+  //   result = result.replace("d", date.getDate().toString());
+  //   result = result.replace("H", date.getHours().toString());
+  //   result = result.replace("h", (date.getHours() > 12 ? (date.getHours() - 12) : date.getHours()).toString());
+  //   result = result.replace("m", date.getMinutes().toString());
+  //   result = result.replace("s", date.getSeconds().toString());
+  //   result = result.replace("z", "");
+  //   result = result.replace("t", "{6}");
+  //   result = result.replace("Z", "");
 
-  ShowPrevious() {
-    const a = this;
+  //   result = result.replace("{1}", date.toLocaleString('default', { month: 'long' }));
+  //   result = result.replace("{2}", date.toLocaleString('default', { weekday: 'long' }));
+  //   result = result.replace("{3}", date.toLocaleString('default', { month: 'short' }));
+  //   result = result.replace("{4}", date.toLocaleString('default', { weekday: 'short' }));
+  //   result = result.replace("{5}", (date.getHours() >= 12 ? "PM" : "AM"));
+  //   result = result.replace("{6}", (date.getHours() >= 12 ? "P" : "A"));
 
-    let date = a.VisibleStartDate;
-    date.setDate(date.getDate() - (a.VisibleDays - 1));
-
-    a.Show(a.DateToInternalString(date));
-  }
-
-  UpdateLabel(date, label) {
-    const a = this;
-
-    let event = a.FindEvent(date);
-    if (event == null) {
-      return;
-    }
-
-    event.Label = label;
-
-    a.Invalidate(false, true);
-  }
-
-  UpdateMarker(date, borderColour, backColour) {
-    const a = this;
-
-    let event = a.FindEvent(date);
-    if (event == null) {
-      return;
-    }
-
-    event.BorderColour = borderColour;
-    event.BackColour = backColour;
-
-    a.Invalidate(false, true);
-  }
-
-  Invalidate(redrawAxis, redrawMarkers) {
-    const a = this;
-
-    if (redrawAxis) a.Layer.Background.Invalidate();
-
-    a.Layer.Flourish.Clear();
-
-    if (redrawMarkers) a.Layer.Markers.Invalidate();
-
-  }
-
-  DateToString(date, pattern) {
-    let result = pattern;
-
-    result = result.replace("fffffff", date.getMilliseconds().toString().padStart(7, '0'));
-    result = result.replace("ffffff", date.getMilliseconds().toString().padStart(6, '0'));
-    result = result.replace("fffff", date.getMilliseconds().toString().padStart(5, '0'));
-    result = result.replace("yyyy", date.getFullYear().toString().padStart(4, '0'));
-    result = result.replace("MMMM", "{1}");
-    result = result.replace("dddd", "{2}");
-    result = result.replace("ffff", date.getMilliseconds().toString().padStart(4, '0'));
-    result = result.replace("yyy", date.getFullYear().toString().padStart(3, '0'));
-    result = result.replace("MMM", "{3}");
-    result = result.replace("ddd", "{4}");
-    result = result.replace("fff", date.getMilliseconds().toString().padStart(3, '0'));
-    result = result.replace("zzz", "");
-    result = result.replace("yy", date.getFullYear().toString().slice(-2));
-    result = result.replace("MM", (date.getMonth() + 1).toString().padStart(2, '0'));
-    result = result.replace("dd", date.getDate().toString().padStart(2, '0'));
-    result = result.replace("HH", date.getHours().toString().padStart(2, '0'));
-    result = result.replace("hh", (date.getHours() > 12 ? (date.getHours() - 12) : date.getHours()).toString().padStart(2, '0'));
-    result = result.replace("mm", date.getMinutes().toString().padStart(2, '0'));
-    result = result.replace("ss", date.getSeconds().toString().padStart(2, '0'));
-    result = result.replace("ff", date.getMilliseconds().toString().padStart(2, '0'));
-    result = result.replace("tt", "{5}");
-    result = result.replace("zz", "");
-    result = result.replace("y", date.getFullYear().toString());
-    result = result.replace("M", (date.getMonth() + 1).toString());
-    result = result.replace("d", date.getDate().toString());
-    result = result.replace("H", date.getHours().toString());
-    result = result.replace("h", (date.getHours() > 12 ? (date.getHours() - 12) : date.getHours()).toString());
-    result = result.replace("m", date.getMinutes().toString());
-    result = result.replace("s", date.getSeconds().toString());
-    result = result.replace("z", "");
-    result = result.replace("t", "{6}");
-    result = result.replace("Z", "");
-
-    result = result.replace("{1}", date.toLocaleString('default', { month: 'long' }));
-    result = result.replace("{2}", date.toLocaleString('default', { weekday: 'long' }));
-    result = result.replace("{3}", date.toLocaleString('default', { month: 'short' }));
-    result = result.replace("{4}", date.toLocaleString('default', { weekday: 'short' }));
-    result = result.replace("{5}", (date.getHours() >= 12 ? "PM" : "AM"));
-    result = result.replace("{6}", (date.getHours() >= 12 ? "P" : "A"));
-
-    return result;
-  }
+  //   return result;
+  // }
 
   DateToInternalString(date) {
-    const a = this;
-
-    return a.DateToString(date, a.DateParsePattern);
+    return date.toCString(this.DateParsePattern);
   }
 
   ConvertToDate(value) {
@@ -366,13 +455,13 @@ class Timeline {
   }
 
 
-  OnMouseDown(sender, e, event) { /* delegate */ }
+  // OnMouseDown(sender, e, event) { /* delegate */ }
 
-  OnMouseMove(sender, e, event) { /* delegate */ }
+  // OnMouseMove(sender, e, event) { /* delegate */ }
 
-  OnClick(sender, e, event) { /* delegate */ }
+  // OnClick(sender, e, event) { /* delegate */ }
 
-  OnDblClick(sender, e, event) { /* delegate */ }
+  // OnDblClick(sender, e, event) { /* delegate */ }
 
 }
 
diff --git a/src/timeline/timeline.scss b/src/timeline/timeline.scss
new file mode 100644
index 0000000..39e4af7
--- /dev/null
+++ b/src/timeline/timeline.scss
@@ -0,0 +1,19 @@
+.literyzjs-timeline {
+  border-color: #B8B8B8;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: #CDCDCD #F0F0F0;
+
+
+  &.scroll-x {
+    overflow-x: scroll !important;
+  }
+
+  canvas {
+    display: block;
+    position: relative;
+  }
+}
+
diff --git a/webpack.config.js b/webpack.config.js
index 660d84b..0506321 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -44,5 +44,17 @@ module.exports = {
         'process.env.VERSION': JSON.stringify(version)
     }),
     new PrependVersionPlugin()
-  ]
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          'sass-loader'
+        ]
+      }
+    ]
+  }
 };
\ No newline at end of file