我希望将当前的7天日历更改为5天日历。
我的7天是从周日到周六,我希望将其更改为周一到周五。

根据我的选择,有两种主要的方法可以做到这一点:

-Hide both Sunday and Saturday columns using css.
-Rerun script to exclude Sunday and Saturday, calculating the dates again.


我已经研究了这两种方式,但无法理解它是如何工作的,我正在寻求帮助。

createCalendar()

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;

最佳答案

CSS解决方案比较简单(既适用于您凌乱的代码,又适用于跳两天的问题),但是修改JS应该更好。

它们是第一个元素,也是最后一个元素,因此您可以执行以下操作:

table td:first-child, table td:last-child {
   display: none;
}


问题:上一个孩子在较旧的浏览器(IE 解决方案:jQuery可跨浏览器工作:

$('table td:first-child, table td:last-child').remove()


注意:确定要使用thisDate == 1;吗?还是一个=?

关于javascript - 将7天日历更改为5天日历,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21611236/

10-10 06:02