Examples

TS Constants Example

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

   }
}

CSS / Style Examples

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
            }
        }
    }
}