JSFiddle - React, Tailwind, and code Playground

by PaulSinnema

JavaScript

function timeScale(parameters) {
    var dayFactor = 86400000;
    var days = Math.round((parameters.endDate - parameters.startDate) / dayFactor);
    var width = parameters.dayWidth * days;
    
    var paper = Raphael(0, 0, width, parameters.height);
    var posx = 20;
    var posy = 20;
    var layerHeight = parameters.height / 3;
    
    var boundary = paper.rect(1, 1, width - 2, parameters.height - 2);
    boundary.attr('stroke-width', 0);
    boundary.attr('fill', parameters.angle + '-' + parameters.startColor + '-' + parameters.endColor);

    drawMonth(paper, parameters.dayWidth / 2, parameters.height - 2 * layerHeight, parameters.startDate, parameters);
    for (day = 0; day < days; day++) {
        var currentPointInTime = new Date(parameters.startDate);
        currentPointInTime.setDate(startDate.getDate() + day);
        // console.log(ISODateString(currentPointInTime));
        var horizontalOffset = day * parameters.dayWidth;
        line(paper, horizontalOffset, parameters.height - layerHeight, horizontalOffset, parameters.height, parameters.lineColor);
      
        drawDay(paper,
                (horizontalOffset + (parameters.dayWidth / 2)),
                (parameters.height - layerHeight),
                currentPointInTime,
                parameters);
      
  if(currentPointInTime.getDate() == 1) {
        drawMonth(paper, horizontalOffset + (parameters.dayWidth / 2), parameters.height - 2 * layerHeight, currentPointInTime, parameters);
  }
    }
}

function drawDay(paper, x, y, date, parameters) {
    var now = new Date();
    var textColor = parameters.textColor;
    if(date.getDate() == now.getDate() && date.getMonth() == now.getMonth() && date.getYear() == now.getYear()) {
      textColor = parameter.nowColor;
    }
    drawText(paper, x, y, date.getDate(), parameters.textColor);
}

var months = [ 'jan', 'feb', 'mrt', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec' ];

function drawMonth(paper, x, y, date, parameters)...