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
Related
I have hard time clicking the slot I want in Fullcalendar using Nightwatch.
All I have is:
await browser.click('css selector', 'td.fc-timegrid-slot.fc-timegrid-slot-lane')
which surprisingly (in timeGrid view type) click on the Thursday weekday where I want Monday or any other day (ergo: I want to be able to control it).
How to do it?
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'
],
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 ]] )
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!