JSFiddle - React, Tailwind, and code Playground

by natchiketa

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/sugar/1.3.9/sugar.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.1/lodash.min.js"></script>
<script id="entry-template" type="text/x-handlebars-template">
    Event Name, {{month}}/{{day}}/{{year}} date-time, details, etc.
</script>

<script id="event-template" type="text/x-handlebars-template">
    <div class="box">
        <div class="date"> Aug <br/> 05 </div> 
        <div class="blockbox">
            <div class="title"> Mon., Aug. 5, 5:00 PM </div> <span class="event-type"> Support Group </span> <br>
            <div class="subtitle">
                <a href="/event/Breast-Cancer-Support-Group-Newly-Diagnosed-Aug-13/">Breast Cancer Support Group for Newly Diagnosed Patients</a>
                </div>
            </div>
            <div class="clear">
            </div>
        </div>    
</script>

<div class="datepicker"></div>
<div class="event_details event_hover_preview">
    <div class="eventsinner" data-monthshown="1"></div>
    <div class="eventsinner" data-monthshown="2"></div>
    <div class="eventsinner" data-monthshown="3"></div>
</div>
<div class="event_details events_selected"></div>

CSS

.datepicker {
    width: 907px;
}
.event_details {
    width: 920px;
    margin: 0.67em 0;
    padding: 10px 0;
    height: auto;
    min-height: 1.25em;
    font-size: 16px;
    background-color: #efdfdf;
    border-radius: 5px;
}
.events_selected {
    background-color: #dfdfef;
}
.added_event {
    display: inline-block;
    margin: 5px;
    background-color: #ffffff;
    border-radius: 5px;
    padding: 2px 4px;
}
.event-type {
    color: #363636;
    float: right;
    font-size: 11px;
}
.eventsinner {
    display:inline-block;
    border-right:2px solid #e5e5e5;
    padding-right:20px;
    margin-top:30px;
    min-width:270px;
}
.ie .eventsinner {
    max-width:270px;
}
.ie6 .eventsinner {
    width:270px;
}
.eventsinner {
    width: 280px;
}
.eventsinner .box .blockbox {
    width: 230px;
}
.eventsinner .subtitle {
    width: 240px;
}
.box {
    clear:left;
    padding:13px 0;
}
.box .date {
    color:#fff;
    font-size:12px;
    font-weight:bold;
    float:left;
    background-color:#0079d8;
    border:1px solid #0079d8;
    text-align:center;
    padding:6px 0px;
    margin-right:14px;
    width:34px;
}
.box .title {
    color:#363636;
    font-size:11px;
    float:left;
}
.box .note {
    font-style:italic;
    font-size:11px;
    float:left;
}
.box .subtitle a {
    color:#404040;
    font-size:12px;
    font-weight:bold;
    float:left;
}
.box .subtitle a:hover {
    color:#555555
}
.blockbox {
    float:left;
}

JavaScript

var entrySource = $("#entry-template").html();
var eventSource = $('#event-template').html();
var template = Handlebars.compile(entrySource);
var eventTemplate = Handlebars.compile(eventSource);

function eventsForMonths(month) {
    $('.eventsinner').each(function () {
        $(this).empty()
    });
    _.each([1, 2, 3], function (m) {
        _.times(_.random(1, 3), function () {
            $('.eventsinner[data-monthshown="' + m + '"]').append(eventTemplate());
        });
    });
}

$('.datepicker').datepicker({
    numberOfMonths: 3,

    onSelect: function (date, datepicker) {
        var dateArray = date.split('/'),
            dateObj = {
                month: dateArray[0],
                day: dateArray[1],
                year: dateArray[2]
            };
        $('.events_selected').append('<div class="added_event">' + date + '</div>');
    },

    onChangeMonthYear: function (month) {
        eventsForMonths(month);
    }
});
eventsForMonths(1);

/* $(document).on('mouseenter', '.ui-datepicker-calendar tbody td', function(event) {
        var month = $(this).data('month'),
            year = $(this).data('year'),
            day = $(this).text();
        $('.event_hover_preview').empty().html(template({
            month: month,
            year: year,
            day: day
        }));
    })
.on('mouseleave', '.ui-datepicker-calendar tbody td', function(event) {
    $('.event_hover_preview').empty();
}) */