This example of copying events doesn't work in FullCalendar v4:
https://codepen.io/ally-murray/details/JBdaBV
Does anyone know how to make this functionality in the current version?
Function "renderEvent" doesn't exist:
$calendar.fullCalendar(
"renderEvent",
{
resourceId,
title: droppedEvent.title,
start: startDate,
end: endDate },
true);
Related
I want create an event in calendar from my custom gmail add-on. And I need to pass Title, Description to Calendar gmail add-on or google calendar.
Is it possible?
Picture of expecting feature:
You can either use the CalendarApp:
var event = CalendarApp.getDefaultCalendar().createEvent('Apollo 11 Landing',
new Date('July 20, 1969 20:00:00 UTC'),
new Date('July 21, 1969 21:00:00 UTC'));
Logger.log('Event ID: ' + event.getId());
or Advanced Calendar Service:
function createEvent() {
var calendarId = 'primary';
var start = getRelativeDate(1, 12);
var end = getRelativeDate(1, 13);
var event = {
summary: 'Lunch Meeting',
location: 'The Deli',
description: 'To discuss our plans for the presentation next week.',
start: {
dateTime: start.toISOString()
},
end: {
dateTime: end.toISOString()
}
};
event = Calendar.Events.insert(event, calendarId);
Logger.log('Event ID: ' + event.id + ' Event link in Calendar: ' + event. htmlLink);
}
event.htmlLink lets you open the Calendar event in the UI.
And the last option is to use the create event template form which you pre-populate as described here.
Have you thought about using the Google Calendar API? You could use this to create the Calendar Event.
Other than that you will be needing to manipulate the DOM... not easy/stable.
i am new developer and i want to make an app in cakephp 3.7 thas uses jquery full calendar plugin for reservations.In my database is stored a specific date range (starting date and ending date fields).I want to use this date range in my calendar so that if a user clicks on a specific day on the callendar that is out of this date range, the app will display a messange informing the user that he cannot make a reservation for that day!
Any useful suggestions on who i will handle on this ??
Thank you!!
I have done it using the cakephp 3.6.
Generic steps that you would follow:
You will include your full calendar js and jquery in the 'full
calendar' template
Then initialise your fullcalendar. Now you should see the calendar.
Once done, from the fullcalendar make an ajax call to your controller to get the events. eg.
var fcSources = {
loadEvents: {
url: //your controller action,
type: "GET",
cache: true,
timezone: "Europe/London",
className: "events",
dataType: "json",
success: function (data) {
return data.events;
}
},
}
Later part can be done by simply checking the date value against current date.
i use fullcalendar and want to send the year of the selected view (not the current view) to the page "ajax_load_projektkalender.php".
The following try results in an error:
events: {
url: 'ajax_load_projektkalender.php',
type: 'POST',
data: function() { // a function that returns an object
return {
projekte_key: $('#projekte_key').val(),
aufgaben_key: $('#aufgaben_key').val(),
sel_year: $('#calendar').fullCalendar('getView').start.format('Y'),
urlaub_key: $('#urlaub_key').val(),
termine_key: $('#termine_key').val()+'',
gruppiert_key: $('#gruppiert_key').val(),
bdauer_key: $('#bdauer_key').val()
};
},
error: function() {
alert('there was an error while fetching events!');
},
color: 'yellow', // a non-ajax option
textColor: 'black' // a non-ajax option
}
Error: TypeError: $(...).fullCalendar(...).start is null
[Weitere Informationen]
I' m helpless... can anybody give me advice ?
Daniel
You have a bootstrap problem: you define the events of your calendar by referencing the current view, but that will be empty until you have defined the events of your calendar... To break the loop, assuming that initially you want to display the current year, you could write something like:
data: function() {
var current = $('#calendar').fullCalendar('getView').intervalStart
var y = (current?current:moment()).format('Y')
return {
...
sel_year: y,
...
}
I am not sure what you are trying to do, but actually I suspect you don't need that at all, as fullcalendar automatically adds to the ajax request to your php server a parameter "start" holding the start date of the period to display in ISO format (and similarly an "end" parameter). You can even give an alternative names to your parameters using e.g.
startParam: 'Anfang'
in your calendar objet.
Try intervalStart instead of start. That should fix the error, but I am not sure it solves your problem.
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);
},
I'm using eventSources method to initialize FullCalendar jQuery plugin.
eventSources: [
initEvents(visibleStartDate, visibleEndDate)
]
where initEvents is and ajax call to jsp page that returns json object representing events to be rendered. It works great but now I'd like to fetch the event only for the dates visible on calendar. I read in documentation that I could use visStart and visEnd on View object to get the start and end day of the calendar, however I don't know how to get that information at the time I initialize my eventSources. Is there a way? Thank you in advance for your responses.
Eric
It turns out that fullcalendar plugin will add start and end HTTP parameters when calendar sources are fetched externally. Full details are described in documentation here: http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/
My code (mix of javascript, JSP, JSF):
FullCalendal initialization:
page.view.calendar.fullCalendar(
{
....
eventSources: [
page.control.initEventSources(#{sessionBean.myCalendar.calendarConfgIdNbr},'Approved'),
page.control.initCalendarHolidays(#{sessionBean.myCalendar.calendarConfgIdNbr})],
....
});
2. My javascript function:
page.control.initEventSources:
var page = {
control : {
initEventSources : function(calConfId, status) {
return {
url: '/oceportal/tom/data/bookings.jsp',
type: 'POST',
data: { calConfId: calConfId, bookingStatus: status, loggedInId: "#{sessionBean.loggedInId}", },
success: function(data) { },
error: function() { alert('there was an error while fetching events!'); },
color: 'none',
textColor: page.colorConfig[status]
};
}
}
}
My JSP snippet (to retrieve first and last visible day):
String start = request.getParameter("start");
Date startDt = new Date(Long.parseLong(start)*1000);
String end = request.getParameter("end");
Date endDt = new Date(Long.parseLong(end)*1000);
Hope it helps someone.