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:
Related
I am using FullCalendar 4 and i have setup the Calendar Object in my script
function createBookingCalendar() {
var calendarEl = document.getElementById('bookingCalendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'en-gb', // the initial locale
timeZone: 'Europe/London',
plugins: ['interaction', 'list', 'timeGrid'],
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,listWeek,timeGridDay,timeGridWeek, dayGridWeek,DayGridMonth'
},
businessHours: [ // specify an array instead
{
daysOfWeek: [1, 2, 3, 4, 5], // Monday - Friday
startTime: '09:00', // 9am
endTime: '18:00' // 6pm
}, {
daysOfWeek: [6], // Saturday
startTime: '10:00', // 10am
endTime: '16:00' // 4pm
}
],
hiddenDays: [7],
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: {
buttonText: 'Goto Day View'
},
listWeek: {
buttonText: 'Goto Week View'
},
timeGridDay: {
buttonText: 'Goto Time Grid Day View'
},
timeGridWeek: {
buttonText: 'Goto Time Grid Week View'
}
},
slotDuration: '02:00', // 2 hours
defaultView: 'listWeek',
defaultDate: Date.now(),
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
eventSources: [
// CAD Solutions Event Source (Remote Database)
{
url: '../php/getBookings.php',
method: 'GET',
failure: function () {
$.confirm({
theme: 'Modern',
icon: 'fas fa-exclamation-triangle',
title: 'Error',
content: '<p>There was an error fetching the bookings from our database, we appologise for the inconvenience.</p><p class="text-muted">This error has been logged with our engineers.</p><small>Error 0x86451 (Fetch Bookings Database Error)</small>',
type: 'red',
columnClass: 'col-md-6 col-md-offset-3',
buttons: {
close: {
text: 'Close.',
action: function () {
//reset flag and recall the function.
}
}
}
});
}
}
],
eventRender: function (info) {
var tooltip = new Tooltip(info.el, {
title: info.event.title,
content: 'asdadasdqweqweqweqweqwasssd',
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
noEventsMessage: '<div class="panel panel-primary" style="height: 245px;width: 654px;margin:0 auto;padding:10px;margin-top:30px;"><div class="panel-heading"><h4><i class="fas fa-info-circle"></i> There are no bookings for this day.</h4></div><div class="panel-body"><p>There are no bookings saved for this date, you can add a booking to this day using the buttons below, or select a different date.</p><p class="text-muted">You can create a booking for this date as all timeslots are available.</small></div><div class="panel-footer"><a class="btn btn-primary" href="javascript:void(0);" id="addBooking" style="color:#fff;"><i class="fas fa-calendar-plus"></i> Create Booking For This Date.</a></div></div><div class="divider"> </div><div class="divider"> </div><div class="divider"> </div>',
eventClick: function (info) {
//Prevent Default Behaviour.
info.jsEvent.preventDefault();
$.confirm({
theme: 'Modern',
icon: 'fas fa-info-circle',
title: 'Selected Booking Information',
content: '<ul class="list-group list-group-flush" id="assetContent"><li class="list-group-item">Booking Company Name: ' + info.event.extendedProps.companyName + '</li><li class="list-group-item">Booking Date: ' + info.event.start + '</li><li class="list-group-item">Booking Slot: ' + info.event.startTime + ' - ' + info.event.endTime + '</li></ul>',
type: 'blue',
columnClass: 'col-md-6 col-md-offset-3',
buttons: {
close: {
text: 'Close.',
action: function () {
//reset flag and recall the function.
}
}
}
});
}
});
calendar.render();
}
When i have eventRender setup in the code the calendar stops fetching events from my source and it shows the eventSources>failure dialog that i added in the function.
When i remove the eventRender part of the script the calendar object renders perfectly and I am able to see all the events from my database.
Could anybody point out where I am going wrong with the coding?
would really like to get the eventRender part working so i can change the background color of events that are set, also in addition, how would i add in events of my own after the source has fetched the events from the server? I want to do this so I can fill in time slots that are missing in the calendar so the user can select a free slot to create a booking.
Many Thanks
Edit I took out the tool tip code I found in the full calendar docs and replaced it with ui tool tip instead, that is now working. What is the procedure for adding in my own events?
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
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
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
}],
});
In the 'Month' view of the fullcalendar.io I would like to display the current month only, with the current month events. However, currently what is being showed is a month counting from the current date.
E.g: If today's date was 2016-20-03...
- What fullcalendar display: From: 2016-20-03 To: 2016-19-04
- What I would like to display: From 2016-01-03 To: 2016-31-03
After reading the documentation and looking up around I couldn't find any variable or set up for the fullcalendar to achieve this so I thing that I will have to modify the fullcalendar.js
Has someone already done this?
View
$('#' + engineerId).fullCalendar({
header: false,
views: {
plainMonth: {
type: 'basic',
duration: { days: 31 },
buttonText: 'Month'
},
plainWeek: {
type: 'basic',
duration: { days: 7 },
buttonText: 'Week'
}
},
firstDay: 1,
dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
defaultView: 'plainWeek',
theme: true,
viewRender: function (view, element) {
$('#CalendarViewObject').val(view.name);
viewName = view.name;
},
aspectRatio: ratio,
editable: true,
eventLimit: false, // allow "more" link when too many events
events: {
startEditable: false,
durationEditable: false,
url: window.location.href.toString().split(window.location.host)[1] + '/GetEmployeeEvents',
type: 'POST',
data: function () { // a function that returns an object
$("[id^=qtip-]").empty();
$("[id^=qtip-]").remove();
return {
serviceAreaId: serviceAreaId,
employeeId: engineerId,
calendarViewObject: $('#CalendarViewObject').val()
};
},
error: function () {
alert('there was an error while fetching events!');
}
},...
Controller
public JsonResult GetEmployeeEvents(DateTime start, DateTime end, string queueName, string employeeId, string calendarViewObject)
The 'start' and 'end' dates are set up by the fullcalendar.io, and those dates are the ones that I would like to change.
Thank you very much in advance,
Alvykun
After some more research in the fullcalendar documentation, I ended up by setting the following:
$(\'.calendarClass\').fullCalendar(\'gotoDate\',new Date(y, m, 1));
This did the trick and works!