Develop Reference

Set Time Zone To Germany in FullCalendar

My site is hosted on a server in an Asian country. And I want to change the time zone for displaying the events to Germany, but unfortunately it doesn't work.
i'm used timezone: 'Europe/Berlin' in fullCalendar
But this Code not work !!!
thank you
Edit :
a.$calendarObj = a.$calendar.fullCalendar({
slotLabelFormat: 'HH:mm',
slotDuration: "00:10:00",
minTime: "00:00:00",
maxTime: "23:59:00",
defaultView: "month",
allDaySlot: 0,
handleWindowResize: !0,
height: l(window).height() - 200,
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
},
events: "/Calender/GetEvents",
editable: 1,
droppable: 1,
eventLimit: 1,
selectable: 0,
displayEventTime: 1,
timezone: 'Europe/Berlin'
});

is not fix for me.
i change timezone:
timezone: 'Europe/Berlin' to timezone: 'local'
and buy new server from Germany and it fixed.

FullCalendar rrule "Until" not being inclusive

The spec for the rrule plugin says that Until dates are Inclusive. I'm not seeing that. Am I mis-reading?
https://github.com/jakubroztocil/rrule
If given, this must be a Date instance, that will specify the limit of the recurrence. If a recurrence instance happens to be the same as the Date instance given in the until argument, this will be the last occurrence.
I have this test:
calendaring.testRecur = function(dayOrWeek){
var rruleDataWeekly = {
freq: 'WEEKLY',
interval: 1,
byweekday: [ 'MO', 'WE', 'FR' ],
dtstart: '2019-11-01T10:30:00',
until: '2019-11-15'
};
var rruleDataDaily = {
freq: 'DAILY',
interval: 1,
count: 5,
dtstart: '2019-11-04T09:30:00',
};
var rruleData = dayOrWeek === "day" ? rruleDataDaily : rruleDataWeekly;
var title = dayOrWeek === "day" ? "Test Daily" : "Test Weekly";
var newEvent = {
title: title,
duration: "00:45",
rrule: rruleData
};
calendaring.calendar.addEvent(newEvent);};
And this is my config for the calendar:
calendaring.calendar = new Calendar(calendarEl, {
events: '/myurl',
plugins: ['rrule', 'interaction', 'dayGrid', 'timeGrid', 'bootstrap', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay, listDay',
},
defaultView: 'timeGridWeek',
slotDuration: '00:15',
slotLabelInterval: '01:00',
minTime: '06:00',
maxTime: '21:00',
allDaySlot: false,
slotEventOverlap: false,
buttonText: {
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day',
list: 'List',
},
themeSystem: 'bootstrap',
editable: true,
selectable: true,
droppable: true,
fixedWeekCount: false,
hiddenDays: [ 0, 6 ],
eventLimit: 6,
});
calendaring.calendar.render();};

The issue was I didn't have a time associated with my UNTIL. So, it assumes midnight, not 23:59:59. Phew. Thanks #ADyson for the help.

You can use the code below to show a day, daily, weekly, every two weeks and monthly events with a tooltip on mouse hover event.
In this example you can see how we can set up rrule in FullCalendar.
Visit here- https://stackoverflow.com/a/68770685/9673996

Uncaught TypeError: Cannot read property 'top' of null in fullCalendar

