I am working with fullcalendar here and have some problems with the appearance of it.
I want to have a working time, for example from 8:00 am to 5:00 pm and I know how to manage to gray out slots in non-working time with the businessHours option:
businessHours: {
dow: [1,2,3,4,5],
start: '08:00',
end: '17:00'
}
But let's say, for example, I want to show only events and not all the working time, so at the beginning businessHours is set as:
businessHours: {
dow: [1,2,3,4,5],
start: '00:00',
end: '00:00'
}
Now, when some things here are selected, besides events that are already on the calendar I am showing the full working time for the day.
But here's my problem:
I have some resources unavailable, let's say, from 8:30 to 9:00 and from 13:45 to 14:00, and from 15:00 to 16:00.
1) Is there a way to make those blocks unavailable for making events, so when click on the block is registered, a message pops up: "This slot (or something) is unavailable.
2) Is there a way to register click on non-working hours and slots (blocks), all of them, inside the calendar (from 8:30 to 9:00 and from 13:45 to 14:00, and from 15:00 to 16:00) and outside of it - from 00:00 to 8:00 and from 17:00 to 00:00?
Related
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'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 have created as Yahoo Calender link and it doesn't seem to be respecting the timezone for the end date:
https://calendar.yahoo.com/?v=60&TITLE=Chapter%20Luncheon%20-%20CO%20-&ST=20151022T170000Z&ET=20151022T190000Z&URL=tma.utdev.com&in_loc=Maggiano%27s%20Little%20Italy%20500%2016th%20St%20Ste%20150%20Pavilions%20Mall%2C%20Denver%2C%20CO%2080202%2C%20United%20States&desc=
This displays 1:00PM to 7:00PM. I am in the EST Timezone which is GMT-4:00, so 17:00:00 (aka 5:00) - 4 hours = 1:00 PM. But for the end time, 19:00:00 (7:00), its not converting and its leaving it at 7:00
For google it does work:
https://www.google.com/calendar/render?action=TEMPLATE&text=Chapter+Luncheon+-+CO+-&dates=20151022T170000Z/20151022T190000Z&sprop=website:tma.utdev.com&location=Maggiano%27s+Little+Italy+500+16th+St+Ste+150+Pavilions+Mall,+Denver,+CO+80202,+United+States&details&website=http://tma.utdev.com/event/chapter-luncheon-co&pli=1&sf=true&output=xml#eventpage_6
This displays the date 1:00PM to 3:00PM
From what I can tell, Yahoo Calendar doesn't support an ET parameter. (If it does, it's undocumented and buggy). I'd therefore recommend using the DUR parameter instead, to specify the duration:
https://calendar.yahoo.com/?v=60&TITLE=Chapter%20Luncheon%20-%20CO%20-&ST=20151022T170000Z&DUR=0200&URL=tma.utdev.com&in_loc=Maggiano%27s%20Little%20Italy%20500%2016th%20St%20Ste%20150%20Pavilions%20Mall%2C%20Denver%2C%20CO%2080202%2C%20United%20States&desc=
See http://chris.photobooks.com/tests/calendar/Notes.html or http://taskboy.com/blog/Creating_events_for_Yahoo_and_Google_calendars.html for more information on the supported parameters.
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!