Commit 80fe74eb by Andrew Dahl

Several small fixes; added README

parent 14734c54
Showing with 91 additions and 13 deletions
Author: Andrew Dahl
-=Description=-
This is a simple calendar/agenda application written using html, css, and javascript.
-=Areas for Improvement=-
-Browser Detection
This will be discussed more in Caveats, but IE and Chrome have a small number of quirks.
-Overlapping Tasks
It shouldn't be too hard to add in the ability to "split" tasks that overlap...
So, if you have two tasks, they'll be split so one's on the left at 50% width and one's on the right.
Three tasks? 33%.... etc. etc.
-=Caveats=-
+IE
-Tasks
When adding tasks, if you change the month or year, the days disappear. This doesn't happen in either
Chrome or Firefox. While I'm not 100% sure why this is the case, it's happening due to the function
updateAddTaskDays() where it generates the options for the day combo box based on month/year selected.
It replaces the innerHTML of the input, but that seems to fail.
-Windows XP
Under IE and Windows XP, the arrows in above the calendar section don't show up. Running XP and
Firefox, they display just fine... and running Windows 7 and IE, they show up as well.
+Chrome
-Mouse Position Detection
This is a fairly easy fix, but the position detection when you click on the Daily Agenda is a little off
when using Chrome. For example, between 1:00 and 2:00, you can only get 1:00 and 1:15 time values.
Values of 1:30 and 1:45 are impossible to retrieve. This detection works fine under Firefox and IE.
-Other Browsers
Firefox, Chrome, and IE were the only browsers tested. Chrome has a similar backend as Safari and
Firefox is fairly similar to Opera, so I don't foresee any huge issues, but I can't promise anything.
......@@ -37,7 +37,6 @@
}
.calendar_days #today{
font-weight: bold;
color: red;
}
......
......@@ -27,7 +27,7 @@ function TaskCalendar(name,directions,calendarElem,listElem) {
this.name = name;
this.isIE = document.all?true:false;
this.interval = 4; //15 Minute Increments (60 / 15 = 4)
this.directions = directions;
this.directions = directions; // Display Key and Help sections under the calendar
}
/* Generates the HTML for the calendar with "onclick" for each date set to calendarClicked
......@@ -35,7 +35,7 @@ function TaskCalendar(name,directions,calendarElem,listElem) {
*/
TaskCalendar.prototype.printCalendar = function(day, month, year) {
var today = new Date();
if(month == 13) {
month = 1;
year = this.currentYear + 1;
......@@ -116,7 +116,10 @@ TaskCalendar.prototype.printCalendar = function(day, month, year) {
str = '<a id=' + id + ' ' + temp;
else
str = tempDate;
if(str != '&nbsp;' && this.dateHasTasks(tempDate, month, year))
html += '<td class="calendar_days" style="font-weight: bold;">' + str + '</td>';
else
html += '<td class="calendar_days">' + str + '</td>';
//Start a new row if it's on Saturday
......@@ -126,7 +129,7 @@ TaskCalendar.prototype.printCalendar = function(day, month, year) {
if(this.directions) {
html += '</tr><tr><td class="calendar_days" colspan="7" style="background: white;">Key:<br><span id="today">X</span> - Today<br><span id="selected">X</span> - Selected Day<br>';
html += '<br>Help:<br>Add tasks by clicking in the Daily Agenda.</td>';
html += '<b>X</b> - Day Containing Tasks<br><br>Help:<br>Add tasks by clicking in the Daily Agenda.</td>';
}
html += '</tr></table></div>';
......@@ -138,6 +141,23 @@ TaskCalendar.prototype.printCalendar = function(day, month, year) {
};
/* Returns true if provided date contains tasks
* Else, it returns false
*/
TaskCalendar.prototype.dateHasTasks = function(day, month, year) {
var found = false;
var date;
var i;
for(i = 0; i < this.tasks.length; i++) {
if(typeof this.tasks[i] !== "undefined") {
date = this.tasks[i].date;
if(date.getFullYear() == year && date.getMonth() == (month-1) && date.getDate() == day)
return true;
}
}
return false;
};
/* Fired when dates on the calendar are clicked */
TaskCalendar.prototype.calendarClicked = function(day, month, year) {
if(month != 0 && day > this.daysInMonths[month-1])
......@@ -338,7 +358,7 @@ TaskCalendar.prototype.printAddTask = function(e,startTime,task) {
html += '<option ';
if(typeof task !== "undefined") {
if((parseInt(hour) == parseInt(task.endTime / this.interval)) && (minute == ((task.endTime * 60) % this.interval)))
if((parseInt(hour) == parseInt(task.endTime / this.interval)) && (minute == ((task.endTime % this.interval) * (60 / this.interval))))
html += 'selected ';
} else {
if((parseInt(hour) == startTime + 1) && (minute == selectMin))
......@@ -382,6 +402,7 @@ TaskCalendar.prototype.printAddTask = function(e,startTime,task) {
document.getElementById('listAddTask').style.display = "block";
};
/* Updates task_day in the AddTask dialog to reflect a change in the month or year */
TaskCalendar.prototype.updateAddTaskDays = function() {
var html = "";
var month = document.getElementById('task_month').value;
......@@ -407,14 +428,19 @@ TaskCalendar.prototype.updateAddTaskDays = function() {
document.getElementById('task_day').innerHTML = html;
};
/* Adds a task by pulling data from the AddTask dialog
* Returns true on success, else false
*/
TaskCalendar.prototype.addTask = function () {
var description = document.getElementById('task_what').value;
if(description.replace(/ /gi,"") != "") {
var startTime = document.getElementById('task_from').value;
var endTime = document.getElementById('task_to').value;
if(parseInt(endTime) <= parseInt(startTime))
if(parseInt(endTime) <= parseInt(startTime)) {
alert("Task cannot end before it begins!");
return false;
}
else {
var day = document.getElementById('task_day').value;
var month = document.getElementById('task_month').value;
......@@ -426,39 +452,52 @@ TaskCalendar.prototype.addTask = function () {
this.tasks[i] = new Task(description, startTime, endTime, date, i);
if(this.isDateDisplayed(date))
this.displayNewTask(i);
this.displayTasks();
this.clearAddTask();
}
} else
} else {
alert("The 'What' field needs to be filled in!");
return false;
}
return true;
};
/* Updates a task by adding it and then removing it
* Updates display when finished, if successful
*/
TaskCalendar.prototype.updateTask = function (num) {
this.deleteTask(num);
this.addTask();
if(this.addTask()) {
this.tasks[num] = undefined;
this.displayTasks();
}
};
/* Removes a task and updates display */
TaskCalendar.prototype.deleteTask = function (num) {
this.tasks[num] = undefined;
this.displayTasks();
this.clearAddTask();
};
/* returns true if provided Date() is the current one being displayed */
TaskCalendar.prototype.isDateDisplayed = function (date) {
if(date.getFullYear() == this.currentYear && date.getMonth() == (this.currentMonth-1) && date.getDate() == this.currentDay)
return true;
return false;
}
/* Clears the addTask dialog */
TaskCalendar.prototype.clearAddTask = function() {
document.getElementById('listAddTask').innerHTML = "";
};
/* Prints a task to the agenda */
TaskCalendar.prototype.displayNewTask = function(num) {
var task = this.tasks[num];
var html;
html = '<span id="task-' + num + '" style="background: lightblue; position: absolute; ';
html = '<span id="task-' + num + '" style="background: lightblue; position: absolute; font: 10px verdana; ';
var obj = document.getElementById('listOfTasks');
......@@ -475,13 +514,14 @@ TaskCalendar.prototype.displayNewTask = function(num) {
html += 'left: ' + String(parseInt(left + 60)) + 'px;';
html += 'width: ' + width + 'px; ';
html += 'height: ' + String(parseInt((((task.endTime - task.startTime) / this.interval) * 42))) + 'px; ';
html += 'border: 1px solid blue ;" onclick="' + this.name + '.taskClicked(event,' + num + ')">';
html += 'border: 1px solid blue ; overflow: hidden;" onclick="' + this.name + '.taskClicked(event,' + num + ')">';
html += task.description + "</span>";
document.getElementById('listOfTasks').innerHTML += html;
};
/* Prints all tasks occuring on the day selected to the agenda */
TaskCalendar.prototype.displayTasks = function() {
var obj = document.getElementById('listOfTasks');
var date;
......@@ -495,8 +535,11 @@ TaskCalendar.prototype.displayTasks = function() {
}
}
this.printCalendar(this.currentDay, this.currentMonth, this.currentYear);
};
/* Brings up addTask dialog with current task information */
TaskCalendar.prototype.taskClicked = function(event,num) {
this.printAddTask(event, this.tasks[num].startTime,this.tasks[num]);
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment