I have event sources added to a fullcalendar object dynamically (addEventSource).
I do not understand how to reference these event sources to remove them with removeEventSource.
I have an example here:
http://jsfiddle.net/64L4npzo/
calendar = jQuery("#calendar").fullCalendar();
event_count = 0;
jQuery(document).on("click", ".add_random_event", function() {
event_count++;
var json_source = [ { title : 'event to remove', start : '2015-11-04' } ];
calendar.fullCalendar('addEventSource', json_source);
jQuery("<div class='remove_event_source' event_count='" + event_count + "'>Remove Event " + event_count + "</div><br>").appendTo("#event_removal");
});
jQuery(document).on("click", ".remove_event_source", function() {
calendar.fullCalendar("removeEventSource", jQuery(this).attr("event_count"));
console.log("Tried to remove event #" + jQuery(this).attr("event_count"));
});
I've read this solution but I'm not sure how to apply it: Problem removing event sources from FullCalendar (jQuery)
If you attach your source object as a data attribute to the 'remove this source' button, you can then use that data attribute later as the source in the removeEventSource method.
During addEventSource:
jQuery("<div class='remove_event_source' event_count='" + event_count + "'>Remove Event " + event_count + "</div><br>").data('source', json_source).appendTo("#event_removal");
When using removeEventSource:
calendar.fullCalendar("removeEventSource", jQuery(this).data('source'));
I've also made a few changes to make sure your source object is unique and updated the jsfiddle: http://jsfiddle.net/64L4npzo/4/
To remove events, you need a source. The source may be an object that provides some data about events.
You can see the list of event source options here
So, in your case, I add a className to events and the events would be referred by that className.
calendar = jQuery("#calendar").fullCalendar();
event_count = 0;
var json_source = [ { title : 'event to remove', start : '2015-11-04', className: 'test' } ];
jQuery(document).on("click", ".add_random_event", function() {
event_count++;
calendar.fullCalendar('addEventSource', json_source);
jQuery("<div class='remove_event_source' event_count='" + event_count + "'>Remove Event " + event_count + "</div><br>").appendTo("#event_removal");
});
jQuery(document).on("click", ".remove_event_source", function() {
calendar.fullCalendar("removeEventSource", json_source);
console.log("Tried to remove event #" + jQuery(this).attr("event_count"));
});
The updated fiddle is here.
http://jsfiddle.net/64L4npzo/1/
Related
Is it somehow possible to have a custom action and using one of the predefined action, e.g. onClick = "select"?
I would like to use the onClick select and an additional JS function.
Example:
onClick = "select" + JS("function(rowInfo, column) {
// Only handle click events on the 'details' column
if (column.id !== 'details') {
return
}
// Display an alert dialog with details for the row
window.alert('Details for row ' + rowInfo.index + ':\\n' + JSON.stringify(rowInfo.values, null, 2))
// Send the click event to Shiny, which will be available in input$show_details
// Note that the row index starts at 0 in JavaScript, so we add 1
if (window.Shiny) {
Shiny.setInputValue('show_details', { index: rowInfo.index + 1 }, { priority: 'event' })
}
}")
This will do
library(reactable)
reactable(iris[1:5, ], selection = "multiple", onClick = JS(
"function(rowInfo, column){
var rowIdx = rowInfo.index;
document.querySelectorAll('.rt-table .rt-tr')[rowIdx + 1].querySelector('.rt-td-select').click()
// add whatever other JS code you want below
// e.g. alert the clicked
alert(`You clicked row No. ${rowIdx + 1}, column ${column.id}`)
}
"
))
I'm creating a reservation for projector and upon development, I'm stucked here where every time I dragged new events, it does not create new event in the calendar view. I tried alerting the values and I retrieved it correctly, only the calendar is not updating. Fullcalendar + Scheduler has a limited resources over the internet so I tried asking here. Anybody knows what's missing or what should be done?
select: function(info)
{
this.title = prompt('Event Title:');
if (this.title) {
this.eventData = {
title: this.title,
start: info.start,
end: info.end,
resourceId: info.resource.id // Example of resource ID
};
$('#calendar').fullCalendar('renderEvent', this.eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
alert('selected ' + info.start + ' to ' + info.endStr + 'wew ' + info.resource.id);
},
calendar.addEvent({
id: NewEventID, resourceId: info.resource.id, start: info.startStr, end: info.endStr, title: Title2
});
Here's what I forgot to do, then refetch the events using calendar.refetchEvents();. Problem solved!
Just migrated to pure V4, remove V3 syntaxes and included the .addEvent function. Problem solved!
I am using full calendar v3.0.1, I need to display event title in every day cell in calendar table.
Example:
start: 2017-01-01
end: 2017-01-10
Based on these dates, Expected output in calendar should be displaying event title in within start and end date range. meet5 title should show in each day cell within event range.
Current output:
Required Expected output
Any suggestions, How we can achieve this ?
Maybe you could try something like this:
$('#calendar').fullCalendar({
defaultView: 'month',
events: [{
title: 'Some quite long event description in a day cell',
start: '2017-01-05',
end: '2017-01-09',
rendering: 'background',
allDay: true
}],
eventAfterAllRender: function(view) {
$.each($('#calendar').fullCalendar('clientEvents'), function() {
var event = this;
var $start = $('#calendar').find('td.fc-day[data-date="' + event.start.format('YYYY-MM-DD') + '"]');
var $end = $('#calendar').find('td.fc-day[data-date="' + event.end.format('YYYY-MM-DD') + '"]');
if (event.rendering === 'background') {
for (var d = event.start; d <= event.end; d.add(1, 'day')) {
$('#calendar').find('td.fc-day[data-date="' + d.format('YYYY-MM-DD') + '"]').append('' + event.title + '');
}
}
});
}
});
Check this fiddle.
I noticed that you would like to have an event title below day number. Solution above is a bit different, but it should give you an idea how it could be done I hope.
I'm hoping to find some help retrieving the Google Calendar attachment fileId through FullCalendar v2.9.0.
The Google calendar is dedicated to this project and is public as is the Drive folder containing image files which are the attachments - one image per event. I am new to the details of Javascript, but I've searched and researched quite a bit. I have not been able to find an example or tutorial that is close enough to what I'm trying to do that I can understand.
My project involves a month view FullCalendar where a user clicks an event, the event background highlights and a sidebar div populates with title, dateTime, description, location, and attachment image file. The user would browse through multiple events with the sidebar updating accordingly.
Here's what I've done so far:
The Google calendar elements are populating and updating correctly except for the image attachment.
I can hard code the HTML in gcal.html with a URL appended with the attachment fileId and get the image in the sidebar. The image, of course, is static though.
Using Google API Explorer calendar.events.get and entering calendarId, eventId, and simple API key, all of which are retrievable from FullCalendar, API Explorer returns the attachment fileId,
(Note that the fileUrl below works in a browser pulling up a viewer, but does not work in my HTML. This one does though: "https://drive.google.com/uc?export=view&id=0B5Nk_tOCzCISaWdqYy1DYnF6SzA")
From API Explorer
Execute without OAuth
calendar.events.get executed 16 minutes ago time to execute: 282 ms
Request
GET https://www.googleapis.com/calendar/v3/calendars/c6kag4dlhqs7m160s3t3lfggak%40group.calendar.google.com/events/u9a5fuoqkfmkm2c20vpn75krf4?fields=attachments(fileId%2CfileUrl)&key={YOUR_API_KEY}
Response
200
- Show headers -
{
"attachments": [
{
"fileUrl": "https://drive.google.com/file/d/0B5Nk_tOCzCISaWdqYy1DYnF6SzA/view?usp=drive_web",
"fileId": "0B5Nk_tOCzCISaWdqYy1DYnF6SzA"
}
]
}
I've tried what seems like endless combinations of statements, basically guessing, at the right syntax in a gcal.html eventClick function. I've also been trying to add code to events.push in gcal.js. This is the only place where I can find other event elements referenced.
My current setup with "alert(event.fileid);" under eventClick ingcal.html and "attachments: entry.fileid" under events.push in gcal.js returns an alert "undefined". In gcal.js a few lines down I notice "successArgs = [ events ].concat(Array.prototype.slice.call(arguments, 1)); // forward other jq args". I'm wondering if FullCalendar returns all fields for an event?
gcal.html (head)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script src='../gcal.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
eventLimit: 4,
googleCalendarApiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
events: {
googleCalendarId: 'c6kag4dlhqs7m160s3t3lfggak#group.calendar.google.com'
},
//$('#calendar'.fullCalendar( 'clientEvents' [, filter ] )
// Need to highlight next upcoming event on page load
// var filter = (events, event.start > getdate(new))
eventClick: function(event, events ) {
alert(event.fileid);
//eventRender: function(event, element, view) {
// Need to reset highlight on prevoiusly clicked event
// element.css('background-color', '#5777c8');
//}
//$('#calendar').fullCalendar( 'updateEvents' );
$( "#sidebar2" ).html(event.title);
$( "#sidebar3" ).html(event.start.format('dddd MMM. Do'));
$( "#sidebar4" ).html(event.start.format('h:mm a'));
$( "#sidebar5" ).html(event.description);
$( "#sidebar6" ).html(
'<a style= color:#a2cadc; href=http://' +
event.location + ' target="_blank">' +
"More Band Info" + '</a>'
);
$(this).css('background-color', '#5777c8');
return false;
console.log
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
</script>
gcal.js (line 122 to end)
return $.extend({}, sourceOptions, {
googleCalendarId: null, // prevents source-normalizing from happening again
url: url,
data: data,
startParam: false, // `false` omits this parameter. we already included it above
endParam: false, // same
timezoneParam: false, // same
success: function(data) {
var events = [];
var successArgs;
var successRes;
if (data.error) {
reportError('Google Calendar API: ' + data.error.message, data.error.errors);
}
else if (data.items) {
$.each(data.items, function(i, entry) {
var url = entry.htmlLink || null;
// make the URLs for each event show times in the correct timezone
if (timezoneArg && url !== null) {
url = injectQsComponent(url, 'ctz=' + timezoneArg);
}
events.push({
id: entry.id,
title: entry.summary,
start: entry.start.dateTime || entry.start.date,
// try timed. will fall back to all-day
end: entry.end.dateTime || entry.end.date, // same
url: url,
location: entry.location,
description: entry.description,
attachments: entry.fileid // tryiing to find the attachment reference
});
});
// call the success handler(s) and allow it to return a new events array
successArgs = [ events ].concat(Array.prototype.slice.call(arguments, 1));
// forward other jq args
successRes = applyAll(success, this, successArgs);
if ($.isArray(successRes)) {
return successRes;
}
}
return events;
}
});
}
// Injects a string like "arg=value" into the querystring of a URL
function injectQsComponent(url, component) {
// inject it after the querystring but before the fragment
return url.replace(/(\?.*?)?(#|$)/, function(whole, qs, hash) {
return (qs ? qs + '&' : '?') + component + hash;
});
}
});
Any help to get this working would be greatly appreciated.
I am trying to select events on fullcalendar, based on user selection.
Example: if user selects class A, then all classes with the same ID should turn green (using applied className).
I am having trouble applying classes to the other events that I can successfully select by ID. I guess my issue is combining the event objects with jQuery objects.
sample code:
eventClick: function(event) {
$(this).addClass("reg_selected"); //this works fine on selected event
var selectedID = event.id
alert(selectedID); //get event.ID, and use it to find similar ones.
var similarEvents = $("#calendar").fullCalendar('clientEvents',selectedID).addClass("reg_selected");
the error I get is:
addClass is not a function
I also tried this method of looping, and got the same error:
for (var i = 0; similarEvents.length > i ; i++){
alert(similarEvents[i].title);
similarEvents[i].className("reg_selected");
}
the alert() worked, but the className() generated the same error as above
This answer for a very similar situation, but when event classes are selected with round-trip to the event source for possible persistence in the db or checks.
Class name can be specified in the event object in the source as follows (start and end given for the context only):
[{
...
"className": "selected-event",
"start": '2017-05-01T08:30:00.0',
"ends": '2017-05-01T09:00:00.0',
...
}, ...]
The idea is that user clicks the event; ajax call to select events goes to backend; onsuccess, frontend javascript does$calendar.fullCalendar('rerenderEvents'); and receives the event source with events' classes. The immediate child of .fc-event-container gets the specified class, in the example above - selected-event.
As a result, the selection can be persisted on the backend.
clientEvents returns an array of matching objects. You need to iterate through the array (in your case similarEvents) and call addClass for each item
Update:
There is also issues using an id to update multiple events, using a filter function instead is a better way to go.
eventClick: function(event) {
var similarEvents = $("#calendar").fullCalendar('clientEvents', function(e) { return e.test === event.test });
for (var i = 0; similarEvents.length > i ; i++){
similarEvents[i].className = 'reg_selected';
$('#calendar').fullCalendar('updateEvent', similarEvents[i]);
}
},
See jsfiddle
For fullcalendar add event class, id and title see this.
if($('#eventTitle').val() == "Avilable") {
eventClass = "avilable";
}else {
eventClass = "unavilable";
}
$myCalendar.fullCalendar('renderEvent', {
id:response,
title: title.val(),
start: start.val(),
end: end.val(),
allDay: true,
className: eventClass,
color: color
}, true
);
I was able to get it working with the following code:
eventRender: function (eventObj, $el) {
$el.addClass(eventObj.ClassName);
},
eventObj.ClassName = "calendar-priority-warning"