Feature : Implement exporting the time table

[ritgit24]

This feature can be implemented in two possible ways:

1. ICS-based export (Recommended)
   The extension can generate an .ics (iCalendar) file in memory from the timetable data.
   Users can then manually import this file into Google Calendar (and other calendar apps), ensuring broad compatibility without requiring authentication or external APIs.

2. Google Calendar API integration
   Alternatively, the extension can directly create events using the Google Calendar API.

[this-is-mjk]

3. PNG Download
   Export the calendar directly as a image (preferably as png)

[HiRaNiShAh]

Hi! I’d like to work on this issue.

Proposed Technical Approach

Feature scope

• Add support for exporting the already fetched timetable as a PDF.
• No changes to the Pingala fetch logic or timetable parsing logic.

Data source

• Use chrome.storage.local to read the timetable object that is currently stored by the extension after fetching from Pingala.
• This ensures the export works offline and follows the existing data flow.

UI changes

• Add a minimal “Export Timetable (PDF)” button to the extension popup.
• Keep UI changes limited to the popup to avoid affecting background scripts or notifications.

PDF generation

• Use jsPDF to generate the PDF inside the popup context.
• Format the timetable in a clean, day-wise structure:
  • Day heading
  • Course code
  • Course name
  • Time slot
  • Location
• Handle page overflow by adding new pages when needed.

Chrome APIs / browser APIs

• chrome.storage.local.get for retrieving timetable data
• Standard Blob / file save mechanism via jsPDF’s save().

Architecture considerations

• No modification to existing storage format.
• No refactoring of existing fetch, alarm, or notification logic.
• Keep all new logic modular and isolated to export-related functions.

[MushMan19]

Hi I'd Like to work on adding this feature.

Description

Currently, the extension binds user data locally. To improve usability and interoperability, I propose adding a Export Option that allows students to use their timetables elsewhere.

This feature will support three formats:

1. ICS File: Standard *.ics file for manual import into any calendar app (Outlook, Apple Calendar, etc.).
2. Google Calendar API: Direct integration to create a dedicated semester calendar with rich event details.
3. Image (PNG): A clean visual snapshot of the timetable grid for easy sharing.

Proposed Approach

1. Extra Data Scraping

Goal: The user requested that calendar events include the Instructor's Name, which is not currently stored.

• Change: specific modifications to [content.js] to identify the "Instructor" column in the Pingala table during the Fetch Timetable process.
• Storage: Update the timetable object structure in chrome.storage.local to persist the instructor's name alongside time and title.

2. UI Additions

• Location: "Check Timetable" screen [popup.html].
• Addition: An "Export" button/dropdown next to the "Show Full Timetable" button.
• Options:
  • "Download as .ics"
  • "Add to Google Calendar"
  • "Download as Image"

3. Implementation Details

A. ICS Export

• Implementation

  • Use a lightweight custom implementation without external dependencies.
  • Generate a standard VCALENDAR with one VEVENT per class.
  • Use RRULE:FREQ=WEEKLY to represent recurring classes.

• Timezone Handling

  • All events must explicitly define the timezone to prevent shifts in calendar applications.
  • Use:

DTSTART;TZID=Asia/Kolkata  
DTEND;TZID=Asia/Kolkata

• File Creation
  • Generate and download the file using:

new Blob([icsContent], { type: "text/calendar" })

B. Google Calendar Integration (API)

• Authentication

  • Use chrome.identity.getAuthToken.
  • OAuth2 client must be registered as a Chrome Extension in Google Cloud Console.
  • Required scope:

  https://www.googleapis.com/auth/calendar
  

• Calendar Creation: Automatically creates a new calendar named "Semester Current" (e.g., "Semester 2025-26-I") to avoid cluttering the primary calendar.

• Event Format

  • Title: (Type)-(CourseCode) like Lec-PHY113
  • Repetition: every week
  • Time: Exact class start/end times.
  • Location: locally stored lectureHall if available.
  • Description: Instructor: [Instructor Name]
  • Color Coding:
    • Lecture (Lec): Blue
    • Tutorial (Tut): Green
    • Practical (Prc): Red
  • Reminders: Default popup notification set to 15 minutes before the event.

C. Image (PNG) Export

