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?
Related
I have created one google calendar with my gmail account and I want to display that calendar in my website.
All Events related to that calender's are inserted via google calendar API using .Net Library.
It shows all events in website.but when i click on print and all events are not display in print preview.
Is there any parameter missing while calling Insert Event API?
I was having this problem with events created in a Chrome Extension. I'll spare you the code for the token, but I think it's enough that the event is created without any problems, yet refuses to print.
Desired behaviour: create event that can be printed.
Specific Error: event is created, but can not be printed.
Code:
var copyInit = {
'method': 'POST',
'async': true,
'headers': {
'Authorization': 'Bearer ' + Items.access_token,
'Content-Type': 'application/json'
},
'contentType': 'json',
'body': dataJson
};
dataJson:
"{"start":{"date":"2019-04-22"},"end":{"date":"2019-04-22"},"summary":"test"}"
API Call:
var url = 'https://www.googleapis.com/calendar/v3/calendars/' + calId + '/events?key=AIzaSyDfX9-blah9KoxzvGu3IzA1zu0oDQ-cJfw';
fetch(url, copyInit)
After much head scratching it turns out that although the Google Calendar API allows you to create all day events using the same start date and end date for all day events (using YYYY-MM-DD), such events can not be printed, and when shared will have an end date previous to the start date...
The solution is to use the following day as the end date for all day events:
"{"start":{"date":"2019-04-22"},"end":{"date":"2019-04-23"},"summary":"works!"}"
Is there a way to filter events based on a drop down?
I tried :
events: '/Controller/action?id='+id,
$("#drop").change(function () {
id = $('#drop').val();
$('#calendar').fullCalendar('refetchEvents');
But the controller does not see the new id.
Any suggestions on passing a paremter to the events() method?
You gave the result of '/Controller/action?id='+id to the calendar as the events feed when the calendar was initialised. e.g. you passed in /Controller/action?id=3, for example. That code has run and does not run again. fullCalendar stores that static string as the URL of the events feed. It doesn't pay any attention to the value of "id" later.
The simplest way to solve this is probably using a custom event feed, as per https://fullcalendar.io/docs/event_data/events_function/ :
//declare the calendar with a custom "events" functions
$("#calendar").calendar({
//..all your calendar options, and then the events:
events: function( start, end, timezone, callback ) {
$.ajax({
//whatever ajax parameters you need, but make sure:
url: /Controller/action,
data: { "id": $('#drop').val(), "start": start.format("YYYY-MM-DD"), "end": end.format("YYYY-MM-DD") }
});
}
});
$("#drop").change(function () {
$('#calendar').fullCalendar('refetchEvents');
});
That way, when "refetchEvents" is called, it runs the function that you passed as the "events" parameter, which can look up the value of the dropdown dynamically at that moment in time.
Note I've also added "start" and "end" parameters to your data, because your event source is supposed to filter the events returned by the dates actually being displayed on the calendar, otherwise you end up returning all events every time the view or date changes.
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...
Hi is there a way to change the time format for the following snipp in fullcalendar?
select: function(startDate, endDate) {
$.fancybox({
\'width\': \'40%\',
\'height\': \'40%\',
\'autoScale\': true,
\'transitionIn\': \'fade\',
\'transitionOut\': \'fade\',
\'type\': \'iframe\',
\'href\': \'test.php/?start=\'+startDate+\'&end=\'+endDate,
});
calendar.fullCalendar(\'unselect\');
}
I want Start & EndDate to be a unix Timestamp.
Thank You
It can be achieved by overriding the "start" and "end" parameter by sending separating Ajax Request inside the FullCalendar.
Take a look at this Similar Thread: add custom params to fullcalendar request
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?>
}
});