Calendário / Agenda com PHP & JS - #04 Customizações, Eventos e Tradução

Na aula de hoje aprenderemos sobre customizações, tradução e eventos dentro da lib do Javascript Full Calendar, entendendo como configurar as ações do usuário.

Eventos com Full Calendar

Vamos ver como usar eventos e configurações internas da lib Full Calendar.

lib/js/javascript.js

Dentro do arquivo javascript vamos inserir os objetos de eventos e configurações:

let calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    headerToolbar:{
        start: 'prev,next,today',
        center: 'title',
        end: 'dayGridMonth, timeGridWeek, timeGridDay'
    },
    buttonText:{
        today:    'hoje',
        month:    'mês',
        week:     'semana',
        day:      'dia'
    },
    locale:'pt-br',
    dateClick: function(info) {
        alert('Clicked on: ' + info.dateStr);
        alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
        alert('Current view: ' + info.view.type);
        // change the day's background color just for fun
        info.dayEl.style.backgroundColor = 'red';
    },
    events: [
        {
            title: 'The Title',
            start: '2020-10-01',
            end: '2020-10-02'
        },
        {
            title: 'The Title 2',
            start: '2020-10-05',
            end: '2020-10-07'
        }
    ]
});

No código acima conseguimos traduzir nosso calendário, criar eventos de cliques em datas e criar eventos com início e fim dentro da agenda.

Sucesso nos códigos e na vida!

Precisa de aulas particulares? webdesignemfoco@gmail.com