Past Teaching Schedules

Ad: Get Isometric Contributions for your Chrome browser.

One of the reasons I used VuePress for my last version of this site was the promise of using custom components that would integrate with Markdown. I wanted to create schedules in Markdown tables while applying some coloring to the different sections I was teaching. Here’s the Vue code I used to generate the coloring.

<template>
    <div>
        <slot />
    </div>
</template>

<script>
export default {
    props: ['yellow', 'blue', 'green', 'red'],
    mounted() {
        var cells = document.querySelectorAll('td');
        var y = this.yellow;
        var b = this.blue;
        var g = this.green;
        var r = this.red;
        cells.forEach(function(element) {
            if(y && element.innerText.includes(y))
              element.classList.add('yellow');
            else if(b && element.innerText.includes(b))
              element.classList.add('blue');
            else if(g && element.innerText.includes(g))
              element.classList.add('green');
            else if(r && element.innerText.includes(r))
              element.classList.add('red');
            else if(element.innerText.includes('by appointment'))
              element.classList.add('by-appointment');
            else if(element.innerText.includes('unavailable'))
              element.classList.add('unavailable');
            // console.log(element.innerText);
        });
    }
}
</script>

<style>
td.unavailable {
    font-style: italic;
    font-size: small;
}
td.by-appointment {
    background-color: gainsboro;
    font-size: small;
    text-decoration: underline;
    text-transform: capitalize;
}
td.yellow {
    background-color:rgba(255, 251, 0, 0.185);
}
td.blue {
    background-color:rgba(0, 68, 255, 0.185);
}
td.green {
    background-color:rgba(21, 255, 0, 0.185);
}
td.red {
    background-color:rgba(255, 0, 0, 0.185);
}
</style>

And here’s a sample of what I put in Markdown.

## Sep, 2020

<td-color yellow="1508 A05" green="2018 A01" blue="1508 A01" red="GitHub">
|         | Mon | Tue | Wed | Thu | Fri |
|:--------|-----|-----|-----|-----|-----|
| 8 ^AM^  | DMIT 1508 **A05** | *Reserved* | DMIT 1508 **A05** | by appointment | DMIT 1508 **A01** |
| 9       | DMIT 1508 **A05** | *Reserved* | DMIT 1508 **A05** | by appointment | DMIT 1508 **A01** |
| 10      | DMIT 1508 **A01** | DMIT 2018 **A01** | DMIT 1508 **A01** | by appointment | by appointment |
| 11      | DMIT 1508 **A01** | DMIT 2018 **A01** | DMIT 1508 **A01** | by appointment | by appointment |
| 12 ^PM^ |  |  |  |  |  |
| 1       | DMIT 2018 **A01** | DMIT 1508 **A05** |  | by appointment | by appointment |
| 2       | DMIT 2018 **A01** | DMIT 1508 **A05** | *Staff Meeting* | by appointment | by appointment |
| 3       | by appointment | by appointment | *Staff Meeting* | DMIT 2018 **A01** |  |
| 4       | by appointment | by appointment | *Staff Meeting* | DMIT 2018 **A01** |  |
| 5       |  |  |  |  |  |
</td>