Calendário / Agenda com PHP & JS - #05 Eventos JSON

No video de hoje falaremos sobre eventos dinâmicos dentro do nosso calendário / agenda com PHP e JS. Vamos ver como usar o json nos eventos.

Eventos com JSON no Calendário

Uma das maneiras de representar eventos no Calendário é através de um arquivo externo no formato json:

events.json

Este arquivo deve ser criado e salvo dentro de lib/js/

[
  {
    "id": 1,
    "title": "All Day Event",
    "start": "2020-10-01",
    "end": "2020-10-02",
    "color": "blue"
  },
  {
    "id": 2,
    "title": "Long Event",
    "start": "2020-09-07",
    "end": "2020-10-10",
    "color": "red",
    "textColor": "yellow"
  },
  {
    "id": "999",
    "title": "Repeating Event",
    "start": "2020-09-09T16:00:00-05:00"
  },
  {
    "id": "999",
    "title": "Repeating Event",
    "start": "2020-09-16T16:00:00-05:00"
  },
  {
    "title": "Conference",
    "start": "2020-09-11",
    "end": "2020-09-13"
  },
  {
    "title": "Meeting",
    "start": "2020-09-12T10:30:00-05:00",
    "end": "2020-09-12T12:30:00-05:00"
  },
  {
    "title": "Lunch",
    "start": "2020-09-12T12:00:00-05:00"
  },
  {
    "title": "Meeting",
    "start": "2020-09-12T14:30:00-05:00"
  },
  {
    "title": "Happy Hour",
    "start": "2020-09-12T17:30:00-05:00"
  },
  {
    "title": "Dinner",
    "start": "2020-09-12T20:00:00"
  },
  {
    "title": "Birthday Party",
    "start": "2020-09-13T07:00:00-05:00"
  },
  {
    "title": "Click for Google",
    "url": "http://google.com/",
    "start": "2020-09-28"
  }
]

lib/javascript.js

Depois nos javascript basta referenciarmos esse arquivo e o eventClick no nosso objeto:

events: '/lib/js/events.json',
eventClick: function(info) {
    win.location.href=`https://www.sitequalquer.com.br/evento/${info.event.id}`
}

Sucesso nos códigos e na vida!

Precisa de aulas particulares? webdesignemfoco@gmail.com