I am using react big calendar version 0.38.5. I searched a bit but couldn't find it. I want to do this. For example, I have an event between January 1, 2022 and January 25, 2022. I'm showing this on the react big calendar. I want to show that this event does not exist on January 17, 2022. Changing the color of that day is not a solution because if there is a different event that day, it may seem like it is not there. All I want is for that event to have a different color that day. How should I go about this?
in the example in the picture I want to make the 02 date of the blue event red
Based on response to your question, you cannot do what you ask. In Big Calendar, an 'event' is actually a div that is sized and positioned above the actual calendar cells. The only time it breaks up in to separate pieces is when it's span goes over another week, and even then each 'day' piece isn't identifiable.
You can style a 'day' cell or row (dayPropGetter), a 'slot' in the TimeGrid views (slotPropGetter), or an entire 'event' (eventPropGetter), but you can't break an 'event' up into multiple parts. Unless it spans across a boundary (like week to week in the 'month' view) it's just a single 'div'.
Related
I am using react-big-calendar to render events, and I using month,week,days view. Everything works fine in month view, but if there are multiple events with same time slots then it would render in a single row(ref image below). Is there any way to render the event column-wise? Also, are there any good alternatives to react-big-calendar?
Unfortunately, the documentation site is out of date, or you'd know about the new dayLayoutAlgorithm prop. From the updated documentation (available by cloning the repo and running the 'examples'):
dayLayoutAlgorithm
A day event layout(arrangement) algorithm.
overlap allows events to be overlapped.
no-overlap resizes events to avoid overlap.
or custom `Function(events, minimumStartDifference, slotMetrics,
accessors)
type: custom
default: overlap
I'm using react-day-picker DayPicker (not DayPickerInput) and have an existing element I want to use to drive the date popup. I can't figure out how to pre-feed the date from the element to the calendar and highlight the given date. All the other functionality, e.g. capturing the user chosen date and populating the element are working fine. So if my input element has Nov 11, 2019, and I click on it, I want the popup to go to that date and show it as selected. The current behavior is that it shows the current month and date. I've tried to set the selectedDays={this.state.selectedDay}, but that doesn't seem to work. Note that I am new to reactjs, and this could be the gap in my understanding.
Thanks for any suggestions you may have.
Found at least one way to achieve the behavior I was looking for. There is a DayPicker property "initialMonth" that will display the current month. Note that this only needs to be populated only with year and month:
initialMonth = {new Date(selectedDate.getFullYear(), selectedDate.getMonth())}
Following are the two images i am being trying to implement
Can this functionality be added in all day event in week view
after clicking on 2 more it should expand
Is there anything been implemented in react-big-calendar to help me with this
React-Big-Calendar handles this via a popup, instead of inline. They have an example in their documentation.
I am using Angular UI Calendar to display some events on the calendar. Whenever the calendar is loaded for the 1st time, the events extend to next date or shown on some other Date.
However when I change the View(Day/Week) and come back again to Month view, then events are displayed fine. Similarly, after changing month and coming back again to the current month , the events are displayed correctly.
Also, I've noticed that the calendar height also increases by 95px after changing the view(when displayed correctly).
Why is this occuring. How can I render events correctly for 1st time?
The problem was with CSS. Solved it.
I imported a couple thousand events into Drupal 7 Events content type. They're all published and I can view each event individually. But, in the Month view, only events from the current month are appearing. If I click through to other months, nothing appears.
I just realized it's doing this for other views also (week and day).
I'm guessing that I have some type of filter set incorrectly or something. Any ideas?