Event Calendar

Link to article: Event Calendar.

Module Styles

• :root {
    --main-content-width: 100vw;
    --main-content-side-margin: 0;
    --basalt-background-color: 255, 255, 255
  }
  
  .calendar {
    position: absolute;
    top: 120px;
    left: 0;
    width: 100vw !important;
    height: max(100dvh, 900px) !important;
  }
  
  @media (min-width: 1024px) {
    .calendar {
      top: 70px;
    }
  }
  
  @media (max-width: 600px) {
    .calendar {
      height: calc(100dvh - 95px) !important;
      overflow: scroll;
      top: 90px;
    }
  }
  
  .fill {
    height: 100vh;
  }
  
  #page-title {
    display: none !important;
  }
  
  #header
  {
    box-shadow: 0px 5px 5px #0002;
    background: #eee;
  }
  
  .calendar-loading {
    font-size: 250%;
    font-style: italic;
    position: absolute;
    top: 50vh;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
  }
  

Inline Styles

• (none)

Includes

• :scp-wiki:theme:basalt [info]
• fragment:event-calendar-events

CSS Classes

• fill

• calendar-loading

• calendar

Page Source

[!--devops:http://localhost:9876/static/manifest.json--]

[!--
Fragments:
https://scp-wiki.wikidot.com/fragment:event-calendar-single-event
https://scp-wiki.wikidot.com/fragment:event-calendar-events
--]

[[include :scp-wiki:theme:basalt]]

[[module css]]
:root {
  --main-content-width: 100vw;
  --main-content-side-margin: 0;
  --basalt-background-color: 255, 255, 255
}

.calendar {
  position: absolute;
  top: 120px;
  left: 0;
  width: 100vw !important;
  height: max(100dvh, 900px) !important;
}

@media (min-width: 1024px) {
  .calendar {
    top: 70px;
  }
}

@media (max-width: 600px) {
  .calendar {
    height: calc(100dvh - 95px) !important;
    overflow: scroll;
    top: 90px;
  }
}

.fill {
  height: 100vh;
}

#page-title {
  display: none !important;
}

#header
{
  box-shadow: 0px 5px 5px #0002;
  background: #eee;
}

.calendar-loading {
  font-size: 250%;
  font-style: italic;
  position: absolute;
  top: 50vh;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
}

[[/module]]

[[div_ class="fill"]]
@@ @@
[[/div]]

[[div_ class="calendar-loading"]]
Loading...
[[/div]]

[[html class="calendar"]]
<link rel="stylesheet" type="text/css" href="https://scp-wiki.wdfiles.com/local--files/event-calendar/main.css"/ >
<script>
let eventId = 999;
window.CALENDAR_EVENT_LIST = [];

function optional(str, fallback) {
  if (str.startsWith("{\$") && str.endsWith("}")) {
    return fallback ?? undefined;
  }
  return str;
}

[[include fragment:event-calendar-events]]

</script>
<script src="https://scp-wiki.wdfiles.com/local--files/event-calendar/main.js"></script>
[[/html]]