For fullCalendar I have written the code below:
$('#mycalendar').fullCalendar(
{
allDaySlot:false,
slotDuration: '00:30:00' ,
//slotMinutes: '120',
lang: currentLangCode,
minTime: '4:00am',
maxTime: '24:00pm',
slotEventOverlap: true,
slotLabelFormat:'h(:mm)a',
showAgendaButton: true,
columnFormat: { month: 'ddd', week: 'ddd M/D', day: 'ddd M/D' },
timeFormat: 'H:mm',
defaultView: 'listWeek',
eventLimit: true,
theme:false,
editable: true,
contentHeight:'auto',
weekends: false ,
//timezoneParam: 'America/Los_Angeles',
//ignoreTimezone: false,
header:
{
left: 'prev,next today',
center: 'title',
// right: 'agendaWeek'
right: 'month,agendaWeek,agendaDay,listWeek'
},
views: {
listDay: { buttonText: 'Day' },
listWeek: { buttonText: 'Week' },
month: {
columnFormat: 'ddd'
},
agenda: {
columnFormat: 'ddd'
}
},
I am getting below error for agendaWeek and agendaDay:
I am using:
jQuery JavaScript Library v3.3.1
FullCalendar v3.9.0

It's because your values for minTime and maxTime and invalid and not parseable as momentJS objects. fullCalendar relies on momentJS to do its date and time processing. Because of this the calendar does not know where to start the display (and thus where the "top" of the calendar is, hence the error message).
Set them to
minTime: '04:00',
maxTime: '24:00',
instead.
See here for a working demo: http://jsfiddle.net/sbxpv25p/581/
See http://momentjs.com/docs/#/parsing/string/ for a list of valid date/time formats which momentJS can recognise. You'll see that "am" and "pm" are not recognised items. In any case they are also unnecessary since you're already specifying the time in 24hr format.

Recurring event in FullCalendar

So I have spent the past 2 weeks trying to figure this out and tried all other previously proposed answers. I'm still not able to get it right.
I'm trying to setup a calendar where the recurring events are filtered within the specified date range.
Example: "My event" - every Thursday at 2:15PM - Between 2017/06/01 and 2017/06/30.
I've unsuccessfully tried the solutions proposed on this link:
Recurring Events in FullCalendar
In the end end I decided to follow this route:
https://github.com/c-trimm/moment-recur
It's a moments.js plugin (moment-recur) that should process the date range filter.
Please help!
My json feed returns:
[{
"title":"my event",
"start":"2017-06-01T14:15",
"dow":"4",
"recurrence":"moment().recur[{
start:\"2017-06-01\",
end:\"2017-06-30\"}]"
}]
My calendar works except for the fact that it will not stop publishing the event on Thursdays forever. I don't want to have to manually duplicate the event.
<link rel="stylesheet" type="text/css" href="/fullcalendar.css">
<script src='/jquery.min.js'></script>
<script src='/moment.min.js'></script>
<script src='/moment-recur.js'></script>
<script src='/fullcalendar.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listWeek,listDay'
},
validRange: function(nowDate) {
return {
start: nowDate.clone().subtract(2, 'months'),
end: nowDate.clone().add(2, 'months')
};
},
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: { buttonText: 'Day' },
listWeek: { buttonText: 'Week' },
},
hiddenDays: [ 5 ], // hide Fridays
editable: true,
eventLimit: true, // allow "more" link when too many events
businessHours: [ // specify an array instead
{
dow: [ 1 ], // Monday,
start: '12:30', // 8am
end: '22:00' // 6pm
},
{
dow: [ 2, 3 ], // Tuesday, Wednesday
start: '9:30', // 8am
end: '22:00' // 6pm
},
{
dow: [ 4, ], // Thursday
start: '13:00', // 10am
end: '22:00' // 4pm
},
{
dow: [ 7 ], // Sunday
start: '11:00', // 10am
end: '18:30' // 4pm
}],
events: 'my-event/feed',
//THIS IS WHERE I GET STUCK!!!!!
// I'm trying to implement this:
eventRender:
recurrence = moment().recur({
start: "01/01/2014",
end: "01/01/2015"
});
});
});
</script>
<div id='calendar'></div>
I believe i'm suppose to write it as a function but no mater what I try it either brakes the calendar or doesn't return any results. Thanks in advance to you all!

Below is the fiddler link for recurring events in fullcalendar.
http://jsfiddle.net/slicedtoad/duu0dx2t/1/
You need to specify dow property in event as specified in example.
$('#calendar').fullCalendar({
defaultDate: moment(),
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
events: [{
title:"My repeating event",
start: '10:00', // a start time (10am in this example)
end: '14:00', // an end time (6pm in this example)
dow: [ 1, 4 ] // Repeat monday and thursday
}],
});

jQuery Full Calendar event title time is wrong

I have a jQuery Full Calendar in my UI and it looks as follows:
The problem is the 10:00-10:00am portion of the event title, which seemingly is added to the element based upon the event startTime and endTime parameters in the JSON which sets up the UI element. Please see my code section for this here:
jQuery(document).ready(function() {
jQuery('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month, agendaWeek, agendaDay'
},
allDayText: 'All Day',
columnFormat: {
month: 'ddd',
week: 'ddd d/M',
day: 'dddd d/M'
},
editable: false,
weekends: true,
timeFormat: 'h:mm-h:mma ',
axisFormat: 'hh:mma',
firstDay: 1,
slotMinutes: 15,
defaultView: 'month',
minTime: '10:00',
maxTime: '17:00',
monthNames: ["January","February","March","April","May","June","July", "August", "September", "October", "November", "December" ],
monthNamesShort: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","nov","Dec"],
dayNames: ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
dayNamesShort: ["Sun","Mon", "Tue", "Wed", "Thus", "Fri", "Sat"],
buttonText: {
today: "Today",
day: "Day",
week:"Week",
month:"Month"
},
selectable: true,
selectHelper: false,
select: function(start, end, allDay) {
},
events: [
{
id: "3",
title: "My event title",
start: new Date(2014,10,03,10,0),
end: new Date(2014,10,03,12,0),
allDay: false,
backgroundColor : "#7F97FF",
textColor: "white"
},
The problem is in the UI it shows 10:00-10:00am which doesnt make sense. According to my events code it should start at 10,00,00 and end at 12,00,00 so why doesnt the title match this? Can somebody please help me!

Your FullCalendar is not configured correctly since you want the text "Start - End" Time on each event.
timeFormat: 'h:mm-h:mma ', // the output i.e. "10:00-10:00pm"
timeFormat: 'h:mma ', // the output i.e. "10:00pm"
displayEventEnd : true, // it will show on all views (Start - End) in your timeFormat
I've updated your JsFiddle, since you forgot to insert the external sources, I've imported the FullCalendar libraries in order to work.