Calendar test

index.pug

div#timeline
    each val in [...Array(24).keys()]
        div.cell(style="--place:" + val)
    div.event(style="--start:3; --end:7;")
        div.container

playground.json

{
  "scripts": [],
  "styles": []
}

script.ts

‎‎​

style.scss

:root {

}

body {
    #timeline {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
        grid-template-rows: repeat(24, 4rem);
        .cell {
            border-bottom: 1px dotted #656D78;
            grid-column: 1/-1;
            grid-row: var(--place) / var(--place);
            &:first-child {
                border-top: 1px dotted #656D78;
            }
        }
        .event {
            position: relative;
            grid-row: var(--start) / var(--end);
            grid-column: 2;
            border-radius: 1rem;
            background-color: #ED5565;
            cursor: ns-resize;
            &:before, &:after {
                content: '';
                position: absolute;
                left:50%;
                transform: translate(-50%, -50%);
                height:.25rem;
                width:50%;
                border-radius: 1rem;
                background:rgba(0,0,0,.1);
            }
            &:before {
                top:.5rem;
            }
            &:after {
                top:calc(100% - .5rem);
            }
            .container {
                position: absolute;
                top:1rem;
                left:.125rem;
                right:.125rem;
                bottom:1rem;
                background:white;
                border-radius: 1rem;
                cursor: initial;
            }
        }
    }
}