Question

我正在编写一个动态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>

另外，如何在关联日历上突出显示经理选择的日期？

Answer 1

尝试使用jQuery ui datepicker并使用选项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>

Answer 2

我第一次修改了我的回答：尝试用以下代码替换你的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'
}

注意添加＆＃34;这个＆＃34;参加onclick活动。

如需更多细节，我需要知道您如何区分经理或员工的投入。

如果您打算将经理日期设置为其他地方作为某个日期，您可以尝试这样的代替您的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}

希望这有帮助。

Answer 3

我认为值得回应你关于检索和解析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动态日历

3 个答案: