refactor custom Event content and add custom style

dev/index.ts

@@ -2,10 +2,12 @@
 import { formats } from 'dayjs/locale/*';
 import Ressource from '../src/Ressource';
 import TimeLine from '../src/Timeline'
-import '../src/Ressource'
+import '../src/Ressource';
 import { IEvent } from '../src/Event';
-import dayjs from 'dayjs'
+import dayjs from 'dayjs';
 
+
+ // TimeLine.extendStyle.push(new_css)
 const emptyTimeline:TimeLine = document.createElement("jc-timeline") as TimeLine;
 let title = document.createElement("h2");
 title.innerText = "Empty Timeline"
@@ -15,8 +17,29 @@ document.body.appendChild(emptyTimeline);
 emptyTimeline.setAttribute("legendSpan","1");
 emptyTimeline.setAttribute("slotWidth","40");
 
-const timeline:TimeLine = document.createElement("jc-timeline") as TimeLine;
 
+
+const timeline:TimeLine = document.createElement("jc-timeline") as TimeLine;
+timeline.customStyle = `.bubble{
+    height: 20px;
+    width: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    right: -4px;
+    bottom: -4px;
+    border-radius: 50%;
+    font-size: 12px;
+    font-weight: bold;
+    background: green;
+}
+bubble.red{
+    background: red;
+}
+bubble.orange{
+    background: orange;
+}`
 // timeline.defaultBackground = "maroon";
 
 const rows:Array<Ressource> = [ 
@@ -28,15 +51,15 @@ rows[2].parent = rows[1];
 rows[0].parent = rows[1];
 const data = dayjs().startOf("hour").hour(9);
 const timeslots:Array<IEvent> = [
-    {id:'1', content:"Fixed ressource" ,ressourceId:'3', start:data.subtract(3,"h").toDate(), end:data.toDate(), ressourceEditable:false,bgColor:"darkgreen"},
-    {id:'2', content:"Fixed time" , ressourceId:'3', start:data.toDate(), end:data.endOf("hour").add(1,"h").toDate(), editable:false,bgColor:"FireBrick"},
-    {id:'3', ressourceId:'4', start:data.add(1,"h").toDate(), end:data.endOf("hour").add(2,"h").toDate()},
+    {id:'1', title:"Fixed ressource" ,ressourceId:'3', start:data.subtract(3,"h").toDate(), end:data.toDate(), ressourceEditable:false,bgColor:"darkgreen"},
+    {id:'2', title:"Fixed time" , ressourceId:'3', start:data.toDate(), end:data.endOf("hour").add(1,"h").toDate(), editable:false,bgColor:"FireBrick"},
+    {id:'3', ressourceId:'4', start:data.add(1,"h").toDate(), end:data.endOf("hour").add(2,"h").toDate(),content:'<div class="bubble">0</div>'},
     {id:'4', ressourceId:'3', start:data.startOf("day").subtract(1,"h").toDate(), end:dayjs().endOf("hour").add(1,"h").toDate()}
 ]
 for(let i = 5; i < 10; i++){
     timeslots.push({
         id : i.toFixed(0),
-        content: "event " + i,
+        title: "event " + i,
         ressourceId:'1',
         start:data.add(i,'h').toDate(),
         end:data.add(i,'h').endOf("hour").add(1,"h").toDate(),

lib/Event.d.ts

@@ -1,20 +1,20 @@
-import { TemplateResult } from 'lit-html';
 import Selectable from './utils/selectable';
 export interface IEvent {
     id: string;
     start: Date;
     end: Date;
     ressourceId: string;
-    content?: string | TemplateResult;
+    title?: string;
     editable?: boolean | null;
     ressourceEditable?: boolean | null;
     bgColor?: string;
+    content?: string;
 }
 export declare class Event implements IEvent, Selectable {
     id: string;
     start: Date;
     end: Date;
-    content: string | TemplateResult;
+    title: string;
     ressourceId: string;
     isDisplayed: boolean;
     offset: number;
@@ -23,6 +23,7 @@ export declare class Event implements IEvent, Selectable {
     moving: boolean;
     selected: boolean;
     bgColor?: string;
+    content?: string;
     constructor(obj: IEvent);
     get startStr(): string;
     get endStr(): string;

lib/Event.js

@@ -7,7 +7,7 @@ class Event {
         this.start = obj.start;
         this.end = obj.end;
         this.ressourceId = obj.ressourceId;
-        this.content = (obj === null || obj === void 0 ? void 0 : obj.content) || this.id;
+        this.title = (obj === null || obj === void 0 ? void 0 : obj.title) || this.id;
         this.isDisplayed = false;
         this.offset = 0;
         this.editable = (obj === null || obj === void 0 ? void 0 : obj.editable) === undefined ? null : obj.editable;
@@ -15,6 +15,7 @@ class Event {
         this.moving = false;
         this.selected = false;
         this.bgColor = obj.bgColor;
+        this.content = obj.content;
     }
     get startStr() {
         return this.start.toISOString();

lib/Event.js.map

@@ -1 +1 @@
-{"version":3,"file":"Event.js","sourceRoot":"","sources":["../src/Event.ts"],"names":[],"mappings":";;;AAcA,MAAa,KAAK;IAcd,YAAY,GAAU;QACpB,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,CAAC;QACjB,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;QACvB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC;QACnB,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,WAAW,CAAC;QACnC,IAAI,CAAC,OAAO,GAAG,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,KAAI,IAAI,CAAC,EAAE,CAAC;QACvC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAChB,IAAI,CAAC,QAAQ,GAAG,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,QAAQ,MAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;QAClE,IAAI,CAAC,iBAAiB,GAAG,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,iBAAiB,MAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,CAAC;QAC7F,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,CAAA;IAE5B,CAAC;IACD,IAAI,QAAQ;QACR,OAAO,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAA;IACnC,CAAC;IACD,IAAI,MAAM;QACN,OAAO,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,CAAA;IACjC,CAAC;IAED,MAAM,CAAC,UAAU,CAAC,GAAU;QACxB,IAAI,GAAG,YAAY,KAAK,EAAC;YACrB,OAAO,GAAG,CAAA;SACb;aAAI;YACD,OAAO,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC;SACzB;IACL,CAAC;CACJ;AA3CD,sBA2CC;AAED,kBAAe,KAAK,CAAA"}
+{"version":3,"file":"Event.js","sourceRoot":"","sources":["../src/Event.ts"],"names":[],"mappings":";;;AAeA,MAAa,KAAK;IAed,YAAY,GAAU;QACpB,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,CAAC;QACjB,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;QACvB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC;QACnB,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,WAAW,CAAC;QACnC,IAAI,CAAC,KAAK,GAAG,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,KAAK,KAAI,IAAI,CAAC,EAAE,CAAC;QACnC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAChB,IAAI,CAAC,QAAQ,GAAG,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,QAAQ,MAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;QAClE,IAAI,CAAC,iBAAiB,GAAG,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,iBAAiB,MAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,CAAC;QAC7F,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;QAC3B,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;IAE7B,CAAC;IACD,IAAI,QAAQ;QACR,OAAO,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAA;IACnC,CAAC;IACD,IAAI,MAAM;QACN,OAAO,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,CAAA;IACjC,CAAC;IAED,MAAM,CAAC,UAAU,CAAC,GAAU;QACxB,IAAI,GAAG,YAAY,KAAK,EAAC;YACrB,OAAO,GAAG,CAAA;SACb;aAAI;YACD,OAAO,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC;SACzB;IACL,CAAC;CACJ;AA7CD,sBA6CC;AAED,kBAAe,KAAK,CAAA"}

lib/Timeline.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult } from 'lit-element';
+import { LitElement, TemplateResult, CSSResult } from 'lit-element';
 import { Event, IEvent } from './Event';
 import { Ressource, IRessource } from './Ressource';
 export { HorizontalResizer } from './components/horizontal-resizer';
@@ -16,7 +16,8 @@ export declare type UnitLegend = {
     [k in dayjsUnit]: string;
 };
 declare class Timeline extends LitElement {
-    static styles: import("lit-element").CSSResult[];
+    static get styles(): CSSResult[];
+    customStyle: string;
     private rows;
     private items;
     private selectedList;

lib/Timeline.js

@@ -13,6 +13,7 @@ exports.HorizontalResizer = void 0;
 const dayjs_1 = __importDefault(require("dayjs"));
 const lit_element_1 = require("lit-element");
 const style_map_1 = require("lit-html/directives/style-map");
+const unsafe_html_1 = require("lit-html/directives/unsafe-html");
 const simplebar_1 = __importDefault(require("simplebar"));
 const SimplbeBar_styles_1 = require("./styles/SimplbeBar.styles");
 const Event_1 = require("./Event");
@@ -42,6 +43,7 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
         this.selectedList = [];
         this.legend = [];
         this.defaultBackground = "";
+        this.customStyle = "";
         if (options.ressources) {
             this.addRessources(options.ressources);
         }
@@ -51,6 +53,9 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
         this.updateLegend();
         this.render();
     }
+    static get styles() {
+        return [Timeline_style_1.TimelineStyle, SimplbeBar_styles_1.SimpleBarStyle];
+    }
     get start() {
         return this._start.toISOString();
     }
@@ -319,7 +324,7 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
         }
     }
     _grabHeader(e) {
-        const root = this.shadowRoot;
+        const root = this.renderRoot;
         if (root !== null) {
             const gridContainer = root.querySelector(".jc-timeline-grid-container");
             const headerContainer = root.querySelector(".jc-timeline-grid-title-container");
@@ -395,8 +400,9 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
                 }).reduce((prev, curr) => prev || curr);
             } : (_e) => { return false; };
             const updateRessource = ressourceEditable ? (e) => {
-                var _a, _b, _c;
-                const rowId = (_c = (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.elementsFromPoint(e.clientX, e.clientY).find((e) => e.tagName == "TD")) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.getAttribute('row-id');
+                var _a, _b;
+                const rowId = (_b = (_a = document.elementsFromPoint(e.clientX, e.clientY)
+                    .find((e) => e.tagName == "TD")) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.getAttribute('row-id');
                 if (rowId) {
                     const ressourceId = this.rows[Number(rowId)].id;
                     if (ressourceId !== localSlot.ressourceId) {
@@ -475,7 +481,7 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
         };
     }
     firstUpdated() {
-        const root = this.shadowRoot;
+        const root = this.renderRoot;
         if (root !== null) {
             const gridContainer = root.querySelector(".jc-timeline-grid-container");
             const simplebar = new simplebar_1.default(gridContainer).getScrollElement();
@@ -519,7 +525,7 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
             style.top = rowTop - 6 + "px";
             return lit_element_1.html `<div class="jc-timeslot empty" style="${style_map_1.styleMap(style)}"></div>`;
         }
-        let content = lit_element_1.html `${evt.content}`;
+        let content = lit_element_1.html `<div class="jc-timeslot-title">${evt.title}</div>${evt.content ? unsafe_html_1.unsafeHTML(evt.content) : ""}`;
         const resizer = evt.editable === null ? ressource.eventEditable : evt.editable;
         const editableRessource = evt.ressourceEditable === null ? ressource.eventRessourceEditable : evt.ressourceEditable;
         if (resizer) {
@@ -622,6 +628,7 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
         }
         const displayedRows = this.rows.map((r, i) => { return { i: i, r: r }; }).filter(o => o.r.show);
         return lit_element_1.html `
+        <style>${this.customStyle}</style>
       <div class="jc-timeline-header">
         <div class="jc-timeline-rows-title" style=${style_map_1.styleMap({ minWidth: this.ressourceWidth + "px", width: this.ressourceWidth + "px" })}>${this.rowsTitle}</div>
         <horizontal-resizer @resize-x="${this._handleResizeX}"></horizontal-resizer>
@@ -660,7 +667,6 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
     `;
     }
 };
-Timeline.styles = [Timeline_style_1.TimelineStyle, SimplbeBar_styles_1.SimpleBarStyle];
 __decorate([
     lit_element_1.internalProperty()
 ], Timeline.prototype, "rows", void 0);

lib/stories/Timeline.stories.js

@@ -65,11 +65,11 @@ exports.WithEvents.args = {
     end: "2021-04-05T17:59:00.000Z",
     ressources: [{ id: "1", title: "Ressource 1" }, { id: "2", title: "Ressource 2" }],
     events: [
-        { id: '1', content: "Fixed ressource", ressourceId: '1', start: new Date("2021-04-05T05:00:00.000Z"), end: new Date("2021-04-05T07:59:00.000Z"), ressourceEditable: false, bgColor: "darkgreen" },
-        { id: '2', content: "Fixed time", ressourceId: '1', start: new Date("2021-04-05T09:00:00.000Z"), end: new Date("2021-04-05T10:59:00.000Z"), editable: false, bgColor: "FireBrick" },
+        { id: '1', title: "Fixed ressource", ressourceId: '1', start: new Date("2021-04-05T05:00:00.000Z"), end: new Date("2021-04-05T07:59:00.000Z"), ressourceEditable: false, bgColor: "darkgreen" },
+        { id: '2', title: "Fixed time", ressourceId: '1', start: new Date("2021-04-05T09:00:00.000Z"), end: new Date("2021-04-05T10:59:00.000Z"), editable: false, bgColor: "FireBrick" },
         { id: '3', ressourceId: '2', start: new Date("2021-04-05T10:00:00.000Z"), end: new Date("2021-04-05T11:59:00.000Z") },
         { id: '4', ressourceId: '2', start: new Date("2021-04-05T11:00:00.000Z"), end: new Date("2021-04-05T12:59:00.000Z") },
-        { id: '5', ressourceId: '2', start: new Date("2021-04-05T12:00:00.000Z"), end: new Date("2021-04-05T13:59:00.000Z") }
+        { id: '5', ressourceId: '2', start: new Date("2021-04-05T12:00:00.000Z"), end: new Date("2021-04-05T13:59:00.000Z"), content: '<div class="bubble">0</div>' }
     ]
 };
 const nItem = 25;
@@ -84,7 +84,7 @@ exports.Rainbow.args = {
         return {
             id: "" + i,
             ressourceId: "" + (i % 8),
-            content: "Item " + i,
+            title: "Item " + i,
             start: new Date(date + 1800000 * i),
             end: new Date(date + 3600000 + 1800000 * i),
             bgColor: "hsl(" + Math.round(i / (nItem - 1) * 360) + ", 100%, 50%)"

lib/styles/Timeline.style.js

@@ -155,17 +155,19 @@ i.jc-spacer.collapse:after{
 }
 .jc-timeslot{
     position:absolute;
-    white-space: nowrap;
-    overflow-x:hidden;
     background-color:var(--default-background);
     color:#fff;
     border-radius:3px;
-    padding:4px;
     margin:2px 0px;
+    z-index:1;
+    cursor: grab;
+}
+.jc-timeslot-title{
     font-size:14px;
     font-weight:600;
-    z-index:1;
-    cursor:auto;
+    padding:4px;
+    white-space: nowrap;
+    overflow-x: hidden;
 }
 .jc-timeslot.empty{
     height:5px;
@@ -179,6 +181,7 @@ i.jc-spacer.collapse:after{
 }
 .jc-timeslot.selected:before{
     border:solid 2px black;
+    border-radius:3px;
     position:absolute;
     top:0;
     bottom:0;

lib/styles/Timeline.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.style.js","sourceRoot":"","sources":["../../src/styles/Timeline.style.ts"],"names":[],"mappings":";;;AAAA,6CAA6C;AAEhC,QAAA,aAAa,GAAa,iBAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+OzC,CAAC"}
+{"version":3,"file":"Timeline.style.js","sourceRoot":"","sources":["../../src/styles/Timeline.style.ts"],"names":[],"mappings":";;;AAAA,6CAA6C;AAEhC,QAAA,aAAa,GAAa,iBAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkPzC,CAAC"}

src/Event.ts

@@ -7,16 +7,17 @@ export interface IEvent{
     start:Date
     end: Date
     ressourceId:string
-    content?:string |TemplateResult
+    title?:string
     editable?:boolean | null
     ressourceEditable?:boolean | null
-    bgColor?:string
+    bgColor?:string,
+    content?:string
 }
 export class Event implements IEvent, Selectable{
     id:string
     start:Date
     end:Date
-    content: string | TemplateResult
+    title: string 
     ressourceId: string
     isDisplayed: boolean
     offset: number
@@ -25,20 +26,22 @@ export class Event implements IEvent, Selectable{
     moving:boolean 
     selected:boolean
     bgColor?:string
+    content?:string
 
     constructor(obj:IEvent){
       this.id = obj.id;
       this.start = obj.start;
       this.end = obj.end;
       this.ressourceId = obj.ressourceId;
-      this.content = obj?.content || this.id;
+      this.title = obj?.title || this.id;
       this.isDisplayed = false;
       this.offset = 0;
       this.editable = obj?.editable === undefined ? null : obj.editable;
       this.ressourceEditable = obj?.ressourceEditable === undefined ? null : obj.ressourceEditable;
       this.moving = false;
       this.selected = false;
-      this.bgColor = obj.bgColor
+      this.bgColor = obj.bgColor;
+      this.content = obj.content;
       
     }
     get startStr():string{

src/Timeline.ts

@@ -1,6 +1,7 @@
 import dayjs, { Dayjs } from 'dayjs'
-import { LitElement, html, customElement, property, TemplateResult, internalProperty } from 'lit-element';
+import { LitElement, html, customElement, property, TemplateResult, internalProperty, CSSResult } from 'lit-element';
 import { styleMap } from 'lit-html/directives/style-map';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 import SimpleBar from 'simplebar';
 import {SimpleBarStyle} from './styles/SimplbeBar.styles';
 
@@ -45,7 +46,11 @@ interface legendItem {
  */
 @customElement('jc-timeline')
 class Timeline extends LitElement {
-    static styles = [TimelineStyle,SimpleBarStyle] 
+    
+    static get styles():CSSResult[] {
+        return [TimelineStyle,SimpleBarStyle] 
+    }
+    customStyle:string  
     @internalProperty() // important for the refresh
     private rows: Array<Ressource>
     @internalProperty() // important for the refresh
@@ -129,6 +134,8 @@ class Timeline extends LitElement {
         this.selectedList = [];
         this.legend = [];
         this.defaultBackground = "";
+        this.customStyle = "";  
+    
         if (options.ressources){
             this.addRessources(options.ressources)
         }
@@ -399,7 +406,7 @@ class Timeline extends LitElement {
         }
     }
     private _grabHeader(e: MouseEvent):void {
-        const root = this.shadowRoot;
+        const root = this.renderRoot;
         if (root !== null) {
             const gridContainer = root.querySelector(".jc-timeline-grid-container") as HTMLBaseElement;
             const headerContainer = root.querySelector(".jc-timeline-grid-title-container") as HTMLBaseElement;
@@ -481,7 +488,7 @@ class Timeline extends LitElement {
             } : (_e: MouseEvent) => { return false };
 
             const updateRessource = ressourceEditable ? (e: MouseEvent) => {
-                const rowId = this.shadowRoot?.elementsFromPoint(e.clientX, e.clientY)
+                const rowId = document.elementsFromPoint(e.clientX, e.clientY)
                     .find((e) => e.tagName == "TD")?.parentElement?.getAttribute('row-id');
                 if (rowId) {
                     const ressourceId = this.rows[Number(rowId)].id;
@@ -566,7 +573,7 @@ class Timeline extends LitElement {
         };
     }
     firstUpdated():void {
-        const root = this.shadowRoot;
+        const root = this.renderRoot;
         if (root !== null) {
             const gridContainer = root.querySelector(".jc-timeline-grid-container") as HTMLBaseElement;
             const simplebar = new SimpleBar(gridContainer).getScrollElement() as HTMLBaseElement;
@@ -618,7 +625,7 @@ class Timeline extends LitElement {
             return html`<div class="jc-timeslot empty" style="${styleMap(style)}"></div>`
         }
 
-        let content: TemplateResult = html`${evt.content}`
+        let content: TemplateResult = html`<div class="jc-timeslot-title">${evt.title}</div>${evt.content ? unsafeHTML(evt.content):""}`
         const resizer = evt.editable === null ? ressource.eventEditable : evt.editable;
         const editableRessource = evt.ressourceEditable === null ? ressource.eventRessourceEditable : evt.ressourceEditable;
         if (resizer) {
@@ -727,6 +734,7 @@ class Timeline extends LitElement {
         }
         const displayedRows = this.rows.map((r,i)=>{return{i:i,r:r}}).filter(o=>o.r.show);
         return html`
+        <style>${this.customStyle}</style>
       <div class="jc-timeline-header">
         <div class="jc-timeline-rows-title" style=${styleMap({ minWidth: this.ressourceWidth + "px", width: this.ressourceWidth + "px" })}>${this.rowsTitle}</div>
         <horizontal-resizer @resize-x="${this._handleResizeX}"></horizontal-resizer>
@@ -766,4 +774,4 @@ class Timeline extends LitElement {
     }
 }
 
-export default Timeline;
+export default Timeline;

src/stories/Timeline.stories.ts

@@ -73,11 +73,11 @@ WithEvents.args = {
   end:"2021-04-05T17:59:00.000Z",
   ressources:[{id:"1",title:"Ressource 1"},{id:"2",title:"Ressource 2"}],
   events: [
-    {id:'1', content:"Fixed ressource" ,ressourceId:'1', start:new Date("2021-04-05T05:00:00.000Z"), end:new Date("2021-04-05T07:59:00.000Z"), ressourceEditable:false,bgColor:"darkgreen"},
-    {id:'2', content:"Fixed time" , ressourceId:'1', start:new Date("2021-04-05T09:00:00.000Z"), end:new Date("2021-04-05T10:59:00.000Z"), editable:false,bgColor:"FireBrick"},
+    {id:'1', title:"Fixed ressource" ,ressourceId:'1', start:new Date("2021-04-05T05:00:00.000Z"), end:new Date("2021-04-05T07:59:00.000Z"), ressourceEditable:false,bgColor:"darkgreen"},
+    {id:'2', title:"Fixed time" , ressourceId:'1', start:new Date("2021-04-05T09:00:00.000Z"), end:new Date("2021-04-05T10:59:00.000Z"), editable:false,bgColor:"FireBrick"},
     {id:'3', ressourceId:'2', start:new Date("2021-04-05T10:00:00.000Z"), end:new Date("2021-04-05T11:59:00.000Z")},
     {id:'4', ressourceId:'2', start:new Date("2021-04-05T11:00:00.000Z"), end:new Date("2021-04-05T12:59:00.000Z")},
-    {id:'5', ressourceId:'2', start:new Date("2021-04-05T12:00:00.000Z"), end:new Date("2021-04-05T13:59:00.000Z")}
+    {id:'5', ressourceId:'2', start:new Date("2021-04-05T12:00:00.000Z"), end:new Date("2021-04-05T13:59:00.000Z"),content:'<div class="bubble">0</div>'}
 ]
 }
 const nItem = 25;
@@ -92,7 +92,7 @@ Rainbow.args = {
       return {
           id:""+i,
           ressourceId:"" + (i % 8),
-          content:"Item "+i,
+          title:"Item "+i,
           start: new Date(date + 1800000 * i),
           end:new Date(date + 3600_000+ 1800000 * i),
           bgColor:"hsl(" + Math.round(i / (nItem-1) * 360) + ", 100%, 50%)"

src/styles/Timeline.style.ts

@@ -153,17 +153,19 @@ i.jc-spacer.collapse:after{
 }
 .jc-timeslot{
     position:absolute;
-    white-space: nowrap;
-    overflow-x:hidden;
     background-color:var(--default-background);
     color:#fff;
     border-radius:3px;
-    padding:4px;
     margin:2px 0px;
+    z-index:1;
+    cursor: grab;
+}
+.jc-timeslot-title{
     font-size:14px;
     font-weight:600;
-    z-index:1;
-    cursor:auto;
+    padding:4px;
+    white-space: nowrap;
+    overflow-x: hidden;
 }
 .jc-timeslot.empty{
     height:5px;
@@ -177,6 +179,7 @@ i.jc-spacer.collapse:after{
 }
 .jc-timeslot.selected:before{
     border:solid 2px black;
+    border-radius:3px;
     position:absolute;
     top:0;
     bottom:0;