Skip to content

Instantly share code, notes, and snippets.

@CoutinhoElias
Created April 19, 2018 19:59
Show Gist options
  • Save CoutinhoElias/9841cf06283aa8873bdb45b4ea0176f7 to your computer and use it in GitHub Desktop.
Save CoutinhoElias/9841cf06283aa8873bdb45b4ea0176f7 to your computer and use it in GitHub Desktop.
CRUD com FullCalendar e Django
(function (namespace, $) {
"use strict";
var DemoCalendar = function () {
// Create reference to this instance
var o = this;
// Initialize app when document is ready
$(document).ready(function () {
o.initialize();
});
};
var p = DemoCalendar.prototype;
// =========================================================================
// INIT
// =========================================================================
p.initialize = function () {
this._enableEvents();
this._initEventslist();
this._initCalendar();
this._displayDate();
};
// =========================================================================
// EVENTS
// =========================================================================
// events
p._enableEvents = function () {
var o = this;
$('#calender-prev').on('click', function (e) {
o._handleCalendarPrevClick(e);
});
$('#calender-next').on('click', function (e) {
o._handleCalendarNextClick(e);
});
$('.nav-tabs li').on('show.bs.tab', function (e) {
o._handleCalendarMode(e);
});
};
// =========================================================================
// CONTROLBAR
// =========================================================================
p._handleCalendarPrevClick = function (e) {
$('#calendar').fullCalendar('prev');
this._displayDate();
};
p._handleCalendarNextClick = function (e) {
$('#calendar').fullCalendar('next');
this._displayDate();
};
p._handleCalendarMode = function (e) {
$('#calendar').fullCalendar('changeView', $(e.currentTarget).data('mode'));
};
p._displayDate = function () {
var selectedDate = $('#calendar').fullCalendar('getDate');
$('.selected-day').html(moment(selectedDate).format("dddd"));
$('.selected-date').html(moment(selectedDate).format("DD MMMM YYYY"));
$('.selected-year').html(moment(selectedDate).format("YYYY"));
};
// =========================================================================
// TASKLIST
// =========================================================================
p._initEventslist = function () {
if (!$.isFunction($.fn.draggable)) {
return;
}
var o = this;
$('.list-events li ').each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()), // use the element's text as the event title
className: $.trim($(this).data('className'))
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0, // original position after the drag
});
});
};
// =========================================================================
// CALENDAR
// =========================================================================
p._initCalendar = function (e) {
if (!$.isFunction($.fn.fullCalendar)) {
return;
}
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
locale: 'pt-br',
height: 700,
header: false,
editable: true,
droppable: true,
selectable: true,
selectHelper: true,
ignoreTimezone: false,
monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sabado'],
dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
titleFormat: {
month: 'MMMM yyyy',
week: "d[ MMMM][ yyyy]{ - d MMMM yyyy}",
day: 'dddd, d MMMM yyyy'
},
columnFormat: {
month: 'ddd',
week: 'ddd d',
day: ''
},
axisFormat: 'H:mm',
timeFormat: {
'': 'H:mm',
agenda: 'H:mm{ - H:mm}'
},
buttonText: {
prev: " ◄ ",
next: " ► ",
prevYear: " << ",
nextYear: " >> ",
today: "Hoje",
month: "Mês",
week: "Semana",
day: "Dia"
},
drop: function (date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
copiedEventObject.className = originalEventObject.className;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
//LISTA DE EVENTOS
events: '/api/bookings/',
eventClick: function(event, jsEvent, view) {
$('#visualizar_agenda #title').text(event.title);
$('#visualizar_agenda #start').text(event.start.format('DD/MM/YYYY HH:mm:ss'));
$('#visualizar_agenda #end').text(event.end.format('DD/MM/YYYY HH:mm:ss'));
$('#visualizar_agenda').modal('show');
return false;
},
select: function(start, end){
$.ajax({
url: '/bookings/agendamento/novo/',
type: 'get',
dataType:'json',
beforeSend: function () {
//$("#cadastrar_agenda .modal-content").html("");
$("#cadastrar_agenda").modal("show");
},
success: function (data) {
$("#cadastrar_agenda .modal-content").html(data.html_form);
}
});
var form = $(this);
$.ajax({
url: form.attr('data-url'),
data: form.serialize(),
type: form.attr('method'),
dataType: 'json',
success: function(data){
if (data.form_is_valid){
console.log('Dados salvos')
} else {
$('#cadastrar_agenda .modal-content').html(data.html_form)
}
}
})
return false;
},
eventDrop: function(event, delta) {
$.ajax({
type: "PUT",
url: '/api/bookings/' + event.id +'/edit/',
data: {
//user: event.user,
title: event.title,
start: event.start.format('L'),
end: event.end.format('L'),
all_day: true,
color: event.color,
editable: event.editable
},
success: function(json) {
alert(event.title + " foi modificado para data " + event.start.format('L'));
}
});
},
eventResize: function(event) {
$.ajax({
type: "PUT",
url: '/api/bookings/' + event.id +'/edit/',
data: {
//user: event.user,
title: event.title,
start: event.start.format(),
end: event.end.format(),
all_day: true,
color: event.color,
editable: event.editable,
},
success: function(json) {
alert(event.title + " foi modificado para data " + event.start.format('L'));
}
});
},
// eventRender: function (event, element) {
// element.find('#date-title').html(element.find('span.fc-event-title').text());
// }
eventRender: function(event, element) {
$(element).popover({title: event.title, content: 'Inicia em: ' + event.start.format('DD/MM/YYYY HH:mm:ss') + ' termina em: ' + event.end.format('DD/MM/YYYY HH:mm:ss'), trigger : 'hover'});
}
});
var days = []
$.get( "/api/bookings/feriado/", function( data ) {
$.each(data, function(index, value){
//alert(value.start.substr(0, 10))
days.push(value.start.substr(0, 10))
});
$("td, th").each(function(){
if(days.indexOf(this.dataset.date) >= 0){
$(this).css("background-color","red");
}
});
});
};
// =========================================================================
namespace.DemoCalendar = new DemoCalendar;
}(this.materialadmin, jQuery)); // pass in (namespace, jQuery):
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment