2014-02-06 129 views
0

我目前正在使用7天的日曆(太陽 - 星期日),這很好用,但我希望添加一個選項以將其更改爲5天日曆(星期一至星期五)。我希望我可以改變現有的代碼來顯示我的日曆。任何想法我會如何去做這件事?將7天日曆更改爲5天

日曆

calendarString = ''; 
calendarString += '<table width="100%" height="425" data-role="table" border="1" bordercolor="#c0c0c0" cellpadding="0" cellspacing="0">'; 
    calendarString += '<tr>'; 
    calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Sun<\/td>'; 
    calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Mon<\/td>'; 
    calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Tue<\/td>'; 
    calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Wed<\/td>'; 
    calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Thu<\/td>'; 
    calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Fri<\/td>'; 
    calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Sat<\/td>'; 
    calendarString += '<\/tr>'; 

    thisDate == 1; 

    for (var i = 1; i <= 6; i++) 
     { 
      calendarString += '<tr>'; 
      for (var x = 1; x <= 7; x++) 
       { 
        daycounter = (thisDate - firstDay)+1; 
        thisDate++; 
        if ((daycounter > numbDays) || (daycounter < 1)) 
         { 
          calendarString += '<td align=\"center\" bgcolor=\"#888888\" height=\"30\" width=\"40\">&nbsp;<\/td>'; 
         } 
        else 
         { 
          if (checkevents(daycounter,monthNum,yearNum,i,x) || ((todaysDay == x) && (todaysDate == daycounter) && (todaysMonth == monthNum))) 
           { 
            if ((todaysDay == x) && (todaysDate == daycounter) && (todaysMonth == monthNum)) 
             { 
              tempweek = i; 
              tempdayofweek = x; 
              calendarString += '<td style=\"vertical-align: top;\" bgcolor=\"#AAFFAA\" height=\"30\" width=\"40\" onClick=showevents(' + daycounter + ',' + monthNum + ',' + yearNum + ',' + i + ',' + x + ')>' + daycounter + '<\/td>'; 
             } 
           else  
            { 
            calendarString += '<td style=\"vertical-align: top;\" bgcolor=\"#FFFFC8\" height=\"30\" width=\"40\" onClick=showevents(' + daycounter + ',' + monthNum + ',' + yearNum + ',' + i + ',' + x + ')>' + daycounter + '<div id="amountevent" style="padding-left:5px;max-height:8px; height:8px; width:30px; max-width:30px;white-space: nowrap;">' + displayeventnumber(daycounter, monthNum, yearNum) + '</div><\/td>'; 


            } 
          } 
          else 
           { 
            calendarString += '<td style=\"vertical-align: top;\" bgcolor=\"#f9f9f9\" height=\"30\" width=\"40\">' + daycounter + '<\/td>';   
           } 
         } 
       } 
      calendarString += '<\/tr>'; 
     } 
    calendarString += '<\/table>'; 
    var object=document.getElementById('calendar'); 
    object.innerHTML= calendarString; 
    thisDate = 1; 
+0

爲什麼不'weekend'類添加到他們的 「行」,那麼你可以'hide'或'秀'通過瞄準班級。 –

+0

我將如何去解決這個問題,我需要檢測一個函數的方法來知道它發生的是哪一天? – Aero204

回答

1

的選擇可能是有兩種樣式完全相同的HTML,但動態地隱藏星期日至星期六列,如果用戶選擇了爲期五天的日曆。

+0

我該怎麼做? – Aero204

0

刪除

calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Sun<\/td>'; 
calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Sat<\/td>'; 

變化

for (var x = 1; x <= 7; x++) 

for (var x = 2; x <= 6; x++) 
+0

這是我第一次嘗試自己,這個月本週二將feb的第四位顯示爲feb的第一位。 – Aero204