I'm using Fullcalendar for a vacation stay reservation system. My problem is when a reservation is ending on a day and another one is starting that same day.
In Month view it shows both bars but one is above the other which makes the whole week taller.
What I would love to do is change the shape of the event bar in those cases to either be only half the day or better still to have a triangular shape on the end of each bar so it's clear that one event ends and the other one starts after the first ends.
In Agenda View there is a setting to let bars overlap (slotEventOverlap) but even that wouldn't work the way I want. I am doing this for a client so I would like to be able to do what he asks but I can't find anything here that addresses this particular issue.
Edit: I'm using version 1.64 and in fact it's the Full Year version that is a fork from the original. If there was a full year version of 2.x I would love to use that but I haven't seen any.
Related
Pretty self explanatory question, I would like to show entries over a one month period, say from the middle of one month to the middle of the next - but can't seem to either expand the number of visible weeks in a dayGridMonth (client wants the day 'boxes' rather than a list) or change its starting date - anyone have any pearls of wisdom ?
I am in the process to add FullCalendar v4 to our react application and I'm pretty new to FullCalendar, so excuse me if I ask a basic question.
I searched both the documentation and StackOverflow, but couldn't find any hints to my current problem. Let me briefly describe our goal scenario:
We want to load and render the events for a whole year and show a date range of about 40 days (a whole month and additionally 5 days from the last and the next month) to the user. The user should be able to scroll through the whole year with the scrollbar.
The first question is whether FC4 already provides the functionality with which we can achieve our goal. I tried to define a custom view of type 'resourceTimeline' with a duration of 30 days and additionally set the 'validRange' to the current year. This gives me the look I want, but unfortunately it is static - the scrollbar is not visible as long as the screen can display the whole area of 40 days. With the next/previous buttons I can switch between the 40 days segments, but I'd rather use these buttons to switch between years and use the scrollbar to scroll within the year.
We have now tried to set the 'visibleRange' to the current year and programmatically scroll to the current date in the 'datesRender' function. The problem is that we can't decide whether FC4 was initially loaded (where we would scroll to the current date) or whether a user scrolled manually to another date in the timeline and edited an event there. In this case the scroll position should be kept.
So what we are missing is the matching callback that tells us that the 'executeRender' function has been completely executed. The question at this point is how and where I can provide an application specific callback function that is triggered after all dates and events have been rendered. I also saw several internal success callbacks. Is it possible to overwrite them?
Any ideas and hints are highly appreciated.
Thank you very much for thinking along.
I just started using Full Calendar 4. Its awesome.
All things working great.
I am including a functionality to resize already selected dates across multiple months. For example, I select dates in April, and I want to continue my selection to 10th of May, But I think currently it is not possible.
I am trying to make it work like:
Click on next month, save current selected dates, by holding Ctrl or Shift keys, click on other dates and adding those dates to previous selected dates.
I went through new feature requests and issues, but this exact feature did not listed there.
Just curious to ask that if any other possible work around to this functionality or am I doing it right?
I need some kind of control that will allow a user on a mobile device to select from available time ranges in a 24-hour period for a reservation manager.
For example, let's say the range starts at 8:00am. A user cannot rent the space between 10:00am and 12:00pm (noon), and cannot rent the space between 3:00pm and 6:00pm. Therefore, some valid rental ranges would be:
8:00am - 9:00am
8:00am - 10:00am
12:00pm - 3:00pm
1:00pm - 3:00pm
6:00pm - 7:00pm
You get the idea.
The problem is that I need to display to the user which range of times are already taken, and allow them to select a range of time from the available time slots. My boss suggested using a range slider (such as the jQuery one or the Telerik one), but none of the ones I've found seem to support this use-case.
I should note that my boss would really like to see this as a "timeline" for lack of a better word, where two slider bars represent the range and the slider line is colored red or green depending on whether that time is available.
Any suggestions? Keep in mind that this is on a mobile device using ASP.NET MVC3.
What you could do is to dynamically load the values using ajax when your control has focus and populate that control with the received values. In addition, you could use Remote attribute that would validate the selection against the available hours when a user makes a selection, just to be sure that another user did not make a reservation for the chosen time (so that you can avoid time clash).
I want to display an agendaDay view with hour spaced slots. However I also want to events that are arbitrary lengths. If something takes an hour and 5 minutes then I want it to display as an hour and 5 minutes. At the minute drag resizing snaps to the next available slot.
how can I disable this snap drag behaviour and allow users to set events of arbitrary length?
This doesn't seem to be that unusual a use case to me, how have other people solved this?
Things I've tried:
Setting the slotMinutes to a low value such as 5. This helps with resizing but also makes the default event length 5 minutes. Also it takes up alot of space. I tried reducing the height of the slots to 1px which works to an extent but the drag action becomes untethered from the timescale. Also the calculation of the clicked time becomes wildly inaccurate.
I don't know of a programmatic solution, but I think this is a problem best solved by a second edit screen for the event.
Take a look at Google Calendar, you drag events to the nearest size (often the divisions work out well for most events) ... and then you edit the event giving a specific start/end time on a second page.
Other than that ... when you say arbitrary length, you mean 1 minute precision I assume - so then you essentially need slots of 1 minute. Not sure how cumbersome that will be for the user. You could have 1 min slots and then only display the time on the left hand side every half hour. Not sure where in the code this would be, but try having a look in /src/agenda/AgendaView.js