您的浏览位置: > > 转贴：用文章供稿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 的內容是不是正常，如果貼完程式發現怎麼只有兩個箭頭，那就是程式貼錯地方或貼漏了，請自己再仔細檢查一下。
发帖者 GG 时间： 21:13 我要评论 | A A A 标签：

2 评论:

匿名 说...

发那多无聊的东西，一点用也没有……

写点关于杨佳的社会新闻吧！

2008年7月25日 22:40
匿名 说...

看这个原理，一般都不需要用了，效率应该很低
我也是，连测试都懒得去做了

2008年7月26日 17:40

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

订阅： 博文评论 (Atom)