Calendar: Usage Guide

Students:

When loading up the calendar page, you will see a calendar view of the current month, alongside any events that may have been posted onto the calendar. Image

Gray events indicate daily plans, or events without a type. Orange events indicate events that are assignments that were automatically pulled from the OCS assignments feature.

The three buttons at the top (CSA, CSP, CSSE) denote the different classes that will be displayed on the calendar. Different classes have different Slacks, and to avoid clutter, choose the class that you are in or wish to see the events of to only show those events.

Teachers/Student Planners:

In order to populate the calendar with events, if you are doing so through Slack, use this message template in your Slack’s designated channel (assignments, most of the time):

[Day of Week (Mon/Tue/Wed/Thu/Fri/Sat/Sun)]: Title
• Description

An example of this could be:

[Thu]: Live Reviews
• Review project progress with teacher

It will appear on the calendar on the day of the week specified of the current week. Image

To add events directly through the calendar, simply click the date you want to add the event on, and fill out the popup.

Image

Feature Overview & Breakdown

General Features

  • Slack Integration: 

  • Make a message using message template (provided below) for the schedule of your class in selected channel (in this case preset to announcements)

  • Message auto populated into calendar

  • From Calendar Website:

  • Switch between months (using the month tabs on the top of the calendar)

  • Switch between month/week/day view

  • Preset to the current month

  • Calendar format: 
    [Day of Week (Mon/Tue/Wed/Thu/Fri/Sat/Sun)]: Title
• Description
  • Example: 
    [Mon]: Live Reviews
• Review project progress with teacher

Admin/Teacher Features (Additional)

  • Adding events: 

  1. Click on an empty space (either on an empty calendar block or the space below a pre-existing calendar event) -> Calendar will open a module

  2. Fill in the empty spaces in the module (for title, description, etc.)

  3. Click “Save Changes”

  4. Click the “x” button 

  5. Reload page if necessary 

  • Deleting Events:

  1. Click on pre-existing event -> will open a module

  2. Click the red “Delete” button 

  3. Click the “x” button

  4. Reload the page if necessary

  • Editing Events:

  1. Click on pre-existing event -> will open a module

  2. Edit any of the spaces in the module 

  3. Click the “Save Changes”

  4. Click the “x” button

  5. Reload the page if necessary

Connection to other features:

Assignments/Team Teach:

  • Automatically pulls assignments from the assignments feature to be displayed on the calendar
  • Displays assignment differently based on the assignment type (team teach, live review, homework, etc)

Technical Documentation

Backend Overview

The system is designed to handle operations related to calendar events and Slack messages, such as adding, editing, deleting, and retrieving events and messages. Using Spring Boot’s capabilities, RESTful APIs are created to interact with a database to store and manage event and message data.

Key Components

Entities:

  • CalendarEvent: Represents a calendar event with fields such as date, title, description, type, and period.

  • SlackMessage: Represents a Slack message with fields such as timestamp and message content.

Repositories:

  • CalendarEventRepository: Extends JpaRepository to provide CRUD operations for CalendarEvent entities.

  • SlackMessageRepository: Extends JpaRepository to provide CRUD operations for SlackMessage entities.

Services:

  • CalendarEventService: Contains business logic for managing calendar events, including saving, updating, deleting, and retrieving events.

  • SlackService: Handles business logic for managing Slack messages, including sending and saving messages.

  • MessageService: Handles the logic for saving Slack messages to the database.

Controllers:

  • CalendarEventController: Provides RESTful endpoints for managing calendar events.

  • SlackController: Provides RESTful endpoints for managing Slack messages and handling Slack events.

Flow and User Experience

Adding Events:

  • Users add new events by sending a POST request with the event details.

  • Endpoint: /api/calendar/add or /api/calendar/add_event.

  • Controller: CalendarEventController handles the request and calls the CalendarEventService to save the event.

