Skip to main content

Frontend

The Calendar module has two frontend components: the "Add to Google Calendar" links scattered across module views and a dedicated page with an embedded iframe.

File Structure​

resources/views/calendar/
└── index.blade.php

Google Calendar links do not have their own views: they are integrated into the views of modules that implement CalendarEventable.

Calendar Page (/calendar)​

Embedded iframe of the configured Google account's Google Calendar, within the application layout:

<iframe src="https://calendar.google.com/calendar/embed?src=...&ctz=Europe/Rome"
        style="width: 100%; height: calc(100vh - 130px); border: none;">
</iframe>

The iframe URL is obtained from the embed settings of your own Google Calendar account. The user must be logged into the browser with the same Google account to view the calendar. The calendar does not need to be public.

Note: this page is not connected to the link builder system - it serves as an overview of events already created by the user in their Google Calendar.

Each model that implements CalendarEventable exposes buttons/links in its own views to add events to Google Calendar. The pattern is the same everywhere: an <a> link with target="_blank" pointing to the URL generated by googleCalendarUrl(), shown only if the model has a valid date.

ModuleViewCondition
Projectsprojects/show/_project-stats.blade.php$project->googleCalendarUrl() (project deadline)
Taskstasks/partials/_table-row-actions.blade.php$task->googleCalendarUrl() (task deadline)
Paymentspayments/partials/payment-table/_row-actions.blade.php$payment->googleCalendarUrl() (payment date)
Meetingsmeetings/partials/_meeting-table.blade.php$meeting->googleCalendarUrl() (meeting date)

UI Pattern​

All links follow the same pattern:

@if($model->googleCalendarUrl())
    <a href="{{ $model->googleCalendarUrl() }}"
       target="_blank"
       ...>
        {{-- Calendar SVG icon --}}
    </a>
@endif
  • Calendar SVG icon
  • target="_blank" to open in a new tab
  • Conditional: shown only if the model has a valid date (hasCalendarDate())
  • Style consistent with other table row actions

Usage Context​

  • Projects: link in the show sidebar, next to the deadline date
  • Tasks: icon in the actions column of the task table (both in index and project show)
  • Payments: icon in the actions column of the payments table
  • Meetings: icon in the actions column of the meetings table

Technical Notes​

  • No dedicated JS component: links are simple server-side generated <a href> elements.
  • The URL is generated by the model via GoogleCalendarLinkBuilder, no frontend logic involved.
  • The /calendar page iframe requires the user to be logged into the browser with the corresponding Google account. The URL is obtained from the embed settings of your own Google Calendar.