I can get daily sorted by using
daysOfWeek: [2],
I can't find anything in the documentation to make it fortnightly. Is this possible with fullcalendar?
Solution:
For future people, you need the rrule js file loaded otherwise it wont work
try rrule
events: [
{
title: 'work',
rrule: {
freq: 'weekly',
interval: 2,
byweekday: [ 'mo'],
dtstart: '2022-02-01'
}
}
]
Related
I have a project in hands that requires me to use the resources premium function from fullcalendar. I need to use the dayRender option to create a div in each day for css customization, however it seems the dayRender is not even called (I used a debugger on the function to test it) when the view is as resourceTimelineWeek. If I use the view timeGridWeek it works just fine.
I will leave here the json options I'm working with, but what I'd like to know is if there is another option I can use instead of dayRender for resources in particular.
I've tried resourcesRender, it works for the resource part of the table only. I've tried some of the slot render hooks as well without success.
header: {
left: 'today prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
},
defaultView: 'resourceTimelineWeek',
firstDay: 1,
slotDuration: {day: 1},
minTime: '10:00:00',
maxTime: '18:00:00',
editable: true,
dayRender: function (args) {
debugger;
args.el.innerHtml = 'daeda';
},
resourceRender: function(renderInfo) {
/*renderInfo.el.style.backgroundColor = 'blue';*/
},
resources: [
{ id: 'abc', building: '460 Bryant', title: 'Auditorium A' },
{ id: 'b', building: '460 Bryant', title: 'Auditorium B' },
{ id: 'c', building: '460 Bryant', title: 'Auditorium C' }
]
Thank you in advance
How would I go about not allowing users to click on background events that are greyed out in Full Calendar?
For my current calendar, I am trying to display available bookings for a tutoring company and I currently have tutor availabilities and tutor lessons
I am currently able to allow users to not click on greyed out areas from the following array:
let availabilities = [{
groupId: "lesson-available",
daysOfWeek: ["1"],
startTime: "12:00:00",
endTime: "15:00:00",
display: "inverse-background",
color: "#ccc",
},
{
groupId: "lesson-available",
daysOfWeek: ["2"],
startTime: "15:00:00",
endTime: "16:00:00",
display: "inverse-background",
color: "#ccc",
},
];
But I would like to be able to make the following lessons unavailable on the calendar and not be clickable also:
let lessons = [{
groupId: "lesson-unavailable",
start: "2021-01-18T13:00:00",
end: "2021-01-18T14:00:00",
display: "background",
color: "#ccc",
},
{
groupId: "lesson-unavailable",
start: "2021-01-19T15:00:00",
end: "2021-01-19T16:00:00",
display: "background",
color: "#ccc",
}
];
My Code for my Calendar is the following:
<FullCalendar
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
headerToolbar={{
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay",
}}
height="auto"
initialView="timeGridWeek"
editable={true}
eventColor="#6DCBCA"
selectable={true}
selectMirror={true}
dayMaxEvents={true}
allDaySlot={true}
weekends={true}
events={currentEvents}
select={handleDateSelect}
eventContent={renderEventContent}
eventClick={handleEventClick}
eventDrop={handleEventDrop}
eventDragStart={handleEventDragStart}
eventDragStop={handleEventDragStop}
selectConstraint={"lesson-available"}
/>
As you can see, the following constraint of
selectConstraint={"lesson-available"}
is disabling me to click on anything else but the availabilities array which is perfect, but how would I edit this to also incorporate not being able to click on the lessons array (which is displayed as background, not inverse-background)
In my image:
Even though the 3-4pm on the 19th of Jan is greyed out, I am still able to click on it. This is exactly what I need to fix.
You can use the selectOverlap function, in addition to your selectConstraint, to achieve this.
The documentation for selectOverlap says:
...the function will be called once for every time the user’s selection
intersects with an event. If the function returns true, the selection
will be allowed. If false, the selection will not be allowed.
selectOverlap: function(event) {
return !(event.groupId == "lesson-unavailable");
},
Demo: https://codepen.io/ADyson82/pen/ZEpwyqm
Documentation: https://fullcalendar.io/docs/selectOverlap
I have a datasource which has bookings that that i want to render in fullcalendar eg
{
title: 'booked',
groupId: 'unique',
start: '2020-02-11T08:00:00',
end: '2020-02-11T10:00:00',
color: 'blue'
}
However i also have recurring free slots which i want the user to click to eventually make a booking.
{
title: 'Available',
daysOfWeek: [ 1,2,3,4],
startTime: '8:00:00',
endTime: '10:00:00',
color: 'red',
}
The aim is that if there is already a booked event in the same time block , the recurring event 'Available' in this slot will not be displayed
How can i achieve this . I am assuming it is with eventRender
I have a jsfiddle here that shows the events competing for the same time block
https://jsfiddle.net/ryan_ramsumair/mqhzs3v2/5/
Thank you
I have downloaded and been experimenting with FullCalendar and it does almost everything I need for a resource scheduling app I am developing for my company's use. I just need to try and get it to display the events a bit differently and was hoping someone might be able to help.
I currently have it configured to display like this:
However, I am ultimately need it to display like this (side by side):
This is for a sequential process and it is important to convey the order of events and if one event (blue) extends into another day then the next day's event(s) (purple) have to wait until that one is done. This is not as clear in the top image as the bottom one.
Is this something that can be configured or will this require me to modify the source or intercept the event render and manipulate it there?
Thanks!
[EDIT] Added code snippets:
TEMPLATE:
<FullCalendar ref="fullCalendar"
default-view="resourceTimelineMonth"
:plugins="calendarPlugins"
:events="calEvents"
:resources="calResources"
:weekends="true"
:editable="true"
:event-overlap="false"
:slot-width="100"/>
SCRIPT:
data () {
return {
...
calendarPlugins: [ interactionPlugin, resourceTimelinePlugin ],
calEvents: [
{ resourceId: "101", title: 'WO123', start: '2019-11-01T07:00:00', end: '2019-11-01T12:00:00', backgroundColor: 'red' },
{ resourceId: "101", title: 'WO127', start: '2019-11-01T12:00:00', end: '2019-11-01T18:00:00', backgroundColor: 'green' },
{ resourceId: "101", title: 'WO144', start: '2019-11-01T18:00:00', end: '2019-11-02T03:00:00', backgroundColor: 'blue' },
{ resourceId: "101", title: 'WO145', start: '2019-11-02T03:00:00', end: '2019-11-02T10:00:00', backgroundColor: 'purple' }
],
calResources: [
{id: "101", title: "KM101"},
{id: "102", title: "KM102"},
{id: "103", title: "KM103"},
{id: "104", title: "KM104"},
{id: "105", title: "KM105"},
],
...
}
As I hinted at in the comments above, the reason you don't see what you're hoping for is because when you compress each slot to a single day, fullCalendar appears to switch to an "all-day" mode of display, where it ceases to take the specific times of day into account, and simply indicates the day(s) in which the event occurs.
The way to get a display the way (or close to the way) you want is to reduce the slot duration to half a day (which clearly creates the least division of the day you can do), and also modify the slot labels slightly to suit. Once the slot duration involves hours, fullCalendar will start taking the time component of the event into account again when it renders.
I don't know vue.js syntax and can't make a demo of it, so I've done the code and demo below in vanilla JS, but hopefully you can translate that into the syntax used by the vue plugin without any difficulty.
Options to add to your calendar config:
slotDuration: { hours: 12 },
slotLabelFormat: [
{ weekday: "short" },
{ hour: "2-digit", },
],
Live demo: https://codepen.io/ADyson82/pen/VwwXowr
See https://fullcalendar.io/docs/date-display for relevant documentation.
I am trying on this demo in jsbin to have some events with scheduler and restrict to move some of them to specific resources.
$('#calendar').fullCalendar({
schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
// put your options and callbacks here
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,agendaDay'
},
defaultView: 'agendaDay',
defaultDate: '2017-05-09',
navLinks: true, // can click day/week names to navigate views
editable: true,
nowIndicator: true,
allDaySlot: false,
fixedWeekCount: false,
eventLimit: true, // allow "more" link when too many events
slotLabelFormat: "HH:mm",
slotLabelInterval: "00:60:00",
events: [
{
title: 'Long Event',
start: '2017-05-09T16:00:00',
end: '2017-05-09T17:00:00',
resourceId: 'b',
constraint: {
resourceIds: ['c', 'd']
}
},
{
id: 999,
title: 'Test Event',
start: '2017-05-09T16:00:00',
end: '2017-05-09T18:00:00',
resourceId: 'a',
constraint: {
resourceIds: ['b', 'c', 'd']
}
}
],
resources: [
{id: 'a', title: 'Auditorium A'},
{id: 'b', title: 'Auditorium B'},
{id: 'c', title: 'Auditorium C'},
{id: 'd', title: 'Auditorium D'}
]
})
Now If you follow the instructions here you will notice that inside the resourcesIds you specify the ids that you want the event NOT to go. But in the jsbin you can see that the reverse is happening.
Also if you switch on the month or week view you cannot drag and drop from one day to the other. Is restricting you due to the eventConstraint.
I am doing something wrong or is this something faulty?
Got around the problem with this solution for the moment but i think that the above is a bug. You can try my solution here.
What i did is to pass the constraints in a custom field on the event and to check on the drop if its correct.
Now If you follow the instructions here you will notice that inside
the resourcesIds you specify the ids that you want the event NOT to
go.
No, the article says precisely the opposite of that:
Additional properties can be applied to force an event to stay within
specific resources
(I added the bold.)
This means you give a list of the resources that the event can be dragged to. It cannot therefore be dragged to any resources not named within the constraint property.
As per the example given in the link you posted:
constraint: {
resourceIds: [ 'a', 'b', 'c' ] // constrain dragging to these
}
The event with this property will only be allowed to be dragged onto resources 'a', 'b', and 'c'.
I think you have mis-understood the documentation.