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!
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 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.
I'm using Google Calendar API v3 to create an all-day event with a reminder. The Event resource has a "reminders" property, but you can only specify the number of minutes since the start of the event. It seems, the latest you can set a reminder using the API is midnight the night before the all-day event.
When using the google calendar's web interface you can specify a reminder to happen anytime on the same day as the all-day event. (Enter "0 days" before, and enter any time you want.)
Does anyone know if you can somehow set a reminder to happen on the same day as an all-day event when using the API?
As far as the documentation shows and as you have also mentioned, the latest supported property available is reminders.overrides[].minutes which can be set to a number of minutes before the start of the event when the reminder should trigger. Valid values are between 0 and 40320 (4 weeks in minutes).
In Overriding default reminders, set reminders.useDefault to false and populate reminders.overrides with the new reminder set.
"reminders": {
"useDefault": "useDefault",
# Overrides can be set if and only if useDefault is false.
"overrides": [
{
"method": "reminderMethod",
"minutes": "reminderMinutes"
},
# ...
]
}
Is it possible to set a start and end time for the agendaWeek view in fullcalendar? I want to save the actual chosen week in a cookie and open this week when the user opens the calendar the next time.
http://arshaw.com/fullcalendar/docs/
How did I do?
First of all - everything can be found in this amazing site.. the plugin actual manual.
http://arshaw.com/fullcalendar/docs/
Then you can use this
.fullCalendar( 'changeView', viewName )
Avaialble views
month available since version 1.3
basicDay - since version 1.3
agendaWeek available since version 1.4
agendaDay - since version 1.4
Apart from that - You can call the gotoDate from a cookie or other variable after the initialisation of the calendar
gotoDate
Moves the calendar to an arbitrary year/month/date.
.fullCalendar( 'gotoDate', year [, month, [ date ]] ) IMPORTANT: month is 0-based, meaning January=0, February=1, etc.
and that should be called form an anonymous function - something in the line of
$("#youCalendarID").fullCalendar( 'gotoDate', getCookie.year, getCookie.Month)
Ya MAN! Dont forget to look at this site
http://arshaw.com/fullcalendar/docs/
guys!
I'm developing an online auction with time limit.
The ending time period is only for one opened auction.
After logging into the site I show the time left for the open auction. The time is calculated in this way:
EndDateTime = Date and Time of end of auction;
DateTime.Now() = current Date and Time
timeLeft= (EndDateTime - DateTime.Now()).Seconds().
In javascript, I update the time left by:
timeLeft=timeLeft-1
The problem is that when I login from different browsers at the same time the browsers show a different count down.
Help me, please!
I guess there will always be differences of a few seconds because of the server processing time and the time needed to download the page.
The best way would be to actually send the end time to the browser and calculate the time remaining in javascript. That way the times should be the same (on the same machine of course).
Roman,
I had a little look at eBay (they know a thing or two about this stuff :)) and noticed that once the item is inside the last 90 seconds, a GET request gets fired every 2 seconds to update the variables in the javascript via a json response. you can look at this inside firebug/fiddler to see what it does.
here is an example of the json it pulls down:
{
"ViewItemLiteResponse":{
"Item":[
{
"IsRefreshPage":false,
"ViewerItemRelation":"NONE",
"EndDate":{
"Time":"12:38:48 BST",
"Date":"01 Oct, 2010"
},
"LastModifiedDate":1285932821000,
"CurrentPrice":{
"CleanAmount":"23.00",
"Amount":23,
"MoneyStandard":"£23.00",
"CurrencyCode":"GBP"
},
"IsEnded":false,
"AccessedDate":1285933031000,
"BidCount":4,
"MinimumToBid":{
"CleanAmount":"24.00",
"Amount":24,
"MoneyStandard":"£24.00",
"CurrencyCode":"GBP"
},
"TimeLeft":{
"SecondsLeft":37,
"MinutesLeft":1,
"HoursLeft":0,
"DaysLeft":0
},
"Id":160485015499,
"IsFinalized":false,
"ViewerItemRelationId":0,
"IsAutoRefreshEnabled":true
}
]
}
}
You could do something similar inside your code.
[edit] - on further looking at the eBay code, altho it only runs the intensive GET requests in the last 90 seconds, the same json as above is added when the page is initially loaded as well. Then, at 3 mins or so, the GET request is run every 10 seconds. therefore i assume the same javascript is run against that structure whether it be >90 seconds or not.
This may be a problem with javascript loading at different speeds,
or the setInterval will trigger at slightly different times depending on the loop
i would look into those two