🚀 Feature Discussion: LessonConnect Calendar – Smart Academic Scheduling

[AbdulAlharbi]

Hey team!

I wanted to open a discussion thread about the new Calendar feature we’re building for LessonConnect, and get everyone’s input on design, implementation, and potential enhancements. SO far I'm going based off our Design Portfolio 1 (DP1): https://docs.google.com/document/d/1RqWl337EvXrHOcybvhGmalMAJNu_IPIQV4dl0M7Wz-Q/edit?tab=t.0

---

🧠 Overview

We’re building an interactive calendar that will allow students (and potentially teachers/tutors) to:

• View their lessons, meetings, and assignments in Month and Week modes.
• Use search and filter functionality to find specific events.
• Create new events or reminders directly from the calendar.
• Attach files to events (e.g., homework, slides).
• Use an AUTO Schedule button for optimized task planning.
• Manage unscheduled tasks (drag-and-drop coming later).
• Track weekly progress via a visual progress bar.

This is designed to be intuitive, clean, and a productivity boost for students managing multiple subjects and deadlines.

---

🧩 Design Structure

Here’s how we’ve mapped out the UI structure (based on our DP1 prototype):

Section 1: Main Calendar Display

• Month/week grid of events
• Date navigation with ← → arrows
• “Today” button
• (UC1, UC11)

Section 2: Header

• Toggle between Month/Week
• Display current month
• "+" button to create events (UC3)

Section 3: Global Navigation Bar

• Home, Services, About, Login buttons (UC2, UC4)

Section 4: Search & Filter Panel

• Text search for lessons/teachers
• Filter by subject, teacher, etc. (UC6, UC7)

Section 5: Unscheduled Tasks Panel

• Placeholder task list for drag-and-drop scheduling (UC8)

Section 6: Weekly Progress Tracker

• Shows % completion of weekly lessons/tasks (UC10)

---

🛠️ Implementation Plan

The calendar is being developed in React using:

• useState hooks for state management
• react-calendar for month view
• Custom week view
• CSS custom properties for styling

Initial PR will include placeholders for features like:

• Auto-scheduling
• Drag-and-drop
• Backend integration (later stage)

---

🔍 Feedback We’re Looking For

• Does this structure make sense?
• Are there use cases or features we’re overlooking?
• Ideas for better UX? (e.g., visual overload, mobile view?)
• How should we test user interaction—automated or manual?
• Should we consider real-time updates or reminders?

---

🗂️ Related GitHub Issues

• 🟢 Issue 1: Core Calendar Component – Month/Week Views, Navigation, and Structure (UC1, UC2, UC4, UC11) #94
• # 🟡 Issue 2: Calendar Interactions – Event Creation, Search, Filters, and Auto-Scheduling (UC3, UC5, UC6, UC7) #95
• # 🔵 Issue 3: Productivity Enhancements – Unscheduled Tasks, File Attachments, and Weekly Progress Tracker (UC8, UC9, UC10) #96

---

Prototype

---

💬 Let’s Collaborate

This is a big, high-impact feature. Your feedback—design, code, UX, naming, structure—will make this way better. Drop your thoughts below, even if it's just one small idea!

Thanks! 🙏
— Abdulrahman

[ashley-arellano]

Great structure (I love that we’re thinking about mobile responsiveness early)
Quick thing tho, should the progress tracker (Section 6) update live as users complete tasks, or only refresh at certain intervals? Live might be cool but could be heavy on resources :o

[AbdulAlharbi]

For MVP, We will probably/maybe have it refresh on page load or task submission. Live updates would be ideal, but yeah, it may be heavier performance-wise. Good note — I’ll keep that in mind for a V2 with WebSockets or polling.

[SameerIssa]

Love where this is going.

An idea for the search bar: we add autocomplete suggestions as you type (like teacher names or subjects)? Could make it easier for students to find what they’re looking for.

[AbdulAlharbi]

Totally. For now, it filters titles, but I’ll abstract the search logic so it’s easy to wire into suggestions later. Maybe even pull from the list of events/teachers we’re already loading.

[ChrisCRL]

Loving the UX flow here. One suggestion: in the event creation modal, maybe we include a dropdown for "event type" (Lesson/Meeting/Reminder)? That could make the color coding in Section 4 way easier to manage later on. Also down the line, we might want to explore adding keyboard shortcuts for quick scheduling.

[AbdulAlharbi]

Yes! That’s already on my radar — planning to include type tags ("Lesson", "Meeting", "Reminder") in the modal layout and map those to color codes in the filters. I'll probably leave it static at first or with mock date, but structure it so backend can assign types later.

[EthanZ23]

Nice breakdown Abdul! Although can we also have a calendar-wide “Dark Mode” toggle? I know it’s not a priority right now, but visually that’d be cool and useful (mainly because I am an avid dark mode user). It would be a great UX win.
I am also curious, do we want notifications/reminders tied to upcoming events eventually, maybe after MVP?

[AbdulAlharbi]

Yes to both! Dark mode is super popular, maybe I might set up CSS ( which will be out soon under the front end folder; Calednar.css ) variables for that once the base styles are stable. As for notifications, we could eventually use browser alerts or email/push once we get closer to launch, but to be honest this can be after MVP since we are on a time crunch sadly, but i have to admit LessonConnect is shaping up very well.

[FrankFurter123]

Hey Abdul, thank you for making this discussion post as we start integrating the backend to the front end. I know there is a React calendar you can use to make the design easier for you. There are many of them, so feel free to use whichever you think looks great. I’m more leaning toward a Google Calendar view, but that’s just my opinion. As far as the integration goes, I think we already have some filtering backend integrated for it. Remember that this calendar will only be available after the user signs in as part of the dashboard since we don't want anyone to access personal calendars. Feel free to ask me for help with this if needed!

• Franklin

[Jose-Alarcon1]

I just wanted to say great work on starting this discussion. Also great work on the implementation of the calendar!

[aviendha-andrus]

I wanted to add onto this discussion now that I’ve completed my Calendar PR to give everyone a quick update on where things currently stand!

---

✅ Overview

The core calendar functionality has now been implemented on the backend, and it aligns with the structure and flow designed by @AbdulAlharbi on the frontend. This includes the creation of the CalendarEvent model, along with the necessary fields and validation logic to ensure a flexible and reliable scheduling system. The design was built with both current requirements and future scalability in mind, so it should serve as a solid foundation moving forward.

---

📌 Next Steps

• Testing and QA:
  I’ll be opening a dedicated issue soon to facilitate thorough testing of both the calendar models and their corresponding API endpoints. This will help ensure everything works smoothly and as expected before we move further with integration.

• Team Coordination:
  I plan to sync up with other members of the backend team who are also working on calendar-related features to make sure we’re aligned and not overlapping efforts. If anyone else is working on anything adjacent, feel free to reach out so we can coordinate!

• Frontend Integration:
  I’ll also be reaching out to @AbdulAlharbi to discuss the timeline for hooking the backend up to the existing calendar UI. Since his design is already set up to expect this data, I’m hopeful the integration process will be straightforward but a quick alignment will help smooth things out.

---

💬 Feedback

If anyone has suggestions on additional next steps I should take, or sees any areas where improvements can be made, I’d love to hear your thoughts. Whether it's code structure, model design, or workflolw, all feedback is welcome and appreciated!

[AbdulAlharbi]

Thank you for participating, love the feedback!