Full Calendar drag and drop event call back - javascript

When i try to add external event to it i require date and time from the calendar how can i achieve that here is my code which i have worked over.
document.addEventListener('DOMContentLoaded', function () {
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable
//// the individual way to do it
var containerEl = document.getElementById('external-events-list');
var eventEls = Array.prototype.slice.call(
containerEl.querySelectorAll('.fc-event')
);
eventEls.forEach(function(eventEl) {
new Draggable(eventEl, {
eventData: {
title: eventEl.innerText.trim(),
}, // this allows things to be dropped onto the calendar
drop: function (arg) {
// is the "remove after drop" checkbox checked?
alert(arg);
}, // this allows things to be dropped onto the calendar
eventReceive: function (arg) {
// is the "remove after drop" checkbox checked?
alert(arg);
},
eventDrop: function (event, delta, revertFunc) {
//inner column movement drop so get start and call the ajax function......
console.log(event.start.format());
console.log(event.id);
var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration'));
var end = event.end || event.start.clone().add(defaultDuration);
console.log('end is ' + end.format());
//alert(event.title + " was dropped on " + event.start.format());
}
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function (arg) {
// is the "remove after drop" checkbox checked?
if (document.getElementById('drop-remove').checked) {
// if so, remove the element from the "Draggable Events" list
arg.draggedEl.parentNode.removeChild(arg.draggedEl);
}
},
eventDrop: function (info) {
alert(info.event.title + " was dropped on " + info.event.start.toISOString());
if (!confirm("Are you sure about this change?")) {
info.revert();
}
},
//eventRender: function (info) {
// console.log(info.event.extendedProps);
// // {description: "Lecture", department: "BioChemistry"}
//}
});
calendar.render();
});
i am trying to add event callback function in the new Draggable but to no use as event are not fired from it when i drag within the calendar then it fires back from new Calendar, so i require that after dragging event externally in the calendar i need to get date and time from it.

Related

Errors in efforts to write code for fullCalendar without using jQuery

I saw a CodePen that allowed dragging an event from FullCalendar to trash or back to an external list. I forked the CodePen: https://codepen.io/hlim18/pen/EMJWQP?editors=1111. The JavaScript part of the working code with jQuery is the following:
$(document).ready(function() {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events .fc-event').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// 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
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendarSchedule').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
dragRevertDuration: 0,
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
console.log(this);
$(this).remove();
}
},
eventDragStop: function( event, jsEvent, ui, view ) {
if(isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {
$('#calendar').fullCalendar('removeEvents', event._id);
var el = $( "<div class='fc-event'>" ).appendTo( '#external-events-listing' ).text( event.title );
el.draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
el.data('event', { title: event.title, id :event.id, stick: true });
}
}
});
var isEventOverDiv = function(x, y) {
var external_events = $( '#external-events' );
var offset = external_events.offset();
offset.right = external_events.width() + offset.left;
offset.bottom = external_events.height() + offset.top;
// Compare
if (x >= offset.left
&& y >= offset.top
&& x <= offset.right
&& y <= offset .bottom) { return true; }
return false;
}
});
I would like to write the code without using jQuery. So, I tried to change jQuery to vanilla JavaScript. But, the calendar is not even displayed in the screen.
This is how I tried: https://codepen.io/hlim18/pen/bZyaQj?editors=1111.
The JavaScript part with vanilla JavaScript I tried is the following:
/* initialize the external events
-----------------------------------------------------------------*/
var draggable_events = document.querySelectorAll('#external-events .fc-event');
for(var i=0; i<draggable_events.length; i++){
// store data so the calendar knows to render an event upon drop
draggable_events[i].fullCalendar('renderEvent', {
title: draggable_events[i].innerText, // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable
draggable_events[i].draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
}
/* initialize the calendar
-----------------------------------------------------------------*/
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendarSchedule');
var calendar = new FullCalendar.Calendar(calendarEl, {
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
dragRevertDuration: 0,
drop: function() {
// is the "remove after drop" checkbox checked?
if (document.getElementById('drop-remove').checked = true) {
// if so, remove the element from the "Draggable Events" list
this.remove();
}
},
eventDragStop: function( event, jsEvent, ui, view ) {
if(isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {
calendarEl.fullCalendar('removeEvents', event._id);
var el = document.querySelector('fc-event').setAttribute("id", "external-events-listing").text( event.title );
el.draggable({
zIndex: 999,
revert: true,
revertDuration: 0
});
el.data('event', { title: event.title, id :event.id, stick: true });
}
}
}
});
var isEventOverDiv = function(x, y) {
var external_events = document.getElementById('external-events');
var offset = external_events.offset();
offset.right = external_events.width() + offset.left;
offset.bottom = external_events.height() + offset.top;
// Compare
if (x >= offset.left && y >= offset.top && x <= offset.right && y <= offset .bottom){
return true;
}
return false;
}
In the CodePen, I don't see any errors. But, when I test with my app I'm working on, I see the following error:
Uncaught TypeError: draggable_events[i].fullCalendar is not a function
at viewMonthly.js:15
I'm not even sure how many problems are there in total to solve to make the code work with vanilla JavaScript... :(
So, I'd appreciate any advice. Thank you in advance! :)
fullCalendar in versions prior to V4 is a jquery plugin and needs jquery to work

jQuery to fetch time from full calendar

I want to manually input the time in the modal , however everytime the modal pops up the time input field has already a value which is the current time in my computer's clock.
How do I edit the javascript so that it will not generate the time automatically.
I used the plug in here https://github.com/tliokos/jquery-fullcalendar-crud . I just Downloaded it. By the way it is my first time to use this plug in.
This is the javascript code:
$(function(){
var currentDate; // Holds the day clicked when adding a new event
var currentEvent; // Holds the event object when editing an event
$('#color').colorpicker(); // Colopicker
$('#time').timepicker({
minuteStep: 5,
showInputs: false,
disableFocus: true,
showMeridian: false
}); // Timepicker
// Fullcalendar
$('#calendar').fullCalendar({
timeFormat: 'H(:mm)',
header: {
left: 'prev, next, today',
center: 'title',
right: 'month, basicWeek, basicDay'
},
// Get all events stored in database
events: 'crud/getEvents.php',
// Handle Day Click
dayClick: function(date, event, view) {
currentDate = date.format();
// Open modal to add event
modal({
// Available buttons when adding
buttons: {
add: {
id: 'add-event', // Buttons id
css: 'btn-success', // Buttons class
label: 'Add' // Buttons label
}
},
title: 'Add Event (' + date.format() + ')' // Modal title
});
},
// Event Mouseover
eventMouseover: function(calEvent, jsEvent, view){
var tooltip = '<div class="event-tooltip">' + calEvent.description + '</div>';
$("body").append(tooltip);
$(this).mouseover(function(e) {
$(this).css('z-index', 10000);
$('.event-tooltip').fadeIn('500');
$('.event-tooltip').fadeTo('10', 1.9);
}).mousemove(function(e) {
$('.event-tooltip').css('top', e.pageY + 10);
$('.event-tooltip').css('left', e.pageX + 20);
});
},
eventMouseout: function(calEvent, jsEvent) {
$(this).css('z-index', 8);
$('.event-tooltip').remove();
},
// Handle Existing Event Click
eventClick: function(calEvent, jsEvent, view) {
// Set currentEvent variable according to the event clicked in the calendar
currentEvent = calEvent;
// Open modal to edit or delete event
modal({
// Available buttons when editing
buttons: {
delete: {
id: 'delete-event',
css: 'btn-danger',
label: 'Delete'
},
update: {
id: 'update-event',
css: 'btn-success',
label: 'Update'
}
},
title: 'Edit Event "' + calEvent.title + '"',
event: calEvent
});
}
});
// Prepares the modal window according to data passed
Suggest looking at the docs for the timepicker.
https://jdewit.github.io/bootstrap-timepicker/
In which case set defaultTime=false
defaultTime
'current' (default) - Set to the current time.
Set to a specific time - '11:45 AM'
false - Do not set a default time

why is full calendar jquery plugin not working as expected when I click next or previous?

I´m using the full calendar plugin, so I load my data for the current month, but when I click previous, then next then previous again; my previous events get duplicated.
For example, if I had an event with id=1 in november, and I´m in december and I go to november; then I see my event with id=1 duplicated.
Here is my json:
[{"id":2024,"title":"titulo0","start":"2014-12-23 19:22:17","end":"2014-12-23 19:22:17","description":"descripcion0"}]
Here is how I load my calendar:
function loadEventos() {
var current_url = '';
var new_url = '';
$('#calendar').fullCalendar({
events: '/pushCombos/calendarioAction!getEventosMes.action?mes=' + 1,
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
eventClick: function(calEvent, jsEvent, view) {
calEvent.title = "CLICKED!";
console.log(moment(calEvent.end).format("YYYY-MM-DD"));
editarEvento(calEvent);
console.log(moment(calEvent.end).format("YYYY-MM-DD"));
$('#calendar').fullCalendar('updateEvent', calEvent);
}
});
}
and here is the code of my buttons:
$('.fc-button-group').children().eq(1).click(function(){
var date = $("#calendar").fullCalendar('getDate');
var month_int = moment(date).format("MM");
var year_int = moment(date).format("YYYY");
var events = {
url: '/pushCombos/calendarioAction!getEventosMes.action?mes=1',
data: {
month: month_int,
year: year_int
}
};
$('#calendar').fullCalendar('removeEventSource', events);
$('#calendar').fullCalendar('addEventSource', events);
});
When I edit an event and reload it; it reloads fine, but if I use the next and previous buttons, the events get duplicated.
Why is this happening??
Thanks in advance!
Try changing your events option to this:
events: {
url: '/pushCombos/calendarioAction!getEventosMes.action',
type: 'GET',
data: {
mes: 1
},
cache: false,
error: function (jqXHR, textStatus, errorThrow) { //whatever you want }
}
It seems that this plugin automatically does the post when you press the previous button that why it was duplicating the events.
Another weird thing I found is that the first day of the month and the last day of the month it sends to the server are wrong.

jQuery FullCalendar multiple calendars, get dropped on calendar id

I am using the jQuery FullCalendar by Adam Shaw. I am creating multiple calendars on the same page, and dragging external elements onto the calendars. I need to get the calendar id that the element was dropped onto in order to update in my database. What would be the easiest way to get the id?
I have tried using closest
$(this).closest('div.calendar').attr('id');
or
$(this).closest('div.fc').attr('id');
or
$(this).closest('div.fc-ltc').attr('id');
all of these result in undefined.
javascript (simplified)
$(document).ready(function() {
$('#external-events div.external-event').each(function() {
var eventObject = {
title: $.trim($(this).text())
};
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
$('.calendar').fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
defaultView: 'agendaWeek',
editable: true,
droppable: true,
drop: function(date, allDay,jsEvent, ui,) {
//GET calendar id
var calendarid = $(this).closest('div.calendar').attr('id');
var originalEventObject = $(this).data('eventObject');
var copiedEventObject = $.extend({}, originalEventObject);
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// Using calendarid here
copiedEventObject.calendar = calendarid;
// Using calendarid here
$('#'+calendarid).fullCalendar('renderEvent', copiedEventObject, true);
$(this).hide();
}
});
});
html (simplified)
<div id='external-events'>
<h4>Draggable Events</h4>
<div class='external-event'>My Event 1</div>
<div class='external-event'>My Event 2</div>
<div class='external-event'>My Event 3</div>
<div class='external-event'>My Event 4</div>
<div class='external-event'>My Event 5</div>
</div>
<div id='calendar1' class='calendar'></div>
<div id='calendar2' class='calendar'></div>
<div id='calendar3' class='calendar'></div>
So how would I find the div id of the calendar (ie. calendar1) that the event was dropped on?
Update
I found that by using .elementFromPoint() and jsEvents screenX/screenY coordinates where the event was dropped I could then find the parent calendar id.
var calendarid = $(document.elementFromPoint(jsEvent.screenX, jsEvent.screenY)).closest('div.calendar').attr('id');
updated js
$('.calendar').fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
defaultView: 'agendaWeek',
editable: true,
droppable: true,
drop: function(date, allDay,jsEvent, ui,) {
//GET calendar id
var calendarid = $(document.elementFromPoint(jsEvent.screenX, jsEvent.screenY)).closest('div.calendar').attr('id');
var originalEventObject = $(this).data('eventObject');
var copiedEventObject = $.extend({}, originalEventObject);
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// Using calendarid here
copiedEventObject.calendar = calendarid;
// Using calendarid here
$('#'+calendarid).fullCalendar('renderEvent', copiedEventObject, true);
$(this).hide();
}
});
Is .elementFromPoint() / document.elementFromPoint(jsEvent.screenX, jsEvent.screenY) an accurate and/or best way to accomplish this?
I do have the solution and its working fine for past one year for me, it might help you as well.
initialize the calendar
-----------------------------------------------------------------*/
function initializeCalendar( calId /*pass as many custom parameters*/ ) {
$('#calendar'+calId ).fullCalendar({
drop: function(date, allDay,jsEvent, ui,) {
//GET calendar id
var calendarid = calId;
var originalEventObject = $(this).data('eventObject');
var copiedEventObject = $.extend({}, originalEventObject);
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// Using calendarid here
copiedEventObject.calendar = calendarid;
// Using calendarid here
$('#'+calendarid).fullCalendar('renderEvent', copiedEventObject, true);
$(this).hide();
}
});
}
This is so far the most accurate and optimized way i have came across.
Seems like we can use view parameter to identify the id. This worked for me. Create one function to pull out the id. And call it from the callbacks functions with view as parameter.
function getCalendarId(view) {
return (view.calendar.view.el.parents('div.calendar').attr('id'))
}
function onSelectTimeFrame(start, end, jsEvent, view) {
let calendarId = getCalendarname(view);
//Use calendarId.
}

FullCalender check if selection days has an event?

I am using the Full Calender js plugin, so far so good. but i want to check if a selection between the start and end has events?
I just need a true or false returned. Basically i want to stop users from creating events if an even already exists on the date selection.
var calendar = $('#calendar').fullCalendar({
selectable: true,
selectHelper: true,
firstDay: 5,
weekNumbers: false,
select: function (start, end, allDay, event) {
var TitleSet = false;
StartDate = start;
EndDate = end;
if (event) {}
if (TitleSet) {
calendar.fullCalendar('renderEvent', {
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
events: EventsArr,
eventRender: function (event, element) {
element.qtip({
content: event.description
});
}
});
I tried this methode and it looks fine
// check if this day has an event before
function IsDateHasEvent(date) {
var allEvents = [];
allEvents = $('#calendar').fullCalendar('clientEvents');
var event = $.grep(allEvents, function (v) {
return v.start === date;
});
return event.length > 0;
}
then you can call it from dayclick event
dayClick: function (date, allDay, jsEvent, view) {
if (!IsDateHasEvent(date)) {
selectedDate = date;
$("#divAddNewAppointment").dialog("open");
}
else {
$('<%= "#" + lblMessage.ClientID%>').html(" your error msg");
$("#divMessage").dialog("open");
}
}
You will need to create a method to get the array of events already loaded in calendar, after that use that array to get all days that have events and if user clicks on one of that dates don´t let create another event. This is something that only you can make and figure out, you will need to make an algorithm for yourself...
Check this clientEvents

Categories

Resources