日历,需要隐藏星期六和星期日的方法? [英] Calendar, need a way to hide Sat and Sun?
问题描述
我试图让我的应用程序隐藏周末日子,我的日历存储在一个字符串中,然后打印到innerHTML。我将如何隐藏周六和周日。
我的日历打印如下:
星期日星期一周二周三周四周五周六
$ p
$ b $ pre $ calendarString ='' ;
calendarString + ='< table width =100%height =425data-role =tableborder =1bordercolor =#c0c0c0cellpadding =0cellspacing =0 >';
calendarString + ='< tr>';
calendarString + ='< td bgcolor = \#DDDDDD \align = \center \valign = \center \width = \40 \height = \ 22\ >周日及LT; \ / TD>';
calendarString + ='< td bgcolor = \#DDDDDD \align = \center \valign = \center \width = \40 \height = \ 22\ >星期一及LT; \ / TD>';
calendarString + ='< td bgcolor = \#DDDDDD \align = \center \valign = \center \width = \40 \height = \ 22\ >星期二< \ / TD>';
calendarString + ='< td bgcolor = \#DDDDDD \align = \center \valign = \center \width = \40 \height = \ 22\ >三及LT; \ / TD>';
calendarString + ='< td bgcolor = \#DDDDDD \align = \center \valign = \center \width = \40 \height = \ 22\ >星期四< \ / TD>';
calendarString + ='< td bgcolor = \#DDDDDD \align = \center \valign = \center \width = \40 \height = \ 22\ >周五< \ / TD>';
calendarString + ='< td bgcolor = \#DDDDDD \align = \center \valign = \center \width = \40 \height = \ 22\ >周六及LT; \ / TD>';
calendarString + ='< \ / tr>';
thisDate == 1; (var i = 1; i <= 6; i ++){
calendarString + ='< tr>';
;
for(var x = 1; x <= 7; x ++){
daycounter =(thisDate - firstDay)+1;
thisDate ++; ((daycounter> numbDays)||(daycounter< 1)){
calendarString + ='< td align = \center \bgcolor = \#888888 \\height = \30 \width = \40 \>& nbsp;< \ / td>'; $(b)b} 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 \ onClick = showevents('+ daycounter +','+ monthNum +','+ yearNum +','+ i +','+ x +')>'+ daycounter +' < div id =amounteventstyle =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;
在表格中添加class =weekend属性周日和周六的细胞。然后使用javascript为该类设置CSS样式:
.weekend {display:none;}
更新:
更一般地,如果您的表看起来像这样:
< table class =calendar>
< tr>< td class =weekend>周日< / td>< td>周一< / td>< td>周二< / td>< td> < td>周四< / td>< td>周五< / td>< td class =周末>周六< / td>< / tr>
< tr>< td class =weekend>< / td>< td> 1< / td>< td> 2< / td> < td> 4< / td>< td> 5< / td>< td class =weekend> 6< / td>< / tr>
...
< tr>< td class =weekend> 28< / td>< td> 29< / td>< td> td>< / td>< td>< / td>< td>< / td>< td class =weekend>< / td>< / tr>
< / table>
< button type =buttononclick =hideWeekends()>隐藏周末< / button>
风格:
table.calendar {width:100%}
和javascript:
function hideWeekends(){
//将display:none样式应用于classname为weekend的元素。如果可用,我建议使用jQuery。
}
I'm trying to allow my application to hide weekend days, my calendar is stored within a string then printed to innerHTML. How would I go about hiding both Saturday and Sunday.
My calendar prints like the following:
Sunday Monday Tuesday Wednesday Thursday Friday Saturday
Code:
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\"> <\/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;
Add a class="weekend" attribute on the table cells for Sunday and Saturday. Then use javascript to set the CSS styling for that class to:
.weekend {display: none;}
Update: More generally if your table looked something like:
<table class="calendar">
<tr><td class="weekend">Sunday</td><td>Monday</td><td>Tuesday</td><td>Wednesday</td><td>Thursday</td><td>Friday</td><td class="weekend">Saturday</td></tr>
<tr><td class="weekend"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td class="weekend">6</td></tr>
...
<tr><td class="weekend">28</td><td>29</td><td>30</td><td></td><td></td><td></td><td class="weekend"></td></tr>
</table>
<button type="button" onclick="hideWeekends()">Hide Weekends</button>
And style:
table.calendar {width: 100%}
And javascript:
function hideWeekends() {
// apply display: none style to elements with classname of "weekend". I recommend using jQuery if available.
}
这篇关于日历,需要隐藏星期六和星期日的方法?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!