JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/metro-ui-css/2.0.23/min/metro-bootstrap.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/metro-ui-css/2.0.23/min/metro-responsive.min.css">
<script src="//cdn.jsdelivr.net/metro-ui-css/2.0.23/min/metro.min.js"></script>
<div class="container">
    <div id="adventCalendar" class="metro grid fluid"></div>
</div>

CSS

.tile {
    font-family: sans-serif;
    font-size: 4em;
    color: #E2E1E6;
}

JavaScript

var adventCalendar = (function () {
    var MONTH = 10; //10 = November / 11 = December --> set to November for testing
    var LAST_DAY = 30; // later 24 --> 30 just for testing
    
    function Calendar() {
        //console.log('constructor called');
        this.init();
    };
    var offers = [{
        'day': 1,
            'offer': 'something for day'
    }];
    // later you would have for each day a different offer.

    Calendar.prototype.init = function () {
        var offers24days;
        var $calendar = $('#adventCalendar');

        for (var i = 1; i <= LAST_DAY; i++) {
            // console.log(i);
            // deep copy of offer
            var newObject = jQuery.extend(true, {}, offers[0]);
            newObject.day = i;
            newObject.offer += ' ' + i;
            
            $door = $('<div class="tile rounded"/>')
                .text(i)
                .data(newObject)
                .appendTo($calendar);

            var that = this; // store reference to this Calendar
            $door.on('click', function () {
                var today = new Date();
                var $this = $(this);
                that.getTime('GMT', function (date) {
                    // This is where you do whatever you want with the time:
                    //console.log(date.getDate());
                    var data = $this.data(); // today from time server
                    
                    if ((data.day <= date.getDate()) && (date.getMonth() == MONTH)) {
                        // Attention! Date month starts at 0 --> 0 = Januar & 10 = November
                        // open allowed
                        alert(data.offer); // later you can use a popover instead of an alert. This is just for the demo.
                    } else {
                        //alert('not allowed'); // just for testing
                    }
                });
            });
        }
    }

    // get time from this SO question...