JavaScript动态日历

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 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> 

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'
}

请注意，在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}

希望这可以帮助。

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的大量文章，非常值得一看。 祝好运