April 16, 2015

Minimalist Calendar

Minimalist Calendar

An amazing purple color minimalist calendar.

HTML

<div class="wrapper">
  <div id="calendar"></div>
</div>

CSS

body {
    font-family: 'Arial', sans-serif;
    background-color: #3b323f;
}

body, html, .wrapper {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

button::-moz-focus-inner { 
  border: 0;
  padding: 0;
}

#calendar {
    margin: 20px 0;
    position: relative;
    overflow: hidden;
    height: 330px;
    width: 350px;
    font-size: 14px;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.4);
}
table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 350px;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(0);
    transition: all 0.3s ease;
}
table.active {
    transform: translateX(0px)top;
}
table.inactive {
    transition: all 0.3s 0.01s ease;
}
table.hide-left {
    transform: translateX(-299px);
}
table.hide-right {
    transform: translateX(300px);
}
td,th {
    text-align: center;
    background-color: #fff;
}
th {
    padding: 10px;
}
tr:first-child th {
    font-size: 20px;
    font-weight: bold;
    border-left: none;
    border-top: none;
}
td:last-child, th:last-child {
  border-right: none;
}

th {
    border-top: 1px solid rgba(0,0,0,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    background-color: #9b59b6;
    color: #fff;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
    font-weight: normal;
}
th .any {
    font-size: 12px;
    font-weight: normal;
    display: block;
    text-shadow: none;
    color: rgba(0,0,0,0.4);
}
tr:nth-child(2) th {
    padding: 5px;
}
td {
    padding: 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
td>span {
    color: #555;
    padding: 10px;
    display: block;
    border: 2px solid transparent;
    transition: border 0.3s ease;
}

td:nth-child(even)>span {
    background-color: rgba(0,0,0,0.02);
}
td:last-child>span,
td:nth-child(6)>span {
    color: #9b59b6;
}
td.today>span {
    font-weight: bold;
    background-color: #9b59b6;
    color: #fff;
    border: 2px solid rgba(0,0,0,0.1);
}
td.out > span {
    opacity: 0.2;
}
td > span:hover {
    background: #a57cb6;
    color: #fff;
}
.btn-next, .btn-prev {
    background: rgba(0,0,0,0.1);
    color: #fff;
    font-family: inherit;
    border: none;
    font-size: 18px;
    font-weight: bold;
    text-shadow: inherit;
    padding: 2px 10px 5px 10px;
    line-height: 1px;
    height: 30px;
    width: 30px;
    vertical-align: middle;
    border-radius: 100%;
    position: absolute;
    top: 15px;
}
.btn-next { right: 10px; padding-left: 13px; }
.btn-prev { left: 10px; padding-right: 13px;}
.btn-next:hover,
.btn-prev:hover {
    background: rgba(0,0,0,0.2);
}
button:hover { cursor: pointer; }
button:focus { outline: none; }

JavaScript

var months = [
    'January',
    'Febuary',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
];

var days = [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday'
];

var days_abr = [
    'sun',
    'mon',
    'tue',
    'wed',
    'thu',
    'fri',
    'sat'
];

Number.prototype.pad = function(num) {
    var str = '';
    for(var i = 0; i < (num-this.toString().length); i++)
        str += '0';
    return str += this.toString();
}

function calendar(widget, data)
{

    var original = widget.getElementsByClassName('active')[0];

    if(typeof original === 'undefined')
    {
        original = document.createElement('table');
        original.setAttribute('data-actual',
         data.getFullYear() + '/' +
         data.getMonth().pad(2) + '/' +
         data.getDate().pad(2))
        widget.appendChild(original);
    }

    var diff = data - new Date(original.getAttribute('data-actual'));

    diff = new Date(diff).getMonth();

    var e = document.createElement('table');

    e.className = diff  === 0 ? 'hide-left' : 'hide-right';
    e.innerHTML = '';

    widget.appendChild(e);

    e.setAttribute('data-actual',
                   data.getFullYear() + '/' +
                   data.getMonth().pad(2) + '/' +
                   data.getDate().pad(2))

    var row = document.createElement('tr');
    var title = document.createElement('th');
    title.setAttribute('colspan', 7);

    var btn_prev = document.createElement('button');
    btn_prev.className = 'btn-prev';
    btn_prev.innerHTML = '◂';

    var btn_next = document.createElement('button');
    btn_next.className = 'btn-next';
    btn_next.innerHTML = '▸';

    title.appendChild(btn_prev);
    title.appendChild(document.createElement('span')).innerHTML = 
        months[data.getMonth()] + '' + data.getFullYear() + '';

    title.appendChild(btn_next);

    btn_prev.onclick = function() {
        data.setMonth(data.getMonth() - 1);
        calendar(widget, data);
    };

    btn_next.onclick = function() {
        data.setMonth(data.getMonth() + 1);
        calendar(widget, data);
    };

    row.appendChild(title);
    e.appendChild(row);

    row = document.createElement('tr');

    for(var i = 1; i < 7; i++)
    {
        row.innerHTML += '' + days_abr[i] + '';
    }

    row.innerHTML += '' + days_abr[0] + '';
    e.appendChild(row);

    /* The day I will finish the previous month*/
    var home_my =
        new Date(data.getFullYear(), data.getMonth(), -1).getDay();

    var actual = new Date(data.getFullYear(),
     data.getMonth(),
     -home_my);

    /* 6 weeks to cover all posibilities
     *  Remains consistent while displaying many months 
     *  a grid */
    for(var s = 0; s < 6; s++)
    {
        var row = document.createElement('tr');

        for(var d = 1; d < 8; d++)
        {
     var cela = document.createElement('td');
     var span = document.createElement('span');

     cela.appendChild(span);

            span.innerHTML = actual.getDate();

            if(actual.getMonth() !== data.getMonth())
                cela.className = 'out';

            /* If today show it */
            if(data.getDate() == actual.getDate() &&
        data.getMonth() == actual.getMonth())
  cela.className = 'today';

     actual.setDate(actual.getDate()+1);
            row.appendChild(cela);
        }

        e.appendChild(row);
    }

    setTimeout(function() {
        e.className = 'active';
        original.className +=
        diff === 0 ? ' hide-right' : ' hide-left';
    }, 20);

    original.className = 'inactive';

    setTimeout(function() {
        var inactives = document.getElementsByClassName('inactive');
        for(var i = 0; i < inactives.length; i++)
            widget.removeChild(inactives[i]);
    }, 1000);

}

calendar(document.getElementById('calendar'), new Date());
demo

No comments:

Post a Comment

Popular Posts

Views