I am looking for a way to have a different eventClick depending on the eventSource and to have some eventSources that do not have an eventClick. This way I can have an event open a different pop up depending on it's source.
I started with this example:
$(document).ready(function() {
$('#calendar').fullCalendar({
height: 600,
theme: true,
eventSources: [
{
url: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
className: 'fc-event-title-event'
} ,
{
url: 'testCalendar',
color: 'red',
currentTimezone: 'America/New_York',
editable: true
}
],
eventClick: function(calEvent, jsEvent, view ) {
alert('Event: ' + calEvent.title);
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('View: ' + view.name);
//window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
if (bool) {
$('#loading').show();
}else{
$('#loading').hide();
}
}
});
});
The eventClick is fired for both sources. It seems there would be a way to customize the eventClick per source, but I am not seeing it in the documentation nor in countless searches in stackoverflow and google.
Thank you in advance.
Hmm I don't think that eventSources has an option for eventClick. You could use the calEvent object and check it's source to determine how to handle the click event. Outside of that I don't think fullcalendar has the built in functionality you're looking for.
Hope this helps.
Related
Hello, everybody. I am using fullcalendar in my symfony project(Symfony + RiotJS). I want to load the events dynamically when I press 'prev' or 'next' button. So I make a new calendar when the page is mounted and set the calendar events as 'null'. As you can see on the code, I called the loadItems() function to load the events again when I press 'prev' or 'next' button. But I can't sure how to update the events of calendar in the loadItems() function. I'd really appreciate if someone knows how to fix it. I will wait for reply.Thanks.
onMounted() {
self = this;
let calendarEl = this.$('#calendar');
this.state.calendar = new Calendar(calendarEl, {
plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek'
},
buttonText: {
today: 'Heute',
month: 'Monat',
week: 'Woche',
day: 'Tag',
},
datesSet: function() {
let view = this.currentData.dateProfile.renderRange;
let start = view.start.toISOString().substring(0, 10);
let end = view.end.toISOString().substring(0, 10);
if (start != getSearchParam('begin')) {
updateSearchParam('begin', start);
updateSearchParam('end', end);
self.loadItems();
}
},
events: this.state.events,
initialDate: getSearchParam('date', '') ? getSearchParam('date', '') : this.moment().format('Y-MM-DD'),
});
this.state.calendar.setOption('locale', 'de');
this.state.calendar.render();
updateSearchParam('date', '');
this.update();
this.loadItems();
},
And this is the loadItems() function.
loadItems() {
this.state.loading = true;
this.update();
if (this.state.request) {
this.state.request.abort();
}
this.state.request = this.API.get('/events', this.getParams());
this.state.request.then(response => {
this.state.items = response.data.items;
this.state.filteredItems = null;
this.state.total = response.data.total;
this.state.events = [];
response.data.items.forEach( item => {
let event = {
id: item.id,
title: item.event.name,
start: this.moment(item.begin).format('Y-MM-DD'),
end: this.moment(item.end).format('Y-MM-DD'),
backgroundColor: item.event.type.bgColor,
borderColor: '#ffffff',
textColor: this.getTextColor(item.event.type.bgColor),
};
this.state.events.push(event);
});
this.state.loading = false;
this.update();
//after I gets the events I want to update the events of calendar here
//this.state.calendar.refetchEvents();
this.update();
this.state.request = null;
});
return this.state.request;
},
I just focused how to update events when I press the 'prev' and 'next' button.
I searched a lot about the method and there were many solutions.
For example:
$('#calendar').fullCalendar('updateEvents', events)
$('#calendar').fetchEvents()
But these methods are not working on my problem.
Finally, I found a simple method.
It is a setOption() method.
As you can see on my above code, there are options like 'datesSet' and 'events'.
The 'datesSet' option is called everytime when I press the buttons (prev, next, today, month, week and etc).
And the 'events' option is for events to show on the current calendar view.
I used setOption() method like this.
this.state.calendar.setOption('events', this.state.events);
It worked well for me.
I suggest the people who read my question and answer, to read the tutorials and documentations carefully.
Fullcalendar is really well-built javascript package and we can use it very simply.
I'm trying to retrieve a list of events from an ajax call. I use the following code.
document.addEventListener("DOMContentLoaded", function()
{ var calendarEl = document.getElementById("id_d_agenda_1");
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultDate: '2019-08-12',
editable: true,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
selectMirror: true,
select: function(arg) {
var title = prompt('Event Title:');
if (title) {
calendar.addEvent({
title: title,
start: arg.start,
end: arg.end,
allDay: arg.allDay
})
}
calendar.unselect()
},
events: function(arg) {
$.ajax({
url: 'd.php',
dataType: 'json',
data: {
cmd:'getdata',
start:arg.startStr,
end:arg.endStr,
tz:arg.timeZone,
component:'d_agenda_1',
},
success: function(doc) {
$(doc).each(function() {
calendar.addEvent( this );
})
}
})
}
})
calendar.render();
});
While debugging my javascript I can see the rows of events appear in 'doc'. First I tried to bulk add them to the agenda, but that didn't seem to work. Now I'm adding them one-by-one, buth they still don't appear. I have checked the this variable in the debugger and it shows a single event:
title:"value", start:"2019-08-01". In fact I'm using the sample list that comes with the package. Can someone point me to the right direction in what I'm doing wrong?
other options I tried (with no luck ;-):
I tried to leave the jquery out, but with similar effect:
success: function(doc) {
doc.forEach(function(value) {
calendar.addEvent( value );
})
}
success: function(doc) {
$(doc).each(function() {
calendar.addEvent({
title:this.title,
start:this.start
});
})
Not sure if it's helpful, but I added the selectable option and tested the select option. The calendar.addevent on the select: doesn't add the event either. Since this is copied from the sample i'm quite confused now. Fun part is that if you replace the ajax part with a regular [] expression that all works well. Even the selectable options, so there's definitely something wrong with my ajax implementation, in regards to this component.
According to the DOCS you need to have a successCallback that will return the events to the calendar.
Here is the docs https://fullcalendar.io/docs/events-function
Here is a simple Demo https://codepen.io/nasser-ali-karimi/pen/gOOJrWV?editors=0010
And in short, I can say that you need to set the events like this.
events: function(info, successCallback, failureCallback) {
successCallback([
{"resourceId":"a","title":"event 1","start":"2019-11-23","end":"2019-11-25"},
{"resourceId":"b","title":"event 3","start":"2019-11-24T12:00","end":"2019-11-25T06:00"},
{"resourceId":"b","title":"event 4","start":"2019-11-24T07:30","end":"2019-11-24T09:30"},
{"resourceId":"b","title":"event 5","start":"2019-11-24T10:00","end":"2019-11-24T15:00"},
{"resourceId":"a","title":"event 2","start":"2019-11-24T09:00","end":"2019-11-24T14:00"}
])
}
you didn't mention the events data that comes from Ajax request, so I can say you need to provide the data like what said on docs.
Addition
Note: Event's date are on 11/28 and 11,29 so navigate to those dates to see the events.
Demo https://codepen.io/nasser-ali-karimi/pen/qBBGVbG?editors=0010
events: function(info, successCallback, failureCallback) {
var arrevents = [];
jQuery.get( "https://api.myjson.com/bins/16ubhe", function( data ) {
// var response = JSON.parse(data);
// $.each(response, function(k, v) {
// arrevents.push(v);
// });
arrevents = data;
successCallback(arrevents);
});
},
I am trying to create a view in fullcalendar to show when some people are off duty.
People might be off the from eg. 10:00AM to 09:00AM the next day and I would like to show the event in the allDay-slot in fullcalendar and also show the start and end of the event as part of the title.
If I set the allDay-property on the event, it will display the event in the allDay-slot but it displays the start and end as '00:00' instead of '10:00' and '09:00'.
The other option I have tried is setting a custom property on the event-object called isDayOff, and then in the eventRender-callback set the standard allDay-property on the rendered event. This seems to work, but the event is not rendered in the allDay-slot on load, but only rendered in the allDay-slot when clicking back or forth to the prev/next day and then back.
How do I create this view?
I have created a fiddle to exemplify: http://jsfiddle.net/2ptqe5na/31
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: '',
center: 'title'
},
defaultDate: '2018-07-23',
defaultView: 'agendaDay',
events: [
{
title: 'A',
start: '2018-07-23T10:00:00',
end: '2018-07-24T09:00:00',
allDay: true //standard property
},
{
title: 'B',
start: '2018-07-23T08:00:00',
end: '2018-07-23T08:30:00',
isDayOff: true //custom property
}
],
eventClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
},
eventRender: function(event, element, view)
{
if(event.isDayOff==true)
{
event.allDay = event.isDayOff;
}
event.title = event.title+"\n "+event.start.format('MMM DD HH:mm')+" - "+event.end.format('MMM DD HH:mm');
}
});
});
My question is pretty straightforward: I want to load a details page from the database on eventClick. So I just need to know how to access the event attributes on the click.
If my question is in any way ambiguous, please let me know and I'll clarify.
Thank you!
The eventClick function returns the original event and it will preserve the attributes you've set (unless they have the same key as something used internally).
$('#calendar').fullCalendar({
events: [
{
title: 'My Event',
start: '2010-01-01',
myId: 123
}
// other events here
],
eventClick: function(event) {
if (event.myId) {
alert(myId);
}
}
});
For version 5
Source : https://fullcalendar.io/docs/eventClick
eventClick: function(info) {
alert('Event: ' + info.event.title);
alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
alert('View: ' + info.view.type);
// change the border color just for fun
info.el.style.borderColor = 'red';
}
In version 5.11.3, You can do it like this.
First, you have to set id to an event
events: [
{
id: 1,
title: "All Day Event",
start: "2020-09-01",
color: '#FF0000',
},
],
Then you can access it by with event object.event.id
eventClick: function (info) {
alert('Event: ' + info.event.id);
}
You can also pass in info as a parameter to get other values from calendar
eventClick: (info)=> {
alert(info.id); //ID
var eventTitle = info.title; //TITLE
var eventVenue = info.venue; //VENUE
var eventDescription = info.description; //DESCRIPTION
}
For some reason fullcalendar won't display any events that occur after 7PM in the basicDay view.
The events show up in month view, but not in basicDay view.
Any thoughts would be appreciated.
Here is my code. I have two calendars on the same page. The first one is month view, the second is basicDay view.
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
weekMode:'variable',
events: $.fullCalendar.gcalFeed(
"http://www.google.com/calendar/feeds/google_account/public/basic"
),
eventClick: function(event) {
if (event.url) {
window.open(event.url,"_blank","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=750, height=450");
return false;
}
}
});
$('#calendar_min').fullCalendar({
height:193,
header:false,
defaultView: 'basicDay',
events: $.fullCalendar.gcalFeed(
"http://www.google.com/calendar/feeds/google_account/public/basic"
),
eventClick: function(event) {
if (event.url) {
window.open(event.url,"_blank","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=750, height=450");
return false;
}
}
});
});
This is caused because you're located in EST. When creating a new event the time is 12:00am GMT, so -5 hours = 7pm. You may want to look at using ignoreTimezone at http://arshaw.com/fullcalendar/docs/event_data/
What error are you getting? When I replace your google feed with an event after 7pm it displays fine. (Although your example has an extra )}; that needs to be removed.
$('#calendar_min').fullCalendar({
height: 193,
header: false,
defaultView: 'basicDay',
events: [
{
title: 'Day',
start: new Date(y, m, d, 20),
end: new Date(y, m, d, 21),
description: 'long description3',
id: 2
}],
eventClick: function(event) {
if (event.url) {
window.open(event.url, "_blank", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=750, height=450");
return false;
}
}
});
I had a similar issue. The Google Calendar timezone was EDT and the last 4 hours of event were missing from the display.
I changed fetchAndRenderEvents() in fullcalendar.js (line 849) to fix the issue.
It was:
function fetchAndRenderEvents() {
fetchEvents(currentView.start, currentView.end);
// ... will call reportEvents
// ... which will call renderEvents
}
I added one day to the currentView.end
function fetchAndRenderEvents() {
// Add 1 day to end to ensure all events are fetched when the time zone is applied.
fetchEvents(currentView.start, currentView.end.add(1, 'days'));
// ... will call reportEvents
// ... which will call renderEvents
}