つのjsの書いたカレンダー(コードの部分は抜粋します)

 
  
 
  <br>var $ = function (id) { 
  <br>return "string" == typeof id ? document.getElementById(id) : id; 
  <br>}; 
  <br>var Class = { 
  <br>create: function() { 
  <br>return function() { 
  <br>this.initialize.apply(this, arguments); 
  <br>} 
  <br>} 
  <br>} 
  <br>var Extend = function(destination, source) { 
  <br>for (var property in source) { 
  <br>destination[property] = source[property]; 
  <br>} 
  <br>return destination; 
  <br>} 
  <br>var Calendar = Class.create(); 
  <br>Calendar.prototype = { 
  <br>initialize: function(container, options) { 
  <br>this.Container = $(container);//  (table  ) 
  <br>this.Days = [];//       
  <br>this.SetOptions(options); 
  <br>this.Year = this.options.Year || new Date().getFullYear(); 
  <br>this.Month = this.options.Month || new Date().getMonth() + 1; 
  <br>this.SelectDay = this.options.SelectDay ? new Date(this.options.SelectDay) : null; 
  <br>this.onSelectDay = this.options.onSelectDay; 
  <br>this.onToday = this.options.onToday; 
  <br>this.onFinish = this.options.onFinish; 
  <br>this.Draw(); 
  <br>}, 
  <br>//       
  <br>SetOptions: function(options) { 
  <br>this.options = {//    
  <br>Year: 0,//    
  <br>Month: 0,//    
  <br>SelectDay: null,//     
  <br>onSelectDay: function(){},//        
  <br>onToday: function(){},//        
  <br>onFinish: function(){}//        
  <br>}; 
  <br>Extend(this.options, options || {}); 
  <br>}, 
  <br>//    
  <br>NowMonth: function() { 
  <br>this.PreDraw(new Date()); 
  <br>}, 
  <br>//    
  <br>PreMonth: function() { 
  <br>this.PreDraw(new Date(this.Year, this.Month - 2, 1)); 
  <br>}, 
  <br>//    
  <br>NextMonth: function() { 
  <br>this.PreDraw(new Date(this.Year, this.Month, 1)); 
  <br>}, 
  <br>//    
  <br>PreYear: function() { 
  <br>this.PreDraw(new Date(this.Year - 1, this.Month - 1, 1)); 
  <br>}, 
  <br>//    
  <br>NextYear: function() { 
  <br>this.PreDraw(new Date(this.Year + 1, this.Month - 1, 1)); 
  <br>}, 
  <br>//        
  <br>PreDraw: function(date) { 
  <br>//      
  <br>this.Year = date.getFullYear(); this.Month = date.getMonth() + 1; 
  <br>//      
  <br>this.Draw(); 
  <br>}, 
  <br>//    
  <br>Draw: function() { 
  <br>//         
  <br>var arr = []; 
  <br>//                          
  <br>for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push(0); } 
  <br>//                        
  <br>for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); } 
  <br>//            
  <br>this.Days = []; 
  <br>//     
  <br>var frag = document.createDocumentFragment(); 
  <br>while(arr.length){ 
  <br>//        tr 
  <br>var row = document.createElement("tr"); 
  <br>//     7  
  <br>for(var i = 1; i <= 7; i++){ 
  <br>var cell = document.createElement("td"); cell.innerHTML = " "; 
  <br>if(arr.length){ 
  <br>var d = arr.shift(); 
  <br>if(d){ 
  <br>cell.innerHTML = d; 
  <br>this.Days[d] = cell; 
  <br>var on = new Date(this.Year, this.Month - 1, d); 
  <br>//       
  <br>this.IsSame(on, new Date()) && this.onToday(cell); 
  <br>//         
  <br>this.SelectDay && this.IsSame(on, this.SelectDay) && this.onSelectDay(cell); 
  <br>} 
  <br>} 
  <br>row.appendChild(cell); 
  <br>} 
  <br>frag.appendChild(row); 
  <br>} 
  <br>//        (ie table   innerHTML) 
  <br>while(this.Container.hasChildNodes()){ this.Container.removeChild(this.Container.firstChild); } 
  <br>this.Container.appendChild(frag); 
  <br>//     
  <br>this.onFinish(); 
  <br>}, 
  <br>//        
  <br>IsSame: function(d1, d2) { 
  <br>return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate()); 
  <br>} 
  <br>} 
  <br> 
  
 
 

 
  
 
  
<<
 
  
>>
 
  
    
  














 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  <br>var cale = new Calendar("idCalendar", { 
  <br>onToday: function(o){ o.className = "onToday"; }, 
  <br>onFinish: function(){ 
  <br>$("idCalendarYear").innerHTML = this.Year; $("idCalendarMonth").innerHTML = this.Month; 
  <br>} 
  <br>}); 
  <br>$("idCalendarPre").onclick = function(){ cale.PreMonth(); } 
  <br>$("idCalendarNext").onclick = function(){ cale.NextMonth(); } 
  <br>$("idCalendarPreYear").onclick = function(){ cale.PreYear(); } 
  <br>$("idCalendarNextYear").onclick = function(){ cale.NextYear(); } 
  <br>$("idCalendarNow").onclick = function(){ cale.NowMonth(); } 
  <br>