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?
Related
I have an event on one calendar, and I need to offer the user the ability to move that event to another month in the same calendar. It seems like the best way to do this is (1) remove the event from the current calendar, (2) create a draggable div outside the calendar, (3) allow the user to change the month/day/year, (4) allow the user to drag the div back onto the calendar, (5) hide the new div, (6) submit an ajax request to update the datasource, (7) delete the newly dropped event.
Attached are the code snippets used to do this.
My question: this seems very roundabout. Is there a better way?
// 1
reschedulingEvent = calendar.getEventById(....)
reschedulingEvent.remove()
// 2
rescheduledAppointment = new FullCalendar.Draggable(document.getElementById(
'rescheduled-appointment'), {
eventData: {
id: reschedulingEvent.id,
title: reschedulingEvent.title,
duration: "0:" + (reschedulingEvent.end - reschedulingEvent.start)/1000/60,
}
})
// 4
calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
editable: true,
droppable: true,
eventDrop: addEventToForm,
eventReceive: addEventToForm,
});
async function addEventToForm(info) {
if (!confirm("Would you like to reschedule this appointment")) return;
$(".rescheduled-appointment-div").hide() // 5
await axios.post(`/appointments/${info.event.id}`, {
start: info.event.start,
end: info.event.end,
}) // 6
calendar.refetchEvents()
calendar.getEventById(info.event.id).remove() // 7
Is is possible to create a view like attached using the fullcalendar scheduler? Basically group by day. Like showed in the images below
I figured this out by creating a custom view. The key is a type of timelineWeek and slotDuration of 24:00
views: {
timeline7Days: {
type: 'timelineWeek',
slotDuration: '24:00',
duration: { days: 7 },
buttonText: 'resource week'
}
Working with fullcalendar on month view, i need to allow user to create max 1 event per day. If he/she try to add more, error will be show.
I'm aweare there is eventOverlap and eventLimit, i try to use both but none seems to work:
I set:
eventOverlap:false
and even try:
eventLimit: true,
views: { month: { eventLimit: 1 } },
Just to be clear, the view i'm talking about is:
Found it!
In a month view with select: true you should use:
selectOverlap and set it to false.
I'm trying to implement an agendaView using fullcalendar api. what I want is: if there is more than 2 events for the same period (today 2pm-3pm = 4 events) it will show 2 events plus "+2 more".
so I used the following code:
eventLimit: true,
views: {
agenda: {
eventLimit: 2
},
week: {
eventLimit: 2
},
}
it works, but only for allDayEvents... not for events with an end date.
what I'm getting is this when I want this
but I simply want to limit my events, does anyone knows why my code isn't working? thanks a million
As per the docs (emphasis mine):
For the all-day section in the agenda views, a value of true will
limit the number of events to 5.
It doesn't support limiting the number of events on the agenda portion of the calendar.
It also isn't very clear how that would even work. It's one thing if all the events are at exactly the same time but how do you group events that look like:
is there a way to make a custom view based on agendaDay but restrain to 3 days, and the action on next or previous button, move 3 days on 3 days ?
the first day always reference to moment().day()
thanks for your help
This can now be done with something like this:
views: {
agendaThreeDay: {
type: 'agenda',
duration: { days: 3 },
buttonText: '3 day'
},
defaultView: 'agendaThreeDay'
}
You can get more information on this from the document page on Custom Views.