main.js

@@ -180,6 +180,8 @@ function createSchedule() {
         container.id = `slot-${day}`;
         if (!schedule.days[day].enabled)
             container.classList.add('disabled');
+        if (schedule.days[day].special)
+            container.classList.add('special');
 
         const timeslotDateContainer = document.createElement('div');
         timeslotDateContainer.className = 'timeslot-date';
@@ -214,7 +216,10 @@ function createSchedule() {
 
         scheduleDOM.appendChild(container);
 
-        timeslotDay.addEventListener('click', () => {
+        timeslotDay.addEventListener('click', event => {
+            if (event.altKey)
+                return;
+
             schedule.days[day].enabled = !schedule.days[day].enabled;
 
             timeslotTitle.contentEditable = schedule.days[day].enabled;
@@ -241,5 +246,21 @@ function createSchedule() {
         timeslotTime.addEventListener('keyup', () => {
             schedule.days[day].time = timeslotTime.innerText;
         });
+
+        container.addEventListener('click', event => {
+            if (!event.altKey)
+                return;
+
+            event.preventDefault();
+
+            const slot = schedule.days[day];
+            slot.special = !slot.special;
+
+            if (slot.special) {
+                container.classList.add("special");
+            } else {
+                container.classList.remove("special");
+            }
+        });
     }
 }

style.css

@@ -213,11 +213,35 @@ body {
     opacity: .75;
 }
 
-.timeslot:not(.disabled) .timeslot-title,
+.timeslot:not(.disabled) {
-.timeslot:not(.disabled) .timeslot-subtitle {
+    .timeslot-title, .timeslot-subtitle {
         background: linear-gradient(to top, #81ac34 0%, #b7ff00 33%, #d7ff83 60%, #d9ff6d);
+        /* --hue: 128.7;
+        background: linear-gradient(in oklch, to top,
+        oklch(0.58, 0.1464, var(--hue)) 0%,
+        oklch(0.70, 0.1764, var(--hue)) 33%,
+        oklch(0.95, 0.1164, var(--hue)) 60%,
+        oklch(0.90, 0.2264, var(--hue))
+        ); */
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 
     text-shadow: 0 0 8px color-mix(in srgb, var(--active), transparent 50%);
 }
+
+&.special {
+    .timeslot-title, .timeslot-subtitle {
+        --hue: 325.03;
+
+        background: linear-gradient(to top, #bc11c7 0%, #d64bdf 33%, #f99cff 60%, #f788fe);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+
+        text-shadow: 0 0 8px color-mix(in srgb, #f788fe, transparent 50%);
+    }
+
+    .timeslot-content::before {
+        background-color: #f788fe;
+    }
+}
+}