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.
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');
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
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 new to FullCalendar.
In my project, I need to show Calendar with time range and allocated participants for each training center for each day.
To be more precise, a day can have many training slot that will be conducted by training center.
So, I would like to show which training center is allocated to which time ranges and the number of available slot.
Recently, I saw FullCalendar control can show time and events.
For my case, I want to add links(one will go to editing of training slot and another link will go to editing of training participants.)
How can i done this?
with thanks,
Thura
You can add buttons to the calendar; look at this utoob flick
http://www.youtube.com/watch?v=UKUu9KJxunI
That was my calendar and the code and explanation is found here
JQuery full calendar, how to change view
You will have to insert buttons manually- There is no way of doing it out of the box with fullcalnedar.
eventRender: function (event, element) {
//element.find('.fc-event-inner').append("<p>" + event.description + "</p>");
if (event.innerHtml != null)
element.find('.fc-event-inner').append(event.innerHtml);
}
and send the innerHtml inside the event object.
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.