I'm a beginner with FullCalendar, and trying to use the vertical resources view from the scheduler add-on. I have some external events that I want to drag onto my resources. The resources are defined like this:
*resources: [
{ id: 1,
title: 'shift1',
businessHours: [
{
start: '8:00',
end: '13:00',
dow: [1,4,5],
},
{
start: '8:00',
end: '11:00',
dow: [3],
},
{
start: '8:00',
end: '12:00',
dow: [2],
},
],
rendering: 'background',
},
],*
The behaviour I want is for a dropped event to have it's start and end time set to that of the resource, ie the event duration is the same as the resource. I've searched through the docs and SO, but I can't find a function that works for me (additionally, resourceIds array doesn't work for association to an event, only resourceId). Does anyone have an idea on how to do this?
Related
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.
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.
In my calendar, I would like to not see the events but instead have the range of the event greyed like what is not in the businessHours range.
For example, if I have those businessHours:
businessHours: {
start: '08:00',
end: '12:00'
}
and an event which starts at 10:00 and finishes at 11:00, I would like to have the exact same render as :
businessHours: [
{
start: '08:00',
end: '10:00'
},
{
start: '11:00',
end: '12:00'
}
]
Is there a way to add unavailable range of time like this ?
Thanks.
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
Is there any way to set multiple business hours, or grey out certain time ranges in FullCalendar's agenda view? I'm searching the google for hours, but I didn't find any working answer.
Here's what I've tried:
businessHours:
[
{
start: '08:00',
end: '17:00',
dow: [ 1,2,3,4,5 ]
},
{
start: '10:00',
end: '16:00',
dow: [ 6 ]
}]
This is not working. The fullcalendar recognizes this array as a true value, and sets the default value of businesHours.
This works:
businessHours:
{
start: '08:00',
end: '17:00',
dow: [ 1,2,3,4,5 ]
}
But I want to be able to customize every day's opening hours. Is there any way to solve this? If I could add somehow a css class to certain time ranges that would do it, but I don't know how to grab these time ranges. Render doesn't work, because of agenda view.
I figured out a solution. It is not the best way, to solve this problem, but it is easy to understand and implement, until we don't get a more customizable businessHours() function in an upcoming update.
The code:
events: [
{
start: '00:00:00+02:00',
end: '08:00:00+02:00',
color: 'gray',
rendering: 'background',
dow: [1,2,3,4,5]
},
{
start: '16:00:00+02:00',
end: '24:00:00+02:00',
color: 'gray',
rendering: 'background',
dow: [1,2,3,4,5]
},
{
start: '00:00:00+02:00',
end: '8:00:00+02:00',
color: 'gray',
rendering: 'background',
dow: [6]
},
{
start: '12:00:00+02:00',
end: '24:00:00+02:00',
color: 'gray',
rendering: 'background',
dow: [6]
}
]
This will put background events in the Calendar, which are not clickable, and looks like businessHours()'s gray out, and will change the background color of every slot in agendaWeek and agendaDay from 00:00 to 08:00, 16:00 to 24:00 (from Mondays to Fridays - dow:[1,2,3,4,5]), and from 00:00 to 08:00, 12:00 to 24:00 (On Saturdays - dow:[6]).
You can add each business hour as an event. FullCalendar works with the same structure to populate businessHours option:
{
...
events: [
// business hours 1
{
className: 'fc-nonbusiness',
start: '09:00',
end: '17:00',
dow: [1, 2, 3, 4], // monday - thursday
rendering: 'inverse-background'
},
// business hours 2
{
className: 'fc-nonbusiness',
start: '10:00',
end: '15:00',
dow: [6], // saturday
rendering: 'inverse-background'
}],
...
}
Note: The important options in this events are className:'fc-nonbusiness and rendering:'inverse-background'.
Good Luck.