Full Calendar

The calendar function is useful if you want to visualize events in your tables on a calendar and be able to perform custom actions on those events like view or add new records by date clicks.

You can display calendars anywhere from dashboards to custom pages.

Structure

showFullCalendar(
  $title = "My Calendar",
  $calendar_query = '',
  $card_size = "col-md-12",
  $card_collapsed = "No",
  $event_action_code = '',
  $date_action_code = '',
  $initialView = 'dayGridMonth'
)

Parameters

The showFullCalendar accepts 7 parameters and we shall elaborate what each one does below:

• Title- This is the title of the calendar

• Calendar Query- Use the $calendar_query parameter to specify a query for fetching calendar events. The query should include the following fields: id, name, color, start_date, and end_date. Ensure that your query retrieves these essential fields for proper calendar functionality.

• Card Size- This is a bootstrap size class for determining the size of the calendar, default is: ol-md-12

• Card Collapsed- Weather the card should be collapsed by default, the default state is No

• Event Action Code- This is JavaScript code to be executed on event click

• Date Action Code- This is the JavaScript code to be executed on date click

• Initial View- The intiial calendar view, default value is: dayGridMonth, alternative values include:

  dayGridMonth,timeGridWeek,timeGridDay

Example Usage

php
echo showFullCalendar('All Orders By Order Date',
"SELECT id as id, Company_Name as name, DATE_ADD(Event_Date, INTERVAL 1 DAY) as start_date, 'orange' as color, FROM table WHERE Company_Name IS NOT NULL",
"col-md-6",
"No",
'//On event click: redirect to view clicked event record ID
//Construct the URL with the eventID variable
const url = `admirodev/app/admiro_view?p=table_view.php?SelectedID=${eventID}`;
// Create a new anchor element with the constructed URL
const anchor = document.createElement("a");
anchor.href = url;
//Simulate a mouse click on the anchor element
const mevent = new MouseEvent("click");
anchor.dispatchEvent(mevent);',
" 
//On date click: Add new record with date fields default: clickedDate
const url = 'admirodev/app/admiro_view?p=table_view.php%3FaddNew_x%3D1%26date=' + clickedDate;
const anchor = document.createElement(\"a\");
anchor.href = url;
const mevent = new MouseEvent(\"click\");
anchor.dispatchEvent(mevent);");

Output sample