This is a Chrome Browser Extension that allows exporting a VIT Timetable with a single click as an iCalendar
(.ics
) file.
All the events are created as per the Academic Calendar for a given Semester, which includes extra instructional days (with specified day order), holidays and exam dates. Additional standalone .ics
files can also be exported for 'Exam Schedules' and 'Assignment Upload Schedules'.
The exported .ics
files can be imported into Google Calendar or any other Calendar application.
- Clone this repository or download the zip and unzip
- Open Chrome extenions page by typing
chrome://extensions/
- Enable
Developer mode
on the top right - Click on
Load unpacked
button and select thevit-timetable-export-plugin
folder where you cloned or unzipped this repository
You should see something like this after the above steps:
With this plugin installed, .ics
files can be exported from the following pages in VTOP:
- Timetable page
Academics > Time Table
- Assignment Upload page
Academics > Digital Assignment Upload
- Exam Schedule page
Examination > Exam Schedule
- Go to the 'Timetable' page under
Academics > Time Table
- Select the semester
Right Click > Export ICS File
- The page will automatically navigate to the 'Academics Calendar' page, populate the correct Semester, Class Group and iterate through all the months to generate the
.ics
file
- The page will automatically navigate to the 'Academics Calendar' page, populate the correct Semester, Class Group and iterate through all the months to generate the
- The
.ics
will be exported asVIT-<semester-info>.ics
Here is the whole process in action:
- Go to the 'Assignment Upload' page under
Academics > Digital Assignment Upload
- Select the semester
Right Click > Export ICS File
- The page will automatically navigate to all the course dashboards, parse the assignments, returns to this page to generate the
.ics
file
- The page will automatically navigate to all the course dashboards, parse the assignments, returns to this page to generate the
- The
.ics
will be exported asVIT-Assignment-Upload-Schedule-<semester-info>.ics
Here is the whole process in action:
- Go to the 'Exam Schedule' page under
Examination > Exam Schedule
- Select the semester and click on
Search
Right Click > Export ICS File
- The
.ics
will be exported asVIT-Exam-Schedule-<semester-info>.ics
Here is the whole process in action:
To import into Google Calendar
- Click on the
+
sign next toOther calendars
in the left pane and selectCreate new calendar
- A new calendar will make it easy to manage (like toggling on/off, changing colors, delete, etc) and is strongly recommended rather than importing into any existing calendar
- Standalone events from
Exam Schedule
andAssignment Upload Schedule
.ics
files could however be imported into existing calendars if needed
- Give a name to your calendar and click on
Create calendar
- Click on the
Import & Export
option in the left pane - Select the newly created calendar in the
Add to calendar
dropdown - Browse to the exported
.ics
file and click on theImport
button
- You should see a popup showing the number of events imported
- More details about importing events to Google Calendar can be found here
- Here is how the schedule, day and week views should look like:
- Here are similar views on a mobile:
- ICS is a universal calendar file format and
.ics
files can be imported into any Calendar application - On macOS, an
.ics
file will open in the nativeCalendar
app by default. In theAdding a new event
popup, chooseNew Calendar
from the drop down menu and click onOK
to import the calendar
All of VTOP's content is dynamically generated. There is a single URL https://vtop.vit.ac.in/vtop/content
under which all content resides and the browser does not navigate to different pages for different sections. To export content in different tables as .ics
files, code needs to be injected and run as Content Scripts. Until v1.2, the MutationObserver API was used to observe for changes in relevant divs to detect the page and add UI elements for export. v1.3 and above registers a more generic and extensible Context Menu item Export ICS File
(right-click option) for the main content page, which when clicked on the relevant pages carries out the export.
Export of .ics
files is currently supported for the following pages:
- Timetable page
Academics > Time Table
- Assignment Upload page
Academics > Digital Assignment Upload
- Exam Schedule page
Examination > Exam Schedule
In the 'Timetable page', when the export menu item is clicked, the course and time table details on that page are parsed and then the page automatically navigates to the 'Academics Calendar' page, populates the correct Semester, Class Group and iterates through all the months of that semester to generate the .ics
file.
Navigation to the 'Academics Calendar' page is through the click of the following anchor tag:
<a data-url='academics/common/CalendarPreview' ... href='javascript:void(0);'>
Clicking on this link programatically in the 'Content Script' performs the navigation, but also throws an error:
document.querySelector('a[data-url="academics/common/CalendarPreview"]').click();
Refused to run the JavaScript URL because it violates the following Content Security Policy directive: ...
This turns out to be due to the inline href code in the anchor tag, which is doing nothing here, but still causes a problem. Apparently, this is not a problem for other tags like span
, button
, etc. Only the workaround suggested here resolved the problem. In addition to being able to navigate to a different section, we also need to know when that navigation is complete and the page is ready so that we can perform the next action. Since the dynamic requests here are all ajax
requests, the above hack was combined with the ajaxStop
method described here as follows:
const clickAndCallback = `
$(document).ajaxStop(function () {
$(this).unbind('ajaxStop');
window.dispatchEvent(new CustomEvent('reset'));
});
this.click();
this.removeAttribute('onreset');
`;
function callbackFunction() {
// called after the element is clicked
// and the corresponding ajax request is completed
...
}
window.onreset = callbackFunction;
element.setAttribute('onreset', clickAndCallback);
element.dispatchEvent(new CustomEvent('reset'));
The Content Scripts documentation suggests that communication with the embedding page be through the shared DOM and message passing. The above code achieves the same as it does the following:
- Registers a callback function on the window's
reset
event - Sets the
onreset
attribute of the element with code that can execute in the embedding page- The code registers for
ajaxStop
, which gets called when allajax
requests are completed and dispatches thereset
event on the main window, which calls the main window'sonreset
event handler, which is the callback function configured - The code also performs the click of that element and removes the
onreset
atttribute that was temporarily added
- The code registers for
- Dispatches the
reset
event on the element that triggers the click and the eventual callback when allajax
requests are completed
This same method is used to populate the relevant 'Semsester', wait for the ajax
request to complete, populate the 'Class Group', wait for that ajax
request to complete, click through each of the months of the academic calendar and parsing the displayed calendar table after each request is complete untill all academic calendar months are parsed to put together the final .ics
file.
The same approach outlined above is followed in the 'Assignment Upload' page, where each of the course dashboards have to be clicked through to display and then parse the assignment schedules.
The 'Exam Schedule' page has no such navigation and is a direct parsing of a single displayed table.
Note: Parsing raw data from HTML tables is always error-prone and is bound to break with any underlying page changes in the future.