Bättre Kalender

by Niclas Lardh

HTML

<h1>Bättre kalender</h1>

<ul id="calendar"></ul>
<pre id="console"></pre>

CSS

#console {
    border: 1px solid red;
    margin: 10px;
    padding: 10px;
}
h1 {
    width: 560px;
    text-align: center;
}
/* Behållaren som vi lägger alla dagar i. Är en UL.
Bredden måste anpassas efter storlek på dagarna för att det hela ska bli rätt. I det här fallet 80x7=560*/
#calendar {
    width: 560px;
    margin: 0;
    padding: 0;
}
/* Dagarna är LI som inline-blocks med 79px bredd+1px border. Sätter -1px i marginal på höger och botten för att kantlinjerna ska bli snyggare. Varje ruta blir totalt 80px i bredd. */
.dayName,
.dayInPreviousMonth,
.dayInThisMonth,
.dayInNextMonth {
    list-style-type: none;
    display: inline-block;
    vertical-align: top;
    height: 79px;
    width: 79px;
    position: relative;
    border: 1px solid black;
    margin: 0 -1px -1px 0;
    background-color: lightblue;
    text-align: center;
    font-size: 40px;
    line-height: 79px;
    color: black;
    color: rgba(0, 0, 0, 0.5);
}
/* Annan färg på lördag och söndag */
.dayInThisMonth:nth-child(7n-1),
.dayInThisMonth:nth-child(7n) {
    background-color: pink;
}
/* Dagrubriker */
.dayName {
    height: 30px;
    line-height: 30px;
    color: black;
    background-color: rgba(128, 128, 128, 0.4);
    text-align: center;
    font-size: 13px;
    font-weight: bold;
}
/* Dagar som inte tillhör månaden ska vara vita */
.dayInPreviousMonth,
.dayInNextMonth {
    background-color: white;
}
/* Event-rutan. Placeras absolut ovanpå dagen.
Position från överkant styrs inline. */
 .event {
    width: 100%;
    height: 20px;
    line-height: 20px;
    color: black;
    background-color: rgba(128, 200, 128, 0.7);
    position: absolute;
    top: 0;
    text-align: center;
    font-size: 13px;
}
/* Snygga till första och sista eventen lite */
.event.firstEvent {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
   ...

JavaScript

var events = [{
    name: 'Pelle',
    color: 'red',
    from: 3,
    to: 9
}, {
    name: 'Pelle',
    color: '#c93',
    from: 9,
    to: 10
}, {
    name: 'Martin',
    color: 'blue',
    from: 4,
    to: 4
}, {
    name: 'Willy',
    color: 'green',
    from: 9,
    to: 11
}, {
    name: 'Erik',
    color: 'magenta',
    from: 4,
    to: 12
}, {
    name: 'Barbro',
    color: 'yellow',
    from: 5,
    to: 7
}, {
    name: 'Ludwig',
    color: '#39c',
    from: 11,
    to: 14
}];


var daysInMonth = 31,
    firstDayOfMonth = 1, // 0 = Monday and so on
    slotsInDay = 4, // How many slots can be in a single day? Depends on height.
    eventHeightPx = 20,
    days = {},
    dayNames = ['Måndag', 'Tisdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lördag', 'Söndag'],
    s,
    i,
    d;


// Populate our days-object.
// Each day is named after the date and contains events and slots
for (i = 0; i < daysInMonth; i++) {
    days[i + 1] = {
        events: [],
        slots: []
    };
}


// Run through all the events and push a copy of it to all days where it occurs.
// Also assign them unique IDs.
for (var eventIndex = 0; eventIndex < events.length; eventIndex++) {
    events[eventIndex].id = eventIndex;
    for (var dayIndex = events[eventIndex].from; dayIndex <= events[eventIndex].to; dayIndex++) {
        days[dayIndex].events.push(events[eventIndex]);
    }
}


// Output the HTML for the days of the calendar
// Each day is a list item in the calendar list

// Day names
for (i = 0; i < dayNames.length; i++) {
    $('#calendar').append('<li class="dayName">' + dayNames[i] + '</li>');
}

// Last month
for (i = 0; i < firstDayOfMonth; i++) {
    $('#calendar').append('<li class="dayInPreviousMonth"></li>');
}

// This month
for (var day in days) {
    $('#calendar').append('<li data-date="' + day + '" class="dayInThisMonth">' + day + '</li>');
}

// Next month (to fill out the full last week)
for (var i = 0; i < 7 - (firstDayOfMonth + daysInMonth) % 7; i++) {
   ...