We are trying to use both the agendaDay and basicDay views in FullCalendar. However the button for each view is a duplicate - aka we cannot change the title of the button. How can we implement both views with a different button for each?
Using v1.6.3
You can change the captions of the buttons in general with the buttonText option:
buttonText: {
prev: '‹', // <
next: '›', // >
prevYear: '«', // <<
nextYear: '»', // >>
today: 'today',
month: 'month',
week: 'week',
day: 'day'
}
It's looking for me that fc doesn't support using two of the day/week views in parallel as there are no different keys for the agenda variants. Neither in the doc nor in the defaults file on GH. You could file an issue on the tracker.
Related
I have an application where I am rendering a calendar with a dayGrid view. The specific settings of the view are:
views: {
sevenDaySchedule: {
type: 'dayGrid',
duration: { days: 7 },
buttonText: '7 day',
dateAlignment: 'week',
firstDay: 1, //Monday
dateIncrement: { days: 7 },
}
},
defaultView: 'sevenDaySchedule',
I am wondering if it is possible to re-order the events within each day of the calendar?
Basically, if I have 2 or more events in a single cell (day) on the calendar, can I make it so that the user can drag and drop the events within a single day to re-arrange / re-order them?
If I have this:
Is it possible to achieve this:
Without having to rename the events every time?
I want to just be able to drag and drop events into their desired order and have them stay that way. Is it possible to achieve this where the events automatically rename themselves with the appropriate prefix ( 1), 2), 3), etc.) after being dragged and dropped?
My Calendar has a specific view : it shows 31 days (display 4 days before the current day, and 27 days after)
Therefore, I have a dynamic visibleRange for my view
let INIT = moment().subtract(4, 'days').format('YYYY-MM-DD');
let INIT_END = moment(INIT).add(31,'days').format('YYYY-MM-DD');
[...]
type: 'resourceTimeline',
visibleRange: {
start: INIT,
end: moment(INIT).add(31,'days').format('YYYY-MM-DD')
},
buttonText: '31 jours'
}
and previous/next don't seem to work when visibleRange is defined for a custom view.
I tried something involving jQuery and it mostly works, except you have to click first twice on prev/next to change the visibleRange (and you also have to click twice when you go from next to previous or vice-versa).
And I wanted for this :
calendar.setOption('visibleRange', {
start: INIT,
end: INIT_END
})
to work, but in my implementation, it only works once and when it's triggered, clicking on buttons doesn't work anymore.
You can find the code on this CodePen
Can you help me ?
Okay so a colleague of a colleague led me to the solution, thanks a lot to him.
Instead of using visibleRange and trying to manipulate FullCalendar's data with jQuery (very gross), I calculate the difference between my two moments in order to have a duration :
const INIT = moment().subtract(4, 'days');
const INIT_END = moment(INIT).add(31,'days');
let duration = INIT_END.diff(INIT, 'days')
Then I use this duration in the settings of my customView :
resourceTimelineRollingMonth: {
type: 'resourceTimeline',
duration: { days: duration },
buttonText: '31 jours'
}
and for my view to start 4 days before the current day, in the Calendar object, I set :
[...]
defaultDate: INIT.format('YYYY-MM-DD'),
[...]
Which now works flawlessly.
Sorry if this has been asked previously, but I couldn't find the answer. In the agenda views, if I have allDaySlot = true, then only the All Day section is displayed and no time-specific events (or even the time panel) are displayed. If I have allDaySlot = false, then the time specific events display, but not the All Day Events. Here is my calendar setup:
$('#calendar').fullCalendar({
defaultDate: "2016-12-05",
allDaySlot: true,
defaultView: 'agendaWeek',
events: [{ id:1,
start: "2016-12-06T10:00:00",
end:"2016-12-06T18:00:00",
title: 'test timed event',
allDay: false },
{ id:2,
start: "2016-12-07",
title: 'All Day Event',
allDay: true }
]
});
Here is the output:
enter image description here
As with most things, I'm sure I'm missing something quite simple. Thanks in advance for your assistance!
As stated by Krysztof, my code functions correctly. I stripped down the page containing my code (removing a master page, etc) and the code functions correctly in my app. So, I'm off to hunt for the conflicting code.
EDIT (for someone else having this problem): My page references a .NET master page and the calendar resides inside a content tag. I believe this is causing a conflict on the "fc-time-grid-container" element of FullCalendar. This element has an inline style applied to it for Overflow-x and Overflow-y. Removing those settings renders the calendar correctly. For now, I'll remove them via javaScript code after the calendar renders until I can find a better solution.
I need to simulate a drag & drop on fullcalendar in the week view with protractor. I found something with coordinates but I'd like a "no browser window dependent solution"... ther's also no way out on finding the exact starting cell in the week view by class or id ...or at least, I couldn't figure how to select a single cell of a row of a day because, using the Chrome's item selector, it seems every row has the same class fc-widget-content and cells are not "selectable" elements.
Are there any other chances?
maybe this is a little bit helpful (also very later ;). I also want to test my app with FullCalendar, but I'm using Cypress (similar to Protractor).
We plan items from an external list and assign it to a resource on a certain day/time in the FullCalendar (we use the scheduler plugin).
I found out that the drag and drop event is somehow intercepted by code, enriching it with for example properties of the event (like date, title and others). How I enriched this data is in the Cypress trigger('drop', data) command. Data is the evenData that is set by the Draggable class:
// Executed on the external list items, where every item we want to plan has class `.fc-event`.
this.draggableContainer = new Draggable(this.containerEl.nativeElement, {
itemSelector: '.fc-event',
eventData(eventEl) {
const id = eventEl.dataset.id;
return {
duration,
id: currentWorkItem.id,
title: currentWorkItem.description,
extendedProps: {
duration,
customRender: true,
data: currentWorkItem,
},
};
}
Then, in your test file (Cypress)
const eventData = {
date: new Date(),
dateStr: new Date().toISOString(),
draggedEl: {
dataset: {
notificationId: '123',
priority: '0',
title: 'Test',
},
},
jsEvent: null,
resource: {
id: '123',
},
event: null,
oldEvent: null,
};
cy.get('.fc-event') // selector for the external event I want to drag in the calendar
.trigger('dragstart')
.get('.fc-time-grid table tr[data-time="07:00:00"] td.fc-widget-content:nth-child(2)') // selector for where I want to drop the event.
.trigger('drop', eventData) // this will fire the eventDrop event
So, .trigger('drop', eventData) will fill the eventDrop info. It is not exactly the same as doing it manually, but works for me.
Caveats:
I haven't found a way to plan it on another resource (we use the resource scheduling plugin of FullCalendar.io). It does not matter that much, because you can specify it in the evenData (resource: { id: 'my-resource-id' } }.
No visual feedback because the drag mirror is not shown. Not a big problem during e2e testing, but it is a bit of a blackbox now. Maybe this is fixable
I'm having trouble adding events to fullCalendar when I specify a source parameter in the event I pass to renderEvent - what am I doing wrong?
If I specify a source, the event does not (ever) show on the calendar... Looking at fullcalendar.js v2.3.2 line 9348 Could it be that the cache.push(events) is incorrectly placed in the if statement just above?
(The scenario here is that when I add new events, I want them to become part of a particular source, not fullCalendar's internal "sticky" source).
Thanks!
Explanation
You should not specify a source property.
From event object documentation:
source: Event Source Object. Automatically populated.
A reference to the event source that this event came from
I've created a plunker with very Basic fullCalendar 2.3.2 with creation of event with source when you can check how the source property works:
So if you define an event like:
{
title : 'mytitle',
start : moment(),
allDay: false,
id: 1,
description: 'my event from source'
}
You can check, in the console of the plunkr, that the event receives a Source property, automatically populated, with the content:
event.source
{
events: Array[1],
className: Array[0],
origArray: Array[1]
}
Proposed solution
So for your goal you should define your events as items in an array source:
var mySource1 = [{
title : 'Source 1',
start : moment(),
allDay: false,
id: 1,
description: 'my event 1'
}];
var mySource2 = [{
title : 'Source 2',
start : moment().add(1, 'days'),
allDay: false,
id: 2,
description: 'my event from 2'
}];
And to attach them to the calendar you can:
Option a
Define in your calendar not your events, but your sources using eventSources as an array of your sources:
$('#calendar').fullCalendar({
(...)
eventSources:[mySource1, mySource2],
});
Option b
Add your source via add event source method
.fullCalendar( 'addEventSource', mySourceN );
Option c
Updating eventSource:
If you want to add dynamically an event to a specific source, the only way you can achieve it is removing and adding again the source:
So something like:
var myNewEvent: {
title : 'mytitle',
start : moment(),
allDay: false,
id: 1,
description: 'my event from source'
};
mySource.push(myNewEvent);
$('#myCalendar').fullCalendar( 'removeEventSource', mySource);
$('#myCalendar').fullCalendar( 'addEventSource', mySource);
Honestly, I dislike this C option, but maybe is what you need. There's an open issue with this situation in which Adam Shaw propose that solution.