JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<script src="https://raw.github.com/timrwood/moment/develop/moment.js"></script>
<div class="arena-column-3">
    <div class="arena-record-container">
        <div class="arena-record">
            <div class="arena-articledet-title"> <a href="http://www.bibliotekvastramalardalen.se/web/arena/welcome?p_p_id=listArticleView_WAR_arenaportlets_INSTANCE_3GjG&amp;p_p_lifecycle=1&amp;p_p_state=normal&amp;p_p_mode=view&amp;p_p_col_id=column-3&amp;p_p_col_pos=1&amp;p_p_col_count=3&amp;_listArticleView_WAR_arenaportlets_INSTANCE_3GjG__wu=%2FlistArticleView%2F%3Fwicket%3Ainterface%3D%3A0%3AsearchResultPanel%3AdataContainer%3AdataView%3A2%3AcontainerItem%3Aitem%3AcontainerTitle%3AlinkTitle%3A%3AILinkListener%3A%3A">Evenemang 1</a>

            </div>
            <div class="arena-articledet-description">
                <div class="arena-value">
                    <p class="text">Ett program om den sm&aring;l&auml;ndska f&ouml;rfattaren Martha Sandwall-Bergstr&ouml;m, 1913-2000, och hennes b&ouml;cker, med anledning av jubileums&aring;ret 2013. <a class="linkMore" href="#nogo">L&auml;s mer</a>

                    </p>
                    <p class="date"><strong>Plats:</strong> Kungs&ouml;rs stadsbibliotek
                        <br /><strong>Lokal: </strong>Stadsbiblioteket, Kungs&ouml;rs stadsbibliotek
                        <br /><strong>&Aring;lder:</strong> 
                        <br /><strong>Entr&eacute;:</strong> fri entr&eacute;
                        <br /><strong>Klockan:</strong> 18.00</p>
                    <p class="readMore">Eva S&ouml;derberg, lektor i litteraturvetenskap vid Mittuniversitetet och ordf&ouml;rande i Martha Sandwall-Bergstr&ouml;ms&auml;llskapet. Helene Ehriander, lektor i litteraturvetenskap vid Linn&eacute;universitetet och sekreterare i Martha Sandwall-Bergstr&ouml;ms&auml;llskapet.</p>
                </div>
            </div>
            <div class="arena-articledet-content-group"> <span class="arena-field">Kommun:</span>
 <span...

CSS

.arena-column-3 {
    margin: 20px;
    width: 40%;
    border: 1px solid #eee;
}
.arena-record-container {
    margin: 20px;
}
.calDivider {
    border: none;
    border-bottom: 1px solid #eee;
    clear: both;
    margin: 0 0 60px 0;
}
.calTitle {
    font-size: 20px;
    font-family: sans-serif;
}
.calEvent {
    border: 1px solid #ccc;
    width: 85px;
    font-family: sans-serif;
    margin: 20px 0 0 0;
    float: left;
}
.calDesc {
    float: left;
    width: 300px;
    margin: 0 0 40px 15px;
}
.calDay, .calDate, .calMonth {
    display:block;
    text-align: center;
    padding: 5px 0;
}
.calMonth {
    margin-top: -5px;
}
.calDay {
    background-color: #eee;
    border-bottom: 1px solid #ddd;
}
.calDate {
    font-size: 30px;
}
.kungsorColorDay {
    background-color: red;
    color: #fff;
}
.kopingColorDay {
    background-color: green;
    color: #fff;
}
.arbogaColorDay {
    background-color: blue;
    color: #fff;
}

JavaScript

$(document).ready(function () {
    $('.arena-column-3 .arena-articledet-event-start .arena-value').each(function (index, value) {
        $(this).closest('.arena-record-container').find('.arena-articledet-description').prepend('<div class="calEvent">');
        $(this).closest('.arena-record-container').find('.calEvent').prepend('<span class="calDay">', '<span class="calDate">', '<span class="calMonth">');
        $(this).closest('.arena-record-container').find('.arena-articledet-description .arena-value').addClass('calDesc').removeClass('arena-value');
        $(this).closest('.arena-record-container').find('.arena-articledet-title').addClass('calTitle').removeClass('arena-articledet-title');
        $(this).closest('.arena-record-container').append('<hr class="calDivider" />');

        var calDayElement = $(this).closest('.arena-record-container').find('.calDay');
        var calDateElement = $(this).closest('.arena-record-container').find('.calDate');
        var calMonthElement = $(this).closest('.arena-record-container').find('.calMonth');

        var eventDate = $(this).text();

        var calDay = moment(eventDate, 'YYYY-MM-DD').format('ddd');
        var calDate = moment(eventDate, 'YYYY-MM-DD').format('D');
        var calMonth = moment(eventDate, 'YYYY-MM-DD').format('MMM');

        calDayElement.prepend(calDay);
        calDateElement.prepend(calDate);
        calMonthElement.prepend(calMonth);

        var calGroup = $(this).closest('.arena-record-container').find('.arena-articledet-content-group > .arena-value').text().replace(/\s/g, '');

        if (calGroup === 'Kungs' + unescape("%F6") + 'r') {
            $(this).closest('.arena-record-container').find('.calDay').addClass('kungsorColorDay');
        } else if (calGroup === 'K' + unescape("%F6") + 'ping') {
            $(this).closest('.arena-record-container').find('.calDay').addClass('kopingColorDay');
        } else if (calGroup === 'Arboga') {
           ...