I am using the calendar now, and it works well.
I want to add a database record every time an event is moved/resized/etc. to keep a history log.
Once an event is moved for instance, I will use ajax to add the information to my db, but I don't know how to capture the original time and new time.
$('#calendar').fullCalendar({
events: [
// events here
],
editable: true,
eventDrop: function(event, delta, revertFunc) {
alert(event.title + " was dropped on " + event.start.format());
if (!confirm("Are you sure about this change?")) {
revertFunc();
}
}
Does the delta value hold this information so I can use it for my records?
Related
I have used a button for inserting events but when i click button again it inserts again and created a duplicate copies of events. Is there any way to only insert latest events.
{
var request;
for (var j = 0; j < this.state.syncEvent.length; j++) {
console.log("J loop", this.state.syncEvent[j]);
request = function (resource) {
return gapi.client.calendar.events.insert({
'calendarId': 'primary',
'eventId': resource
});
}(this.state.syncEvent[j]);
request.execute(function (resp: any) {
console.log(resp);
});
}
}
If you are inserting an event with a predefined event id - check first if an event with this id already exists
First of all, there are some problems with your code.
Have a look at the Javasript sample in the documentation:
The correct syntax would be:
var request = gapi.client.calendar.events.insert({
'calendarId': 'primary',
'resource': event
});
whereby event is the event resource of type
var event = {
...
'start': {
'dateTime': '2015-05-28T09:00:00-07:00',
'timeZone': 'America/Los_Angeles'
},
'end': {
'dateTime': '2015-05-28T17:00:00-07:00',
'timeZone': 'America/Los_Angeles'
},
'id': SPECIFY_HERE_THE_EVENT_ID,
...
};
The event resource must contain the Required Properties end and start, in addition you specify additional properties mentioned in the documentaiton of the method like e.g. summary or id.
Now, since from your code snippet one can deduct that you pass the event id to your function - before inserting the event, you can check with the method Events: get either an event with the given id already exists.
Alternatively, you can also use the method Events: list to retrieve the already existing events in your calendar. Thereby you can use the query parameter q to filter by e.g. summary or you can query by specifying the paramters timeMax and timeMin - depending on your use case.
All you need to do is to implement a conditional statement to create a new event only if Events: get or Events: list did not return an already existing event with the specified parameters.
I have a simple panel that includes a form and a table. All data but one column in the table are entered. The values in the non-entry column are calculated. How do I get the table to refresh itself when after I run a server side script to calculate a new value to show updated table?
If you run your server script from client, then you'll need to use use callback:
google.script.run
.withSuccessHandler(function() {
app.datasources.MyDatasource.load();
})
.withFailureHandler(function() {
// TODO: handle error
})
.myServerScript();
In case your server script is executed by some schedule (trigger) or by other users then you'll need to reload table's datasource from time to time:
// Page onAttach event handler
var interval = setInterval(function() {
app.datasources.MyDatasource.load();
}, 3000);
// Page onDetach event handler
clearInterval(interval);
I searched Stackoverflow for an answer to my question: How to save dropped external events immediately to the database. Adding and updating events through the dialog works fine. Dragged external events are rendered fine.
This is the code I use in the eventReceive function. The first alert to show the event data is correct, but the second is never reached.
eventReceive: function (event, delta, revertFunc) {
alert(event.title + " was dropped on " + event.start.format()); //REPLACE WITH AJAX TO SAVE EVENT DATA
var eventToAdd = {
title: event.title,
description: "Unknown",
start: event.start.format,
end: event.end.format,
allDay: isAllDay(event.StartDate, event.EndDate)
};
if (checkForSpecialChars(eventToAdd.title) || checkForSpecialChars(eventToAdd.description)) {
alert("please enter characters: A to Z, a to z, 0 to 9, spaces");
}
else {
alert(event.title + " was dropped on " + event.start.format());
PageMethods.addEvent(eventToAdd, addSuccess);
}
},
I digged somewhat deeper and as far as I can tell, after the var eventToAdd JQuery 3.3.1 triggers the same functions over and over again as soon as the mouse is hovered over any element in the page. Functions involved are: matchFromGroupMatchers, elementmatcher, prefilter and Sizzle. The javascript of fullcalendar does not resume.
It seems the variable eventToAdd was in use. Changing it to a different name solved it. I have it now this way:
eventReceive: function (event) {
// alert(event.title + " was dropped on " + event.start.format());
var eventAdd = {
start: event.start.format(),
end: event.end.format(),
title: event.title,
description: "Onbekend",
hwType: "Proefwerk",
};
PageMethods.addEvent(eventAdd, addSuccess);
},
Is there a way to filter events based on a drop down?
I tried :
events: '/Controller/action?id='+id,
$("#drop").change(function () {
id = $('#drop').val();
$('#calendar').fullCalendar('refetchEvents');
But the controller does not see the new id.
Any suggestions on passing a paremter to the events() method?
You gave the result of '/Controller/action?id='+id to the calendar as the events feed when the calendar was initialised. e.g. you passed in /Controller/action?id=3, for example. That code has run and does not run again. fullCalendar stores that static string as the URL of the events feed. It doesn't pay any attention to the value of "id" later.
The simplest way to solve this is probably using a custom event feed, as per https://fullcalendar.io/docs/event_data/events_function/ :
//declare the calendar with a custom "events" functions
$("#calendar").calendar({
//..all your calendar options, and then the events:
events: function( start, end, timezone, callback ) {
$.ajax({
//whatever ajax parameters you need, but make sure:
url: /Controller/action,
data: { "id": $('#drop').val(), "start": start.format("YYYY-MM-DD"), "end": end.format("YYYY-MM-DD") }
});
}
});
$("#drop").change(function () {
$('#calendar').fullCalendar('refetchEvents');
});
That way, when "refetchEvents" is called, it runs the function that you passed as the "events" parameter, which can look up the value of the dropdown dynamically at that moment in time.
Note I've also added "start" and "end" parameters to your data, because your event source is supposed to filter the events returned by the dates actually being displayed on the calendar, otherwise you end up returning all events every time the view or date changes.
I'm using the new Timeline view in the FullCalendar from http://fullcalendar.io/
When I drag an event, I want to save the change to the backend, so I use the eventdrop function like this:
eventDrop: function (event, delta, revertFunc, ev) {
console.log(event.title + " was dropped on Date:" + event.start.toISOString() + " ResourceID:" + event.resourceId);
}
The problem is, that I have events shared among multiple resources, so I need to know the source of the event begin dropped (the resourceId where it came from) to be able to update correctly. In my backend I handle the link between a resource and the event via a field called event.resourceIds holding the ids of all the resources linked to this event. In the front end (Fullcalender), I create an event (with a unique ID) for each each resource for a given event.
Any hints on how I can find out where the event came from?
Found a solution myself - posted here in case anyone could use the answer:
eventDragStop: function (event, delta, revertFunc, ev) {
event._srcResourceId = event.resourceId;
},
eventDrop: function (event, delta, revertFunc, ev) {
console.log(event.title + " was dropped on Date:" + event.start.toISOString() + " ResourceID:" + event.resourceId + ' Old resource ID: '+ event._srcResourceId);
}