<!-- FullCalendar CSS/JS only (no Bootstrap / Sandstone) -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>

<!-- ===================== -->
<!--  SCOPED CALENDAR AREA -->
<!-- ===================== -->
<div id="calendar-wrap">
  <div id="calendar"></div>
</div>

<style>
  /* ------------------------------
     Basic look & feel (scoped)
     ------------------------------ */
  #calendar-wrap { max-width: 1100px; margin: 2rem auto; }
  #calendar-wrap .fc .fc-toolbar-title { letter-spacing: .02em; }
  #calendar-wrap .fc .fc-button {
    background: #325d88;            /* Sandstone-like primary */
    border-color: #325d88;
  }
  #calendar-wrap .fc .fc-button:hover,
  #calendar-wrap .fc .fc-button:focus,
  #calendar-wrap .fc .fc-button.fc-button-active {
    background: #2a4f74;
    border-color: #2a4f74;
    box-shadow: none;
  }
  #calendar-wrap .fc .fc-button:disabled { opacity: .6; }

  /* ---------------------------------------------------------
     MONTH view event bars: clean padding, no bold, readable
     --------------------------------------------------------- */
  /* Bar styling (applies to month cells) */
  #calendar-wrap .fc .fc-daygrid-event {
    font-weight: 500;            /* lighter than bold (700) */
    white-space: normal;         /* allow wrapping */
    padding: 6px 8px;            /* consistent inner spacing */
    border: 0;                   /* remove default borders */
    border-radius: 10px;
    line-height: 1.25;
  }
  /* Let the *title* wrap up to 2 lines (avoid awkward ellipsis) */
  #calendar-wrap .fc .fc-daygrid-event .fc-event-title {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;       /* show up to 2 lines in month cells */
    -webkit-box-orient: vertical;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    // ------- Colors for your events -------
    const BLUE = '#03C5C84';
    const DARK_YELLOW = '#E6BB6B';

    // ------- Init FullCalendar -------
    const calendarEl = document.getElementById('calendar');
    const calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,listMonth'
      },
      navLinks: true,

      /* A) Make bars (not dots), allow growth for readability */
      eventDisplay: 'block',
      dayMaxEventRows: false,

      /* B) Remove the auto time prefix (e.g., "6p") in MONTH view only.
            Keep times visible in week/list views. */
      views: {
        dayGridMonth: {
          displayEventTime: false
        }
      },

      /* Show the full title on hover (native tooltip) */
      eventDidMount(info) {
        const extra = info.event.url ? `\n${info.event.url}` : '';
        info.el.setAttribute('title', info.event.title + extra);
      },

      /* Open links in a new tab/window (no modal) */
      eventClick(info) {
        if (info.event.url) {
          info.jsEvent.preventDefault();
          window.open(info.event.url, '_blank', 'noopener');
        }
      },

      // Your events (explicit colors -> consistent across views)
      events: [
        // Blue
        {
          title: 'IPF Satsang Online',
          start: '2025-09-05T18:00:00',
          url: 'https://ipf-satsang-online.eventbrite.com.au',
          backgroundColor: BLUE, borderColor: BLUE, textColor: '#ffffff'
        },
        {
          title: 'IPF Satsang',
          start: '2025-09-12T18:00:00',
          url: 'https://ipf-satsang.eventbrite.com.au',
          backgroundColor: BLUE, borderColor: BLUE, textColor: '#ffffff'
        },

        // Dark yellow
        {
          title: 'Satsang with Enlightened Guide (Full-time)',
          start: '2025-09-19T18:00:00',
          url: 'https://www.eventbrite.com.au/e/satsang-with-enlightened-guide-full-time-only-tickets-1051292162157?aff=oddtdtcreator',
          backgroundColor: DARK_YELLOW, borderColor: DARK_YELLOW, textColor: '#111111'
        },
        {
          title: 'Satsang In-Person — Margaret River',
          start: '2025-09-26T18:00:00',
          url: 'https://www.eventbrite.com.au/e/satsang-with-enlightened-guide-in-person-margaret-river-tickets-1403450541349?aff=oddtdtcreator',
          backgroundColor: DARK_YELLOW, borderColor: DARK_YELLOW, textColor: '#111111'
        }
      ]
    });

    calendar.render();
  });
</script>