me_google_calendar
Google, Calendar, FullCalendar, jQuery
en, de
2010-01-07
2021-05-24
Alexander Grein
Generate a google calendar record in a sysfolder of our choice (e.g. general storage) and fill in the fields.
To enable the plugin to read the calendar data from google a Google Calendar API key is required. The following description can be slightly differ from the actual procedure.
Hover over the calendar you need and click on the appearing three vertical dots.
Go to "Calendar integrate" section of the same screen, and notice the needed calendar-id (it looks like "niqg76gl1uu5uv6dd4dleo536c@group.calendar.google.com").
Depending of the restrictToPredefinedCssClasses-setting (see Configuration > Extension Manager) you can enter a css class name (without dot) or select from a list of predefined styles (see Configuration > Examples for how to add more items).
The predefined stylesheet definitions are:
If you like to show all events from a calendar e.g. in red, just enter the predefined CSS Class “fc-red” to the "Css" field.
If restrictToPredefinedCssClasses (available over the extension manager settings of me_google_calendar) is set to 1 (true), the "Css" input field changes to a "Style" select field. In this case you can only select from a specific list of styles (Red, Green, Blue, Grey, Orange and Purple). This list is also expandable using page typoscript.
For more info about extending css/styles go to "Configuration > Examples" of this manual.
This plugin was created mostly in my free time, which is becoming more and more precious since I have a family. To keep it up for future TYPO3 and fullcalendar versions I really need your help!
THANK YOU in advance!
boolean
Restrict google calendar record css to predefined styles. See manual for more info
string
Empty
plugin.tx_megooglecalendar.persistence.storagePid
Storage Pids separated by comma: Leave empty to ignore storage page.
number
plugin.tx_megooglecalendar.persistence.recursive
Recursive level: Only useful if storagePid is set.
string
EXT:me_google_calendar/Resources/Public/Css/main.css
plugin.tx_megooglecalendar.settings.cssPath
If you want to customize the CSS File, define the path like: fileadmin/templates/css/styles.css. Leave empty to not include.
string
EXT:me_google_calendar/Resources/Public/Css/fullcalendar.print.css
plugin.tx_megooglecalendar.settings.printCssPath
Path to print css file.
string
EXT:me_google_calendar/Resources/Public/JavaScript/jquery-ui/themes/smoothness/jquery-ui.min.css
plugin.tx_megooglecalendar.settings.cssThemePath
Path to CSS theme file. Leave empty to not include.
boolean
plugin.tx_megooglecalendar.settings.cssThemePathExternal
Path to cssThemePath is external.
options
standard
plugin.tx_megooglecalendar.settings.themeSystem
Renders the calendar with a given theme system (standard, bootstrap3, jquery-ui. For more info see https://fullcalendar.io/docs/display/themeSystem/
boolean
plugin.tx_megooglecalendar.settings.hideHeader
Hide header content.
string
prev,next today
plugin.tx_megooglecalendar.settings.headerLeft
Left header content. Allowed values: prev, next, today, title, month, agendaWeek, agendaDay, basicWeek, basicDay, listDay, listWeek, listMonth, listYear, list. Use comma for separation and [Space] for distance.
string
title
plugin.tx_megooglecalendar.settings.headerCenter
Center header content. Allowed values: prev, next, today, title, month, agendaWeek, agendaDay, basicWeek, basicDay, listDay, listWeek, listMonth, listYear, list. Use comma for separation and [Space] for distance.
string
month,agendaWeek,agendaDay
plugin.tx_megooglecalendar.settings.headerRight
Right header content. Allowed values: prev, next, today, title, month, agendaWeek, agendaDay, basicWeek, basicDay, listDay, listWeek, listMonth, listYear, list. Use comma for separation and [Space] for distance.
string
AgendaWeek
plugin.tx_megooglecalendar.settings.defaultView
Default view of the calendarAllowed values: month, agendaWeek, agendaDay, basicWeek, basicDay, listDay, listWeek, listMonth, listYear, list
boolean
plugin.tx_megooglecalendar.settings.allDaySlot
Show all day events slot in agenda views.
number
plugin.tx_megooglecalendar.settings.firstDay
First day of week. Can be 0 for sunday or 1 for monday.
boolean
plugin.tx_megooglecalendar.settings.weekends
Show weekends as well.
boolean
plugin.tx_megooglecalendar.settings.weekNumbers
Show week numbers.
boolean
plugin.tx_megooglecalendar.settings.weekNumbersWithinDays
Show week numbers within days.
string
ISO
plugin.tx_megooglecalendar.settings.weekNumberCalculation
Week number calculation.
string
00:00:00
plugin.tx_megooglecalendar.settings.minTime
Mix time for agenda views in format hh:mm:ss
string
24:00:00
plugin.tx_megooglecalendar.settings.maxTime
Max time for agenda views in format hh:mm:ss
string
08:00:00
plugin.tx_megooglecalendar.settings.scrollTime
Scroll to time in format hh:mm:ss
string
variable
plugin.tx_megooglecalendar.settings.weekMode
Defines the way week are shown in month. Can be 'fixed' or 'variable'.
boolean
plugin.tx_megooglecalendar.settings.hideTitle
Hide title content.
boolean
plugin.tx_megooglecalendar.settings.eventLimit
Show more events link, if they do not fit into time slot.
string
MMMM YYYY
plugin.tx_megooglecalendar.settings.titleFormat.month
Date format* for month title.
string
MMM D YYYY
plugin.tx_megooglecalendar.settings.titleFormat.week
Date format* for week title.
string
MMMM D YYYY
plugin.tx_megooglecalendar.settings.titleFormat.day
Date format* for day title.
string
dddd
plugin.tx_megooglecalendar.settings.columnFormat.month
Defines the column format* for the month view.
string
ddd DD.MM.
plugin.tx_megooglecalendar.settings.columnFormat.week
Defines the column format* for the week view.
string
dddd DD.MM.
plugin.tx_megooglecalendar.settings.columnFormat.day
Defines the column format* for the day view.
string
DD. MMMM YYYY
plugin.tx_megooglecalendar.settings.listDayFormat
Defines the left date format* for the list view.
string
ddddd
plugin.tx_megooglecalendar.settings.listDayAltFormat
Defines the right date format* for the list view.
string
HH:mm
plugin.tx_megooglecalendar.settings.timeFormat.agenda
Time format* for agenda view.
string
HH:mm
plugin.tx_megooglecalendar.settings.timeFormat.list
Time format* for list view.
string
HH:mm
plugin.tx_megooglecalendar.settings.timeFormat.day
Time format* for day view.
string
HH:mm
plugin.tx_megooglecalendar.settings.timeFormat.week
Time format* for week view.
string
HH:mm
plugin.tx_megooglecalendar.settings.timeFormat.month
Time format* for month view.
string
HH:mm
plugin.tx_megooglecalendar.settings.timeFormat.general
General time format*.
string
plugin.tx_megooglecalendar.settings.timeZone
e.g. Europe/Berlin. If empty (default) the timezone defined inside google UI will be used.
boolean
plugin.tx_megooglecalendar.settings.noGoogleMapsLink
Do not generate link to google maps.
boolean
plugin.tx_megooglecalendar.settings.hideIcalDownloadButton
Hide ical download button in event details.
boolean
plugin.tx_megooglecalendar.settings.hideAddtoGoogleCalendarButton
Hide add to google calendar button.
integer
plugin.tx_megooglecalendar.settings.height
Height of calendar.
string
1.35
plugin.tx_megooglecalendar.settings.aspectRatio
Aspect ratio.
string
cssThemePath, headerLeft, headerCenter, headerRight, footerLeft, footerCenter, footerRight, defaultView, allDaySlot, firstDay, firstHour, weekends, minTime, maxTime, hideTitle, hideIcalDownloadButton, hideAddtoGoogleCalendarButton, noGoogleMapsLink, height
plugin.tx_megooglecalendar.settings.overrideFlexformSettingsIfEmpty
Override flexform setting if empty.
string
/index.php?eID=meGoogleCalendarEidGetIcs
plugin.tx_megooglecalendar.settings.eIdGetIcsUrl
eID Script URL for ics file generation.
string
de
plugin.tx_megooglecalendar.settings.language
Language key.
* For more infos about the time/date format, please read the documentation on the website of the FullCalendar plugin author:
plugin.tx_megooglecalendar {
settings {
# change included jquery to a cdn version
jQueryPath = //ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js
jQueryExternal = 1
# switch from jquery-ui theme/dialog to bootstrap 3:
themeSystem = bootstrap3
jQueryUiPath =
cssThemePath =
# change min and max time
minTime = 08:00:00
maxTime = 18:00:00
# set first day to monday
firstDay = 1
}
}If you want to show all events from a calendar in red, just add the predefined CSS Class “fc-red” to the google calendar feed record field "Css".
There are six already predefined style definitions in the included main.css file:
fc-red, fc-green, fc-blue, fc-grey, fc-orange, fc-purple
You also can define your own colors by adding this css (example for “my-color-1”):
.fc-event.my-color-1,
.fc-agenda .fc-event.my-color-1 .fc-event-time,
.fc-event.my-color-1 .fc-event-inner.fc-event-skin,
.fc-list-item.my-color-1 .fc-event-dot,
.fc-event.my-color-1 a {
background-color:#ff0000;
border-color:#ff0000;
color:#fff;
}If you want to restrict backend user to only selectable styles, you can set the flag "restrictToPredefinedCssClasses", which is available in the extension manager settings of me_google_calendar. If activated, the css input field inside the google calendar record changes to a select field containing only the predefined css styles.
If you want to extend the list or remove some items please use page typoscript.
The following example code removes all predefined styles and adds the above css example:
TCEFORM {
tx_megooglecalendar_domain_model_calendar {
css {
removeItems = fc-red,fc-green,fc-blue,fc-grey,fc-orange,fc-purple
addItems {
my-color-1 = My Color 1
}
}
}
}v.4.4.0: Update fullcalendar plugin to version 3.9.0 + jQuery to 3.3.1; Add bootstrap4 theme coming with fullcalendar (untested); Remove several not needed fields from plugin settings (code,layout,select_key,pages,recursive);
Change storage page handling:
If you update from an older version of this extension, be sure to cleanup your flexform settings. Have a look at the famose extension "typo3_console" from helmut hummel to fix this problems by using the cli command "vendor/bin/typo3cms cleanup:flexforms"