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 ]] )
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.
According to rfc5545:
The "DTEND" property for a "VEVENT" calendar component specifies the
non-inclusive end of the event.
Also in fullcalendar documentation for end property of event object written the same:
The exclusive date/time an event ends. Optional.
A Moment-ish input, like an ISO8601 string. Throughout the API this
will become a real Moment object.
It is the moment immediately after the event has ended. For example,
if the last full day of an event is Thursday, the exclusive end of the
event will be 00:00:00 on Friday!
With allday event everything is clear, if event from 24/03/2016 to 25/03/2016 I need to write according to described above from 24/03/2016 to 25/03/2016.
Now, my question is how I supposed to write in DTEND when event from 24/03/2016 10:00 to 24/03/2016 10:30, i.e. 30 min event? Do I need to write
24/03/2016 10:30:01 to create non-inclusive end date?
Your understanding of the RFC5545 is correct, it is your math which is failing you:
Say you want to have a 1 min event you would have
DTSTART:20160324T173000Z
DTEND:20160324T173100Z
Similarly for a 30 min event you would have:
DTSTART:20160324T173000Z
DTEND:20160324T180000Z
I have a full day event which I want to export to my Google calendar via an ics file. The format of the ics file is as follows
BEGIN:VCALENDAR
VERSION:2.0
TYPE:VCALENDAR
UID:xxx
PRODID:-//ABC//EN
X-PUBLISHED-TTL:1
CALSCALE:GREGORIAN
X-WR-CALNAME:ABC TEST - Calendar
BEGIN:VEVENT
TYPE:VEVENT
UID:xxx
STATUS:CONFIRMED
SEQUENCE:0
SUMMARY:Full day event
DESCRIPTION:
TRANSP:TRANSPARENT
DTSTART:20130910T000000Z
DTSTAMP:20130909T235959Z
DTEND:20130910T000000Z
I am facing 2 problems
In Google this event does not show up as a full day event i.e. It shows up as a normal event
How do I remove the time from the event i.e. Its a full day event but showing up as starting at 5:30 am . I am in the Indian Timezone UTC +5:30
You need to use the DATE format of RFC5545
In your case, that would be
DTSTART;VALUE=DATE:20130910
On the other hand, you do not need a DTEND.
You should also remove those TYPE properties ("TYPE:VCALENDAR" and "TYPE:VEVENT") which are not valid.
Finally, the first UID property (the one directly under TYPE:VCALENDAR) is not valid there. Only the second one is valid and required.
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!
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/