Jak zrobić kalendarz wpisów na Bloggerze

środa, 6 lipca 2016

Mam dla Was niespodziankę - nie będzie tutaj żadnego grzebania w kodzie, będzie tutaj tylko HTML/JavaScript i CSS. Wydaje się to za proste? No co mogę powiedzieć, są rzeczy, które nie wymagają grzebania w kodzie, ale jak się bardzo chce to można, jednak ja staram się Wam przedstawić jak najprostsze rozwiązania.

Co najpierw musimy zrobić? Musimy przejść do układ - dodaj gadżet - HTML/JavaScript i dodać taki kod:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
<div id="my-calendar">
    </div>
<script type="text/javascript">
// global varables
    today        = moment().format("YYYY-MM-DD");
    selectedDate = moment(new Date());
drawCalendar(selectedDate);
    reloadData();
function loadCalendar(json) {
        // Get total posts
        var totalposts = json.feed.openSearch$totalResults.$t;
console.log("tutaj");
console.log(json.feed.entry);
        for (var i = 0; i < totalposts; i++) {
            var posturl;
            // Get rel=alternate for truly post url
            for (var j = 0; j < json.feed.entry[i].link.length; j++) {
                if (json.feed.entry[i].link[j].rel == 'alternate') {
                    posturl = json.feed.entry[i].link[j].href;
                    break;
                }
            }
            var poststitle = json.feed.entry[i].title.$t;
            var published = json.feed.entry[i].published.$t;
            var elementId = published.substr(0, 10);
            // console.log('elementId:' + elementId);
            var dayElement = document.getElementById(elementId);
            if (dayElement !== null) {
                var dayNumber = dayElement.innerHTML;
                dayElement.innerHTML = '<a href="' + posturl + '" title="' + poststitle + '">' + dayNumber + '</a>';
            } else {
                //console.log('elementId '+elementId+' not found in DOM.');
            }
        }
    }
    function reloadData() {
        var format = 'YYYY-MM-DDT00:00:00';
        var startDate = selectedDate.clone().startOf('month').format(format);
        var endDate = selectedDate.clone().endOf('month').format(format);
        var blogID = "ID NASZEGO BLOGA";
        var url = "http://www.blogger.com/feeds/" + blogID + "/posts/default?alt=json-in-script"
        url += "&callback=loadCalendar";
        url += "&published-min=" + startDate;
        url += "&published-max=" + endDate;
        var my_awesome_script = document.createElement('script');
        my_awesome_script.setAttribute('src', url);
        document.head.appendChild(my_awesome_script);
    }
    function previousMonth() {
        selectedDate.subtract(1, 'months');
        drawCalendar(selectedDate);
        reloadData();
    }
    function nextMonth() {
        selectedDate.add(1, 'months');
        drawCalendar(selectedDate);
        reloadData();
    }
    function drawCalendar(todayDate) {
            <!-- Begin
            monthnames = new Array(
                "Styczeń",
                "Luty",
                "Marzec",
                "Kwiecień",
                "Maj",
                "Czerwiec",
                "Lipiec",
                "Sierpień",
                "Wrzesień",
                "Październik",
                "Listopad",
                "Grudzień");
            monthdays = new Array(12);
            monthdays[0] = 31;
            monthdays[1] = 28;
            monthdays[2] = 31;
            monthdays[3] = 30;
            monthdays[4] = 31;
            monthdays[5] = 30;
            monthdays[6] = 31;
            monthdays[7] = 31;
            monthdays[8] = 30;
            monthdays[9] = 31;
            monthdays[10] = 30;
            monthdays[11] = 31;
            // todayDate = new Date();
            thisday = todayDate.day(); //getDay();
            thismonth = todayDate.month(); //getMonth();
            thisdate = todayDate.date();//getDate();
            thisyear = todayDate.year();//getYear();
            thisyear = thisyear % 100;
            thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
            if (((thisyear % 4 == 0) && !(thisyear % 100 == 0)) || (thisyear % 400 == 0)) monthdays[1]++;
            startspaces = thisdate;
            while (startspaces > 7) startspaces -= 7;
            startspaces = thisday - startspaces; // + 1; // start from monday
            if (startspaces < 0) startspaces += 7;
            document.getElementById('my-calendar').innerHTML = ""; // reset
            var anchorPrev = document.createElement('a');
            anchorPrev.setAttribute('class', 'my-previous-month');
            anchorPrev.setAttribute('href', 'javascript:previousMonth()' );// ?
            anchorPrev.textContent = "<";
            document.getElementById('my-calendar').appendChild(anchorPrev);
            if (moment().isAfter(selectedDate.endOf("month"))) {
                var anchorPrev = document.createElement('a');
                anchorPrev.setAttribute('class', 'my-next-month');
                anchorPrev.setAttribute('href', 'javascript:nextMonth()' );// ?
                anchorPrev.textContent = ">";
                document.getElementById('my-calendar').appendChild(anchorPrev);
            }
            var html = document.getElementById('my-calendar').innerHTML;
            html += "<h2><center>" + monthnames[thismonth] + " " + thisyear + "</center></h2>";
            html += "<table width='100%' border=2>";
            html += "<tr>";
            html += "<th><span>Pn</span></th>";
            html += "<th><span>Wt</span></th>";
            html += "<th><span>Śr</span></th>";
            html += "<th><span>Cz</span></th>";
            html += "<th><span>Pt</span></th>";
            html += "<th><span>Sob</span></th>";
            html += "<th><span>Nd</span></th>";
            html += "</tr>";
            html += "<tr>";
            if (startspaces > 0) {
                html += "<td colspan="+startspaces+"> </td>";
            }
            // for (s = 0; s < startspaces; s++) {
            //     html += "<td> </td>";
            // }
            count = 1;
            while (count <= monthdays[thismonth]) {
                for (b = startspaces; b < 7; b++) {
                    var elementId = thisyear;
                    elementId += "-" + (((thismonth + 1) < 10) ? "0" + (thismonth + 1) : (thismonth + 1));
                    elementId += "-" + ((count < 10) ? "0" + count : count);
                    var classesName = (today == elementId) ? "today" : "";
                    html += '<td id="' + elementId + '" class="'+classesName+'"><span>';
                    if (today == elementId) {
                        html += "<strong>";
                    }
                    if (count <= monthdays[thismonth]) {
                        html += count;
                    } else {
                        html += " ";
                    }
                    if (today == elementId) {
                        html += "</strong>";
                    }
               
                    html += "</span></td>";
                    count++;
                }
                html += "</tr>";
                html += "<tr>";
                startspaces = 0;
            }
            html += "</table></p>";
            document.getElementById('my-calendar').innerHTML = html;
        }
        // End -->
    </script>

