let aa := text(Jahr);
let bb := KW;
let me := this;
let date0 := date(number(aa), 1, 4) - weekday(date(number(aa), 1, 4)) + number(bb) * 7 - 7;
let date1 := date(number(aa), 1, 4) - weekday(date(number(aa), 1, 4)) + number(bb) * 7 - 3;
let days := days(date0, date1) + 1;
let rows := ((select Team where not me.Touranzeige or chosen(me.Touranzeige, number(Nr))) order by Teamauswahl);
function tooltip(me : 'Aufträge') do
    me.---
{ 'KV-Nr.' + " " + Name }<br>{ Planzeit } - { Ort + "  -  " + 'Straße' }<hr>{ 'Informationen zum Kunden (werden mit ausgedruckt)' +
if 'Liefertermin von' = 'Liefertermin bis' then
    if Dauer != 1 then " - " + text(Dauer) end
else
    if 'Dauer erster Tag' != 1 then
        " - " + text('Dauer erster Tag')
    end
end +
if 'Liefertermin von' != 'Liefertermin bis' then
    "<br>" +
    if 'Dauer letzter Tag' != 1 then
        " - " + text('Dauer letzter Tag')
    end
end }
    ---
end;
function DayHeads() do
    join(for p from date0 to date1 + 1 step 1000 * 60 * 60 * 24 do
        let date := date(p);
        ---
<div class="nxp-timeline-cell nxp-timeline-day"><b>{ format(date, "DD.MM.YYYY") }</b></div>
        ---
    end, "")
end;
function DayNames() do
    join(for p from date0 to date1 + 1 step 1000 * 60 * 60 * 24 do
        let date := date(p);
        ---
<div class="nxp-timeline-cell nxp-timeline-day">{ format(date, "dddd") }</div>
        ---
    end, "")

let left := (day0 - 1) * 300 + 100 + number(not capLeft) * 4 + firstHalf;
    let width := (day1 - day0 + 1) * 300 - (number(not capLeft) + number(not capRight)) * 4 -
        firstHalf -
        lastHalf;
    let top := y * 36 + 4;

<div class="nxp-timeline-row" style="height:{ (yMax + 1) * 36 + 6 }px">
    <div class="nxp-timeline-cell nxp-timeline-name"  onclick="ui.popupRecord('{ row.Nr }')"style="background-color:{ color(row.Farbe) }">>{ row.Teamauswahl }</div>{ for day from 0 to days do Cell(row, date(date(number(aa), 1, 4) - weekday(date(number(aa), 1, 4)) + number(bb) * 7 - 7 + 1)) end }{ bars }
</div>

function Style() do
    "
.nxp-timeline-table {position: auto;}
.nxp-timeline-table-head {position: auto;}
.nxp-timeline-table-body {position: auto;}
.nxp-timeline-row {display:flex;position:relative;height:30px}
.nxp-timeline-cell {width:300px;height:100%;padding:4px;flex:0 0 auto;border-right:solid 1px black;border-bottom:solid 1px black;text-align:center;line-height:32px;border-radius:4px;opacity:1;cursor:pointer;color:black;box-sizing:border-box;border:solid 1px black}
    .nxp-timeline-cell1 {width:250px;height:100%;padding:4px;flex:0 0 auto;border-right:solid 1px black;border-bottom:solid 1px black;text-align:center;line-height:32px;border-radius:4px;opacity:1;cursor:pointer;color:black;box-sizing:border-box;border:solid 1px black}
.nxp-timeline-cell-tooltip {display:none;opacity:0;position:relative;z-index:999;min-width:200px;background-color:white;border-style:solid;border-width: 1px;border-color:black;border-radius:3px;padding:8px;color:black;background:#f7f8fc;bottom:-40px;left:1px}
.nxp-timeline-cell:hover .nxp-timeline-cell-tooltip {display:block;opacity:1;-webkit-animation:fadeIn .3s;animation:fadeIn .3s}
.nxp-timeline-name {width:100px;text-align:left;background:#DFDFDF;border-radius:4px;opacity:1;cursor:pointer;color:black;box-sizing:border-box;border:solid 1px black}
.nxp-timeline-name:hover {color: white;
  ;border-radius:4px;opacity:1;cursor:pointer;color:black;box-sizing:border-box;border:solid 2px black}
.nxp-timeline-day {background:#DFDFDF}
.nxp-timeline-week {background:#DFDFDF;width:280px}
.nxp-timeline-bar {position:absolute;top:4px;height:32px;border-radius:4px;background-color:red;opacity:1;cursor:pointer;color:black;box-sizing:border-box;border:solid 2px black}
.nxp-timeline-bar-title {overflow:hidden;text-align:center;line-height:28px;height:100%}
.nxp-timeline-bar:hover {border-color:#00000022}
.nxp-timeline-bar-cap-left {border-top-left-radius:0;border-bottom-left-radius:0}
.nxp-timeline-bar-cap-right {border-top-right-radius:0;border-bottom-right-radius:0}
.nxp-timeline-bar-tooltip {display:none;opacity:0;position:absolute;z-index:200;min-width:300px;background-color:white;border-radius:5px;border-style:solid;border-width: 1px;border-color:black;padding:8px;color:black;background:#f7f8fc;bottom:-150px;left:10px}
.nxp-timeline-bar:hover .nxp-timeline-bar-tooltip {display:block;opacity:1;-webkit-animation:fadeIn .3s;animation:fadeIn .3s}
@-webkit-keyframes fadeIn {from {opacity:0} to {opacity:1}}
@keyframes fadeIn {from {opacity:0} to {opacity:1}}
"