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 ...
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 have created a scheduler with following events and resources
var sampleEvents = [{ 'id': '1',
'resourceid': '27',
'start': '2018-09-19T07:00:00',
'stop': '2018-09-19T16:00:00',
'title': 'Message 1',
}];
var sampleResources = [{
facility_type: "Message Type",
id: '27',
title: "Message 1"
}];
$('#calendar').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
now: currenDate //Today's Date,
editable: false,
header: {
left: 'today prev,next',
center: 'title',
right: 'month,timelineDay,agendaWeek'
},
defaultView: 'month',
resourceGroupField: 'facility_type',
resourceColumns: [
{
labelText: 'Facility',
field: 'title',
width: 150,
},
],
resources: sampleEvents,
events: sampleResources,
dayClick: function(date, jsEvent, view) {
if(view.name == 'month' || view.name == 'basicWeek') {
$('#calendar').fullCalendar('changeView', 'timelineDay');
$('#calendar').fullCalendar('gotoDate', date);
}
},
});
}, function (error) {
});
The events are showing in month view, but they are not shown in day view. Can someone tell me where the problem is?
In JavaScript, variable and property names are case-sensitive. Therefore
'resourceid': '27'`
should be
'resourceId': '27'
as per the example in the documentation. The event isn't showing the timeline view because as far as fullCalendar is concerned you didn't tell it which resource to associate it with.
Assigned objects are improper. If you pass the correct objects. It will work fine
resources: sampleResources,
events: sampleEvents
You can refer below working jsfiddle link
http://jsfiddle.net/jso51pm6/3769/
resources: sampleEvents,
events: sampleResources,
You filled them wrong. Switch them. It will work.
resources: sampleResources,
events: sampleEvents,
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:
So I have spent the past 2 weeks trying to figure this out and tried all other previously proposed answers. I'm still not able to get it right.
I'm trying to setup a calendar where the recurring events are filtered within the specified date range.
Example: "My event" - every Thursday at 2:15PM - Between 2017/06/01 and 2017/06/30.
I've unsuccessfully tried the solutions proposed on this link:
Recurring Events in FullCalendar
In the end end I decided to follow this route:
https://github.com/c-trimm/moment-recur
It's a moments.js plugin (moment-recur) that should process the date range filter.
Please help!
My json feed returns:
[{
"title":"my event",
"start":"2017-06-01T14:15",
"dow":"4",
"recurrence":"moment().recur[{
start:\"2017-06-01\",
end:\"2017-06-30\"}]"
}]
My calendar works except for the fact that it will not stop publishing the event on Thursdays forever. I don't want to have to manually duplicate the event.
<link rel="stylesheet" type="text/css" href="/fullcalendar.css">
<script src='/jquery.min.js'></script>
<script src='/moment.min.js'></script>
<script src='/moment-recur.js'></script>
<script src='/fullcalendar.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listWeek,listDay'
},
validRange: function(nowDate) {
return {
start: nowDate.clone().subtract(2, 'months'),
end: nowDate.clone().add(2, 'months')
};
},
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: { buttonText: 'Day' },
listWeek: { buttonText: 'Week' },
},
hiddenDays: [ 5 ], // hide Fridays
editable: true,
eventLimit: true, // allow "more" link when too many events
businessHours: [ // specify an array instead
{
dow: [ 1 ], // Monday,
start: '12:30', // 8am
end: '22:00' // 6pm
},
{
dow: [ 2, 3 ], // Tuesday, Wednesday
start: '9:30', // 8am
end: '22:00' // 6pm
},
{
dow: [ 4, ], // Thursday
start: '13:00', // 10am
end: '22:00' // 4pm
},
{
dow: [ 7 ], // Sunday
start: '11:00', // 10am
end: '18:30' // 4pm
}],
events: 'my-event/feed',
//THIS IS WHERE I GET STUCK!!!!!
// I'm trying to implement this:
eventRender:
recurrence = moment().recur({
start: "01/01/2014",
end: "01/01/2015"
});
});
});
</script>
<div id='calendar'></div>
I believe i'm suppose to write it as a function but no mater what I try it either brakes the calendar or doesn't return any results. Thanks in advance to you all!
Below is the fiddler link for recurring events in fullcalendar.
http://jsfiddle.net/slicedtoad/duu0dx2t/1/
You need to specify dow property in event as specified in example.
$('#calendar').fullCalendar({
defaultDate: moment(),
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
events: [{
title:"My repeating event",
start: '10:00', // a start time (10am in this example)
end: '14:00', // an end time (6pm in this example)
dow: [ 1, 4 ] // Repeat monday and thursday
}],
});
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'
}
]