MAS-Calendario

by scyrizales

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.js"></script>
<script src="http://www.ractivejs.org/examples/lib/Ractive.js"></script>
<div id ="calendar" data-role="page">
    <div data-role="header">
        <h1>Supervision</h1>
    </div>
    <div data-role="content">
        
        <div>
            {{#dias:dia}}
            <div class="dia">{{dias[dia]}}</div>
            {{/dias}}
            {{#semanas:sem}}
                {{#dias:dia}}
                    <div class="dia">
                        <a href="#alerta" data-role="button">
                        {{cincoSemanas[(sem * 7) + (dia)].d}}
                            <span class="alertRegion">
                                <span class="alert red"></span>
                                <span class="alert green"></span>
                            </span>
                        </a>
                    </div>
                {{/dias}}
            {{/semanas}}
        </div>
    </div>
</div>
<div data-role="page" id="alerta">
    <div data-role="header">
        <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="c" data-inline="true" data-rel="back"></a>
        <h1>Supervision</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview">
            {{#alertas}}
            <li>{{alerta}}</li>
            {{/alertas}}
        </ul>
    </div>
</div>

CSS

.dia{
    width: 14%;
    float: left;
    text-align: center;
}

.alert{
    width: 6px;
    height: 6px;
    padding-top: 2px;
    float: right;
}

.alertRegion{
    width: 6px;
    float: right;
}

.red{
    background-color: red;
}

.green{
    background-color: green;
}

JavaScript

(function ($) {

    $.fn.ractiveView = function (model, reload) {
        var $that = this;
        var view = $that.data("ractive.view");
        var templateStr = $that.data("ractive.template");

        if (!view || reload) {
            if (!templateStr) {
                templateStr = $that.html();
                $that.data("ractive.template", templateStr);
            }
            var model = $.extend({}, model);
            
            view = new Ractive({
                el: $that[0],
                template: templateStr,
                data: model
            });
            $that.data("ractive.view", view);
        }

        return view;
    };

})(jQuery);

$(function () {
    var inicio = new Date(2013,9,22), 
        fin = new Date(2013, 10, 20);
    var medicion = [];
        
    while ((fin - inicio) > 0){
        var actualDay = inicio.getDay();
        actualDay = (actualDay == 0)? 7 : actualDay;
        medicion.push({
            wd: actualDay,
            d: inicio.getDate()
        });
        
        inicio.setDate(inicio.getDate()+1);
    }
    
    var cincoSemanas = [];
    
    for (var j = 1; j < medicion[0].wd; j++){
        cincoSemanas.push({d : "-"});
    }
    
    cincoSemanas = cincoSemanas.concat(medicion);
    
    for (var j = medicion[medicion.length - 1].wd; j < 7; j++){
        cincoSemanas.push({d : "-"});
    }
    
    $("#calendar").ractiveView().set({
        cincoSemanas: cincoSemanas,
        semanas: [1,2,3,4,5],
        dias: ["L","M","M","J","V","S","D"]
    });
    
    $("#alerta").ractiveView().set({
        alertas: [
            {alerta: "Aleatorio"},
            {alerta: "Por skus"}
        ]
    });
    
});