USOS timetable day date adder + format fixer [Userscript]

README.md

USOS timetable day date adder + format fixer [Userscript]

A script that adds dates to individual days in the USOS timetable + fixes formatting of the 2 dates on top.

Instructions

0. Make sure you're using the HTML timetable!
1. Install a Userscript browser extension

• Tampermonkey (I use this one)
• Violentmonkey
• etc.

*It should work fine with most extensions (if not, write a comment)
2. Add the script

Tampermonkey

1. Click on the extension icon (in the top right corner of the browser - you may have to click the puzzle icon first to see it)
2. Click Control panel
3. Click Utilities
4. At the bottom in to Import from URL paste in this URL: https://gist.githubusercontent.com/ErykDarnowski/a0566eaa2ed6aab400a6b6ec7355fde0/raw/d3ec381815c90339b1654f371a44409b23440a2c/script.js
5. Click Install
6. Click Install again

Violentmonkey

1. Click on the extension icon (in the top right corner of the browser - you may have to click the puzzle icon first to see it)
2. Click the cog icon
3. Click +
4. Click Install from URL
5. Paste in this URL: <>
6. Click Confirm
7. Click Close

*The script should auto update!
*Remember, you can turn the script ON / OFF whenever you like by just flipping the switch next to it's name

script.js

// ==UserScript==
// @name         USOS timetable day date adder + format fixer
// @description  A script that adds dates to individual days in the USOS timetable + fixes formatting of the 2 dates on top.
// @version      1.2.0
// @author       Eryk Darnowski (GH: ErykDarnowski TW: @erykdarnowski)
// @match        *://usosweb.ansb.pl/kontroler.php?_action=home/plan*
// @match        *://usosweb.ansb.pl/kontroler.php?_action=katalog2/przedmioty/*
// @match        *://usosweb.ansb.pl/kontroler.php?_action=katalog2%2Fprzedmioty*
// @run-at       document-idle
// @grant        none
// @namespace    https://gist.github.com/ErykDarnowski/a0566eaa2ed6aab400a6b6ec7355fde0
// @supportURL   https://gist.github.com/ErykDarnowski/a0566eaa2ed6aab400a6b6ec7355fde0
// @updateURL    https://gist.githubusercontent.com/ErykDarnowski/a0566eaa2ed6aab400a6b6ec7355fde0/raw/b8f8d22c7ac6b404a7281223a532771e5bb726b6/script.js
// @downloadURL  https://gist.githubusercontent.com/ErykDarnowski/a0566eaa2ed6aab400a6b6ec7355fde0/raw/b8f8d22c7ac6b404a7281223a532771e5bb726b6/script.js
// ==/UserScript==

/* Releases
- 1.0.0 Initial
- 1.0.1 Fix lack of `@match` for the universal timetable page
- 1.1.0 Add current day highlight
- 1.1.1 Fix curr day highlight not working when date starts with `0` (e.g. `05.12.2023`)
- 1.2.0 Update to work with updated UI (20.02.2024)
*/

(() => {
	"use strict";

	const headers = document.querySelectorAll('#layout-c22 > div > div.timetable-wrapper > div.autoscroll > table > tbody > tr:nth-child(1) > th');
	const datesEl = document.querySelector('div.flex.gap05.selected_week > b');
	const dateStrs = datesEl.textContent.split(' - ');
	const startDate = new Date(dateStrs[0]);
	const localeConfig = {
		day: '2-digit',
		month: '2-digit',
		year: 'numeric',
	};

	// <https://stackoverflow.com/questions/563406/how-to-add-days-to-date>
	Date.prototype.addDays = function(days) {
	    const date = new Date(this.valueOf());
	    date.setDate(date.getDate() + days);
	    return date;
	};


	// fix top dates formatting
	datesEl.textContent = dateStrs.map(x => new Date(x).toLocaleDateString(undefined, localeConfig)).join(' - ');

	// add dates to headers (individual days)
	for (let i = 0; i < headers.length; i++) {
		const header = headers[i];
		const dayDate = startDate.addDays(i).toLocaleDateString(undefined, localeConfig);

		header.innerHTML = header.textContent + `<br><span style="color: var(--font-color-reverse); font-weight: 800;">(${dayDate})</span>`;

		// adding border to curr day
		(new Date().toLocaleDateString(undefined, localeConfig) === dayDate) && (headers[i].style.border = '3px solid red');
	};
})();