I'm using Fullcalendar for a project I'm developing ... I have only one feature left to be implemented, which is when an existing event is dragged from it's original position to another time or date. I would like to know how I get the current object information (title, new start time, old start time, id, url, etc), so I can update the database with the newer information ... which property from the Fullcalendar object do I use?
I implemented the drop property;
drop : function(date, allDay) {
// 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 object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event `sticks`
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// if the 'remove after drop' checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so remove the element from the "Draggable Events"
$(this).remove();
}
},
but it's not doing what I wanted ...
Take a look at the Event Dragging and Resizing http://arshaw.com/fullcalendar/docs/event_ui/
I think what you are looking for the eventDrop callback.
Triggered when dragging stops and the event has moved to a different
day/time.
http://arshaw.com/fullcalendar/docs/event_ui/eventDrop/
Example from arshaw's site:
$('#calendar').fullCalendar({
events: [
// events here
],
editable: true,
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
alert(
event.title + " was moved " +
dayDelta + " days and " +
minuteDelta + " minutes."
);
if (allDay) {
alert("Event is now all-day");
}else{
alert("Event has a time-of-day");
}
if (!confirm("Are you sure about this change?")) {
revertFunc();
}
}
});
Related
I was successfully able to specify multiple sources: My SQL server source, and an empty array to hold any user-generated events userAddedEvents = []. The idea was that I could use this array later to "save" new events to my server.
var userAddedEvents = []; //container for event objects that will hold user-generated content
var calendar = new FullCalendar.Calendar(calendarEl, {
eventSources: [
{
events: function (fetchInfo, successCallback, failureCallback) {
$.ajax({
url: url,
type: 'post',
contentType: "application/json; charset=utf-8", //include fetchInfo in request body instead of form-data
dataType: "json",
data: JSON.stringify(fetchInfo), //the fetchInfo object must be stringified
success: function (data) {
events = $.merge([], data.events);
successCallback(events);
}
});
}
}, //end server source
{
id: 'userAddedEvents',
events: userAddedEvents
} //end local array source
]
});
So, here's me trying to add an event to my userAddedEvents source...
select: function (info) {
// https://fullcalendar.io/docs/select-callback
console.log(info)
console.log('selected ' + info.startStr + ' to ' + info.endStr)
calendar.addEvent({
start: info.startStr,
end: info.endStr,
rendering: 'background', //v4 and v5 use different terminology
color: '#ff9f89',
selected: true, //custom, extended property
}, userAddedEvents);
calendar.unselect(); //clear the current selection
},
Anyway, long story short... when I try to dump out the results of userAddedEvents, it's empty, although, I do see new content on my calendar.
==UPDATED== with example included... I added a custom button where I attempt to get content from the userAddedEvents array.
Alternatively (also shown in the example), I've had success getting ALL events with calendar.getEvents(), then using $.grep to filter some specific property or extended property. Ultimately though, I suppose I'm trying to use a "temporary event source" for the sake of convenience -- I can act upon the userAddedEvents array, stringify it, empty it, etc. I do not know how to getEvents for a specific source object.
customButtons: {
getUserCreatedEvents: {
text: 'Get User Events',
click: function () {
console.log(calendar.getEventSources()); //both event sources are listed
console.log(calendar.getEventSourceById(userAddedEvents)); //missing the id in output {calendar, id, internalEventSource, url}
console.log(calendar.getEventSourceById('userAddedEvents')); //has the the id in output {calendar, id, internalEventSource, url}
console.log(userAddedEvents) //the array is empty
/*
events = calendar.getEvents();
// console.log(events)
var filteredResultsGREP = $.grep(events, function (event) {
return event.rendering === 'background';
});
*/
/*
https://fullcalendar.io/docs/Event-toPlainObject (version 5 only)
*/
// this WILL show any events added based on the property specified
// console.log(filteredResultsGREP);
}
}
}
How do I get the events that are new? I want to hold all user-created events before I send them to SQL for processing.
Firstly, apologies for totally forgetting about this question, having started to help with it.
After some digging it looks like you can't get the raw events for an individual event source, which is a bit annoying.
So I think actually your simplest approach is just to add the events to your separate array, without worrying about the structure in fullCalendar. Then you can just send that list to the server when you want to save them.
select: function (info) {
var evt = {
start: info.startStr,
end: info.endStr,
rendering: "background", //v4 and v5 use different terminology
color: "#ff9f89",
selected: true //custom, extended property
};
calendar.addEvent(evt);
userAddedEvents.push(evt);
calendar.unselect(); //clear the current selection
},
Demo: https://codepen.io/ADyson82/pen/abdVVNM
The only extra complication you might have is if you allow events to be dragged or resized (or otherwise edited) after they've been added, you'll have to sync that with the separate array, which is a bit of extra work.
I have some code where I am trying to grab the date as it relates to the slot selected by a user. I have tried this code and it doesn't work:
$('.fc-agenda-axis.fc-widget-header').on('mousedown', function (e) {
var clickedTime = $(this).parent().find('th').html();
// line below returns undefined
var clickedDate = $('#calendar').fullCalendar('getDate');
// and so does this
var clickedDate2 = $('calendar').fullCalendar('getDate');
someOtherCoolMethod(clickedDate, clickedTime);
});
Any idea why the first attempt to get the date doesn't work?
Additional Info: I am using the agendaDay view, and the version of fullCalendar is 1.5.4 - we will be upgrading to a later version this year.
You have to use eventClick.
$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent, view) {
alert('Event start: ' + calEvent.start);
}
});
If it's no event you can use dayClick.
I have used eventOverlap: false, and selectOverlap: false, to prevent the user from overlapping events. However, I am trying to prevent the user from overlapping existing events.
In my full calendar the user can click on an event, which opens a pop up dialog and allows the user to update the date/time of the selected event. However, the user is able choose a date/time where an event is already booked. Therefore, I want to have a validation on the Save button that checks if the updated date/time has an event or not before any changes are made. These two screen shots show this problem graphically.
1. Shows that event time is being updated. 2. Shows the event is overlapping after it has been updated
var events = []; //global array where all the events are stored
function FetchEventAndRenderCalendar() {
//fetch info from database and add it to the events array
events = [];
$.ajax({
type: "GET",
url: "/SessionScheduler/GetEvents",
success: function (data) {
$.each(data, function (i, v) {
events.push({
id: v.Id,
title: v.Title,
description: v.Description,
start: moment(v.StartDate),
end: moment(v.EndDate),
tutorName: v.TutorName,
color: v.ThemeColour
});
})
//then display the calendar with the events
GenerateCalender(events);
},
error: function (error) {
alert('failed');
}
})
}
This is the Save button where I want to have a validation check. I have looked at this solution but this didn't work for me
$('#btnSave').click(function () {
//validation
var selectedStartDate = moment(document.getElementById('txtStart').value.trim(), "DD/MM/YYYY HH:mm a").toDate();
var selectedEndDate = moment(document.getElementById('txtEnd').value.trim(), "DD/MM/YYYY HH:mm a").toDate();
if (selectedStartDate > selectedEndDate) {
alert('Invalid end date');
return;
}
if (selectedStartDate.getTime() == selectedEndDate.getTime()) {
alert('Start/End dates can not be the same');
return;
}
var data = {
Id: $('#hdEventID').val(),
Title: $('#txtTitle').val(),
StartDate: $('#txtStart').val(),
EndDate: $('#txtEnd').val(),
Description: $('#txtDescription').val(),
TutorName: $('#txtTutorName').val(),
ThemeColour: $('#ddThemeColour').val()
}
SaveEvent(data);
})
SaveEvent function: Which saves the data
function SaveEvent(data) {
if (selectedEvent != null && confirm("Are you sure?")) {
$.ajax({
type: "POST",
url: '/SessionScheduler/SaveEvent',
data: data,
success: function (data) {
if (data.status) {
//refresh the calendar if the status is true else its failed
FetchEventAndRenderCalendar();
$('#myModalSave').modal('hide'); //hide modal dialog pop window
}
},
error: function () {
alert('Failed');
}
})
}
}
This function will check whether the event passed in overlaps with any other events currently displayed on the calendar.
Note this relies on the events having unique id properties, so it doesn't check itself. It also cannot, by its nature, check any events not currently displayed on the calendar, because fullCalendar doesn't return those from its clientEvents method. You should check again on the server-side before accepting the modification into your database.
//check whether or not the calendar event passed in overlaps with an existing event in the current (client-side) calendar data
//the first parameter should be the event which is being tested
//the second parameter should be a jQuery object wrapping the calendar HTML element
function isCalendarEventOverlapping(event)
{
var evts = cal.fullCalendar('clientEvents');
for (i in evts)
{
if (evts[i].id != event.id)
{
if (event.start.isBefore(evts[i].end) && event.end.isAfter(evts[i].start))
{
return true;
}
}
}
return false;
}
I did some search about this problem.
FullCalender check if selection days has an event?
How to check event is already exist for a day - fullcalendar
How to avoid events duplication on fullcalendar?
Can I prevent events with conflict time?
Everytime, they get all the events from the FC memory, and iterate over them, for searching conflict time.
Unfortunately, there is no simple solution for that.
My suggestions:
You should to make a ajax call before every modification, where your server checks the conflict (if you store the events on the server side)
If your server doesn't store your events, then you have to iterate all the events in the client side, in order to find a conflict.
Using Fullcalender.js , i am showing events in calendar .
I added dayclick and event click funtionality. But when i use date.format() in dayClick (), it shows error date.Format() is not the function.
I upgraded my fullcalendar to v3.5.1 , after that i can get dayClick functionality very well. But the events showing Start time as default even if im not giving any title to it.
$(document).ready(function() {
$('#ConfCalendarBlock').fullCalendar({
height:400,
editable: true,
events: modJs.getConfJsonUrl(),
loading: function(bool) {
if (bool) $('#loadingConfCalendarBlock').show();
else $('#loadingConfCalendarBlock').hide();
},
dayClick: function (date, jsEvent, view) {
modJs.getdayclick(date.format());
},
eventClick: function(calEvent, jsEvent, view) {
modJs.getEventClcik(calEvent.id);
},
});
});
in my php code
public function listToEvent($book){
$event = array();
$starttime = date("g:i a", strtotime($book->from_date));
$endtime = date("g:i a", strtotime($book->to_date));
$event['id'] = $book->id;
$event['title'] = $starttime."-".$endtime. " (".$book->type.")";
$event['start'] = $book->from_date;
$event['end'] = $book->to_date;
$eventBackgroundColor = "";
$event['color'] = $eventBackgroundColor;
$event['backgroundColor'] = $eventBackgroundColor;
$event['textColor'] = "#FFF";
return $event;
}
Calendar shows the event as
9:15a 9:15am - 10:30am (Meeting)
The start time shows twice ,but if i refer old version of Calendar, it shows as i want.
Even i didnt give any title to the event, then the calendar shows the start time as 9:15a in blue color event bar.
It seems you need to set displayEventTime to false
I'm try to update fullcalendar event after user change date from bootstrap-datepicker: http://bootstrap-datepicker.readthedocs.org/en/latest/events.html
I'm following the (only) solution found here: How to combine jquery date-picker and jquery full calendar
which for bootstrap-datepicker would be:
$('#fullcalEventEnd').datepicker().on('changeDate', function(evt){
var endDate = evt.date;
list.eventUpdated.end = moment(endDate).format("DD-MM-YYYY");
$(cal).fullCalendar('renderEvent', list.eventUpdated, true);
});
What it should do is, update an event created once the user selects the calendar, so on my select function i have:
select: function(start, end) {
$('#fullcalEventFrom').datepicker('setValue', start);
$('#fullcalEventTo').datepicker('setValue', end);
list.eventUpdated = {
title: eventTitle,
start: start,
end: end
};
$(cal).fullCalendar('renderEvent', list.eventUpdated, true); // stick? = true
$(cal).fullCalendar('updateEvent', event);
},
....
list is my global object: var list = {}
But so far nothing, I'm not able to update the event and this line
$(cal).fullCalendar('renderEvent', list.eventUpdated, true); is giving me an error and I don't understand why
Anyone already face this problem?