I am working on a web app using the FullCalendar JQuery plugin to display the absence/presence of workers each day in a company.
I need to display several types (or fields) of information in each day. For example, I would like to display for each day: a Title (ex. "John is absent"), and Percentage(ex, "95% assistance"). And I would like this percentage to appear with a different format, on the bottom right corner of each day's box.
As far as I've seen, the possible fields to describe an event are basically these ones:
events: [
{
title: 'John is sick',
start: '2013-11-19',
allDay: true
},
{
title: 'Mike is on vacation',
start: '2013-11-21',
end: '2013-11-26',
allDay: true
}
]
Is there any way to add more fields (like the porcentage of assistance) to a FullCalendar day?
Edit: thanks to Henrique C's answer I managed to do it. Just to complete a little more the answer I would like to add that besides, doing what Henrique said in his answer, it is also necessary to do something like this:
$('#calendar').fullCalendar({
events: [
{
title: 'My Event',
start: '2010-01-01',
description: 'This is a cool event'
}
// more events here
],
eventRender: function(event, element) {
element.qtip({
content: event.description
});
}
});
Non-standard Fields This was taken from Fullcalendar website.
In addition to the fields above, you may also include your own non-standard fields in each Event Object. FullCalendar will not modify or delete these fields. For example, developers often include a description field for use in callbacks such as eventRender.
You can add any fields you want, fullcalendar will not change them.
events: [
{
title: 'John is sick',
start: '2013-11-19',
allDay: true,
description: 'Hurrayyyyyyyyyy',
myotherspecialfield: ':P'
},
{
title: 'Mike is on vacation',
start: '2013-11-21',
end: '2013-11-26',
allDay: true,
description: 'Hurrayyyyyyyyyy'
myotherspecialfield: ':P'
}
]
Related
I am currently working on Fullcalendar v4 with rrule plugin
I have this code
var calendarEl = document.getElementById('calendardemo');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid', 'momentTimezone', 'rrule', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
events: [
{ // standard property
title: 'This is sample event',
start: '2019-12-29',
end: '2019-12-31'
},
{
title: 'event with rrule plugin',
rrule: {
freq: 'weekly',
interval: 5,
byweekday: [ 'mo', 'fr' ],
dtstart: '2019-12-29T10:30:00',
until: '2020-12-31'
}
}
]
});
calendar.render();
please note:
{ // this is the standard (No issues)
title: 'This is sample event',
start: '2019-12-29',
end: '2019-12-31'
}
{ // Not updating on change view
title: 'event with rrule plugin',
rrule: {
freq: 'weekly',
interval: 5,
byweekday: [ 'mo', 'fr' ],
dtstart: '2019-12-29T10:30:00',
until: '2020-12-31'
}
}
Link to a demo
Now when I drag & drop "This is sample event" then change view grid or click < > it stays updated. but when I drag & drop "event with rrule plugin" then change view grid or click < > it's not updated. it just stays where it was loaded in first load. Please help. Thanks !
You might have to add a form that would allow a user to change repeated rules when they begin to drag them. Otherwise, could you describe expected behaviour after the user drops repeated event on another date. What changes would be applied to a rule?
I am using FullCalendar to try and display both a year list of events and a calendar view of events. Both are having problems with the same code structure. (So I am using the list one as my example.
I am trying to set an end date on my recurring events. They can be displayed on multiple days of the week (this example is only Saturdays). I have 2 possible solutions that don't meet my needs.
Solution one is the following:
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultView: 'listYear',
views: {
listYear: { buttonText: 'Diary Dates' }
},
header: {
left: '',
center: '',
right: 'prev title next'
},
events: [{
title : "Shoalhaven Heads Seafood and Fresh Produce Fair",
url: 'https://dev.allswell.com.au/event/shoalhaven-heads-seafood-and-fresh-produce-fair/',
backgroundColor: '#dd4242',
borderColor: '#dd4242',
start: '08:00',
end: '13:00',
dow: [6],
ranges: [{
start: '2018-04-21T08:00:00',
end: '2018-11-03T13:00:00',
}],
},
{
title : "BOWIE UNZIPPED at the BOWLO!",
url: 'https://dev.allswell.com.au/event/bowie-unzipped-at-the-bowlo/',
backgroundColor: '',
borderColor: '',
start: '2018-04-27',
allDay: true,
}]
});
});
</script>
This successfully produces recuring events on the days I wanted. However the ranges do not reem to work, as they are printed for every Saturday until the end of time (Should only go until November this year).
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultView: 'listYear',
views: {
listYear: { buttonText: 'Diary Dates' }
},
header: {
left: '',
center: '',
right: 'prev title next'
},
events: [{
title : "Shoalhaven Heads Seafood and Fresh Produce Fair",
url: 'https://dev.allswell.com.au/event/shoalhaven-heads-seafood-and-fresh-produce-fair/',
backgroundColor: '#dd4242',
borderColor: '#dd4242',
start: '2018-04-21T08:00:00',
end: '2018-11-03T13:00:00',
dow: [6],
},
{
title : "BOWIE UNZIPPED at the BOWLO!",
url: 'https://dev.allswell.com.au/event/bowie-unzipped-at-the-bowlo/',
backgroundColor: '',
borderColor: '',
start: '2018-04-27',
allDay: true,
}]
});
});
</script>
I then tried another option, adding the date to the start/end parameters. This did the opposite, It was able to limit the events to the date range specified, however they would not be on specific days, but rather it would stretch over all dates.
I have attached images of both outcomes below.
1st Solution 2018:
1st Solution 2019:
2nd Solution 2018:
2nd Solution 2019:
I'm using FullCalendar in a Bootstrap-based website in which I have two columns, the left one uses 9 bootstrap columns and the aside uses 3, and the calendar is in the aside.
The problem is events appear cropped due to the lack of space.
What I want to do is that, instead of the event being cropped, the day height will grow to accomodate the content.
My code is as follows:
$(document).ready(function() {
$("#calendar").fullCalendar({
locale: 'es',
events: [
{
title: 'Prueba 1',
start: '2017-05-04'
},
{
title: 'Prueba 2',
start: '2017-05-23'
},
{
title: 'Prueba tiempo',
start: '2017-05-24T12:30:00',
allDay: false
}
],
eventClick: function(calEvent, jsEvent, view) {
alert(calEvent.title + " : " + moment(calEvent.start).format("DD/MM hh:mm"));
}
});
});
How can I accomplish that?
Thank you.
We currently use an Excel spreadsheet to display the schedules of our 5 member management team. It's a pretty easy thing to do as we only have three shifts: D = day shift, E for evening, and M for midnight. Cell comments show any specific activities on a particular shift.
The time has come to move away from Excel into a more dynamic environment and I'd like to use FullCalendar along with my MongoDB and some Ruby scripting. However, not being a JS expert, I want to know if it is possible to view all 5 schedules on one calendar? Perhaps a checkbox next to each managers name that will display their calendar if checked, or all managers if all checked type of environment.
I did not see this type of functionality on the docs, so the next best place to find out is to ask the experts here!
Thanks so much!!
First you'd need scheduler add-on of fullcalendar and you are good to go.
Heres an example
var calendar = $('#calendar').fullCalendar({
schedulerLicenseKey: 'your key here',
header: {left: 'prev,next today', center: 'title', right: ''},
selectable: true,
defaultView: 'agendaDay',
ignoreTimezone: true,
allDayDefault: false,
unselectAuto: false,
editable: false,
slotLabelFormat:"HH:mm",
events: [ //the events example
[
id: 1,
type: null,
resourceIds: [
21
],
title:"Meeting With John",
start: 2017-02-13 09:00:00,
end: 2017-02-13 11:20:00,
],
[
id: 2,
type: null,
resourceIds: [
22
],
title: "Appointment With Doctor",
start: 2017-02-13 10: 00: 00,
end: 2017-02-13 13: 20: 00,
],
],
resources: [ // these resources examples are the users you want to create(where its id is mapped to resourceIds in events JSON )
[
id: 21,
title: "User A"
],
[
id: 22,
title: "User B"
]
]
});
<div id="calendar" style="width:100% !important">
</div>
See the snapshot for the example.
Let me know how it works out ...
I'm using the fullCalendar jQuery plugin and it has options for adding events to the calendar as such:
$('#calendar').fullCalendar({
editable: false,
events: [
{
title: 'Just some random event',
start: '2011-04-30'
},
{
title: 'Long Event',
start: '2011-05-01'
}
]
});
I'm trying to implement this into a Drupal 7 view. I will have loop through a list of elements and grab the hidden timestamp to populate the calendar. I know how to loop through the elements and grab the values, but I'm not sure how to add the values to an array I could use to populate the events option.
Create an empty array:
var events = [];
Then you can add objects to it in your loop:
var title = "Just some random event";
var start = "2011-04-30";
events.push({ title: title, start: start });
Now you can use the array in the calendar:
$('#calendar').fullCalendar({
editable: false,
events: events
});
Have you tried something like that?
var yourEventsArray = [];
$.each(data, function(index, value) {
yourEventsArray.push({
title: value.title,
start: value.timeStamp
});
});