For a project in which I need a calendar to advanced functions and relatively simple, I chose FullCalendar, which is really convenient and easy.
My only problem is that I try to change the hours displayed in agendaWeek and agendaDay views, which are by default from 06h to 17h. I need to put it from 07h to 22h.
I've watched the BusinessHours setting but without success. scrollTime lets you change the start time of the schedule, but it only grows up to 18h. There certainly has something on the side of ViewObject but I do not know at all how to modify.
Thank you in advance for your support
have you set
.fullCalendar({
minTime: "07:00:00",
maxTime: "22:00:00",
})
also may want to set slotDuration
Related
do you know if it is possible to set firstHour option after initialization.
I tried : $('#calendar').fullcalendar('options', 'firstHour', 10);
But it does'nt work.
Why do I need this :
I have an html file to create events, I would like the calendar to scroll to the the hour the user have selected/submitted.
regards
Use scrollTime to determine how far down the scroll pane is initially scrolled down.
scrollTime: '10:00:00',
Setting options dynamically like you are trying to do is only supported as of version 2.9.0
I have seen people successfully set options using the following code before the functionality to dynamically set options became available:
$('#calendar').fullCalendar('getView').calendar.options.firstHour = 9;
$('#calendar').fullCalendar('render');
I want the fullCalendar to redraw itself (all the structure and events) without reloading the page.
Scenario:
I am using a patch of fullCalendar that supports the Resource View. For a few user actions I want to change the resources. But I don't want to reload the page.
You could 'destroy' and 'render' the calendar as a whole. But that might be cumbersome - especially in older browsers.
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar('render');
If you don't actually need to render the table, but just rerender the events again, you could use the 'rerenderEvents' method:
$('#calendar').fullCalendar('rerenderEvents');
Hopefully this helps!
Use refetchResources: .fullCalendar( 'refetchResources' )
This will fetch and freshly re-render the resource data, per the FullCalendar documentation.
The problem:
"...The problem is that the calendar is initialized while the modal or div is not visible... " based on this link enter link description here
In my opinion, destroy is not needed in this case, only with render you can see the calendar.
My solution:
<script type="text/javascript">
$('#objectname').show(0,onObjectShow);
function onObjectShow(){$('#calendar').fullCalendar('render');}
</script>
You must to be sure that the object(container of calendar) is fully visible. For example, my first mistake was to put this code on "onClick" event, and click event is triggered before show the object container and has no effect.
Solution Based on this reference.
You can also redraw calendar on the fly using below command-
$(window).trigger("resize");
I have searched through the full calendar documentation and tried a couple of solutions but nothing has worked. I am using full calendar within a website that renders events into it using JSON. Editable is set to true to enable users to alter the date of a position. However, regardless of setting disableResizing to false, the events can still be dragged from the right to extend them across multiple days.
How do I definitively disable this function, and do so without it effecting the current ability to drag and move events to different days. Any help on this would be great.
Many Thanks!
Ah I think the key may be here 'regardless of setting disableResizing to false'. I think you may want to set disableResizing to true!
Nevertheless make sure that options that have true/false values are not strings "true"/"false", or else somthings might not work like allDay option for events.
Doesnt work:
allDay:"true"
Work's
allDay:true
I'm bit new to Fullcalendar, i have managed to implement Fullcalendar.
Thanks for the awesome component.
I just have a doubt regarding the width that shown for events in agendaDay and agendaWeek view.
If looked in to fullcalendar in arshaw main site
We can see
http://img28.imageshack.us/img28/2307/21362507.png
There is a gap after events, how can we get rid of that and make events take fullwidth based on th View.
I have looked in to the function renderSlotSegs in base file (availWidth).
Does anyone accomplished what i was looking.
Is there any config for that?
Thanks in Advance
availWidth = Math.max(availWidth+3,
availWidth*.95);
I have replaced the line(2861) line with above code to make it work.
The product I am talking about is Adam Shaws Plugin Fullcalendar
I am really pleased with this product. However I am not a code expert. I am using this calendar to display bookings. However the time rows display form 12 am onwards. Realistically I only need to show the table of entries from 8am to 10.oopm. I was wondering if this could be achieved and free up some more space to make the existing rows bigger, to enhance the display of event bookings.
Try using the agendaDay view with this:
$('#calendar').fullCalendar({
minTime: "07:00:00",
maxTime: "21:00:00"
});
minTime: Determines the first
hour/time that will be displayed, even
when the scrollbars have been scrolled
all the way up.
http://arshaw.com/fullcalendar/docs/agenda/minTime/
maxTime: Determines the last hour/time
(exclusively) that will be displayed,
even when the scrollbars have been
scrolled all the way down.
http://arshaw.com/fullcalendar/docs/agenda/maxTime/
also maybe helpful: firstHour:
Determines the first hour that will be
visible in the scroll pane.
Integer, default: 6 Values must be
from 0-23, where 0=midnight, 1=1am,
etc.
The user will be able to scroll
upwards to see events before this
time. If you want to prevent users
from doing this, use the minTime
option instead.
http://arshaw.com/fullcalendar/docs/agenda/firstHour/
I guess it works for some version
But for me it only works like this
$('#calendar').fullCalendar({
minTime: "07:00:00",
maxTime: "21:00:00",
});
And big Thanks #orolo, you enlightened me.
Another update. Latest version 5 uses this syntax to allow restriction of the times shown:
...
slotMinTime: "07:00:00",
slotMaxTime: "21:00:00",
....
If you are using the latest version of fullcalendar, the 'firstHour' property is now 'scrollTime'. The value that you use assign it should have the '06:00:00' format.