diff --git a/app.js b/app.js
index 4d480b2..1b807e1 100644
--- a/app.js
+++ b/app.js
@@ -121,7 +121,7 @@ const sortableColumns = [
{ key: 'creationDate', label: 'Creation Date' },
{ key: 'nextDate', label: 'Next Date' },
{ key: 'dueDate', label: 'Due Date' },
- { key: 'urgent', label: 'Urgent' },
+ { key: 'urgent', label: 'Urgency' },
{ key: 'importance', label: 'Importance' },
{ key: 'prio', label: 'Prio' }
];
@@ -182,7 +182,7 @@ function renderTodos() {
{ key: 'nextDate', label: 'Next Date', sortable: true },
{ key: 'dueDate', label: 'Due Date', sortable: true },
{ key: 'status', label: 'Status' },
- { key: 'urgent', label: 'Urgent', sortable: true },
+ { key: 'urgent', label: 'Urgency', sortable: true },
{ key: 'importance', label: 'Importance', sortable: true },
{ key: 'prio', label: 'Prio', sortable: true },
{ key: 'timeEstimation', label: 'Time Est. (min)' },
@@ -341,6 +341,7 @@ function handleCellEdit(e) {
}
});
} else if (key === 'status') {
+ // Use native select for status to ensure proper dropdown behavior
input = document.createElement('select');
['','Busy','Done','W4A'].forEach(opt => {
const option = document.createElement('option');
diff --git a/calendar.js b/calendar.js
new file mode 100644
index 0000000..44b0764
--- /dev/null
+++ b/calendar.js
@@ -0,0 +1,341 @@
+// Calendar functionality for Todo app
+document.addEventListener('DOMContentLoaded', () => {
+ // Set up event listeners
+ const calendarBtn = document.getElementById('tab-calendar-btn');
+ const calendarModal = document.getElementById('calendar-modal');
+ const calendarCloseBtn = document.getElementById('calendar-close-btn');
+
+ if (calendarBtn) {
+ calendarBtn.addEventListener('click', showCalendarModal);
+ }
+
+ if (calendarCloseBtn) {
+ calendarCloseBtn.addEventListener('click', () => {
+ calendarModal.style.display = 'none';
+ });
+ }
+
+ // Close modal when clicking outside of it
+ window.addEventListener('click', (e) => {
+ if (e.target === calendarModal) {
+ calendarModal.style.display = 'none';
+ }
+ });
+});
+
+// Function to show the calendar modal
+function showCalendarModal() {
+ const calendarModal = document.getElementById('calendar-modal');
+ const calendarContainer = document.getElementById('calendar-container');
+
+ if (!calendarModal || !calendarContainer) {
+ console.error('Calendar modal elements not found');
+ return;
+ }
+
+ // Get todos from various sources
+ let todos = [];
+
+ // First try to get todos from the global window.todos array
+ if (window.todos && Array.isArray(window.todos)) {
+ todos = window.todos.slice(); // Make a copy of the array
+ console.log('Using todos from window.todos:', todos.length);
+ }
+
+ // If window.todos is empty, try the localStorage
+ if (!todos.length) {
+ try {
+ const STORAGE_KEY = 'todos-v1'; // Match the key used in app.js
+ const storedTodos = localStorage.getItem(STORAGE_KEY);
+ if (storedTodos) {
+ todos = JSON.parse(storedTodos);
+ console.log('Using todos from localStorage:', todos.length);
+ }
+ } catch (e) {
+ console.error('Error loading todos from localStorage:', e);
+ }
+ }
+
+ // If we still don't have todos, try one more approach
+ if (!todos.length) {
+ // Force a load from localStorage via the app's loadTodos function if available
+ if (typeof loadTodos === 'function') {
+ try {
+ loadTodos();
+ if (window.todos && window.todos.length) {
+ todos = window.todos.slice();
+ console.log('Loaded todos using loadTodos():', todos.length);
+ }
+ } catch (e) {
+ console.error('Error using loadTodos():', e);
+ }
+ }
+ }
+
+ // Log the todos we found
+ console.log('Found todos for calendar:', todos);
+
+ // Only add sample data for testing if explicitly requested
+ // We're not adding sample data by default now to prioritize real tasks
+
+ // Generate the calendar HTML
+ const calendarHTML = generateCalendarHTML(todos);
+
+ // Update the calendar container
+ calendarContainer.innerHTML = calendarHTML;
+
+ // Show the modal
+ calendarModal.style.display = 'flex';
+}
+
+// Function to generate the HTML for the calendar modal content
+function generateCalendarHTML(todos) {
+ // Get the current date
+ const currentDate = new Date();
+ const currentMonth = currentDate.getMonth();
+ const currentYear = currentDate.getFullYear();
+
+ // Ensure todos is an array
+ todos = todos || [];
+
+ // Debug log the todos
+ console.log('Generating calendar with todos:', todos.length);
+
+ // Generate the calendar HTML for the modal
+ return `
+
+
+
+
+
+
+
+
+
+ ${generateCalendarDays(currentMonth, currentYear, todos)}
+
+
+
+ `;
+}
+
+// Helper function to get month name
+function getMonthName(month) {
+ const monthNames = [
+ 'January', 'February', 'March', 'April', 'May', 'June',
+ 'July', 'August', 'September', 'October', 'November', 'December'
+ ];
+ return monthNames[month];
+}
+
+// Function to generate calendar days
+function generateCalendarDays(month, year, todos) {
+ const today = new Date();
+ const firstDay = new Date(year, month, 1);
+ const lastDay = new Date(year, month + 1, 0);
+ const daysInMonth = lastDay.getDate();
+
+ // Adjust day of week to start from Monday (0 = Monday, 6 = Sunday)
+ let startingDayOfWeek = firstDay.getDay() - 1;
+ if (startingDayOfWeek === -1) startingDayOfWeek = 6; // Sunday becomes 6
+
+ // Get previous month's last days to fill in the first week
+ const prevMonth = month === 0 ? 11 : month - 1;
+ const prevMonthYear = month === 0 ? year - 1 : year;
+ const prevMonthLastDay = new Date(prevMonthYear, prevMonth + 1, 0).getDate();
+
+ let calendarHTML = '';
+
+ // Previous month's days
+ for (let i = 0; i < startingDayOfWeek; i++) {
+ const day = prevMonthLastDay - startingDayOfWeek + i + 1;
+ calendarHTML += `
+
+ `;
+ }
+
+ // Current month's days
+ for (let day = 1; day <= daysInMonth; day++) {
+ const date = new Date(year, month, day);
+ const isToday = date.getDate() === today.getDate() &&
+ date.getMonth() === today.getMonth() &&
+ date.getFullYear() === today.getFullYear();
+
+ // Format the date as YYYY-MM-DD for comparison with todos
+ const formattedDate = formatDateYYYYMMDD(date);
+
+ // Filter todos for this day
+ const todosForDay = todos.filter(todo => {
+ // Debug log to check date formats
+ if (day === 1) {
+ console.log('Todo dates for debugging:', {
+ id: todo.id,
+ nextDate: todo.nextDate,
+ dueDate: todo.dueDate,
+ formattedDate: formattedDate
+ });
+ }
+
+ // Normalize date formats for comparison
+ const todoNextDate = todo.nextDate ? todo.nextDate.substring(0, 10) : null;
+ const todoDueDate = todo.dueDate ? todo.dueDate.substring(0, 10) : null;
+
+ return (
+ (todoNextDate && todoNextDate === formattedDate) ||
+ (todoDueDate && todoDueDate === formattedDate)
+ );
+ });
+
+ // Debug log for this day's todos
+ if (todosForDay.length > 0) {
+ console.log(`Todos for ${formattedDate}:`, todosForDay);
+ }
+
+ calendarHTML += `
+
+
${day}
+ ${generateTodoItemsHTML(todosForDay, formattedDate)}
+
+ #${todo.id} : ${truncateText(todo.task, 25)}
+
+ `;
+ });
+
+ return html;
+}
+
+// Helper function to truncate text
+function truncateText(text, maxLength) {
+ if (!text) return '';
+ return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
+}
diff --git a/index.html b/index.html
index b270083..669dcb3 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,7 @@
Todos List
Add/Edit Todo
+ Calendar
Admin
+
+
+