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
}],
});
Related
I'm using fullcalendar and i want to add an event to an specific day and hour but the event get render on all of the days. (time slot works)
I went through all the documentation but couldn't find any error.
My code:
var calendar = new FullCalendar.Calendar(calendarEl, {
events: [{ // My event
title: 'The Title',
start: '2020-08-05',
end: '2020-08-06',
startTime: '09:00:00',
endTime: '10:00:00',
allDay: false
}],
contentHeight: 'auto',
initialDate: new Date('2020-08-01'),
validRange: {
start: '2020-08-01',
end: '2020-08-18'
},
titleFormat: { year: 'numeric', month: 'long', day: 'numeric' },
headerToolbar: {
start: 'title',
center: '',
end: 'prev,next'
},
initialView: 'timeGridWeek',
slotDuration: '01:00:00',
slotMinTime: '09:00:00',
slotMaxTime: '18:00:00',
weekends: false,
locale: 'es',
allDaySlot: false,
});
Here is my codepen with the error and the code im using!
https://codepen.io/alfijuan/pen/yLeqwer?editors=1010
Hope anyone can help!
Thanks!
You've specified it as a recurring event. Remove the startTime and endTime properties and merge the time data into the start and end properties together with the date.
{
title: 'The Title',
start: '2020-08-05 09:00:00',
end: '2020-08-06 10:00:00',
allDay: false
}
Demo: https://codepen.io/ADyson82/pen/ZEQMEvY
See https://fullcalendar.io/docs/v5/event-object and https://fullcalendar.io/docs/v5/recurring-events to understand the difference and the properties required for a single event vs a recurring one
I'm working with a legacy codebase that uses full calendar (2.3.1) in a react based portal to display a resource view as seen in the picture attached.
The calendar starts to get very slow whenever i move a date forwards or backwards or select a date from date picker. However this problem arises only when there are a lot of columns in resource view and when there are less columns like 4 or 5, the calendar works perfectly.
Is there a way to improve the performance on this view?
Here's the code that initalizes the calendar:
$('#calendar').fullCalendar({
themeSystem: 'bootstrap3',
header: false,
events: [],
views: {
multiColAgendaDay: {
type: 'multiColAgenda',
duration: { days: 1 },
numColumns: employees.length,
columnHeaders: employees,
},
},
defaultView: defaultView,
eventMouseover: this.eventMouseover,
//eventMouseout: this.eventMouseout,
eventClick: props.onSelectEvent,
nowIndicator: true,
dayClick: this.selectTimeSlot,
eventDrop: this.eventDrop,
changeView: this.changeView,
eventResize: this.eventResize,
windowResize: this.windowResize,
slotDuration: '00:15',
axisFormat: 'h:mmA',
viewRender: this.viewRender,
allDaySlot: false,
eventRender: this.eventRender,
minTime: convert12To24(openingTime, 'hh:mma'),
maxTime: convert12To24(closingTime, 'hh:mma'),
businessHours: {
dow: [0, 1, 2, 3, 4, 5, 6],
start: convert12To24(openingTime, 'hh:mma'),
end: convert12To24(closingTime, 'hh:mma'),
},
});
Change View:
changeView = view => {
this.calendarComponent.fullCalendar('changeView', view);
};
I CAN'T CHANGE THE CURRENT CALENDAR LIBRARY AND HAVE MAKE DO WITH THIS ONLY
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:
This is very confusing。。why event on 2017-09-02 before 9AM doesn't show while event after 9AM is effictive 。 is there any options can control this?
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: '2017-09-12',
events: [
{
title: 'test11111',
start: '2017-09-01T16:00:00',
end: '2017-09-02T09:00:00'
},
{
title: 'test22222',
start: '2017-09-01T16:00:00',
end: '2017-09-02T08:00:00'
},
],
timeFormat: 'HH(:mm)',
displayEventEnd: {
month: true,
default: true
}
});
how can i make 2017-09-02 display in view?
You need to specify the nextDayThreshold. By default, it is set to 9am, and that means that any event ending before that will not be rendered on that day.
In your case you have an event ending at 8am, so you need a nextDayThreshold of 8am or earlier if you want that even to show up on that day:
nextDayThreshold: '08:00:00'
Working JSFiddle.
Fullcalendar nextDayThreshold docs
Why are my full calendar event does not curl up. If I have more than three events should curl up and show at the bottom of the "more events". FullCalendar downloaded from the repository adesigns / calendar-bundle. I have this:
I need this:
This is my code.I added a piece of code at the end of the function but is not working:
$(document).ready(function () {
$(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar-holder').fullCalendar({
header: {
left: 'prev, next',
center: 'title',
right: 'month, agendaWeek, agendaDay, add_event'
},
lazyFetching: true,
timeFormat: {
// for agendaWeek and agendaDay
agenda: 'H:mm', // 5:00 - 6:30
// for all other views
'': 'H:mm' // 7p
},
eventSources: [
{
url: Routing.generate('fullcalendar_loader'),
type: 'POST',
// A way to add custom filters to your event listeners
data: {
},
error: function () {
//alert('There was an error while fetching Google Calendar!');
}
}
],
monthNames: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
monthNamesShort: ['Sty', 'Luty', 'Marz', 'Kwie', 'Maj', 'Czer', 'Lip', 'Sier', 'Wrze', 'Paź', 'Lis', 'Gru'],
dayNames: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
dayNamesShort: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
buttonText: {
month: 'Miesiąc',
week: 'Tydzień',
day: 'Dzień'
},
eventLimit: true,
views: {
agenda: {
eventLimit: 3
}
},
});
});
So, I never heard of the plugin, I googled for the documentations, I opened the documentation and this was the first page I found that resembled your problem: https://fullcalendar.io/docs/display/eventLimit/
You need to add an event limit to your options that limit the amount of events on a day. Like so:
$('#calendar').fullCalendar({
eventLimit: true, // for all non-agenda views
views: {
agenda: {
eventLimit: 6 // adjust to 6 only for agendaWeek/agendaDay
}
}
});
If this does not solve your problem, please post the javascript code you are using. If this did solve your problem, please read the docs of this plugin before asking questions about it here.