/691-Calendar

Primary LanguageJavaScript

Certainly! Here's your content converted to Markdown format:

Class Schedule Calendar

This web application fetches class schedule data from a JSON API and dynamically renders it on a grid-based layout. Users can filter classes based on various criteria such as time, frequency, class number, and type.

Features:

Data Fetching:

  • The application fetches class schedule data from a JSON API hosted on GitHub pages.

Data Processing:

  • The fetched data is processed and formatted to fit into the grid-based layout.
  • The schedule data is split into individual class objects and structured for rendering.

Filtering:

  • Users can filter classes based on specific criteria such as time, frequency, class number, and type.
  • The filter options are presented as dropdown menus with multi-selection and input fields, allowing users to select their preferences.

Dynamic Rendering:

  • Classes are dynamically rendered onto the grid layout based on the filtered data.
  • Each class is represented as a colored box, with its position and dimensions calculated based on its start time, end time, and day.
  • Function plotEvent(w, h, x, y, color, classInfo) plots the classes in the layout where ‘w’ is the width of the class, ‘h’ is the height of the class, ‘x’ is the distance of x-axis, ‘y’ is the distance of y-axis, and ‘classInfo’ is the object containing all the information of a class.

Classes Conflict/Overlapping:

  • If two or more classes conflict at the same time and day, the width of each class is adjusted uniformly based on the total number of conflicting classes.

Interaction:

  • Users can interact with the schedule by hovering over class boxes to view detailed information.
  • Popups display class names, class numbers, sections, days and times, rooms, and instructor information.

Components:

Grid Layout:

  • The main grid layout (graph-container) represents the days of the week (columns) and hours of the day (rows).

Class Boxes:

  • Each class is represented as a colored box (event) within the grid layout.
  • The position and size of each box correspond to the class's schedule and duration.

Filter Controls:

  • Dropdown menus and input fields allow users to filter classes based on specific criteria.
  • Filters include time (AM/PM), frequency (days of the week), class number, and class type (lecture, lab, other).

Popup Information:

  • Detailed class information is displayed in popups when users hover over class boxes.
  • Information includes class name, class number, section, days and times, room, and instructor details.

Technologies Used:

  • JavaScript: The primary programming language used for client-side logic and interactivity.
  • jQuery: Used for DOM manipulation and event handling, enhancing user experience.
  • Semantic UI: A CSS framework that provides styling and components for a modern and responsive user interface.

Link: Class Schedule Calendar