WTS - Availability Calendar

by Paulo Ávila

HTML

<table class="month-days">
    <tbody>
        <tr>
            <td>19</td>
            <td>20</td>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
        </tr>
    </tbody>
</table>

SCSS

/**
 * Do all configurations here
 */
$sprite: http://sbs.waytostay.com/ITC/calendar-availability-sprite_labels.png;

$origin-x: -19px; $origin-y: -19px;
$width-cell: 25px; $height-cell: 25px;
$width-border: 1px; $height-border: 1px;
$border-color: #efe9e4;




/**
 * Shouldn't really need to edit below here
 */
@mixin offset($col, $row) {
    background-position: ((-1 * ((($col - 1) * $width-cell) + ($col * $width-border))) + $origin-x) ((-1 * ((($row - 1) * $height-cell) + ($row * $height-border))) + $origin-y);
}

.month-days { border-spacing: 0; border-collapse: collapse; border: $width-border solid $border-color; }
.month-days td { padding: 0; text-align: center; vertical-align: middle; border: $width-border solid $border-color; width: $width-cell; height: $height-cell; }
.month-days td { font: 12px Arial; }
.month-days td { background-image: url($sprite); @include offset(1, 1); } /* A1 */
.month-days td.not-available { color: #9E9EA0; text-decoration: line-through; }

.month-days td.blocked-arr { @include offset(1, 2); } /* A2 */
.month-days td.blocked-dep { @include offset(1, 3); } /* A3 */
.month-days td.blocked-arr.blocked-dep { @include offset(1, 4); } /* A4 */

.month-days td.discount { @include offset(2, 1); } /* B1 */
.month-days td.discount.blocked-arr { @include offset(2, 2); } /* B2 */
.month-days td.discount.blocked-dep { @include offset(2, 3); } /* B3 */
.month-days td.discount.blocked-arr.blocked-dep { @include offset(2, 4); } /* B4 */

.month-days td.selected { @include offset(4, 1); } /* D1 */
.month-days td.selected.arr { @include offset(3, 1); } /* C1 */
.month-days td.selected.arr.blocked-dep { @include offset(3, 3); } /* C3 */
.month-days td.selected.dep { @include offset(5, 1); } /* E1 */
.month-days td.selected.dep.blocked-arr { @include offset(5, 2); } /* E2 */

.month-days td.discount.selected { @include offset(7, 1); } /* G1 */
.month-days td.discount.selected.arr { @include offset(6, 1); } /* F1 */
.month-days...

JavaScript

var styles = [
    {label: "Selected", class: "selected"},
    {label: "Not Available", class: "not-available"},
    {label: "Arrival", class: "arr"},
    {label: "Departure", class: "dep"},
    {label: "Discount", class: "discount"},
    {label: "Blocked for Arrival", class: "blocked-arr"},
    {label: "Blocked for Departure", class: "blocked-dep"}
];

$optionsTable = $('<table id="options">');

$.each(styles, function (indx, style) {
    var $optionsRow = $('<tr>');

    $('.month-days tr:eq(0) td').each(function () {
        var $dayCell = $(this),
            $optionCell = $('<td>'),
            $optionInput = $('<input type="checkbox">');
        
        $optionInput.on('change', function () {
            if($(this).is(':checked')) {
                $dayCell.addClass(style.class);
            } else {
                $dayCell.removeClass(style.class);
            }
        });

        $optionCell.append($optionInput);
        $optionsRow.append($optionCell);
    });

    $optionsRow.append($('<td class="style-label">' + style.label + '</td>'));
    $optionsTable.append($optionsRow);
});

$('body').append($optionsTable);

//*
$('input:eq(3)').prop('checked', true).change();
$('input:eq(4)').prop('checked', true).change();
$('input:eq(5)').prop('checked', true).change();
$('input:eq(6)').prop('checked', true).change();
$('input:eq(7)').prop('checked', true).change();
$('input:eq(8)').prop('checked', true).change();
$('input:eq(17)').prop('checked', true).change();
$('input:eq(22)').prop('checked', true).change();
$('input:eq(27)').prop('checked', true).change();
$('input:eq(31)').prop('checked', true).change();
$('input:eq(32)').prop('checked', true).change();
$('input:eq(33)').prop('checked', true).change();
$('input:eq(37)').prop('checked', true).change();
$('input:eq(45)').prop('checked', true).change();
//*/