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/
Related
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"
},
# ...
]
}
I'm using the fullcalendar plugin and would appreciate if someone can give me a hand.
I am getting json events through a PHP URL.
something like this:
$('#calendar').fullCalendar({ events: "/myfeed.php" });
So in my php page that returns the events, I am getting 3 GET parameters:
'_'
'start'
'end'
The start and end parameter, indicate the date in UNIX timestamp.
So far so good, the problem that occurs is that if I change the time zone on my OS. also change these parameters start and end, for the same query in the same day in the calendar.
the weirdest part is that it only happens in Mozilla Firefox.
in Google Chrome, this problem does not occur.
e.g.
I have set my time zone ((UTC-04: 00) Santiago)
I'm referring to the day 09.09.2012 on the agenda,
firebug shows me that these parameters are being sent to my php page
_ 1347245953581
end 1347246000
start 1347159600
but if I change the time zone from my OS to ((UTC-03: 00) Buenos Aires)
consulting on 09.09.2012 on the agenda,
are other parameters which are now sent to the PHP page.
_ 1347246338047
end 1347332400
start 1347246000
Being that it is the same day, are other start and end parameters which are sent to check for events.
There is an ignoreTimezone option on the fullcalendar that might help. I'm not sure if it affects the start/end time passed to the feeds.
http://arshaw.com/fullcalendar/docs/event_data/ignoreTimezone/
Another option is to convert the passed timestamp to a Date object and get the local data from the Date object afterwards and use that in your queries.
Convert a Unix timestamp to time in JavaScript
I know it is not the exact answer, but it might help you out a bit.
Here is a sample piece of PHP code to convert the passed timestamp into a local formatted date:
$startts = $_REQUEST["start"]; // original timestamp
$startdt = new DateTime('now', new DateTimeZone('Europe/Oslo') ); // setup a local datetime
$startdt->setTimestamp($startts); // Set the date based on timestamp
echo $startdt->format('Y-m-d H:i:s'); // Output local date and time
When I am in the month view of FullCalendar, then say I go back a few months to March and click on an event, then hit the browser 'back' button, how can I make it so that the browser knows to go back to March? Currently, it just goes back to the current month.
Thanks
Here is one possible solution:
From eventClick callback, when you redirect the user to the other page. Also send current day, month and year of the calendar in the URL.
On that page get the values from URL and store them in session variables.
This is how you can get current date of the fullCalendar:
var calCurrDate = $('#calendar').fullCalendar('getView').start;
var date = calCurrDate.getDate();
var month = calCurrDate.getMonth();
var year = calCurrDate.getFullYear();
Now on calendar page check if those session variables are defined. If they are defined, add the following properties to fullCalendar
<cfif isDefined('SESSION.d')>
<cfoutput>
date: #SESSION.d#,
month: #SESSION.m#,
year: #SESSION.y#,
</cfoutput>
</cfif>
For server side language I've used Coldfusion (as I know only this). You can easily understand the logic and translate it to your desired language.
Note: At the end of the calendar page you must destroy the session variables. Otherwise every time when you refresh the page you'll be taken to the same day, month and year.
I hope this helps. Thanks
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!