Serpent de mer: 製作月曆

Serpent de mer: 製作月曆

2008-02-18

https://rjchen325.blogspot.com/2008/02/blog-post_18.html
製作月曆

近來想在部落格的 sidebar 上加入一個擷取月曆 , 搜尋結果有兩種 : 一為植入 Html/Javascript 模組式 ; 再者是利用 Blog Archive 更改而成。目前我用前者 , 參考PurpleMoggy 先生之 Blogger Calendar Archive 製作。

部驟有四 : 1.打開 Blog Template (版面配置)--選取『修改 HTML』在 <head>下加入以下程式

<script type="text/javascript"

src="http://yui.yahooapis.com/2.2.0/build/yahoo-dom

-event/yahoo-dom-event.js"></script>
<script type="text/javascript"

src="http://yui.yahooapis.com/2.2.0/build/calendar/c

alendar-min.js"></script>
<link rel="stylesheet" type="text/css"

href="http://yui.yahooapis.com/2.2.0/build/calendar/

assets/calendar.css"/>

2.緊接上段加入以下程式

<script type="text/javascript">
//<![CDATA[
    /*
        Created by: PurpleMoggy
http://purplemoggy.blogspot.com
    */
    var _yourBlogUrl =

"http://purplemoggy.blogspot.com"; //edit this
var _yourBlogTimeZone = "-08:00"; //edit

this
_yourBlogTimeZone = encodeURIComponent

(_yourBlogTimeZone);
var _dayTitles = new Array

