Error displaying an event between two months - fullcalendar

I'm having problems with the nextDayThreshold option. Even when I´m setting it to "08:00:00", FullCalendar is duplicating events that finish at "07:00:00" on the 1st of a month, displaying it with a left arrow in timelineMonth, showing the same event in two months:
$(function() { // document ready
$('#calendar').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
nextDayThreshold: '08:00:00',
header: {
left: 'today prev,next',
center: 'title',
right: 'timelineMonth'
},
defaultView: 'timelineMonth',
resourceColumns: [
{
labelText: 'first column',
field: 'title',
width: 150
}
],
resources: [{
id: 'a',
title: 'Auditorium A',
}, {
id: 'b',
title: 'Auditorium B',
eventColor: 'green'
}, {
id: 'c',
title: 'Auditorium C',
eventColor: 'orange'
}],
events: [{
id: '1',
resourceId: 'b',
start: '2018-10-31T21:00:00',
end: '2018-11-01T07:00:00',
title: 'event 1'
}]
});
});
Fiddle
Is this a bug?

Short answer: No, it's not a bug.
Long answer:
The documentation for nextDayThreshold says:
Only affects timed events that appear on whole-days. Whole-day cells
occur in month view, basicDay, basicWeek and the all-day slots in the
agenda views.
In a "timeline" view, even though the slotDuration is set to 1 day by default in a "timelineMonth" view, fullCalendar still regards these as timed slots, rather than whole-day cells. Therefore the nextDayThreshold rules do not apply. e.g. If you changed to a timelineWeek view, it still uses exactly the same layout and slots, except the slots have a different length. They're not a different kind of cell.
If we look at an updated version of your fiddle: https://jsfiddle.net/q2fk57nb/6/ which now includes a regular "month" view (I simply added right: 'timelineMonth,month' to the header) we can see that the same event in that view is confined to the 31st October, because of the nextDayThreshold rule, and the fact that the regular "month" view uses "whole-day" cells.

Related

Fullcalendar: Show additional event data in list view

I'm using fullcalendar to display a month view which shows the time and title of events (and a popover showing the description when hovered). When I click the event, I show a listday view that shows all the events for that day. That all works fine and I have this working with this code:
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
start: 'dayGridMonth,listDay',
center: 'title',
end: 'prev,next'
},
initialView: 'dayGridMonth',
initialDate: '2023-01-12',
height: 'auto',
dayMaxEvents: 3,
moreLinkClick: 'listDay',
eventClick: function(info){
switchToListView(info)
},
eventColor: 'green',
views: {
listDay: {
displayEventEnd: true
}
},
events: [
{
title: 'All Day Event',
start: '2023-01-01'
},
{
title: 'Meeting',
description: 'My Description',
start: '2023-01-12T10:30:00',
end: '2023-01-12T12:30:00'
},
and in this code pen
I'd like to show the description text for the event in addition to the title in the listday view and I can't figure out how to do this. I don't know whether I need to use an event hook or what. I just can't make my way through the docs and examples to see what to do.
Appreciate any help.
I got this working with this use of eventDidMount.
eventDidMount: function(info) {
info.el.querySelector('.fc-list-event-title a').innerHTML += ` ${info.event.extendedProps.description}`
},
Frankly, it feels a little weird that I need to go into the depths of the rendered HTML to adjust the output instead of changing what is going INTO the generated HTML but I guess that's just how it works (??)
Thanks to #ADyson for the push in the right direction.

Fullcalendar events from two different database tables have the same ID

I have two different events an event should appear in red calendar another should be blue. My example below.
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
eventSources: [
{
url: 'read_simply.php',
color: 'red',
textColor: 'white'
},
{
url: 'read_recurring.php',
color: 'blue',
textColor: 'white'
}
],
theme: true,
selectable: true,
selectHelper: true,
droppable: true,
Here you can see how the sources are integrated.
Everything works until a little problem. My different events are stored in two different MariaDB tables. Some events have the same "event ID". When I try to move a (red) event to calendar, blue event with the same ID is also moved. How can I correct it???
I believe this is the expected behaviour. fullCalendar assumes that events with the same ID are linked and treats them as such.
I would suggest not to use the "id" property for your database IDs (you can just not provide this property, and fullCalendar will create a unique internal ID for itself on each event), and instead set some custom property e.g. serverID on your event so that you have a way to link it back to your database, but without causing problems within fullCalendar.

Fullcalendar - display events from several google calendars in vertical display in day view

I put the fullCalendar plug-in on my site. It needs to display events from several google calendars. I did it by analogy from the documentation
(Multiple Google Calendars)
But events are displayed only on the week and month intervals, on the day interval, events are not displayed. They are displayed only if I remove the block (array) resources. But without it, the display of events inside the day becomes horizontal, but it needs to be vertical (shaded time zones of the event). When i manually fill events in events, everything works fine, but I need to take them from Google.
How do I get the events from google on the daily interval displayed in a vertical view?
$('#calendar').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
scrollTime: '09:00:00',
minTime: '08:00:00',
googleCalendarApiKey: '<MY API KEY>',
defaultView: 'agendaDay',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month'
},
eventSources: [
{
id: 'k01',
resourceId: 'k01',
googleCalendarId: 'hhug0bdep49rjgq4kk79rrjbgg#group.calendar.google.com', // 1 calendar
color: 'blue',
},
{
id: 'k02',
resourceId: 'k02',
googleCalendarId: 'db1ls6vg0fh9sgqt57fkethens#group.calendar.google.com' //2 calendar
},
{
id: 'k03',
resourceId: 'k03',
googleCalendarId: 'ncvl95m9f8irl6nd3ejm99fvho#group.calendar.google.com' //3 calendar
}
],
resources: [
{ id: 'k01', title: 'calendar 1', eventColor: 'red'},
{ id: 'k02', title: 'calendar 2',},
{ id: 'k03', title: 'calendar 3'}
]
});
Your events coming from Google will not have resource IDs. If there is no resource ID, it is impossible for fullCalendar to know which column to display it in, so it cannot display it at all.
To stop the agendaDay view from displaying with resources, you need to set the option groupByDateAndResource to false:
groupByDateAndResource: false
Although the documentation says this is false by default, it appears you do have to explicitly set this option in your calendar config for it to work.
See http://jsfiddle.net/toytd26b/63/ for a working example (you can fill in your API key to see actual event data, but it shows the layout correctly).

