espresso_frame/server/app/templates/_widget_dialog_calendar.html

<h2 class="dialog-title">Calendar widget</h2>

<section class="card">
  <h2 class="card-title">Calendar</h2>
  <form id="calendar-config-form">
    <label>View
      <select id="calendar_view">
        {% for value, label in calendar_views.items() %}
          <option value="{{ value }}" {% if calendar_cfg.view == value %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </label>
    <div id="calendar-week-start-row">
      <label>Week starts on
        <select id="calendar_week_start">
          {% for value, label in week_start_labels.items() %}
            <option value="{{ value }}" {% if calendar_cfg.week_start == value %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </label>
      <p class="sub" style="margin-top: 4px;">Only affects the Week and Month views, and (for Week) only at 7 days.</p>
    </div>
    <div id="calendar-week-days-row">
      <label>Days to show (Week view)
        <input type="number" id="calendar_week_days" min="2" max="10" value="{{ calendar_cfg.week_days }}">
      </label>
    </div>
    <div id="calendar-week-layout-row">
      <label>Week view layout
        <select id="calendar_week_layout">
          <option value="horizontal" {% if calendar_cfg.week_layout == "horizontal" %}selected{% endif %}>Days side by side</option>
          <option value="vertical" {% if calendar_cfg.week_layout == "vertical" %}selected{% endif %}>Days stacked</option>
        </select>
      </label>
    </div>
    <div id="calendar-week-offset-row">
      <label>Week view starts (days from today)
        <input type="number" id="calendar_week_start_offset" min="-30" max="30" value="{{ calendar_cfg.week_start_offset }}">
      </label>
      <p class="sub" style="margin-top: 4px;">0 = starts today, negative = starts in the
        past, positive = starts in the future. Only used when Days to show isn't 7.</p>
    </div>
    <button type="submit">Save</button>
  </form>

  <h2 class="card-title" style="margin-top: 20px;">Included calendars</h2>
  <p class="sub">Each linked person adds their own calendars (ICS
    subscription or CalDAV, set up in <a href="/settings">Settings</a>)
    -- being linked here doesn't include anything automatically.
    Anyone linked to this frame can mute a calendar they'd rather
    not see here, even one they don't own; only its owner can add
    it back.</p>
  <ul class="calendar-user-list">
    {% for u in calendar_users %}
      <li>
        <p class="calendar-user-name">{{ u.display_name }}{% if u.is_self %} (you){% endif %}</p>
        {% if u.calendars %}
          {% set current_palette = frame.palette_rgb or default_palette_rgb %}
          {% set current_hex = palette_to_hex(current_palette) %}
          {% for c in u.calendars %}
            <div class="checkbox-row calendar-row" style="margin-top: 6px;">
              <input type="checkbox" class="calendar-toggle"
                     data-user-id="{{ u.user_id }}" data-key="{{ c.key }}" data-label="{{ c.label }}"
                     {% if c.included %}checked{% endif %}>
              <label style="margin: 0; font-weight: normal;">{{ c.label }}</label>
              {% if u.is_self %}
                <span class="calendar-color-picker" data-key="{{ c.key }}">
                  {% for idx in range(2, 6) %}
                    <button type="button" class="color-swatch {% if c.color_index == idx %}selected{% endif %}"
                            data-index="{{ idx }}" title="{{ calendar_color_labels[idx] }}"
                            style="background-color: {{ current_hex[idx] }};"></button>
                  {% endfor %}
                  <button type="button" class="color-swatch color-swatch-auto {% if c.color_index is none %}selected{% endif %}"
                          data-index="" title="Auto (assigned automatically)">Auto</button>
                </span>
              {% endif %}
            </div>
          {% endfor %}
        {% elif u.is_self %}
          <p class="sub" style="margin-top: 6px;">No calendars set up yet -- add an ICS link or CalDAV account in <a href="/settings">Settings</a>.</p>
        {% else %}
          <p class="sub" style="margin-top: 6px;">No calendars included.</p>
        {% endif %}
      </li>
    {% endfor %}
  </ul>

  {% if calendar_cfg.fetch_summary %}
    <p class="sub" style="margin-top: 8px; color: var(--danger-text);">Last fetch: {{ calendar_cfg.fetch_summary }}</p>
  {% endif %}
</section>

<section class="card" style="margin-top: 20px;">
  <h2 class="card-title">Weather</h2>
  <p class="sub">Shown above the event list on Agenda, Agenda (today
    &amp; tomorrow), and Week views -- there's no room for it on Month.</p>
  <form id="weather-config-form">
    <div class="checkbox-row">
      <input type="checkbox" id="weather_enabled" {% if calendar_cfg.weather_enabled %}checked{% endif %}>
      <label for="weather_enabled">Show weather</label>
    </div>
    <label>Units
      <select id="weather_units">
        <option value="fahrenheit" {% if calendar_cfg.weather_units == "fahrenheit" %}selected{% endif %}>Fahrenheit</option>
        <option value="celsius" {% if calendar_cfg.weather_units == "celsius" %}selected{% endif %}>Celsius</option>
      </select>
    </label>
    <button type="submit">Save</button>
  </form>

  <h3 style="margin-top: 20px; font-size: 14px;">Cities</h3>
  <p class="sub">Every city shows on every day -- add more than one if
    people split their time between places.</p>
  <ul class="calendar-user-list" id="weather-city-list">
    {% for c in calendar_cfg.weather_cities or [] %}
      <li class="checkbox-row" style="justify-content: space-between; margin-top: 6px;">
        <span>{{ c.label }}</span>
        <button type="button" class="btn-inline secondary weather-city-remove" data-label="{{ c.label }}">Remove</button>
      </li>
    {% else %}
      <li class="sub" id="weather-city-empty">No cities added yet.</li>
    {% endfor %}
  </ul>
  <div class="checkbox-row" style="margin-top: 10px;">
    <input type="text" id="weather-city-input" placeholder="e.g. Portland, OR" style="margin-top: 0; flex: 1;">
    <button type="button" class="btn-inline" id="weather-city-add">Add</button>
  </div>
</section>

<section class="card" style="margin-top: 20px;">
  <h2 class="card-title">Tasks</h2>
  <p class="sub">Week view only -- takes the place of one day slot
    instead of adding an extra one.</p>
  <div class="checkbox-row" id="tasks-enabled-row">
    <input type="checkbox" id="tasks_enabled" {% if calendar_cfg.tasks_enabled %}checked{% endif %}>
    <label for="tasks_enabled">Show a task list</label>
  </div>

  <div id="tasks-current-source">
    {% if tasks_source %}
      <p class="sub" style="margin-top: 10px;">
        Currently using <strong>{{ tasks_source.display_name }}</strong>'s
        <strong>{{ tasks_source.label }}</strong> list.
        <button type="button" class="btn-inline secondary" id="tasks-source-clear">Clear</button>
      </p>
    {% endif %}
  </div>

  {% if viewer_task_calendars %}
    <p class="sub" style="margin-top: 10px;">Use one of your own CalDAV task lists:</p>
    <ul class="calendar-user-list">
      {% for c in viewer_task_calendars %}
        <li class="checkbox-row" style="margin-top: 6px;">
          <input type="radio" name="tasks-source-choice" class="tasks-source-choice" data-key="{{ c.key }}"
                 {% if tasks_source and tasks_source.user_id == user.id and calendar_cfg.tasks_calendar_key == c.key %}checked{% endif %}>
          <label style="margin: 0; font-weight: normal;">{{ c.label }}</label>
        </li>
      {% endfor %}
    </ul>
  {% else %}
    <p class="sub" style="margin-top: 10px;">You don't have any CalDAV
      task lists available -- set up a CalDAV account in
      <a href="/settings">Settings</a> first (a plain ICS subscription
      doesn't carry tasks).</p>
  {% endif %}
</section>

<section class="card" style="margin-top: 20px;">
  <h2 class="card-title">Preview</h2>
  <p class="sub">How this widget currently renders.</p>
  <img class="preview-img" id="calendar-preview" alt="Calendar preview">
  <button type="button" class="secondary" id="calendar-preview-refresh">Refresh preview</button>
</section>