Rails 6.1 ve Webpacker ile Fullcalendar Kurulumu

Bu yazimizda cok kullanilan takvim paketini Rails 6.1 uygulamamiza webpacker araciligiyla nasil entegre edecegimizi gorecegiz:

https://fullcalendar.io

Fullcalendar’in en yeni surumu sayesinde artik Jquery ihtiyaci olmadan tamamen vanilla js ile yazilmis paketi kullanmak mumkun bunun icinde yarn araciligiyla gerekli paketleri yuklemeye basliyabiliriz:

yarn add @fullcalendar/core @fullcalendar/daygrid @fullcalendar/list @fullcalendar/timegrid

Takvim uygulamalari kullanabilmek icin tarih manipulasyonlari gerceklestirebilecegimiz paketide yukleyebiliriz moment.js

yarn add moment

paketlerimizi yukledigimize gore artik Rails uygulamamiza bunlari ekliyebiliriz, oncelikle app/javascript/packs/application.js dosyasini acalim ve icine asagidaki kodlari ekliyelim:

import moment from 'moment';
window.moment = moment;

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';

window.Calendar = Calendar;
window.dayGridPlugin = dayGridPlugin;
window.timeGridPlugin = timeGridPlugin;
window.listPlugin = listPlugin;

window.paket kodlari sayesinde paketlerimizi HTML dosyamizin icindede js kodu calistirarak kullanabiliyoruz.

Webpacker ile stylesheet dosyalarimizi kullanabilmek icin stil dosyalarimizi artik paket halinde tanitmamiz gerekiyordu eger yapmadiysak, app/javascript klasoru icine stylesheets adinda bir klasor olusturalim ve bu klasorun icine application.scss adinda bir dosya olusturalim

Rails tarafindan bu degisikligin taninmasi icin app/views/layouts/application.html.erb dosyasini acalim ve stylesheet_link_tag kodunu stylesheet_pack_tag ile degistirelim son goruntu su sekilde olacaktir:

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

Bunun ardindan app/javascript/stylesheets/application.scss dosyasini acabiliriz ve icine full calendar in stil dosyalarini ekliyebiliriz:

@import '@fullcalendar/common/main.css';
@import '@fullcalendar/daygrid/main.css';
@import '@fullcalendar/timegrid/main.css';
@import '@fullcalendar/list/main.css';

Takvimi ana sayfamiza eklemek istersek kisaca HTML dosyamizi acalim ve icine asagidaki kodu ekliyelim:

<div id='calendar'></div>

Takvimin calisabilmesi icin javascript ile aktif hale getirmemiz gerekiyor, javascript kodumuzu sayfanin sonuna </body> bitmeden once ekliyebiliriz:

<script>
document.addEventListener("DOMContentLoaded", function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new Calendar(calendarEl, {
      header: {
        left: 'prev,next',
        right: 'dayGridMonth, listMonth'
      },

      plugins: [ dayGridPlugin, listPlugin ],
      defaultView: 'dayGridMonth'
    });

    calendar.render();
});
</script>

webpacker/rails serverlimizi tekrar baslatalim ve artik takvimimiz ekranda gozukecektir.