您的浏览位置: > > 转贴：用文章供稿RSS时间设定做成的日历模组(Feed Calendar)

2008年7月25日星期五

转贴：用文章供稿RSS时间设定做成的日历模组(Feed Calendar)

感谢作者Abin给大家带来的日历模组 (Feed Calendar)。因为我个人不用这个hack，所以懒得测试了……全文转载……大家有问题问作者哈。
另外作者博客被封，可能要用代理才能查看原文和询问作者。

似乎比较近似我以前发的一个HACKblogger:把博客归档变成日历的又一方法(再修正），相对简单的还有利用light box和30box制作出日历的方法，点击这里查看。

作者原文的HACK增加方法：
第一個步骤，先塞入這個日曆外觀顏色的 CSS 樣式定義。如果你用過之前日曆，那就不用改啦，因為我用了一樣的定義，打開版面配置、修改樣板原始碼的 HTML，放在 <head> 標籤內、定義 CSS 樣版的區段裡：


/* Feed Calendar Styles */

#Calendar {

  margin: 0px;

}

#Calendar .act {


  color: #fff;

  padding: 4px;

}

#CalendarTable table {

  border-collapse: collapse;

  padding: 0px;

  border: 0px;


}

#CalendarTable table th {

  padding: 1px;

  color: #777;

  margin: 0;

}

#CalendarTable table td {


  height: 25px;

  color: #999;

  text-align: center;

  padding: 1px;

  margin: 0;

}


#CalendarTable table td a {

  display: block;

}

#CalendarTable .Today {

  color: #fff;

  background: #777;

}


#CalendarTable .Today a {

  color: #fff;

}

#CalendarTable .Weekend {

  color: #997777;

}

如果對顏色、字型大小、靠左靠右有特別需求的，請自行改上面的樣式。第二個步驟是重點，就是抓 Feed、產生日曆主要的 Javascript 程式碼，一樣是貼在 <head> 標籤後面，如果你之前也有 Hack 放過 Javascript，放在一起就好：


<script type='text/javascript'>

//<![CDATA[

<!-- Script functions for generating Feed Calendar: generateCalendar(), collectPost(), BrowsePrev(), BrowseNext(),  BackToday() -->

var baseURL = '';

var currentDay = new Date();

var today = new Date();

var monthLabels = new Array('01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12');


var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

var weekLabels = new Array('一','二','三','四','五','六','日');



function generateCalendar(){

  var thisYear = currentDay.getFullYear();

  var thisMonth = monthLabels[currentDay.getMonth()];

  var thisDay = today.getDate();

  var nDays = monthDays[currentDay.getMonth()];


  if (currentDay.getMonth() == 1 &&(((thisYear % 4 == 0) && (thisYear % 100 != 0)) || (thisYear % 400 == 0)))

    nDays = 29;

  var IsitNow = currentDay;

  IsitNow.setDate(1);

  var startDay = IsitNow.getDay() - 1;


  if (startDay < 0)

    startDay = 6;

  var sCalendarCode = '<table><tr>';

  for (var index=0;index<7;index++)


    sCalendarCode+='<th style="width:25px;">'+ weekLabels[index]+'</th>';

  sCalendarCode+='</tr>';

  var nTableCol=0;

  for (index=0;index<startDay;index++) {


    if (nTableCol == 0)

      sCalendarCode += '<tr>';

    sCalendarCode+='<td>&nbsp;</td>';

    nTableCol++;


  }

  for (index=1;index<=nDays;index++) {

    if (nTableCol==0)

      sCalendarCode+='<tr>';

    if (index==thisDay && today.getMonth()==currentDay.getMonth() && today.getFullYear()==currentDay.getFullYear())


      sCalendarCode+='<td id="Day'+index+'" class="Today">';

    else {

      if (nTableCol < 5)

        sCalendarCode+='<td id="Day'+index+'">';


      else

        sCalendarCode+='<td id="Day'+index+'" class="Weekend">';

    }

    sCalendarCode+=index;

    sCalendarCode+='</td>';




    if (nTableCol==6) {

      sCalendarCode+='</tr>';

      nTableCol=0;

    }

    else


      nTableCol++;

  }

  if (nTableCol>0) {

    for (index=0;index<(7-nTableCol);index++) {

      sCalendarCode+='<td>&nbsp;</td>';


    }

    sCalendarCode+='</tr>';

  }

  sCalendarCode+='</table>';

  document.getElementById('CalendarTable').innerHTML = sCalendarCode;




  var sFeedURL = baseURL + '/feeds/posts/summary?orderby=published&published-min='+thisYear+'-'+thisMonth+'-01T00:00:00&published-max='+thisYear+'-'+thisMonth+'-31T23:59:59&max-results=50&alt=json-in-script&callback=collectPost';

  var script = document.createElement('script');

  document.getElementById('CalendarCaption').innerHTML = '<span class="loading">Loading <blink>...</blink></span>';


  script.setAttribute('src', sFeedURL);

  script.setAttribute('type', 'text/javascript');

  document.documentElement.firstChild.appendChild(script); 

}