As for how to customize Fullcalendar Scheduler's duration

thanks in advance.
I'm struggling with custimizing fullcalendar scheduler stuff.
I just want to display weektimetable like below.
(FYI, below's CSS is just edited by me, of course it's not the answer I want.)
As you see, in the case of the original fullcalendar scheduler's weekshot, you can't have the same y-point by one event, and I want to customize this.
please your advice, thanks
enter image description here
enter image description here
Without seeing the exact event data you're using to create this scenario, it's hard to be sure exactly what the issue is. But here's my suggestion:
I think you are wanting to get two events side by side, but as long as their times overlap, you never can. Even if the times don't overlap, if the end of event 1 and the start of event 2 fall somewhere in the middle of a slot, they will still appear to overlap.
Let's illustrate the point using the snippet below:
There are two calendars in the demo (scroll down to see the second one). Both calendars have identical resources and events.
The first resource contains events which overlap onto the same day.
So they will never be shown side-by-side.
The second resource contains events which don't overlap. One ends
just before midday, and the second starts at midday on the same day.
On the first calendar they are still shown as overlapping, because the calendar only shows things in 1-day intervals. Within that whole day context, the events still overlap. There is only 1 slot for that day into which they can be placed.
However on the second calendar, the events in the second resource will be shown side-by-side, because the slot duration (12 hours) is now short enough to allow
the events to be placed into separate slots based on their start/end times.
$(function() { // document ready
$('#calendar1').fullCalendar({
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
defaultView: 'timeline',
header: {
left: 'prev,next today',
center: 'title',
right: 'timeline'
},
slotDuration: {
days: 1
},
resources: [{
"id": 1,
"title": "Screenshot 1"
},
{
"id": 2,
"title": "Screenshot 2"
},
],
events: [{
id: '1',
resourceId: "1",
start: '2017-06-01',
end: '2017-06-04',
title: 'event 1'
},
{
id: '2',
resourceId: "1",
start: '2017-06-03',
end: '2017-06-06',
title: 'event 2'
},
{
id: '3',
resourceId: "2",
start: '2017-06-01',
end: '2017-06-03T12:00',
title: 'event 3'
},
{
id: '4',
resourceId: "2",
start: '2017-06-03T12:00',
end: '2017-06-06',
title: 'event 4'
}
]
});
$('#calendar2').fullCalendar({
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
defaultView: 'timeline',
header: {
left: 'prev,next today',
center: 'title',
right: 'timeline'
},
slotDuration: {
hours: 12
},
resources: [{
"id": 1,
"title": "Screenshot 1"
},
{
"id": 2,
"title": "Screenshot 2"
},
],
events: [{
id: '1',
resourceId: "1",
start: '2017-06-01',
end: '2017-06-04',
title: 'event 1'
},
{
id: '2',
resourceId: "1",
start: '2017-06-03',
end: '2017-06-06',
title: 'event 2'
},
{
id: '3',
resourceId: "2",
start: '2017-06-01',
end: '2017-06-03T12:00',
title: 'event 3'
},
{
id: '4',
resourceId: "2",
start: '2017-06-03T12:00',
end: '2017-06-06',
title: 'event 4'
}
]
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" media="all" />
<link href='https://fullcalendar.io/js/fullcalendar-scheduler-1.6.2/scheduler.min.css' rel='stylesheet' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.0/moment.min.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<script src='https://fullcalendar.io/js/fullcalendar-scheduler-1.6.2/scheduler.min.js'></script>
<div id='calendar1'></div>
<br/><br/>
<div id='calendar2'></div>
So, in conclusion, to get the effect you want, you must ensure that
Your events do not overlap either by date or time, and
The configured slot duration is sufficiently small to allow the
calendar to place the events side-by-side in separate slots.

Can I use the gcal Google Calendar integration with Resources in FullCalendar Scheduler?

I'm attempting to integrate a Google Calendar for each resource in FullCalendar Scheduler (http://fullcalendar.io/scheduler/)
I currently have:
googleCalendarApiKey: 'MYAPIKEY',
resourceGroupField: 'level',
resources: [
{ id: 'a', level: 'Level A', title: 'Room 3' },
{ id: 'b', level: 'Level B', title: 'Room 2' }
],
eventSources: [
{ id: '1', googleCalendarId: 'blahblah2#group.calendar.google.com', resourceId: 'a' },
{ id: '2', googleCalendarId: 'blahblah2#group.calendar.google.com', resourceId: 'b' }
]
});
Which is really just a guess....
Scheduler renders correctly however the events do not populate. The ordinary FullCalendar view with a single googlecalendarid works fine.
But the idea is I would then have a Google Calendar feeding events into each resource in the Scheduler agenda views.. Any suggestions? I can't find explicit documentation for this so perhaps it has not been implemented. Would appreciate work arounds however!
I found the answer here: https://github.com/fullcalendar/fullcalendar/issues/3020
Seems it has not been merged yet however can confirm adding
resourceId: sourceOptions.resourceId
To line 153 of gcal.js makes this work a treat :D

Resources