• Implementation
  • Use html2canvas to capture the DOM element containing the timetable grid (e.g., #timetableGrid).
• Quality
  • Ensure high-resolution output using:

  scale: window.devicePixelRatio

• Output
  • Download the generated canvas as a PNG file.

Prerequisites

• Google Cloud Console
  • OAuth2 client configured for Chrome Extensions
  • Google Calendar API enabled
  • OAuth consent screen configured

Notes

Since the google calendar integration requires some prerequisites, in case of failure a notification can be shown indicating the user to set up the necessary things that might be causing the option to not work

[this-is-mjk]

@HiRaNiShAh good to see your idea, but I feel it would be better if we export as png or image then a pdf.
may be you can look into its implementation details, and discuss here.

[this-is-mjk]

@MushMan19 good to see your technical ideation, @HiRaNiShAh will be looking in the png export, you can proceed for the ics file export and the google calendar export feature.

Your first step should be finding reassures, and references and share here for the review, then we can proceed for the implementation.

[HiRaNiShAh]

Proposed approach for PNG export

High-level idea

• Render the timetable UI as an image.
• Allow users to download the exported timetable as a PNG file.

Possible technical approaches

1. html2canvas

   • Render a hidden HTML container containing the timetable.
   • Use html2canvas to convert the DOM to a PNG image.
   • Trigger download using toDataURL().

2. Canvas-based rendering

   • Programmatically draw the timetable layout on an HTML <canvas>.
   • Export canvas using canvas.toBlob() or canvas.toDataURL().

Chrome or Web APIs

• chrome.storage.local.get to fetch timetable data
• DOM APIs to construct the timetable layout
• Canvas / Blob APIs for image export

Architecture considerations

• No change to existing timetable fetch or storage logic.
• Export logic will be isolated from background and alarm scripts.
• UI changes limited to popup or a hidden export container.

References

• html2canvas documentation: https://html2canvas.hertzen.com/
• Canvas toBlob(): https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob
• Downloading files in Chrome extensions:
  https://developer.chrome.com/docs/extensions/mv3/downloads/

Please let me know if any changes or suggestions are needed before I proceed.

[this-is-mjk]

@HiRaNiShAh The idea looks fine,
You can start working on the code base, keep us updating with what files are you changing or what new packages are being installed.

According to my understanding, i gave few questions and suggestions

1. The docs of the html to canvas package says it convert the dom elements into the canvas object, so will it work same with extension's html code.
2. Where do you plan to add the button for this export? You will need to read the stored timetable so first go through the codebase and decide, as it is possible you may find already existing functions for the same purpose.
3. Add comments wherever possible
4. The 3rd link provided by you for the chrome file downloads from extensions, does not work, please check it.

Do not use AI/LLM tools blindly, first understand the codebase, it would be really great if you can contribute to readme, or comments so the code is more easy to understand for new developers while you yourself explore the codebase.

All the best!

[MushMan19]

Hi These are some of the resources and references I plan on using. I have also included an overview of the steps required to implement these.

ICS Export

• I reffered to the official documentation on the iCalendar (.ics) file format. This has all the info about how the files are to be written and formatted: RFC 5545
• Since we only need to create simple calender reminders, we can avoid using libraries like ics.js and instead download a correctly formatted string as a .ics file.
• To download the generated string we can use something like:

const blob = new Blob([icsString], { type: 'text/calendar' });
const url = URL.createObjectURL(blob);
// Create invisible <a> tag and click it

• To validate and test the generated file, this website can be used.

Google Calendar Integration

• Again I refereed the original documentation that explains the utilization of the Google Calendar API: https://developers.google.com/workspace/calendar/api/guides/overview
  https://developers.google.com/workspace/calendar/api/v3/reference
• Moreover in Google Cloud Console while enabling the Google Calendar API, the console provides a bunch of useful examples, overviews and references.
• To enable proper integration and enable access to the user's Google Calendar an OAuth 2.0 client ID has to be created in Google Cloud Console.
• The manifest.json file has to include:
  • the OAuth 2.0 client ID
  • Required OAuth scopes
  • Necesarry host permissions
• The main implementation will include:
  • Getting the Authorization Token
  • Making a createCalenderEvent()
  • Adding a listener that can be called from popup.js

PS: I am not sure on what credentials I am supposed to make a pr with. For testing I can use my own credentials but those shouldn't be uploaded and so should I leave those blank?

---

Please let me know whether or not the above approach is correct and any modifications that need to be made so that I can continue with the implementation.

[MushMan19]

I think adding a Export Timetable button under the Check Timetable option besides the Show Full Timetable would be a suitable place to put all the three export options.
We can have a Export Timetable button that reveals a dropdown with the three options.