Fullcalendar doesn't show correctly event in month mode - fullcalendar

I have a problem with the fullcalendar, I have an event that occurs on day 3 and day 4, when a event ends before 9am, the month mode is shown only one day, look:
Week: (ending before 9am)
Month:
Week: (ending after 9am)
Month:
How I fix it? I want to show the event in the Month on both days.

You need to change the nextDayThreshold properties to another hour for the event to display according to your needs.
From the docs:
When an event's end time spans into another day, the minimum time it must be in order for it to render as if it were on that day.
Duration, default: "09:00:00" (9am)
Only affects timed events that appear on whole-days. Whole-day cells
occur in month view, basicDay, basicWeek and the all-day slots in the
agenda views.
Example (docs)
{ start: '2014-02-04T20:00:00', end: '2014-02-05T02:00:00' }
// goes from 8pm to 2am the next day
More info at:
http://fullcalendar.io/docs/event_rendering/nextDayThreshold/

Related

Display half-a-day event in dayview

How can I display half-a-day events in a slot duration of 1 day?
slotDuration: {days: 1},
I tried to set the duration to 12 hours but then the view gets very cluttered caused by the double weekday name and the shown time. My goal is it to keep the view as clean as possible.

Get weeknumber from fullcalendar

I have setup fullcalendar to display weeknumbers as per the docs: https://fullcalendar.io/docs/v3/weekNumbers#v2
I would like to get the weeknumber from fullcalendar, so I can use it in my code, because I need to display it outside of fullcalendar.
I know I can do my own calculation of week number, but I would like to get the one from fullcalendar, so I am sure, that the week number displayed in fullcalendar is always the same as the week number I display elsewhere.
The moment-objects seems to have a function called week(), which will return the week of the year for the moment-object: https://momentjs.com/docs/#/get-set/week/
This gets the weeknumber for the first week in a view. If the view is 'agendaWeek', then it will show the week number for the displayed week. If the view is 'month' it will get the week number for the first displayed week of the month
viewRender: function(view, element)
{
alert(view.intervalStart.week());
}

Fullcalendar day 24+7hours

im looking for way how to change start/end day of day.
For example: day start at 7am and end at 7am next day. In short i need to force calendar thinking day start and end +7hours
Any idea?
Look at nextDayThreshold
"When an event's end time spans into another day, the minimum time it must be in order for it to render as if it were on that day."
$('#calendar').fullCalendar({
nextDayThreshold: '07:00:00', // 7am
...
});

How can I disable the days which out of the current month in Fullcalendar?

In Fullcalendar, I want to disable the days which out of the current month.
For example , maybe these days are the last month days or next month days. I want to disable them, who can tell me how to make it to be disabled?
And how to disable the range of time in one day, For example , to disable 6:00AM-8:00AM.
To disable the days which are out of the current month, there's a CSS class on those days "fc-other-month" which you could either use some CSS or JQuery/javascript to disable the events dayClick and eventClick. To work with the time range, the documentation has a minTime: http://arshaw.com/fullcalendar/docs/agenda/minTime/ and maxTime: http://arshaw.com/fullcalendar/docs/agenda/maxTime/ to work with, but these will apply to every day in your calendar, not a specific day. You could always add an event yourself during that timeframe for a specific day and set the attribute: editable to false.

FullCalendar "Calendar" Month View Starting from Current Day

I have a need to use the FullCalendar plugin's month view, but with a small twist... I need the month view to be a calendar month (4 weeks) from the currently selected date, not a month proper (Jan, Feb, etc). In other words, I need the top left column to be the currently selected date, with the calendar rendering 4 weeks after that in month view.
Something similar to what is provided by thefirstDay property in agendaWeek view is close to what I am after. firstDay only sets the day of the week though, not a specific date within the month as the first day.
Try
firstDay: new Date().getDay()
in the parameters.
If you're going to show a Thursday in the upper left hand corner then what you've got isn't a calendar. It's a table data.
FullCalendar's firstDay is just for switching between starting on a Monday (European style) and starting on a Sunday (US style).

Resources