blog
user
28 012023

Fullcalendar jest biblioteką pozwalającą na osadzanie kalendarza na stronie www. Możliwości adaptacji narzędzia są spore. Osadzając kalendarz na stronie można zdefiniować widok:

  • miesięczny
  • dzienny 
  • tygodniowy

Każdy z tych widoków można dodatkowo parametryzować poprzez zmianę kolorystyki, zakresu godzin czy przycisków nawigacji po kalendarzu. Widok tygodniowy wygląda jak poniżej.


W ramach niedawnego projektu miał zostać utworzony kalendarz wyświetlający informacje o utworzonych zdarzeniach. Użytkownik miał mieć możliwość dodawania nowych wydarzeń na podstawie zdefiniowanych wcześniej typów wydarzeń. Typ wydarzenia w wersji podstawowej posiada nazwę oraz czas trwania. Aby wyświetlić utworzone już zdarzenia należy pobrać je przez metodę $.request() dostarczoną przez Octobercms


    $.request('onEventsList',{success: function(data) {

$.each( data, function( key, value ) {

value.overlap = false;
value.resizeable = false;

calendar.addEvent(value);

});

 }});

Metoda onEventsList() zwraca listę wydarzeń w formacie json i jest utworzona w kontrolerze powiązanym z modelem wydarzenia. Po lewej stronie kalendarza zostały zakodowane typy wydarzeń, które można złapać i upuścić do kalendarza. Za obsługę drag/drop odpowiada obiekt Draggable dostarczony przez fullcalendar:

    $.each( $('.draggableevent'), function() {

new Draggable(this, {

});

    });


Ostatnim elementem układanki jest zapisanie zrzuconego wydarzenia do bazy danych. Za tą akcję odpowiada zdarzenie drop w obiekcie fullcalendar. Fragment kodu jest poniżej. Kod wywołuje request onAddEvent zakodowany w kontrolerze powiązanym z modelem.

drop: function(info) {

var dragobj = $("#"+info.draggedEl.id);
var dragobjattr = JSON.parse(dragobj.attr('data-event'));

$.request('onAddEvent',{

data: {
eventtype: dragobjattr,
date: info.dateStr
},
success: function(data) {


console.log('Event #'+data.id+' created');

}});

 },


Efekt końcowy działania fullcalendar w systemie Octobercms widać na poniższym filmiku. Wszystkie dodawane i edytowane wydarzenia aktualizowane są w bazie danych.



Nasze newsy

Śledź nasze aktualności.

blog
user
16 042024

Wiosenne pożądki na serwerze

Wiosenne uporządkowanie zasobów na serwerze.

blog
user
13 072023

Iteracja dużej ilości danych w Laravel Eloquent

Jak poprawnie iterować dużą ilość danych w Laravel Eloquent

blog
user
29 032023

Wtyczka do Octobercms blokująca ip

Nowa wtyczka do Octobercms zwiększająca bezpieczeństwo stron www.

logo

Masz pytania? Skontaktuj się