("","","","","","","","","","","","","","","","","",

"","","","","","","","","","","","","","");

    YAHOO.namespace("example.calendar");
    function cal1Init() {
        YAHOO.example.calendar.cal1 = new

YAHOO.widget.Calendar("cal1","cal1Container");

YAHOO.example.calendar.cal1.addMonthRenderer(1,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(2,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(3,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(4,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(5,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(6,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(7,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(8,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(9,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(10,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(11,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.addMonthRenderer(12,

YAHOO.example.calendar.cal1.renderBodyCellRestricted

);

YAHOO.example.calendar.cal1.selectEvent.subscribe

(mySelectHandler, YAHOO.example.calendar.cal1,

true);

YAHOO.example.calendar.cal1.changePageEvent.subscrib

e(myChangePageHandler, YAHOO.example.calendar.cal1,

true);

YAHOO.example.calendar.cal1.renderEvent.subscribe

(syncMonthYear);
YAHOO.example.calendar.cal1.render

();
        myChangePageHandler();
    };
    var myChangePageHandler = function

(type,args,obj) {
var month =

YAHOO.example.calendar.cal1.cfg.getProperty

("pagedate").getMonth() + 1;
        if (month.toString().length == 1) {
            month = "0" + month;
        }
        var year =

YAHOO.example.calendar.cal1.cfg.getProperty

("pagedate").getFullYear();
document.getElementById

("cal1Titles").innerHTML = "";
_dayTitles = new Array

("","","","","","","","","","","","","","","","","",

"","","","","","","","","","","","","","");
        checkPostsForMonth(month, year);
    };
    function checkPostsForMonth(month,year) {
        document.getElementById

("cal1loadimg").style.display = "block";
var script = document.createElement

("script");
script.setAttribute("type",

"text/javascript");
var theUrl = _yourBlogUrl

+"/feeds/posts/summary?alt=json-in-

script&callback=checkPostsCallback&published-min=" +

year + "-" + month + "-01T00%3A00%3A00" +

_yourBlogTimeZone + "&published-max=" + year + "-" +

month + "-31T23%3A59%3A59" + _yourBlogTimeZone +

"&max-results=100";
script.setAttribute("src", theUrl);

document.documentElement.firstChild.appendChild

(script);
    };
    function checkPostsCallback(json) {
        if (json.feed.entry) {
            for(i = 0; i <

json.feed.entry.length; i++) {
var month =

json.feed.entry[i].published.$t.substr(5,2);
var year =

json.feed.entry[i].published.$t.substr(0,4);
var day =

json.feed.entry[i].published.$t.substr(8,2);
var date = month +

"/" + day + "/" + year;
var href =

json.feed.entry[i].link[0].href;
var title =

json.feed.entry[i].title.$t;
if (day.substr(0,1)

== "0") {
day =

day.substr(1);
}

document.getElementById("cal1Titles").innerHTML +=

"<li><a href='" + href + "'>" + title + "</a>";
_dayTitles[day] +=

"<li><a href='" + href + "'>" + title + "</a>";

YAHOO.example.calendar.cal1.addRenderer(date,

myCustomRenderer);

}

YAHOO.example.calendar.cal1.render();
}
document.getElementById

("cal1loadimg").style.display = "none";

    };
    function showDayTitles(day) {
        document.getElementById

("cal1Titles").innerHTML = _dayTitles[day];
}
var myCustomRenderer = function(workingDate,

cell) {
var day = workingDate.toString

().substr(8,2);
        if (day.substr(0,1) == "0") {
            day = day.substr(1);
        }
        cell.innerHTML = '<div

onmouseover="showDayTitles(' + day + ');"><a

href="javascript:void(null);" >' +

YAHOO.example.calendar.cal1.buildDayLabel

(workingDate) + "</a></div>";
YAHOO.util.Dom.addClass(cell,

YAHOO.example.calendar.cal1.Style.CSS_CELL_SELECTABL

E);
YAHOO.util.Dom.addClass(cell,

YAHOO.example.calendar.cal1.Style.CSS_CELL_HIGHLIGHT

1);
return

YAHOO.widget.Calendar.STOP_RENDER;
}
var mySelectHandler = function

(type,args,obj) {
        var dates = args[0];
        var date = dates[0];
        var year = date[0];
        var month = date[1];
        if (month.toString().length == 1) {
            month = "0" + month;
        }
        var day = date[2];
        var element =

YAHOO.util.Dom.getElementsByClassName("d" + day,

"td", "cal1Container")[0];
        if (day.toString().length == 1) {
            day = "0" + day;
        }
        if (element.className.indexOf

("highlight1") != -1) {
window.location =

_yourBlogUrl + "/search?updated-min=" + year + "-" +

month + "-" + day + "T00%3A00%3A00" +

_yourBlogTimeZone + "&updated-max=" + year + "-" +

month + "-" + day + "T23%3A59%3A59" +

_yourBlogTimeZone;
}

};
var changeDate = function() {

YAHOO.example.calendar.cal1.setMonth(parseInt

(YAHOO.util.Dom.get("cal1monthselect").value));
YAHOO.example.calendar.cal1.setYear

(parseInt(YAHOO.util.Dom.get

("cal1yearselect").value));
        YAHOO.example.calendar.cal1.render();
        myChangePageHandler();
    }
    var syncMonthYear = function(type) {
        YAHOO.util.Dom.get

("cal1monthselect").value = parseInt

(YAHOO.example.calendar.cal1.cfg.getProperty

("pagedate").getMonth());
var fullYear = parseInt

(YAHOO.example.calendar.cal1.cfg.getProperty

("pagedate").getFullYear());
        var isYearFound = false;
        var i = 0;
        while(i < document.getElementById

("cal1yearselect").options.length && !isYearFound) {
if (document.getElementById

("cal1yearselect").options[i].value == fullYear) {
                isYearFound = true;
            }
            i++;
        }
        if (!isYearFound) {
            var option =

document.createElement("option");
option.setAttribute("value",

fullYear);
var text =

document.createTextNode(fullYear);
option.appendChild(text);
document.getElementById

("cal1yearselect").appendChild(option);
}
YAHOO.util.Dom.get

("cal1yearselect").value = fullYear;
};
YAHOO.util.Event.addListener(window, "load",

cal1Init);
YAHOO.util.Event.addListener

("cal1dateselect", "click", changeDate);
//]]>
</script>

注意開頭部份 , 將

〝var_yourBlogUrl="http://purplemoggy.blogspot.com";

//edit this〞紅字部份改成自己的 blog url。

3.回到 Blog Template (版面配置)--選取『新增網頁要素

』-- 插入 Html/Javascript 項目訂好標題後複製以下程式

<div id="cal1wrapper">

<div id="cal1select">

<select name="cal1monthselect" id="cal1monthselect">
    <option value="0">January</option>
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <option value="5">June</option>
    <option value="6">July</option>
    <option value="7">August</option>
    <option value="8">September</option>
    <option value="9">October</option>
    <option value="10">November</option>
    <option value="11">December</option>
</select>
<select name="cal1yearselect" id="cal1yearselect">
    <option value="1995">1995</option>
    <option value="1996">1996</option>
    <option value="1997">1997</option>
    <option value="1998">1998</option>
    <option value="1999">1999</option>
    <option value="2000">2000</option>
    <option value="2001">2001</option>
    <option value="2002">2002</option>
    <option value="2003">2003</option>
    <option value="2004">2004</option>
    <option value="2005">2005</option>
    <option value="2006">2006</option>
    <option value="2007">2007</option>
    <option value="2008">2008</option>
    <option value="2009">2009</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
</select>
<input type="button" value="-->"

id="cal1dateselect"/>

</div>

<div id="cal1Container"><img

src="http://img239.imageshack.us/img239/9057/40lf8.g

if" style="vertical-align:middle;"/>

Loading...</div>
<div style="clear:both;"></div>

<div id="calbackloadimg">
<pre id="cal1loadimg"

style="display:none;"><img

src="http://img239.imageshack.us/img239/9057/40lf8.g

if" style="vertical-align:middle;"/>

Loading...</pre>
<pre id="cal1Titles"></pre>
</div>

</div>

Save 後打開網頁 , 應該可以看到 sidebar 上的月曆了!!

4.接著到這裡下載本月曆的CSS檔 , COPY 至 Blog Template (版面配置) 的CSS檔群之中 ,可以就此自行更改月曆的型式藉以輔合自己的網頁。

總結:使用此月曆由於目前部落格文章數量不多 , 大概 5 秒內完成顯示 ; 又可保留 Blog Archive 功能是我選用之要因

。

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)