JavaScript動態日歷
[英]JavaScript Dynamic Calendar
問題描述
我正在編程一個動態javascript日歷，可以由兩個人（經理和助理）在上面添加事件。 但是，只有帶有提及日期的文本框才會出現在瀏覽器中。 邏輯上有錯誤嗎？ 請幫忙！
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.calendarMonth{
border-collapse:collapse;
background-color:#eef;
}
.calendarMonth th{
}
.calendarMonth .calendarTitle{
background-color:#ddf;
}
.calendarMonth .calendarPrevious{
background-color:#ddf;
}
.calendarMonth .calendarNext{
background-color:#ddf;
}
.calendarEmpty{
}
.calendarDay{
background:#fff;
border:1px solid black;
text-align:center;
width:2em;
}
</style>
<script type="text/javascript">
var daysInMonth=[31,28,31,30,31,30,31,31,30,31,30,31];
var monthNames=['January','February','March','April','May','June','July','August','September','October','November','December'];
// Returns the number of days in the month in a given year (January=0)
function getDaysInMonth(month,year){
if ((month==1)&&(year%4==0)&&((year%100!=0)||(year%400==0))){
return 29;
}else{
return daysInMonth[month];
}
}
// Performs an action when a date is clicked
function dateClicked(day,month,year){
document.forms.calendar.date.value = day+'/'+month+'/'+year;
}
// Sets the displayed month
function setDisplayedMonth(month){
if (month<0){
alert('You have reached the beginning of this calendar');
}else if (month>=months){
alert('You have reached the end of this calendar');
}else{
for (var i=0;i<months;i++){
document.getElementById('calendarMonth'+i).style.display='none';
}
document.getElementById('calendarMonth'+month).style.display='block';
}
}
</script>
</head>
<body>
<form id="calendar">
<table>
<tr>
<td><label for="date">Date:</label></td>
<td><input type="text" id="date" name="date" value="28/05/2015"></td>
</tr>
<tr><td></td><td>
<script type="text/javascript">
var month=0;
var year=2015;
var months=12;
for (var i=0;i<months;i++){
document.writeln('<table class="calendarMonth" '+'id="calendarMonth'+i+'" cellspacing="0">');
document.writeln('<tr>'
+'<th class="calendarPrevious" onClick="setDisplayedMonth('+(i-1)+')"><</th>'+'<th class="calendarTitle" colspan="5">' +monthNames[month]+' '+year+'</th>'+'<th class="calendarNext" onClick="setDisplayedMonth('+(i+1)+')">></th>'+'</tr>');
document.writeln('<tr><th>Sun</th><th>Mon</th><th>Tue</th>'+'<th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>');
var firstDayDate=new Date(year,month,1);
var firstDay=firstDayDate.getDay();
for (j=0;j<42;j++){
if (j%7==0) document.write('<tr>')
if ((j=firstDay+getDaysInMonth(month,year))){
document.write('<td class="calendarEmpty"></td>');
}else{
document.write('<td class="calendarDay" '+'onClick="dateClicked('+(j-firstDay+1)+','+(month+1)+','+year+')">'+(j-firstDay+1)+'');
}
if (j%7==6) document.write('</tr>');
}
document.writeln('</table>');
month++;
if (month>=12){
month=0;
year++;
}
}
setDisplayedMonth(5);
</script>
</td></tr>
</table>
</form>
</body>
</html>
另外，如何在經理日歷上突出顯示經理選擇的日期？
3 個解決方案
解決方案1
1
嘗試使用jQuery ui beforeShowDay ，並使用beforeShowDay選項突出顯示日期
$(function() { var specialDates = {}; var now = new Date(); specialDates['10' + now.getMonth() + '' + now.getFullYear()] = [true, 'mg-special', 'By Manager']; specialDates['25' + now.getMonth() + '' + now.getFullYear()] = [true, 'as-special', 'By Associate']; var others = [true, '', '']; $("#datepicker").datepicker({ 'beforeShowDay': function(date) { var target = date.getDate() + '' + date.getMonth() + '' + date.getFullYear(); return specialDates[target] || others; }, 'inline': true }); });
td.mg-special { background: sandybrown; } td.as-special { background: brown; }
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <p>Date: <input type="text" id="datepicker"> </p>
解決方案2
0 2015-05-29 22:43:47
我已經修改了第一次沒有正確回答的答案：嘗試將您的for循環替換為：
for (j=0; j<42; j++){
if (j%7==0) {document.write('<tr>')};
var l=firstDay;
var k=firstDay+getDaysInMonth(month,year);
if (j>=k){
document.write('<td class="calendarEmpty"></td>');
}else if (j<l){
document.write('<td class="calendarEmpty"></td>');
}else{
document.write('<td class="calendarDay" '+'onClick="dateClicked('+(j-firstDay+1)+','+(month+1)+','+year+',this)">'+(j-firstDay+1)+'');
}
if (j%7==6) document.write('</tr>');
}
關於突出顯示由經理選擇的單元格，您已經具有單元格單擊功能，因此可以在此基礎上，例如，使用：
// Performs an action when a date is clicked
function dateClicked(day,month,year,obj){
document.forms.calendar.date.value = day+'/'+month+'/'+year;
obj.style.backgroundColor = 'yellow'
}
請注意，在onclick事件中添加了“ this”。
有關更多詳細信息，我將需要知道您如何區分經理或同事的輸入。
如果您打算將管理者的日期設置為某個日期，則可以嘗試使用以下方法代替for循環：
var firstDayDate=new Date(year,month,1);
var firstDay=firstDayDate.getDay();
var managersdate=new Date (somedate);
var managersday=managersdate.getDay();
var managersmonth=managersdate.getMonth();
for (j=0; j<42; j++){
if (j%7==0) {document.write('<tr>')};
var l=firstDay;
var k=firstDay+getDaysInMonth(month,year);
if (j>=k){
document.write('<td class="calendarEmpty"></td>');
}else if (j<l){
document.write('<td class="calendarEmpty"></td>');
}else{
if(j-l==managersday && i==managersmonth){
document.write('<td class="calendarDay" style="background-Color:Yellow" '+'onClick="dateClicked('+(j-firstDay+1)+','+(month+1)+','+year+',this)">'+(j-firstDay+1)+'');
}else{document.write('<td class="calendarDay" '+'onClick="dateClicked('+(j-firstDay+1)+','+(month+1)+','+year+',this)">'+(j-firstDay+1)+'');
}
}
通過css添加您選擇的懸停顏色也是不錯的選擇：
.calendarDay:hover {background-color: green}
希望這可以幫助。
解決方案3
0 2015-06-04 22:21:03
我認為值得回應您關於檢索和解析csv作為一個單獨問題的評論。 解析是通用語言，是將句子拆分成其組成詞。 通常，我們會使用它來“解析或拆分”以XML或JSON等格式保存的數據，我建議您將其視為功能更強大的方法，但CSV仍然是有效格式。
首先檢索您的csv，如果我們使用的是jquery，它將為：
$.ajax({
type: "GET",
url: "ManagersDates.csv",
dataType: "text",
success: function(data) {processData(data);}
});
在jquery中有更短的方法可以通過get和post獲得。
但是假設您也希望為此使用JS（沒有jquery），那么以下內容與我們檢索您的csv一樣簡單：
var request = new XMLHttpRequest(); // you may use "new ActiveXObject("MSXML2.XMLHTTP")" for ie6 and below
request.open('GET', 'ManagersDates.csv', false);
request.send();
var managersdate=(request.responsetext);
您的csv現在存在於變量“ managersdate”中，但是您需要將其從一個長字符串“拆分或解析”到其組成部分中，有很多方法可以做到這一點，如下所示：
var mdates = new Array();
mdates = managersdate.split(",");
您現在有了一個保存csv值的數組，並且需要從中提取正確的日期，如果您的日期是第三項（計數從0開始），則應該返回您的日期：
managersdate=(mdates[2]);
有大量關於數據解析的出色文章，以及關於JSON和XML的大量文章，非常值得一看。 祝好運
創建動態事件到JavaScript日歷
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.