Dylan700
commented
2 years ago Should use tooltips for the calendar blocks (since content won't fit within the current design space).
<html>
<head>
<style>
html,body {
background-color: black;
color: white;
font-family: "Orbitron";
}
.tt_wrapper {
position: relative;
}
.tt {
background-color: transparent;
font-size: 12px;
position: absolute;
top: 100%;
padding: 5px;
margin: 10px;
color: white;
height: auto;
max-height: 0px;
transition: max-height 0.3s ease-in-out, border-color 0.3s ease 0.2s, background-color 0.2s ease 0.2s;
border: 1px solid white;
border-color: transparent;
border-left: none;
border-right: none;
overflow: hidden;
}
.tt.active {
transition: max-height 0.3s ease-in-out, border-color 0.1s ease, background-color 0.3s ease;
border-color: white;
background-color: black;
max-height: 200px;
}
</style>
</head>
<body>
<div onMouseOver="ttOn()" onMouseLeave="ttOff()" class="tt_wrapper">
<div class="tt">
<p style="font-weight: bold">Introduction to Artificial Intelligence, LEC</p>
<p style="font-size: 10px">1pm-2pm</p>
<p style="font-size: 10px">Lecture Hall, Computer Science Lab 2, COMP2123</p>
</div>
<div style="height: 15px; width: 30px; background-color: white"></div>
</div>
<div style="height: 15px; width: 30px; background-color: white"></div>
<div style="height: 15px; width: 30px; background-color: white"></div>
<div style="height: 15px; width: 30px; background-color: white"></div>
<div style="height: 15px; width: 30px; background-color: white"></div>
<script>
var tt = document.getElementsByClassName("tt")[0];
function ttOn(){
tt.classList.add("active");
}
function ttOff(){
tt.classList.remove("active");
}
</script>
</body>
</html>
It would be cool to have a module which shows upcoming events etc. Could either be via the google calendar api, or an ICS file url. Probably an ICS file would be best.
docs https://mozilla-comm.github.io/ical.js/api/ example usage https://github.com/mozilla-comm/ical.js/wiki
Google Calendar can be synced like this: https://support.google.com/calendar/answer/37648?hl=en#zippy=%2Cget-your-calendar-view-only
Most calendar software should allow exporting either the file, or providing a link to download the ics file at set intervals.