I have implement fullcalendar, I have interval of 10 minutes, it works fine in English version but Persian version is not displaying interval correctly,
Please view the below screen short, if you see is not showing .30 for second slot, same issue for all slots, is any on know the fix for this?
I am able to solve my issue, thanks you this post, FullCalendar SlotDuration 24:00 and weekNumbers: true alters date formatting
slotDuration: "00:10:00",
slotLabelFormat: [
'[Week] W',
'hh:mm'
],
Related
I'm using fullcalendar.js with agendaWeek as defaultView and slotDuration set to '01:00:00'.
Is there way to change the looks of certain slots ?
For example i want to make green slots that are today and in the future : is 12:00 now and i want that slots that are after this hour and today to be green.
Thanks
I am trying to use Fullcalendar in AngularJS.
I somehow implemented the calendar and it works (saves data to the SQL).
However, if I click on the day in the calendar, the modal pops up and the start date shows 00:00:00 in time aspect.
My questions is how can you set the time for the hour of current time?
If it is 9AM currently, then, how can the time in the start initialize the time as 09:00:00 ?
This is what I have for the coding.
select: function(start, end) {
$('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd').modal('show');
}
I have a feeling that it would be nice to somehow modify the code below and place it within the above code, but I am stuck on where to put it.
var time = new Time();
var h = date.getHour();
I don't know it the Time() even works (it was Date() from other source).
Please can anyone help me on initializing the hour in the Fullcalendar based on the current hour? I am looking for any advice or even a hint to solve this matter.
Thank you in advance!
You can use momentJS to add the current (local) system time to the selected day:
select: function(start, end) {
var today = moment();
start.set({ hours: today.hours(), minute: today.minutes() });
$('#ModalAdd #start').val(start.format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd #end').val(end.format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd').modal('show');
}
See https://momentjs.com/docs/#/get-set/set/
Also it's worth mentioning that start and end are already moments, so you don't need to wrap them in the moment constructor again as you were doing before.
Another thing to consider if you do this, is whether your calendar has other views available, in particular the agenda-style views, on which selections can be made which would trigger the modal? If so, then you need to ensure that the time-manipulation code above only runs when the view is "month", because the agenda view will, by default, already use the time that the user actually chose on the calendar.
Is it possible to go to the start of an event based on an external link.
Example...
<li>Tuesday 10/8/13 10:00 am</li>
<li>Tuesday 10/8/13 1:00 pm</li>
<li>Tuesday 10/8/13 2:00 pm</li>
Upon clicking one of these links, i'd like to have my FullCalendar implementation scroll to that date/time.
Similar to the way this works, only going to the day/time of an event
$('#button').click(function() {
$('#calendar').fullCalendar('today');
});
You can use FullCalendar's gotoDate method. You'd just need to pass in the date parameters in the correct format.
.fullCalendar( 'gotoDate', year [, month, [ date ]] )
in the monthview fullcalendar has the nice feature to show the start time in the top line of non-allDay events. This might be useful if you don't want to provide further details in the event title.
I want to show several details in the month view, like start and end time (15.00 - 18-00), location, etc.
This leads to the fact that fullcalendar shows my events like this: "15 15.00 - 18.00".
Is there any way to prevent fullcalendar from showing the start time OR is there any way to get fullcalendar to show the full timespan (15.00 - 18.00)?
Thanks.
Alex
Try this, it works for me:
$('#calendar').fullCalendar({
displayEventTime : false
});
That should prevent fullcalendar to show the start-hour in the event headline.
This is what you are looking for...
http://arshaw.com/fullcalendar/docs/text/timeFormat/
timeFormat: 'H(:mm)' // uppercase H for 24-hour clock
I beleive if you want to remove it all you would have to do is include an empty string aka...
timeFormat: ''(, or no , depending on if there is another object following)
As #Isaak Kleinman said in a comment, this is the correct syntax:
timeFormat: ' ', //with the space
I had the same problem... I got the solution though
Add this to your code:
displayEventEnd: true,
timeFormat: 'h:mma',
I'm using Fullcalendar to show events in my application, but I would also like to use it to schedule resources, but I need to be able to schedule those resources in 5 minute intervals. Can the calendar (week/day view) be configured to render 5 minute timeslots instead of the default 30 minute intervals?
If so, can dragging also be configured at the same interval?
In the version 2.3.2 (I didn't check the previous versions) you can do the following:
slotDuration: '00:30:00',
snapDuration: '00:05:00',
The slotDuration changes the grid display to 30 minutes.
The snapDuration is more interesting: it changes the start and end times in intervals of 5 minutes while you're dragging the event.
Let's say your event starts at 10:00 am and ends at 10:30 am. With the above configuration, if you drag the event up (just a little bit) the new times will be: starts at 10:05 am and ends at 10:35 am, and so on.
You can find more details at http://fullcalendar.io/docs/agenda/snapDuration/.
I'm using version 2.11 of fullcalendar and to set the interval of 5 minutes, i had to set the slotDuration with format 'hh:mm:ss'
$('#mycalendar').fullCalendar({
...
slotDuration: '00:05:00',
...
});
I'm not sure about the dragging, but as for the calendar... Yes you can change the size of the time slot, in your fullcalendar config include the slotMinutes property like,
$('#mycalendar').fullcalendar({
...
slotMinutes: 5,
...
});
I hope this helps!