I call the fullCalendar method as follows:
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
firstDay: 1,
eventLimit: true, // allow "more" link when too many events
events: [{title":"Matthias Klein","start":"01-01-2014","end":"01-01-2015"},{"title":"Matthias Klein","start":"01-01-2014","end":"02-01-2014"},{"title":"Matthias Klein","start":"01-01-2014","end":"01-01-2014"}]
});
});
But in the result all events starting and ending one day before at 2:46a:
see Image
What do I do wrong?
Few things,
Try changing your date format for your events to yyyy-mm-dd I had this issue last night where my events were all showing at 4;30pm the day before and this fixed it for me.
Also noticed your dates have no times so are they all day events? If so make sure you're setting the allDay property to true.
One last thing, firstDay means the day of the week, so if Monday is 0 then Tuesday is 1. It doesn't mean the first day of the month.
I had the same problem and was only able to solve it by following the EXACT date format given on the demo page...
yyyy-MM-ddTHH:mm:ss (for example 2019-05-08T16:00:00 is 4 o'clock today)
or
yyyy-MM-dd (for example 2019-05-08 is today)
In other words, U.S. date format plus 24-hour time format.
Unfortunately there does seem to be a bug with nextDayThreshold. If it's set to 00:00:00 (the default), events ending at this time will be displayed as having ended the day before, which contradicts the documentation. Also, allDay=true events spanning more than one day will always be displayed as ending on the previous day.
Here's my full code...
addEvents = [];
addEvents.push({
title: "First Event",
url: "http://localhost:11634/events/141",
start: '2019-05-19T09:00:00',
end: '2019-05-19T13:00:00'});
addEvents.push({
title: "Second Event",
url: "http://localhost:11634/events/137",
start: '2019-11-02',
end: '2019-11-02'});
addEvents.push({
title: "Third, multi-day event",
url: "http://localhost:11634/events/115",
start: '2019-11-08T00:00:00',
end: '2019-11-10T01:00:00'});
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['dayGrid'],
events: addEvents
});
calendar.render();
});
Another way to fix that: use nextDayThreshold parameter
$('#calendar').fullCalendar({
**nextDayThreshold**: '00:00:00', // 9am
nextDayThreshold set the minimum time it must be in order for it to render as if it were on that day.
I saw this issue and in my application it appears to be a timezone problem. When making the round trip to by database and back, the Date object appears to pick up timezone information, which screws up the calendar...
Related
I am currently using FullCalendar to display Events in the day-grid. There are both, events with just a single occurrence and with recurrency.
For the single occurences the start date is covered by moment-timezone conversion and displayed correctly in the Calendar which TimeZone I changed to "Europe/Amsterdam".
For the Recurring events I use the RRule-Plugin for FullCalendar.
A typical recurring event would look like this:
const calEv = {
id: event.id,
title: title,
duration: "03:00",
rrule: rrule
};
With the rrule like:
"RRULE:FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,FR;DTSTART;TZID:Europe/Amsterdam=20200101T100000Z;UNTIL=20201231T130000Z"
The event will always be displayed from 10:00 am to 1:00 pm, no matter the TZID.
Is there a way for the calendar to use the timezone from the rrule?
I would like to ask about datepicker. I am currently developing a website where university students have to pick their own Thursday to hear a talk about career.
First of all, I have managed to disable all days except Thursday. The code I wrote stated below :
<script>
$( function()
{
$( "#datepicker" ).datepicker({dateFormat: 'yy-mm-dd', minDate: 0, maxDate:
'2018-12-15', beforeShowDay: function(date){var day = date.getDay();return
[day == 4,'disable'];
}});
} );
</script>
But now I would to disable a certain Thursday for example next Thursday which is:
'yy-mm-dd' = '2017-08-17'
Can someone explain to me how or where should I do the modification to the code which can allow me to disable a certain Thursday?
Refer this image for my datepicker https://drive.google.com/file/d/0ByJlnNeKIynkQ3IzRTN2cHg4WFE/view?usp=sharing
Use like this:
Date.getDay() returns a value in the range 0-6, not 1-7.
beforeShowDay: function(date) {
return [date.getDay() === 0,''];
}
you can still use the onBeforeShowDay, since it will get called before the datepicker is displayed, because changing months will make the datepicker to render again.
You can use an array that stores the list of dates and change this based on the result from your ajax call. e.g:
//at first only september dates will be disabled.
var array = ["2017-08-10","2017-08-17","2017-08-24"];
$('input').datepicker({
onChangeMonthYear: function(year, month, inst) {
// Perform AJAX call and get the list
//override the array, and now the october dates will be disabled.
$.ajax({
url: ajaxUrl,
type: "post",
data: serializedData,
async: false,
success: function (data) {
array = data; //["2017-08-10","2017-08-17","2017-08-24"];
}
});
},
beforeShowDay: function (date) {
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [array.indexOf(string) == -1 ]
}
});
I'm using FullCalendar and it is working fine.
I allow users to drag events, but sometimes I need to force the event to start on a specific date. For example, some events MUST start on a Monday, so if a user drags it to a different weekday, I'll force the event move to the previous Monday.
So, on the eventDrop callback, I have something like:
jQuery('#calendar').fullCalendar({
...
...
eventDrop: function(event, delta, revertFunc) {
if (/*must force new event start date*/) {
var duration = event.end.diff(event.start, 'd');
event.start = moment('2015-07-01');
event.end = moment('2015-07-01').add(duration, 'd');
}
}
})
Some explaining:
I must calculate the original duration, because when I change the
start date, Fullcalendar assumes the end date is the same and changes
the event duration accordingly. So it forces me to assign a new end
date (is there another way to do this?)
assigning a new date to event.start works fine
assigning a new date to event.end always returns:
TypeError: Va.time is undefined
Am I missing something, or maybe overcomplicating things?
Is the error a bug?
Thanks in advance for helping me on this!
Just modify the existing moment like this:
eventDrop: function (event) {
event.start.day(1); //Move the startdate to day 1 (Monday, 0 = Sunday)
event.end.day(1); //Also move the enddate to Monday
}
jsFiddle
I'm not sure what causes the error. It looks like it has to be something to do with setting a new momentjs object in either the event.start or event.end.
I'm trying to adapt fullcalendar to fit a smaller screen (iPhone) and I am trying to create a useful week view by displaying 3 days instead of 7. It is an easy modification to change the columns displayed to 3 days but this causes issues when rendering events. Nothing shows up on the correct day!
Here is the modified source code:
function BasicWeekView(element, calendar) {
...
function render(date, delta) {
if (delta) {
addDays(date, delta * 3);
}
var start = addDays(cloneDate(date), 3);
var end = addDays(cloneDate(start), 3);
var visStart = cloneDate(start);
var visEnd = cloneDate(end);
t.title = formatDates(
visStart,
addDays(cloneDate(visEnd), -1),
opt('titleFormat')
);
t.start = start;
t.end = end;
t.visStart = visStart;
t.visEnd = visEnd;
renderBasic(1, 1, 3, false);
}
}
This causes the events to render incorrectly and I'm mystified as to why? I've gone through the source and tried to trace it back to the cause without success. Clicking the day still shows the proper date (via dayClick) so I am out of ideas.
To give a bit more detail on the errors, almost every event renders incorrectly. The third day will often render events in the first day or not at all (ie 1px wide). The second day renders events in the third day and the first in the second. Weekends are handled strangely as well and sometimes when moving to the next date or previous date it will change to day view.
I'm completely baffled and would love some help. I have dug through the api and trolled through the questions on stack exchange without luck... any help would be appreciated :)
I was looking to do something similar with Full Calendar on Android.
There was an update in version 2.2.5 of Full Calendar that allows this kind of customization.
This can now be done with something like this:
views: {
agendaThreeDay: {
type: 'agenda',
duration: { days: 3 },
buttonText: '3 day'
},
defaultView: 'agendaThreeDay'
}
Customizing full calendar can still be a nightmare but it's come a long way.
You can get more information on this from the document page on Custom Views.
Can someone help me understand how I can pass the start date into the calendar. I have created a Delivery Scheduler calendar and I display the delivery details in a table under the calends that is feed via the database. This requires me to refresh the page when a user select a calendar day to load the table information. I can figure out how to start the calendar on a starting date that is passed into the page.
Seems like this would be easy but I am doing something wrong.
$('#calendar').fullCalendar(Options);
$('#calendar').fullCalendar('gotoDate', '2012-10-21');
Sample based on documentation http://arshaw.com/fullcalendar/docs/current_date/gotoDate/
Remember that month is 0-based, so 10 means November.
$(document).ready(function () {
var calendar = $('#calendar').fullCalendar({
events:[
{ title:'All Day Event', start:new Date(2012, 10, 20)},
{ title:'Long Event', start:new Date(2012, 10, 21), end:new Date(2012, 10, 22)}
]
});
$('#calendar').fullCalendar('gotoDate', 2012, 10, 21);
});
Thank you Biesior for your helpful answer. I was able to use your suggested code to get the behavior I was looking for.
While using the approach above, I notice that Firebug's console shows two AJAX data requests being executed simultaneously, one for the view associated with the current date, and one for the view associated with the specified gotoDate.
There doesn't appear to be any additional delay from the user's perspective, and the calendar displays the requested view from the start. However, 'loading' callbacks will be called multiple times which might cause strange behavior in certain circumstances. There may also be other undesired results associated with the superfluous AJAX request for the current date.
I was able to avoid the unnecessary AJAX request by initializing the calendar without an event source, then moving to the desired date as shown by Biesior above, and then adding the event source. The sequence is shown below. I've removed some unrelated FullCalendar options and callbacks to keep it concise. There are some additional AJAX parameters, and some PHP, but the important thing to notice is when the event source is specified.
The original code results in two simultaneous AJAX requests:
$('#calendar').fullCalendar({
events: {
url:'/Services/GetEvents.php',
type: 'POST',
data: {
lat: <?=$venLatitude?>,
lon: <?=$venLongitude?>,
userID: <?=$userID?>,
distance: <?=$distance?>
}
}
})
$('#calendar').fullCalendar('gotoDate', <?=(int)substr($startDate,0,4)?>, <?=((int)substr($startDate,5,2))-1?>);
This adjustment results in only the desired AJAX request:
$('#calendar').fullCalendar();
$('#calendar').fullCalendar('gotoDate', <?=(int)substr($startDate,0,4)?>, <?=((int)substr($startDate,5,2))-1?>);
$('#calendar').fullCalendar('addEventSource', {
url:'/Services/GetEvents.php',
type: 'POST',
data: {
lat: <?=$venLatitude?>,
lon: <?=$venLongitude?>,
userID: <?=$userID?>,
distance: <?=$distance?>
}
});