Pretty Google Calendar

Instalação

1. Suba a pasta do pretty-google-calendar para o diretório /wp-content/plugins/.
2. Ative o Pretty Google Calendar através do menu ‘Plugins’ no painel do WordPress.
3. Obtenha a sua chave de API do Google Agenda (veja abaixo)
4. Adicionar a chave da API às Configurações -> Configurações do Pretty Google Calendar
5. Use o shortcode [pretty_google_calendar gcal="calendarID@group.calendar.google.com"] diretamente na sua página ou post.

Opções do Shortcode

gcal="CalendarID,CalendarID"

O ID do calendário do Google Agenda desejado (nota: precisa ser configurado para ‘Disponibilizar publicamente’. Para exibir multiplos calendários, separe os IDs com uma vírgula. (Nota: os calendários devem estar sob o mesmo acesso da chave de API.))

cal_ids="identifier,identifier" \

Optional custom CSS identifiers for each calendar (must match the number of calendars in gcal). Allows using meaningful names instead of numeric indexes for styling. Example: cal_ids="soccer,baseball" generates classes like .pgcal-calendar-soccer and .pgcal-calendar-baseball. Identifiers should be lowercase alphanumeric with hyphens.
Defaults to numeric indexes (0, 1, 2, etc.)

locale="en"

Configura o local para regionalização do calendário. O padrão é “en”.

list_type="listCustom"

Configura o tipo de lista. Opções: listDay, listWeek, listMonth, listYear, e listCustom. (Também aceita day, week, month, year e custom).
O padrão é listCustom para compatibilidade retroativa.

Nota: listCustom permite que você configure o número de dias que você deseja exibir a partir da data atual. Enquanto listMonth mostra todos os eventos deste mês (incluindo eventos passados), list_type="custom" custom_days="28" irá mostrar os próximos 28 dias através dos meses.

custom_days="28"

Configura o número de dias a serem exibidos na aba de lista. O padrão é 28. Somente utilizado com listCustom.

custom_list_button="list"

Configura o rótulo do botão listCustom. O padrão é “list”.

views="dayGridMonth, listCustom"

Configura os tipos de calendários disponíveis. Se apenas um for provido, não serão exibidos botões para alterar os tipos de calendários. O padrão é “dayGridMonth, listCustom”.

initial_view="dayGridMonth"

Sets the default view to be displayed when opening the page. Defaults to “dayGridMonth”. Note: If only one view is specified in “views”, “initial_view” will automatically be set to that view and does not need to be specified.

enforce_listview_on_mobile="true"

Configura o comportamento de mudança para o tipo lista em telas pequenas. Opções: “true” e “false”. O padrão é “true”. Esta opção não tem efeito se não houver uma lista declarada na opção “views”.

show_today_button="true"

Configura a visibilidade do botão “Hoje”. Opções: “true” e “false”. O padrão é “true”.

show_title="true"

Configura a visibilidade do título do calendário. Opções: “true” e “false”. O padrão é “true”.

hide_past="false"

Hides past events from the calendar completely. Options: true and false. Defaults to false. When set to true, events before today will not be displayed in any view.

id_hash=random

Sets the ID hash for a calendar. If you have multiple calendars on a page and need to style them, you can set this to a permanent code. Otherwise, it’ll randomly generate each load. (Note: as of v2.0.0 this can only be alphanumeric.)

use_tooltip="true"

Migrating from global setting for individual calendar styling. Whether the floating tooltip for event pops up on click.

no_link="true"

Migrating from global setting for individual calendar styling. Whether to disable link to calendar.google.com on click.

fc_args = JSON string ((EXPERIMENTAL))

Allows you to override or impliment just about any FullCalendar argument (with some exception). For example: fc_args='{"weekNumbers":"true", "eventTextColor":"red"}'

Note: any argument that contains [] will fail due to WordPress’ parsing of shortcodes. No workaround currently.
Note: this is experimental – things may break.

Styling Multiple Calendars

As of v1.7.0, each calendar gets it’s own CSS selector: pgcal-event-# where the # is the order of the listed calendar (starting with 0). So if you have two calendars in one, you can use pgcal-event-0 to style the first, and pgcal-event-1 to style the second calendar.

The following improvements were made in v2.2.0 for easier styling of multiple calendars:
– Custome calendar identifiers via cal_ids shortcode argument (see above) (defaults to numeric indexes if not provided).
– Events get new class name: pgcal-calendar-0-event for consistent naming convention (old class pgcal-event-0 is still supported for backward compatibility).
– Event pop-up tooltips now get a calendar-specific class: pgcal-calendar-0-event-popup for easier styling of event pop-ups per calendar.

Obtendo a Chave de API do Google Agenda

1. Go to the Google Cloud Console and sign in.
2. Click the project selector (top bar) → New project.
3. Give the project a name and click Create.
4. With the project selected, go to APIs & Services → Library.
5. Search for Google Calendar API and click Enable.
6. Go to APIs & Services → Credentials.
7. Click Create credentials → API key.
8. Copy the API key.
9. (Recommended) Restrict the key:
   1. Click the API key you just created.
   2. Under Application restrictions, choose Websites (HTTP referrers).
   3. Add your site’s URL (e.g. https://example.com/*).
   4. Under API restrictions, choose Restrict key.
   5. Select Google Calendar API.
   6. Click Save.
10. Paste the API key into Pretty Google Calendar’s Google API field in WordPress and save.

Deixe o seu calendário do Google Agenda público:

1. Na interface do Google Agenda, ache a área de “Minhas agendas” à esquerda.
2. Passe o mouse sobre o calendário que você precisa e clique na seta para baixo.
3. Um menu irá aparecer. Clique em “Compartilhar esta agenda”.
4. Marque “Tornar este calendário público”.
5. Certifique-se que “Ver apenas os níveis disponível/ocupado (ocultar detalhes)” está desmarcado.
6. Clique em “Salvar”.

Obtenha o ID do seu calendário do Google Agenda:

1. Na interface do Google Agenda, ache a área de “Minhas agendas” à esquerda.
2. Passe o mouse sobre o calendário que você precisa e clique na seta para baixo.
3. Um menu irá aparecer. Clique em “Configurações da agenda”.
4. In the “Integrage Calendar” section of the screen, you will see your “Calendar ID”. It will look something like “abcd1234@group.calendar.google.com” (or your email if it’s your default calendar) this is the value you enter into the shortcode.