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
Related
I'm using fullcalendar and i want to add an event to an specific day and hour but the event get render on all of the days. (time slot works)
I went through all the documentation but couldn't find any error.
My code:
var calendar = new FullCalendar.Calendar(calendarEl, {
events: [{ // My event
title: 'The Title',
start: '2020-08-05',
end: '2020-08-06',
startTime: '09:00:00',
endTime: '10:00:00',
allDay: false
}],
contentHeight: 'auto',
initialDate: new Date('2020-08-01'),
validRange: {
start: '2020-08-01',
end: '2020-08-18'
},
titleFormat: { year: 'numeric', month: 'long', day: 'numeric' },
headerToolbar: {
start: 'title',
center: '',
end: 'prev,next'
},
initialView: 'timeGridWeek',
slotDuration: '01:00:00',
slotMinTime: '09:00:00',
slotMaxTime: '18:00:00',
weekends: false,
locale: 'es',
allDaySlot: false,
});
Here is my codepen with the error and the code im using!
https://codepen.io/alfijuan/pen/yLeqwer?editors=1010
Hope anyone can help!
Thanks!
You've specified it as a recurring event. Remove the startTime and endTime properties and merge the time data into the start and end properties together with the date.
{
title: 'The Title',
start: '2020-08-05 09:00:00',
end: '2020-08-06 10:00:00',
allDay: false
}
Demo: https://codepen.io/ADyson82/pen/ZEQMEvY
See https://fullcalendar.io/docs/v5/event-object and https://fullcalendar.io/docs/v5/recurring-events to understand the difference and the properties required for a single event vs a recurring one
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.
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.
I'm using fullcalendar v2.9.1 and I would like to show the calendar with slotDuration of '00:90:00' and maxTime: "22:00:00", minTime: "08:00:00".
But the calendar not show the hours in the left column.
When I removed the min/max time, I noticed that there is no hour of 8am, only 6:30 and 9:00 (because of slotDuration of 90 min).
Here's the settings:
views: {
agendaOneDay: {
type: 'agenda',
duration: { days: 1 },
// buttonText: '2 day',
weekends: false,
columnFormat: 'ddd M/D'
}
},
timezone: "local",
header: false,
height: calendarService.getCalendarHeightViaScreenSize(contact),
slotDuration: '00:90:00',
slotEventOverlap: false,
// slotLabelInterval: '02:00:00',
defaultView: device_type_mobile ? 'agendaOneDay' : 'agendaWeek',
eventBackgroundColor: 'white',
eventTextColor: '#3f51b5',
firstDay: 1,
weekends: false,
selectable: true,
eventOverlap: false,
selectOverlap: contact ? true : false,
editable: contact ? false : true,
maxTime: "22:30:00",
minTime: "08:00:00",
axisFormat: 'HH:mm',
allDaySlot: false
Can someone help me on this regard, please?
UPDATE:
I tried to use moment.js:
slotDuration: moment.duration('00:90:00'),
Even that, it's not working.
Thanks!
It's never too late...
On "maxTime:" | type "string" is not assignable
You need to write:
minTime: duration("hh:mm:ss"),
maxTime: duration("hh:mm:ss"),
Right now my Weekly Calendar shows up with one hour of interval. I'd like to know if it's possible to change this interval as I like (e.g 1hour30min interval).
My code to build the calendar:
$('#calendar').fullCalendar({
header: false,
height: 800,
defaultView: 'agendaWeek',
views: {
week: {
columnFormat: 'dddd'
}
},
firstDay: 1,
weekends: false,
});
Try out this
$("#calendar").fullCalendar({
header: false,
height: 800,
defaultView: 'agendaWeek',
views: {
week: {
columnFormat: 'dddd'
}
},
firstDay: 1,
weekends: false,
allDaySlot: false,
slotDuration: "01:30:00"
});
http://jsfiddle.net/5ax71o58/
You can set slotLabelInterval:
slotLabelInterval: "01:30:00"