Width of an event

by Lloyd Atkinson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<!-- <div id="event" style="width: 200px; height: 200px; position: relative">
    <div id="pattern" style="position: absolute;">
        Test
    </div>
</div> -->

<div id="event" style="width: 200px; height: 200px;">
    <div id="pattern" style="">
        Test
    </div>
</div>

JavaScript

$('#event').css({ "backgroundColor": "#f6f6f6"});
$('#pattern').css({ "backgroundImage": "url(\"data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23" + 'FF0000' + "' fill-opacity='0.7' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E\")" });

 

const slotStart = moment('2020-02-07T13:00:00.0000000+00:00');
const slotEnd = moment('2020-02-07T14:00:00.0000000+00:00'); 

 

const eventStart = moment('2020-02-07T13:10:00.0000000+00:00');
const eventEnd = moment('2020-02-07T13:15:00.0000000+00:00');

 

const slotInterval = slotEnd.diff(slotStart);
const eventInterval = eventEnd.diff(eventStart);

 

const eventStartOffset = eventStart.valueOf() - slotStart.valueOf();
const eventEndOffset = slotEnd.valueOf() - eventEnd.valueOf();

 

const eventStartPercent = 100 / slotInterval.valueOf() * eventStartOffset.valueOf();
const eventEndPercent = 100 / slotInterval.valueOf() * eventEndOffset.valueOf();

 

/* $('#pattern').css({
    'left': `${eventStartPercent}%`,
    'right': `${eventEndPercent}%`,
});
 */
 
$('#pattern').css({
    'margin-left': `${eventStartPercent}%`,
    'margin-right': `${eventEndPercent}%`,
});