taiya.github.io/calendar.html at main · taiya/taiya.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE HTML>
<html lang="en">

<head>
  <title>Andrea Tagliasacchi</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Availability calendar for Andrea Tagliasacchi, Associate Professor at Simon Fraser University." />
  <meta property="og:title"       content="Andrea Tagliasacchi – Calendar" />
  <meta property="og:description" content="Availability calendar for Andrea Tagliasacchi, Associate Professor at SFU." />
  <meta property="og:url"         content="https://taiya.github.io/calendar.html" />
  <link rel="stylesheet" type="text/css" media="screen" href="/style.css">
  <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />

  <!-- FullCalendar v6 via CDN, plus Luxon for named-timezone support -->
  <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/luxon@3.5.0/build/global/luxon.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/luxon3@6.1.15/index.global.min.js"></script>

  <!-- ES module entry point -->
  <script type="module" src="/javascript/calendar.js"></script>

  <style>
    /* Calendar-specific tweaks (kept here to avoid touching the global stylesheet). */
    #calendar { margin-top: 12px; }
    .fc .fc-toolbar-title { font-family: 'Quicksand', sans-serif; font-weight: normal; }
    .fc .fc-button-primary {
      background: #ffffff;
      border-color: #cccccc;
      color: #000000;
    }
    .fc .fc-button-primary:not(:disabled):hover {
      background: #f5f5f5;
      border-color: #888888;
      color: #000000;
    }
    .fc .fc-button-primary:not(:disabled).fc-button-active,
    .fc .fc-button-primary:not(:disabled):active {
      background: #eeeeee;
      border-color: #000000;
      color: #000000;
    }
    .fc .fc-button-primary:disabled {
      background: #fafafa;
      border-color: #dddddd;
      color: #999999;
    }
    .fc .fc-button-primary:focus {
      box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
    }
    .fc .fc-event { border: none; }
    .fc .fc-non-business { background: rgba(0, 0, 0, 0.04); }
    /* Timezone widget lives in the FC toolbar's center chunk after init. */
    #tz_widget { display: flex; align-items: center; gap: 6px; font-size: 0.95em; color: #333; }
    #tz_widget .tz-fixed { font-weight: 600; color: #000; }
    #tz_widget .tz-arrow { color: #999; }
    #tz_widget select {
      padding: 2px 6px;
      font-family: inherit;
      font-size: 0.95em;
      border: 1px solid #ccc;
      border-radius: 3px;
      background: #fff;
      cursor: pointer;
    }
    /* Time-axis labels: two side-by-side columns per slot (secondary | primary).
     * Layout mirrors Google Calendar's "world clock" axis. */
    .tz-slot { display: flex; flex-direction: row; gap: 8px; align-items: baseline; color: #555; font-size: 0.85em; }
    .tz-slot .tz-secondary,
    .tz-slot .tz-primary { min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
    /* Per-column labels ("Lon", "Van") injected into the top-left axis corner. */
    .tz-axis-header { display: flex; flex-direction: row; gap: 8px; padding: 6px 4px 4px; font-size: 0.75em; font-weight: 600; color: #777; letter-spacing: 0.5px; }
    .tz-axis-header span { min-width: 36px; text-align: right; }
    /* Two-line "all day / events" label in the all-day row's axis cell. */
    .fc-allday-label { display: inline-block; line-height: 1.1; text-align: center; font-size: 0.85em; }
  </style>
</head>

<body>
  <a href="#content" class="sr-only">Skip to content</a>

  <nav aria-label="Primary">
    <div id="menu">
      <button class="menu_toggle" aria-label="Toggle navigation" aria-expanded="false" aria-controls="menu_list">
        <span></span><span></span><span></span>
      </button>
      <menu_title>Andrea Tagliasacchi</menu_title>
      <ol id="menu_list">
        <li><a href="/index.html#team"> Team </a></li>
        <li><a href="/index.html#pubs_list"> Publications </a></li>
        <li><a href="/index.html#hiring"> Join Us! </a></li>
        <li><a href="/calendar.html"> Calendar </a></li>
      </ol>
    </div>
  </nav>

  <main id="content">
    <div id="container">
      <div id="calendar_section" class="one">
        <div id="tz_widget" hidden>
          <label for="tz_select">Compare with</label>
          <select id="tz_select" aria-label="Compare with timezone"></select>
        </div>
        <div id="calendar"></div>
      </div>
      <div id="footer"></div>
    </div>
  </main>
</body>

</html>