2023-09-30 22:45:55 +00:00
|
|
|
<!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>
|
|
|
|
|
|
|
|
|
|
<canvas id="myCanvas"></canvas>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
<button onclick="Clear()">Clear</button>
|
2023-10-02 22:42:08 +00:00
|
|
|
<button onclick="LoadDemo()">Load Demo Events</button>
|
|
|
|
|
<button onclick="ToggleDebug()">Toggle Debug</button>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
2023-10-03 07:04:07 +00:00
|
|
|
<button onclick="LoadToday()">Show Start Date</button>
|
2023-10-02 22:42:08 +00:00
|
|
|
<button onclick="LoadPrevious()">Show Previous Month</button>
|
|
|
|
|
<button onclick="LoadNext()">Show Next Month</button>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<button onclick="UpdateLabel()">Update Label</button>
|
|
|
|
|
<button onclick="UpdateMarker()">Update Marker</button>
|
|
|
|
|
<button onclick="DeleteMarker()">Delete Marker</button>
|
2023-09-30 22:45:55 +00:00
|
|
|
</p>
|
2023-10-02 23:04:03 +00:00
|
|
|
<p>
|
|
|
|
|
<button onclick="GetDisplayedDateRange()">Get Displayed Date Range</button>
|
|
|
|
|
<button onclick="FindEvent()">Find Event</button>
|
|
|
|
|
<button onclick="FindDatePosition()">Find Date Position</button>
|
|
|
|
|
<button onclick="FindVisibleEvents()">Find Visible Events</button>
|
|
|
|
|
</p>
|
2023-09-30 22:45:55 +00:00
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
padding: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
canvas {
|
|
|
|
|
border-style: solid;
|
|
|
|
|
border-width: 1px;
|
|
|
|
|
border-color: #000000;
|
|
|
|
|
width: 100%;
|
2023-10-01 02:37:24 +00:00
|
|
|
height: 300px;
|
2023-09-30 22:45:55 +00:00
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
var timeline1 = new BBTimeline("myCanvas");
|
2023-10-03 07:01:09 +00:00
|
|
|
timeline1.OnEventClick = function(sender, e, event) {
|
2023-10-02 22:42:08 +00:00
|
|
|
// console.log(e);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
LoadDemo();
|
|
|
|
|
LoadToday();
|
2023-09-30 22:45:55 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function Clear()
|
|
|
|
|
{
|
2023-10-01 02:37:24 +00:00
|
|
|
timeline1.Clear(true);
|
2023-09-30 22:45:55 +00:00
|
|
|
}
|
|
|
|
|
|
2023-10-02 22:42:08 +00:00
|
|
|
function LoadDemo()
|
|
|
|
|
{
|
2023-10-03 17:17:55 +00:00
|
|
|
timeline1.AddEvent("2001-01-05", "Event", { Title: Math.random(), Description: Math.random() });
|
|
|
|
|
timeline1.AddEvent("2001-01-06", "Event", { Title: Math.random(), Description: Math.random() });
|
|
|
|
|
timeline1.AddEvent("2001-01-06", null, { Title: Math.random(), Description: Math.random() });
|
|
|
|
|
timeline1.AddEvent("2001-01-16", "Event", { Title: Math.random(), Description: Math.random() });
|
|
|
|
|
timeline1.AddEvent("2001-01-06", "Event 2", { Title: Math.random(), Description: Math.random() });
|
|
|
|
|
timeline1.AddEvent("2001-01-06", null, { Title: Math.random(), Description: Math.random() });
|
|
|
|
|
|
|
|
|
|
timeline1.AddEvent("2001-01-20", "Very Long Event", { Title: Math.random(), Description: Math.random() });
|
|
|
|
|
timeline1.AddEvent("2001-01-21", "Event", { Title: Math.random(), Description: Math.random() });
|
|
|
|
|
timeline1.AddEvent("2001-01-23", "Event", { Title: Math.random(), Description: Math.random() });
|
|
|
|
|
timeline1.AddEvent("2001-01-26", "Event", { Title: Math.random(), Description: Math.random() });
|
|
|
|
|
|
|
|
|
|
timeline1.AddEvent("2001-02-05", "Event", { Title: Math.random(), Description: Math.random() });
|
|
|
|
|
timeline1.AddEvent("2001-02-07", "Event", { Title: Math.random(), Description: Math.random() });
|
2023-10-02 22:42:08 +00:00
|
|
|
|
|
|
|
|
LoadToday();
|
|
|
|
|
timeline1.Invalidate(false, true);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function ToggleDebug()
|
|
|
|
|
{
|
|
|
|
|
timeline1.Debug = !timeline1.Debug;
|
|
|
|
|
timeline1.Invalidate(true, true);
|
|
|
|
|
}
|
|
|
|
|
|
2023-10-01 02:37:24 +00:00
|
|
|
function LoadToday()
|
|
|
|
|
{
|
2023-10-03 07:04:07 +00:00
|
|
|
// const date = timeline1.DateToString(new Date(), "yyyy-MM-dd");
|
2023-10-02 22:42:08 +00:00
|
|
|
|
2023-10-03 17:17:55 +00:00
|
|
|
timeline1.Load("2001-01-01");
|
2023-10-02 22:42:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function LoadPrevious()
|
|
|
|
|
{
|
|
|
|
|
timeline1.ShowPrevious();
|
2023-10-01 02:37:24 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function LoadNext()
|
|
|
|
|
{
|
2023-10-02 22:42:08 +00:00
|
|
|
timeline1.ShowNext();
|
|
|
|
|
}
|
2023-10-01 02:37:24 +00:00
|
|
|
|
2023-10-02 22:42:08 +00:00
|
|
|
function UpdateLabel()
|
|
|
|
|
{
|
2023-10-03 17:17:55 +00:00
|
|
|
timeline1.UpdateLabel("2001-01-21", "Very Long Event");
|
2023-10-02 22:42:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function UpdateMarker()
|
|
|
|
|
{
|
2023-10-03 17:17:55 +00:00
|
|
|
timeline1.UpdateMarker("2001-01-21", "#E68422", "#FAE7D3");
|
2023-10-02 22:42:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function DeleteMarker()
|
|
|
|
|
{
|
2023-10-03 17:17:55 +00:00
|
|
|
timeline1.DeleteMarker("2001-01-06");
|
2023-10-02 22:42:08 +00:00
|
|
|
timeline1.Invalidate(false, true);
|
2023-10-01 02:37:24 +00:00
|
|
|
}
|
2023-09-30 22:45:55 +00:00
|
|
|
|
2023-10-02 23:04:03 +00:00
|
|
|
function GetDisplayedDateRange()
|
|
|
|
|
{
|
2023-10-03 07:01:09 +00:00
|
|
|
alert(timeline1.ShowDate + " - " + timeline1.CalcEndDate());
|
2023-10-02 23:04:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function FindEvent()
|
|
|
|
|
{
|
2023-10-03 17:17:55 +00:00
|
|
|
const result = timeline1.FindEvent("2001-01-26");
|
2023-10-02 23:04:03 +00:00
|
|
|
|
|
|
|
|
console.log(result);
|
|
|
|
|
|
|
|
|
|
alert(JSON.stringify(result));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function FindDatePosition()
|
|
|
|
|
{
|
2023-10-03 17:17:55 +00:00
|
|
|
const result = timeline1.FindDatePosition("2001-01-26");
|
2023-10-02 23:04:03 +00:00
|
|
|
|
|
|
|
|
console.log(result);
|
|
|
|
|
|
|
|
|
|
alert(JSON.stringify(result));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function FindVisibleEvents()
|
|
|
|
|
{
|
|
|
|
|
const result = timeline1.FindVisibleEvents()
|
|
|
|
|
|
|
|
|
|
console.log(result);
|
|
|
|
|
|
|
|
|
|
alert(JSON.stringify(result));
|
|
|
|
|
}
|
|
|
|
|
|
2023-09-30 22:45:55 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
