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
}
]
});
Related
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'm using fullcalendar v2 and the sources of the events are selectable from an ul-li menu. The initial call uses the link from the first li and I may navigate through all the months in the calendar. When I use the second link, fullcalendar retrieves the events from the previous link as well as the new link. On each new select, fullcalendar remember the event sources. How can I disable this? Here my code:
$("#chgBranch li").on("click", function (event) {
event.preventDefault(); // To prevent following the link (optional)
var urlEvents = $(this).children('a').attr('href');
var branchName = $(this).children('a').text();
$('#calendarSchedules').fullCalendar('removeEvents');
$('#calendarSchedules').fullCalendar('removeEventSource');
// refill calendar
fillEvents(urlEvents, branchName);
});
function fillEvents(urlEvents, branchName) {
// change title of potlet box
var newTitle = '<i class="fa fa-calendar"></i> Available schedules for: ' + branchName;
$('#calendarCaption').html(newTitle);
$('#calendarSchedules').fullCalendar({
year: <?= $yy ?>,
month: <?= --$mm ?>, // javascript month is 0 based
date: 1,
header: {
left: '',
center: 'title',
right: 'prev,next,today'
},
defaultView: 'month',
firstDay: 1, // monday
editable: false,
slotEventOverlap: false,
selectable: true,
selectHelper: true,
dayRender: function (view, element) {
$('.fc td.fc-sun').css('background', '#E7EFEF');
$('.fc td.fc-sat').css('background', '#E7EFEF');
},
eventClick: function (event) {
$('#dueTime').show();
$('#duedate').val(moment(event.start).format('YYYY-MM-DD'));
$('#duetime').val(moment(event.start).format('HH:mm:ss'));
$('#isPartitionable').val(event.partitionable); // user clicked on partitionable dispo or not
}
});
$('#calendarSchedules').fullCalendar('addEventSource', urlEvents);
}
// load first branch item
$('#chgBranch li a:first').trigger('click');
I think you should destroy your calendar also. Because you are initializing fullcalendar every tine on sources change from ul-li.
Try below one.
$("#chgBranch li").on("click", function (event) {
event.preventDefault(); // To prevent following the link (optional)
var urlEvents = $(this).children('a').attr('href');
var branchName = $(this).children('a').text();
$('#calendarCaption').fullCalendar( 'destroy' );
// refill calendar
fillEvents(urlEvents, branchName);
});
This will work for sure. I tried locally and works fine.
I tried it with following method which also works fine, but #Chintan method is also fine:
$('#calendarSchedules').fullCalendar('removeEvents');
$('#calendarSchedules').fullCalendar('removeEventSource', storedEventSource);
And I store the event source in a hidden field once the calendar rendered.
I think by clicking on the button to display the calendar view eventLimit with different parameters, because there are a number of events on the page is a user added or modified, but not saved to the server. Users need to switch to a different view of events limit, which is in this jsfiddle
To change options when the calendar is already rendered you need to destroy the calendar first, change the option, then build the calendar again.
You can do it like this:
var options = $('.calendar').fullCalendar('getView').options;
options.eventLimit = false;
$('.calendar').fullCalendar('destroy');
$('.calendar').fullCalendar(options);
jsfiddle
The ability to change options dynamically now exists.
You don't have to destroy the calendar.
The syntax is calendar.setOption('eventLimit',false) to set the limit and calendar.getOption('eventLimit') to see what it is.
I wanted to have a button to expand/collapse all events on button click so I made a custom button like this:
calendar = new FullCalendar.Calendar($("#calendar"), {
plugins: [ 'dayGrid', 'interaction', 'timeGrid', 'list' ],
height: 700,
displayEventEnd: true,
customButtons: {
eventLimitButton: {
text: 'Expand/Collapse All',
click: function() {
if(!calendar.getOption('eventLimit'))
calendar.setOption('eventLimit',5); //I set the limit to 5
else
calendar.setOption('eventLimit',false);
}
}
},
header: {
left: 'prev,next today eventLimitButton',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
buttonText: {
today: "Today",
dayGridMonth: "Month",
timeGridWeek: "Week",
timeGridDay: "Day",
listWeek: "Weekly List"
},
//...
I have created a jquery fullcalendar, pulling the feed from a google calendar and would like to open the event details in a colorbox. So far, I am completely lost as to how to achieve this and am looking for help. Everything that I have tried so far causes the calendar not to appear at all, so there is clearly a problem. Here is the latest code that I have tried:
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: {
url: 'my feed url'
}
eventAfterRender: function(event, element, view ) {
if(event.url) {
$('a',$(element)).colorbox({
type: 'ajax'
});
}
}
})
});
</script>
I don't think I completely understand what's going on with fullcalendar's event information; so if someone can provide a working code that I can mess with, I would appreciate it. Thanks very much in advance for any help!
Simply add the eventClick property when initializing the fullcalendar object and call colorbox within,
$('#calendar').fullCalendar({
editable: true,
eventClick: function(calEvent, jsEvent, view) {
$.colorbox({html:"<h1>"+calEvent.title+"</h1><br><p>"+calEvent.start+" TO "+calEvent.end+"</p>"});
},
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
}
]
});
This is a very basic example. You can expand on it as per your requirements. Hope it helps.
I need to create more fields for my calendar ( fullcalendar hooked up to mysql with php ). And I have been reading up on eventRender but I'm not entirely sure of the syntax and where I should put it.
Currently I have the following;
$calendar.fullCalendar({
timeslotsPerHour : 4,
defaultView:'agendaWeek',
allowCalEventOverlap : true,
overlapEventsSeparate: true,
firstDayOfWeek : 1,
businessHours :{start: 8, end: 18, limitDisplay: true },
daysToShow : 7,
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: "json-events.php",
eventRender : function(calEvent, $event) {
calEvent.distributor //this is my new field
},
But I its not working and I can't find any working examples to compare it with.
Thanks
Thanks for the feedback I have been able to add my custom fields using the eventRender. So now not just body and description are being passed.
My main issue now is passing the date values to the database as these are not being saved. Does anyone know of any examples where this is being used. I would really really appreciated it.
In version 4 of fullcalendar, to get non-standard field is changed a little bit. Now it accepts just one parameter as Event Object:
events: [
{
title: 'My Event',
start: '2010-01-01',
description: 'This is a cool event'
}
// more events here
],
eventRender: function(info) {
console.log(info.event.extendedProps.description);
}
Note: You can access an additional field in this way: info.event.extendedProps.description
Check documentation
you can include your own non-standard fields in each Event Object. FullCalendar will not modify or delete these fields.,this example help you eventRender
and see Event Object
Here is how I used eventRender to add some categories to each event. Then I can filter events based on category name
eventRender: function(event, element) {
element.attr("categories",event.categoryname)
}
Simply awesome calendar
Some attributes here:
{
title: 'Birthday Party',
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: false,
backgroundColor: "#00a65a", //Success (green)
borderColor: "#00a65a" //Success (green)
},