Jak widzicie w tym kodzie musimy uzupełnić tylko jedno miejsce, naszym ID bloga. Jak nasze ID znaleźć? Wystarczy wejść chociażby w zakładkę "przegląd" i skopiować ostatnie cyferki.

Dodawanie kodu CSS. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy tam taki kod:

/* Calender
------------------------------------*/
#my-calendar {
padding: 20px;
}
#my-calendar .my-previous-month {
margin-top: 10px;
text-align: center;
font-size: 30px;
display: block;
width: 160px;
height: 40px;
line-height: 40px;
float: left;
border: 2px solid #E9EAEe;
}
#my-calendar .my-next-month {
margin-top: 20px;
text-align: center;
font-size: 30px;
display: block;
width: 160px;
height: 40px;
line-height: 40px;
float: right;
border: 2px solid #E9EAEe;
}
#my-calendar a {
font-weight: 800;
color: #eb7c96;
text-decoration: none;
}
#my-calendar table {
font-size: 12px;
table-layout: fixed;
border-collapse: collapse;
background: #fff;
}
#my-calendar table, #my-calendar table th, #my-calendar table td {
border: 2px solid #E9EAEe;
}
#my-calendar table tr {
color: #444;
text-align: center;
}
#my-calendar table tr td.today {
border: 4px solid #8f778a;
}
#my-calendar table tr td span, #my-calendar table th span {
display: block;
line-height: 40px;
background: #fff;
}
#my-calendar table a {
color: #eb7c96;
text-decoration: none;
}

Wszystkie pogrubione (i kolorowe) wartości są zmienne

• Marginesy wewnętrzne
• Górny margines naszego przycisku "następny miesiąc" 

• Położenie strzałki (środek, lewa strona, prawa strona)
• Wielkość strzałki
• Długość przycisku
• Wysokość przycisku
• Położenie strzałki (góra, dół) 
• Położenie całego przycisku (ramka + strzałka - lewa strona, prawa strona, środek) 
• Grubość, rodzaj i kolor ramki ze strzałką 
• Górny margines przycisku "powrót do poprzedniego miesiąca" 

• Położenie strzałki (środek, lewa strona, prawa strona)
• Wielkość strzałki
• Długość przycisku 
• Wysokość przycisku
• Położenie strzałki (góra, dół) 
• Położenie całego przycisku (ramka + strzałka - lewa strona, prawa strona, środek) 
• Grubość, rodzaj i kolor ramki ze strzałką 
• Grubość strzałek
• Kolor strzałek

• Wielkość fontu (daty, dni tygodnia)
• Kolor tła
• Grubość, rodzaj i kolor tabeli 
• Kolor fontu - dni tygodnia, daty 
• Położenie dat i dni tygodnia (środek, lewa strona, prawa strona)
• Obramowanie danej daty - grubość, rodzaj i kolor (obramowuje datę, która jest w danym dniu)  
• Ustalenie wielkości tabeli (szersza, węższa)
• Kolor tła (same okienka)
• Kolor daty z dodanym wpisem 

To wszystko co musimy zrobić. Nie musimy usuwać obecnego archiwum - możemy mieć tak jak jest to na WordPressie czyli archiwum + kalendarz wpisów. 

Jeśli spodobał Ci się wpis, przekaż go dalej :)