Editing Events:

  • Users can edit events by sending a PUT request with the updated event details.

  • Endpoint: /api/calendar/edit/{id}.

  • Controller: CalendarEventController calls the CalendarEventService to update the event.

Deleting Events:

  • Users can delete events by sending a DELETE request with the event ID.

  • Endpoint: /api/calendar/delete/{id}.

  • Controller: CalendarEventController handles the request and calls the CalendarEventService to delete the event.

Retrieving Events:

  • Users can retrieve events using GET requests.

  • Endpoints: /api/calendar/events, /api/calendar/events/{date}, /api/calendar/events/range.

  • Controller: CalendarEventController handles the requests and fetches the events from the database.

Handling Slack Events:

  • The SlackController handles incoming Slack events via the /slack/events endpoint.

  • When a message event is received, it calls the MessageService to save the message to the database and the CalendarEventController to add events based on the Slack message content.

Saving Slack Messages:

  • The MessageService saves Slack messages to the database by creating a new SlackMessage entity with the timestamp and message content.

SQLite Databases

Persistent SQLite Storage/Data

The Calendar Event and Slack Message Management system utilizes SQLite as its database for persistent storage. SQLite is ideal for this system as it enables fast retrieval and modification of calendar events and Slack messages, ensuring data integrity even if the backend restarts. The system uses JPA and Hibernate (Spring Boot Application features) to interact with the SQLite Database. It uses persistent storage to maintain data even after AWS terminal (deployment) may be reloaded.

Table Structure

1. Calendar Events Table

The calendar_events table stores data about processed calendar events. Each event is represented as a row, and the table includes columns for various event attributes:

  • id: An auto-incrementing primary key that uniquely identifies each event.

  • date: The date of the event.

  • title: The title of the event.

  • description: A description of the event.

  • type: The type of the event (e.g., “meeting”, “appointment”).

  • period: The period of the event (e.g., “morning”, “afternoon”).

2. Slack Messages Table

The slack_messages table stores data about raw Slack messages. Each message is represented as a row with the following columns:

  • id: An auto-incrementing primary key that uniquely identifies each message.

  • timestamp: The timestamp of when the message was sent.

  • message: The content of the Slack message

Frontend Overview for the Message Calendar

The Message Calendar frontend is designed to provide an interactive and visually appealing way to manage events, assignments, and reminders. It integrates FullCalendar.js for scheduling and event visualization while offering a clean user experience with modals for event editing and an intuitive sidebar for upcoming reminders.

Key Features

1. Calendar Display (FullCalendar.js Integration)

  • Uses FullCalendar.js to create a dynamic and interactive calendar.

  • Supports event creation, editing, and deletion directly from the UI.

  • Events are fetched from the backend and displayed with color-coded categories based on event type.

2. Responsive Sidebar for Reminders

  • A dedicated sidebar lists upcoming events.

  • Uses JavaScript filtering to show only future events.

  • Displays assignments fetched from the backend alongside scheduled calendar events.

3. Modal-Based Event Editing

  • Clicking on an event opens a modal that allows users to edit the title and description.

  • Users can add new events or delete existing ones through API calls.

  • The modal ensures a smooth workflow without unnecessary page reloads.

4. Theming and Styling (CSS Enhancements)

  • A dark-themed sidebar contrasts with the bright calendar for better readability.

  • Smooth hover effects and transitions make interactions feel responsive.

  • Uses backdrop blur effects to enhance modal appearance.

5. API-Driven Event Handling

  • Fetches event data from javaURI/api/calendar/events.

  • Retrieves assignments separately from javaURI/api/assignments/.

  • Events are color-coded dynamically based on the type (e.g., blue for homework, green for checkpoints).

6. Basic JS/HTML Formatting

  • Flexbox-based layout ensures that the calendar and sidebar adjust seamlessly.

  • Event listeners for clicks make the UI more interactive and user-friendly.

  • Graceful error handling prevents crashes when API calls fail.