I've looking through the docs and source code of FullCalender but since this is my first time looking at it, there's a lot to go through so before i get too involved i'd like to know when you drag an event to the calender, if it's possible to place the events on the calender to more specific times? For example maybe i want to attend at meeting at 10.08 but calender initially only allows me to put the events at times with a 30 min interval, 10 o'clock, 10.30 o'clock, 11 o'clock etc. The 30-min interval limitation also goes for resizing(changing the duration) the event when its dropped onto the calender.
Calender with an event added:
http://imgur.com/a/uX2UY (cant post images cus not enough rep)
And if so, what variable am I to look at in the code?
Side note: This is my first time working with java script
"slotDuration" is the variable to look for when initializing the Calender it seems like. Now I can move drag and drop the events like i wanted to kinda even though i have to do a lot of scrolling to navigate through the 24 hours of one day
$('#calendar').fullCalendar({
slotDuration: '00:01:00',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
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"
},
# ...
]
}
in the monthview fullcalendar has the nice feature to show the start time in the top line of non-allDay events. This might be useful if you don't want to provide further details in the event title.
I want to show several details in the month view, like start and end time (15.00 - 18-00), location, etc.
This leads to the fact that fullcalendar shows my events like this: "15 15.00 - 18.00".
Is there any way to prevent fullcalendar from showing the start time OR is there any way to get fullcalendar to show the full timespan (15.00 - 18.00)?
Thanks.
Alex
Try this, it works for me:
$('#calendar').fullCalendar({
displayEventTime : false
});
That should prevent fullcalendar to show the start-hour in the event headline.
This is what you are looking for...
http://arshaw.com/fullcalendar/docs/text/timeFormat/
timeFormat: 'H(:mm)' // uppercase H for 24-hour clock
I beleive if you want to remove it all you would have to do is include an empty string aka...
timeFormat: ''(, or no , depending on if there is another object following)
As #Isaak Kleinman said in a comment, this is the correct syntax:
timeFormat: ' ', //with the space
I had the same problem... I got the solution though
Add this to your code:
displayEventEnd: true,
timeFormat: 'h:mma',
I need to create an control in asp.net mvc that allows the user to select a time that is anywhere between 7am and 7pm with quarter hour segments. i.e. The user could select:
7:00am
7:15am
7:30am
7:45am
8:00am
8:15am
....
....
7:00pm
Currently ive got a dropdown that comprises of a select list with entries for every single time slot. Just wondering if anyone knows a cleaner and or better UI experience for the user.
Thanks in advance
I suggest you looking into a JQuery addon: Timepicker.
It is easy to set up, simple in use, and it looks great.
For easy access put this code into your Layout view in the section:
<script type="text/javascript">
$(function() {
$('.timepicker').live('mousedown', function () {
$(this).timepicker({
stepMinute: 15,
hourMin: 7,
hourMax: 19
});
});
});
</script>
In your view have something like this:
#Html.TextBoxFor(m => m.Time, new { #class = #"timepicker" })
Another JQuery option is Timepickr. I don't like it as much as the first one, but it still is a good option.
The Telerik DateTime Picker can handle this. It defaults to an interval every half-hour, but you can configure it to display any interval you want, such as your 15 minutes. It integrates with their date picker, in case you want a combined datetime picker.
It is a drop-down list, like yours, but they tend to have a lot of whiz-bang chrome on their stuff, so you might be able to configure it in other display formats.
I believe the Telerik MVC controls are free to download and use, but you have to pay if you want support.
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!