function collectPost(json) {

  document.getElementById('CalendarCaption').innerHTML = currentDay.getFullYear()+'-'+monthLabels[currentDay.getMonth()];


  var entries = json.feed.entry;

  var nDay = 0, nCount = 0, nActual = 0;

  var posts = new Array();

  for (var i = 0, post; post = entries[i]; i++) {

    nDay = parseInt(post.published.$t.substr(8,2),10);

    if (i>0&&nDay==parseInt(entries[i-1].published.$t.substr(8,2),10)) {


      var actualDay = post.published.$t.substr(0,10);

      var actualTimezone = post.published.$t.substr(23,6);;

      posts[nActual-1][1] = posts[nActual-1][1]+', '+post.title.$t;

      posts[nActual-1][2] = baseURL +'/search?updated-min='+actualDay+'T00%3A00%3A00'+encodeURIComponent(actualTimezone)+'&updated-max='+actualDay+'T23%3A59%3A59'+encodeURIComponent(actualTimezone);

    } else {

      posts[nActual] = new Array(3);


      posts[nActual][0] = nDay;

      posts[nActual][1] = post.title.$t;

      posts[nActual][2] = post.link[0].href;

      nActual++;

    }

  }   


  for (i=0;i<nActual;i++) {

    posts[i][1] = posts[i][1].replace('\"', '&#34').replace('\'', '&#39');

    document.getElementById('Day'+posts[i][0]).innerHTML = '<a title="'+posts[i][1]+'" href="'+posts[i][2]+'" target="blank_">'+posts[i][0]+'</a>';

  }


}



function BrowsePrev() {

  var thisMonth = currentDay.getMonth()-1;

  var thisYear = currentDay.getFullYear();

  if (thisMonth<0) {

    thisMonth = 11;


    thisYear = thisYear-1;

  }

  thisMonth = monthLabels[thisMonth];

  currentDay = new Date(thisYear+'/'+thisMonth+'/1 00:01');

  generateCalendar();

}




function BrowseNext() {

  var thisMonth = currentDay.getMonth()+1;

  var thisYear = currentDay.getFullYear();

  if (thisMonth>11) {

    thisMonth = 0;

    thisYear = thisYear+1;


  }

  thisMonth = monthLabels[thisMonth];

  currentDay = new Date(thisYear+'/'+thisMonth+'/1 00:01');

  generateCalendar();

}



function BackToday() {


  currentDay = new Date();

  generateCalendar();

}

//]]>

</script>

好啦！樣板原始碼的修改到此搞定存檔，接下來安排這個新日曆模組的位置。換到「網頁元素」的設定，在你想塞入日曆的地方新增一個網頁元素、選擇 HTML/JavaScript 類型。接下來給個標題，然後貼入以下的 HTML 程式：

<center>

  <table border="0" id="Calendar" cellpadding="0" cellspacing="0">


    <caption>

      <a href="javascript:;" onclick="BrowsePrev();" title="Previous Month">&lt;&lt;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

      <a href="javascript:;" onclick="BackToday();" title="Back to Today"> <span id="CalendarCaption"> </span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


      <a href="javascript:;" onclick="BrowseNext();" title="Next Month">&gt;&gt;</a>

    </caption>

    <tr>

      <td id="CalendarTable" class="act"> </td>


    </tr>

  </table>

  <script type="text/javascript">

    generateCalendar();

  </script>

</center>


儲存搞定！接下來就可以檢查新的日曆模組能不能動囉～當然，根據以上的原理來說，這個新的日曆模組應該沒啥問題（我自己所有的 Blog 也都裝來用啦），不過如同大部份透過 Feed 抓文章的 Hack 一樣，由於要仰賴 Feed 即時連線抓取資料來源，這點會受到網路影響，所以快速猛點連結時切換的反應會比較慢（這是 Feed 的原罪，沒辦法），所以如果日曆有出現、但該日期沒有文章連結，請先檢查 Feed 的內容是不是正常，如果貼完程式發現怎麼只有兩個箭頭，那就是程式貼錯地方或貼漏了，請自己再仔細檢查一下。
到顶部 文章顶 我要评论 | A A A |

0 评论:

发表评论： ☆欢迎灌水☆言论自由☆交流快乐☆

订阅： 博文评论 (Atom)