How to show only event appearing rows in FullCalendar.js - javascript

I am using FullCalendar v3.9.0 and need to show rows if it has any events only for week and day view. Pleas see the below image:
As you can see, above calendar showing rows of 8 AM to 12 PM. but it only has events from 9 to 11 AM. Thus I just want to show calendar from 9 AM to 11 AM.
I have tried it using filterResourcesWithEvents: true, but it didnt worked. Please see my code below:
$('#calendar').fullCalendar({
header: {
left: '',
center: 'prev, title, next',
right: 'today, month,agendaWeek,agendaDay,listWeek'
},
views: {
agendaWeek: {
columnHeaderFormat: 'ddd D/M',
}
},
minTime: "08:00:00", //I have tried by commenting this as well.
maxTime: "23:00:00", //I have tried by commenting this as well.
defaultDate: output,
filterResourcesWithEvents: false,
slotEventOverlap : false,
contentHeight: 2000,
navLinks: false,
editable: false,
eventLimit: true,
height: "auto",
events: course_data,
defaultView: 'agendaWeek'
});
Looking hopefully to have some suggestions or answer, Thanks!!

Related

How to display only one AM and PM time in Full calendar js

I know that time format issue has been already discussed. But stills i can't solve my problem.
My requirement looks like
Here I want to display all AM interval in a single AM and all PM time in a single PM.
Here is my code
$(document).ready(function() {
$("#calendar").fullCalendar({
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
},
defaultView: "agendaWeek",
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
editable: true,
eventLimit: true, // allow "more" link when too many events
format: 'DD/MM/YYYY',
});
});
replace format with this two line
timeFormat: "H:mm",
slotLabelFormat: "HH:mm",

Fullcalendar Events not displaying even if events end time exist

This is very confusing。。why event on 2017-09-02 before 9AM doesn't show while event after 9AM is effictive 。 is there any options can control this?
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: '2017-09-12',
events: [
{
title: 'test11111',
start: '2017-09-01T16:00:00',
end: '2017-09-02T09:00:00'
},
{
title: 'test22222',
start: '2017-09-01T16:00:00',
end: '2017-09-02T08:00:00'
},
],
timeFormat: 'HH(:mm)',
displayEventEnd: {
month: true,
default: true
}
});
how can i make 2017-09-02 display in view?
You need to specify the nextDayThreshold. By default, it is set to 9am, and that means that any event ending before that will not be rendered on that day.
In your case you have an event ending at 8am, so you need a nextDayThreshold of 8am or earlier if you want that even to show up on that day:
nextDayThreshold: '08:00:00'
Working JSFiddle.
Fullcalendar nextDayThreshold docs

How to hide events and show view more modal in fullcalendar.io

I had spent three days reading documentation, and like six days testing ways to do what we want to fulfill.
I still don't know how to emulate the view more...
Here is a piece of the code I have so far (Is really long)
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
navLinks: true,
timeFormat: 'h:mm A',
editable: true,
eventLimit: true,
eventOrder: "-sorting",
events: [
/* Lot of Events Here */
],
eventRender: function(event, element) {
$(element).hide();
$(".fc-day").on('click',function(){
console.log($(this));
});
});
The question per se would be how do we trigger the view more when clicking the day box (not the event)???

Fullcalender start with current month and next month in view

I have fullcalendar and which start from 2015 Jan, I want to start and show as default with current month and next month.
Please advice - I have below code
$('#calendar').fullCalendar({
theme: true,
//now: gotoDate(CurrentDate),//'2015-08-07',
editable: true,
aspectRatio: 2.1,
scrollTime: '00:00',
selectable: true,
selectHelper: true,
http://fullcalendar.io/docs/current_date/defaultDate/
Have you tried specifying a defaultDate?
Yes i did try defaultDate already, it wont work
I already have this
defaultView: 'timelineYear',
views: {
timelineDay: {
buttonText: ':10 slots',
slotDuration: '00:15'
},
timelineTenDay: {
type: 'timeline',
duration: { days: 10 }
}
},
and need to view current month and next month

Showing all events in jquery full calendar for the week view but not the month view

I'm using the jquery fullCalendar for a project. I only show the MONTH view and the WEEK view. In the month view, I only want to show max 4 events per day, but in the week view I want to display all the events for that day.
Does anyone know how to do that?
Here is a Fiddle: http://jsfiddle.net/qe53etk5/6/
Here's how I call the plugin:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,agendaDay'
},
eventLimit: 1,
defaultDate: '2014-06-12',
defaultView: 'basicWeek',
editable: true,
events: []
});
As you can see, I put a limit but it's more for the month view...
Check the docs here and here. You can do this with the view option hashes.
$('#calendar').fullCalendar({
eventLimit: {
'month': 4, // adjust to 4 only for months
'default': false // display all events for other views
}
});
for fullCalendar 2.x use the following:
views: {
month: {
eventLimit: 2
},
agenda: {
eventLimit: {
default: false
}
}
},
see View-Specific Options for details

Categories

Resources