JavaScript动态日历

Question

I am programming a dynamic javascript calendar on which events can be added by two persons, the manager and the associate. 我正在编程一个动态javascript日历，可以由两个人（经理和助理）在上面添加事件。 But, only the text box with the mentioned date appears on the browser. 但是，只有带有提及日期的文本框才会出现在浏览器中。 Is there a mistake in the logic? 逻辑上有错误吗？ Please help! 请帮忙！

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

Also, how can I highlight the date selected by a manager on the associate calendar? 另外，如何在经理日历上突出显示经理选择的日期？

Answer 1

Try using jQuery ui datepicker and use option beforeShowDay to highlight dates 尝试使用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

I have revised my response having not got it right first time: try replacing your for loop with: 我已经修改了第一次没有正确回答的答案：尝试将您的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>');
}

regarding highlighting the cell on select by manager, you already have a cell click function so build on that eg by using: 关于突出显示由经理选择的单元格，您已经具有单元格单击功能，因此可以在此基础上，例如，使用：

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

note the addition of "this" to the onclick event. 请注意，在onclick事件中添加了“ this”。

For any more detail i would need to know how your differentiating between inputs made by manager or associate. 有关更多详细信息，我将需要知道您如何区分经理或同事的输入。

if you are intending to bring the managers date in as being set somewhere else as somedate, you could try something like this in place of your for loop: 如果您打算将管理者的日期设置为某个日期，则可以尝试使用以下方法代替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)+'');
}
}

It may also be nice to add a hover color of your choosing via css: 通过css添加您选择的悬停颜色也是不错的选择：

.calendarDay:hover {background-color: green}

Hope this helps. 希望这可以帮助。

Answer 3

I think its worthwhile responding to your comment about retrieving and parsing csv as a seperate question. 我认为值得回应您关于检索和解析csv作为一个单独问题的评论。 Parsing is in common language the splitting of a sentence into its component words. 解析是通用语言，是将句子拆分成其组成词。 Most commonly we would use it to 'parse or split' data held in formats such as XML or JSON which i recomend you look at as more capable methods, but CSV is still a valid format. 通常，我们会使用它来“解析或拆分”以XML或JSON等格式保存的数据，我建议您将其视为功能更强大的方法，但CSV仍然是有效格式。

Firstly retrieving your csv, if we were using jquery it would be: 首先检索您的csv，如果我们使用的是jquery，它将为：

$.ajax({
        type: "GET",
        url: "ManagersDates.csv",
        dataType: "text",
        success: function(data) {processData(data);}
     });

there are even shorter methods available via get and post in jquery. 在jquery中有更短的方法可以通过get和post获得。

But presuming you wish to stick with JS for this too (no jquery) then the following is about as simple as we can get to retrieve your csv: 但是假设您也希望为此使用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);

your csv now exists in the variable "managersdate" but you need to "Split or Parse" it from one long string into its component parts, there are plenty of ways to do this one method is as follows: 您的csv现在存在于变量“ managersdate”中，但是您需要将其从一个长字符串“拆分或解析”到其组成部分中，有很多方法可以做到这一点，如下所示：

var mdates = new Array();
mdates = managersdate.split(",");

you now have an array holding your csv values and need to extract the correct date from it, if your date is the third item (count starts at 0) then this should return your date: 您现在有了一个保存csv值的数组，并且需要从中提取正确的日期，如果您的日期是第三项（计数从0开始），则应该返回您的日期：

managersdate=(mdates[2]);

There are tons of excelent posts on parsing data and plenty on JSON and XML that are well worth looking up. 有大量关于数据解析的出色文章，以及关于JSON和XML的大量文章，非常值得一看。 Good luck 祝好运

JavaScript动态日历

问题描述

3 个解决方案

解决方案1
1

解决方案2
0 2015-05-29 22:43:47

解决方案3
0 2015-06-04 22:21:03

JavaScript动态日历

问题描述

3 个解决方案

解决方案1 1

解决方案2 0 2015-05-29 22:43:47

解决方案3 0 2015-06-04 22:21:03

解决方案1
1

解决方案2
0 2015-05-29 22:43:47

解决方案3
0 2015-06-04 22:21:03