I am using fullcalendar version 4 to insert/update recurring events. I have successfully created recurring events by inserting an rrule into my db and then ussing the rrule plugin for fullcalendar to display it.
When the events load they look like this as a sample JSON:
[{
allDay: false
color: "#2A2A2A"
date_created: "2019-05-17 12:09:46"
duration: "00:45:00"
end: ""
id: "23639"
resourceId: "1"
rrule: "DTSTART=20190514T111500Z;FREQ=DAILY;INTERVAL=1"
start: ""
textColor: "#FFFFFF"
title: "BLOCK"
},
{
allDay: false
color: "#2A2A2A"
date_created: "2019-05-17 12:09:46"
duration: null
end: "2019-05-15 11:45:00"
id: "23639"
resourceId: "1"
rrule: null
start: "2019-05-15 11:00:00"
textColor: "#FFFFFF"
title: "BLOCK2"
},
]
The recurring events show properly if there's an rrule present.
I am now working on a way to update/view the recurring events. I need to catch the events, for instance, that are recurring when they are moved/resized to start.
The event objects DO NOT have a rrule property to them to check. I was trying this:
eventClick: function(info) {
if (info.event.rrule) {
alert('this is a recurring event!');
}
}
... however the sample alert doesn't show when a recurring event is clicked. The event properties do NOT have rrule (and they are not in info.event.extendedProps).
How can I catch recurring events so I can manipulate them?
My next step is to catch the RRULE and convert it to text so the user can read what how the recurring event is set. So I'm a bit stumped on how to retrieve it.
From console.log of the info when it's clicked I can see the properties of the event that's recurring. RRULE is not there. It is also not in the extendedProps object.
allDay: (...)
allow: (...)
backgroundColor: (...)
borderColor: (...)
classNames: (...)
constraint: (...)
durationEditable: (...)
end: (...)
extendedProps: (...)
groupId: (...)
id: (...)
overlap: (...)
rendering: (...)
source: (...)
start: (...)
startEditable: (...)
textColor: (...)
title: (...)
url: (...)
You can get at the rrule object by info.event._def.recurringDef
This object has properties duration, typeData and typeId
The typeData property holds the actual RRule object
Related
How do I add and then access additional values My_Custom_Value to the Event Object?
events: [
{
title: 'My Title',
My_Custom_Value: 'some details',
allDay: false,
start: 1501056000000,
end: 1501057800000
}
],
Access your value through "extendedProps":
A plain object holding miscellaneous other properties specified during parsing. Receives properties in the explicitly given extendedProps hash as well as other non-standard properties."
https://fullcalendar.io/docs/event-object
eventRender: function(info){
console.log("_______ info _______\n");
console.log(info.event.extendedProps.My_Custom_Value);
}
Use extendedProps. You can include them in the event object directly (https://fullcalendar.io/docs/event-object), or add them afterwards using method Calendar::setExtendedProp (https://fullcalendar.io/docs/Event-setExtendedProp)
events: [
{
title: 'My Title',
My_Custom_Value: 'some details',
allDay: false,
start: 1501056000000,
end: 1501057800000
extendedProps: {
description: 'whatever',
madeupProperty: 'banana'
}
}
]
The answer to this is contained in the Event Parsing documentation at https://fullcalendar.io/docs/event-parsing.
The way you're setting the custom property in your object is fine. As per that documentation, fullCalendar will read it, and then place it in the extendedProps property of the event object it creates internally.
So if you then need come to access that event later (e.g. via one of fullCalendar's callbacks such as eventClick, perhaps) you would use event.extendedProps.My_Custom_Value to access it.
My goal is to have 2 different FullCalendar elements that stay in sync. I'm not doing ANY network calls, simply client side arrays at this point.
When I add an event (say through a click or just right after it's built) the calendar does not actually re-render as the documentation claims.
I've also attempted to use the "renderEvents" and "renderEvent" flavors but that seems unnecessary since "updateEvents" would/should update the rendering of these events. The problem I also ran into is the "renderEvent" on the list version of the calendar does not show the event I'm adding if it's out of the range of that calendar.
const events = [{
title: 'All Day Event',
start: TODAY
},
{
title: 'Long Event',
start: TODAY,
end: NEXTDAY
}
]
$("#calendar").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
events
})
$("#events").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
defaultView: 'listMonth',
events
})
// Now add a new one
events.push([{
title: 'Event added',
start: YESTERDAY
}])
$('#calendar').fullCalendar('updateEvents', events)
$('#events').fullCalendar('updateEvents', events)
Here's a recreation of the issue:
https://jsfiddle.net/Kikketer/7d92utp5/
The use case is pretty simple: Add a new event to the list of events, render the events on the calendar.
firstly change your pushing event to object from array.
events.push({
title: 'Event added',
start: YESTERDAY
});
Now, you have many choice to do that. I will write 2 way for you.
a.
$('#calendar').fullCalendar( 'removeEvents');
$('#calendar').fullCalendar('addEventSource', events);
https://jsfiddle.net/7d92utp5/49/
b. 1) Change events param to function
$("#calendar").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
// at here
events: function (start, end, timezone, callback) {
callback(events);
}
});
2) Use refetchEvents instead updateEvents
$('#calendar').fullCalendar('refetchEvents');
https://jsfiddle.net/7d92utp5/53/
I've searched the documentation and found nothing about associating a FullCalendar Resource with Event Sources from Google Calendar.
This is the relevant code:
resources: [
{ id: 'room01', title: 'Room 1' },
{ id: 'room02', title: 'Room 2' },
{ id: 'room03', title: 'Room 3' },
{ id: 'room04', title: 'Room 4' }
],
eventSources: [
{
id: 'e1',
resourceId: 'room01',
googleCalendarId: '[GOOGLE CALENDAR ID #1]'
},
{
id: 'e2',
resourceId: 'room02',
googleCalendarId: '[GOOGLE CALENDAR ID #2]'
}
],
Please, help :-)
In that you can associate any event with anything, the specific bit about google calendar I cannot really answer, however from what you showed here (i.e. adding the googleCalendarId to your events as you have), I am thinking what you may be looking for is the next piece of the puzzle, being the eventClick part ?
For what you have I would think this would look something like :
eventClick: function(calEvent) {
if (calEvent.googleCalendarId) {
var edit_url = "/url_to_get_to_the_google_calendar/" + calEvent.googleCalendarId + "/";
window.open(edit_url,"_self");
return false;
}
},
I use the same technique as you showed above to add various associations to my events, and then simply add eventClick code (which would simply follow your code above in your calendar page entry) - except I am adding my data in methods in the scheduler views.py methods.....but it's the same concept !
Does that help ? I was not clear on what actually you were needing help with !
I'm having trouble adding events to fullCalendar when I specify a source parameter in the event I pass to renderEvent - what am I doing wrong?
If I specify a source, the event does not (ever) show on the calendar... Looking at fullcalendar.js v2.3.2 line 9348 Could it be that the cache.push(events) is incorrectly placed in the if statement just above?
(The scenario here is that when I add new events, I want them to become part of a particular source, not fullCalendar's internal "sticky" source).
Thanks!
Explanation
You should not specify a source property.
From event object documentation:
source: Event Source Object. Automatically populated.
A reference to the event source that this event came from
I've created a plunker with very Basic fullCalendar 2.3.2 with creation of event with source when you can check how the source property works:
So if you define an event like:
{
title : 'mytitle',
start : moment(),
allDay: false,
id: 1,
description: 'my event from source'
}
You can check, in the console of the plunkr, that the event receives a Source property, automatically populated, with the content:
event.source
{
events: Array[1],
className: Array[0],
origArray: Array[1]
}
Proposed solution
So for your goal you should define your events as items in an array source:
var mySource1 = [{
title : 'Source 1',
start : moment(),
allDay: false,
id: 1,
description: 'my event 1'
}];
var mySource2 = [{
title : 'Source 2',
start : moment().add(1, 'days'),
allDay: false,
id: 2,
description: 'my event from 2'
}];
And to attach them to the calendar you can:
Option a
Define in your calendar not your events, but your sources using eventSources as an array of your sources:
$('#calendar').fullCalendar({
(...)
eventSources:[mySource1, mySource2],
});
Option b
Add your source via add event source method
.fullCalendar( 'addEventSource', mySourceN );
Option c
Updating eventSource:
If you want to add dynamically an event to a specific source, the only way you can achieve it is removing and adding again the source:
So something like:
var myNewEvent: {
title : 'mytitle',
start : moment(),
allDay: false,
id: 1,
description: 'my event from source'
};
mySource.push(myNewEvent);
$('#myCalendar').fullCalendar( 'removeEventSource', mySource);
$('#myCalendar').fullCalendar( 'addEventSource', mySource);
Honestly, I dislike this C option, but maybe is what you need. There's an open issue with this situation in which Adam Shaw propose that solution.
Im working in symfony2.5 framework.
In my app, i have a calendar page implemented with full calendar.js jquery plugin. (http://fullcalendar.io/).
I have a event table with records of employees' events.
How to display these events in the calendar page.
my calendar page's js:
$( '.calendar' ).fullCalendar({
header: {
left: 'prev,next,today',
center: 'title,',
right: 'month,agendaWeek,agendaDay'
}
});
Can anyone help me? Thanks in Advance!
First you have to parse your events as fullCalendar event object, following event documentation
var myEvent = {id: 1, title: 'myTitle', start: moment(...)}
Then, you should add those events to an array, function, json...
var mySourceEvents = [myEvent, myOtherEvent];
Finally you could set that array in your fullcalendar config as a source.
$('#calendar').fullCalendar({
eventSources: [
mySourceEvents
]
});
Or... You could add your events directly as an array:
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09T12:30:00',
allDay : false // will make the time show
}
]
});