<!doctype html> <html lang="en-GB"> <head> <meta charset="UTF-8" /> <meta http-equiv="content-type" content="text/html" charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="" /> <meta name="keyword" content="" /> <!-- <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="bbtimeline.js"></script> <!-- <script src="bbtimeline.min.js"></script> --> <title></title> </head> <body> <div class="row"> <div class="column1"> <canvas id="myCanvas"></canvas> <p> <textarea id="memoBox1" readonly></textarea> </p> </div> <div class="column2"> <p> <button onclick="Clear()">Clear</button> <button onclick="ToggleDebug()">Toggle Debug</button> <button onclick="Refresh()">Refresh</button> </p> <hr /> <p> <button onclick="SetToday()">Set Today</button> </p> <hr /> <p> <button onclick="GenerateRandomMarker()">Add/Generate Random Marker</button> </p> <hr /> <p> <button onclick="GoToToday()">Show Start Date</button> <button onclick="GoToPreviousMonth()">Show Previous Month</button> <button onclick="GoToNextMonth()">Show Next Month</button> </p> <hr /> <p> <button onclick="UpdateLabel()">Rename Marker</button> <button onclick="UpdateMarker()">Change Marker Style</button> <button onclick="DeleteMarker()">Delete Marker</button> </p> <hr /> <p> <button onclick="FindVisibleEvents()">Find Visible Events</button> <button onclick="FindAllEvents()">Find All Events</button> </p> <hr /> <p> <input type="date" id="textbox1" /> <button onclick="FindEvent()">Find Event (By Date)</button> </p> <p> <input type="date" id="textbox2" /> <button onclick="FindDatePosition()">Find Date Position (If Visible)</button> </p> <hr /> </div> </div> <style> body { padding: 20px; } canvas { border-style: solid; border-width: 1px; border-color: #000000; width: 100%; height: 300px; padding: 0; margin: 0; } textarea { border-style: solid; border-width: 1px; border-color: #000000; min-height: calc(100vh - 500px); padding: 10px; width: 100%; } .column1 { flex: 70%; padding: 20px; } .column2 { flex: 30%; padding: 20px; } .row { display: flex; } </style> <script> var timeline1 = new BBTimeline("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(""); } SetToday(); function Clear() { timeline1.Clear(true); } function ToggleDebug() { timeline1.Debug = !timeline1.Debug; timeline1.Invalidate(true, true); } function Refresh() { timeline1.Invalidate(true, true); } function SetToday() { const msPerDay = 1000 * 60 * 60 * 24; const startDate = timeline1.DateToString(new Date(), "yyyy-MM-dd"); timeline1.Load(startDate); const endDate = timeline1.CalcEndDate(); const noDays = Math.floor((timeline1.ConvertToDate(endDate) - timeline1.ConvertToDate(startDate)) / msPerDay); LogInfo("Set start date to today (" + startDate + ")"); LogInfo("Show " + startDate + " to " + endDate + " (" + noDays + " days)"); } function GenerateRandomMarker() { const msPerDay = 1000 * 60 * 60 * 24; const endDate = timeline1.CalcEndDate(); const noDays = Math.floor((timeline1.ConvertToDate(endDate) - timeline1.ConvertToDate(timeline1.ShowDate)) / msPerDay); let randomDay = GetRandy(1, (noDays - 1)); let date = timeline1.ConvertToDate(timeline1.ShowDate); date.setDate(date.getDate() + randomDay); const markerDate = timeline1.DateToString(date, timeline1.DateParsePattern); const markerName = "Random Marker #" + GetRandy(10000, 99999); timeline1.AddEvent(markerDate, markerName, { Title: markerName, Description: "This is a randomly generated marker" }); timeline1.Invalidate(false, true); LogInfo("Add marker (" + markerDate + ")"); } function GoToToday() { timeline1.Show(timeline1.StartDate); LogInfo("Go to " + timeline1.ShowDate); } function GoToPreviousMonth() { timeline1.ShowPrevious(); LogInfo("Go to " + timeline1.ShowDate); } function GoToNextMonth() { timeline1.ShowNext(); LogInfo("Go to " + timeline1.ShowDate); } function UpdateLabel() { const visibleMarkers = timeline1.FindVisibleEvents(); if (visibleMarkers.length <= 0) { LogInfo("No visible markers"); return; } const randy = GetRandy(0, (visibleMarkers.length - 1)); const newMarkerName = "Renamed Random Marker #" + GetRandy(10000, 99999); LogInfo("Renamed marker #" + randy + " [" + visibleMarkers[randy].Label + "] to [" + newMarkerName + "]"); timeline1.UpdateLabel(visibleMarkers[randy].Date, newMarkerName); } function UpdateMarker() { const visibleMarkers = timeline1.FindVisibleEvents(); if (visibleMarkers.length <= 0) { LogInfo("No visible markers"); return; } const randy = GetRandy(0, (visibleMarkers.length - 1)); LogInfo("Change marker style #" + randy + " [" + visibleMarkers[randy].Label + "]"); timeline1.UpdateMarker(visibleMarkers[randy].Date, "#E68422", "#FAE7D3"); } function DeleteMarker() { const visibleMarkers = timeline1.FindVisibleEvents(); if (visibleMarkers.length <= 0) { LogInfo("No visible markers"); return; } const randy = GetRandy(0, (visibleMarkers.length - 1)); LogInfo("Delete marker #" + randy + " [" + visibleMarkers[randy].Label + "]"); timeline1.DeleteMarker(visibleMarkers[randy].Date); timeline1.Invalidate(false, true); } function FindVisibleEvents() { const visibleMarkers = timeline1.FindVisibleEvents(); LogInfo(""); LogInfo(JSON.stringify(visibleMarkers)); LogInfo(""); } function FindAllEvents() { LogInfo(""); LogInfo(JSON.stringify(timeline1.Events)); LogInfo(""); } function FindEvent() { const date = document.getElementById("textbox1").value; if (date == null) { LogInfo("No marker found"); return; } const marker = timeline1.FindEvent(date); if (marker == null) { LogInfo("No marker found"); return; } LogInfo(""); LogInfo(JSON.stringify(marker)); LogInfo(""); } function FindDatePosition() { const date = document.getElementById("textbox2").value; if (date == null) { LogInfo("No date position found"); return; } const marker = timeline1.FindDatePosition(date); if (marker == null) { LogInfo("No marker position found"); return; } LogInfo(""); LogInfo(JSON.stringify(marker)); LogInfo(""); } function LogInfo(value) { document.getElementById("memoBox1").value += value + "\n"; } function GetRandy(min, max) { let rand = Math.random(); rand = Math.floor(rand * (max - min)); rand = rand + min; return rand; } </script> </body> </html>