Develop Reference

Fullcalendar recurring event with rrule is not working

I am using fullcalendar 4.4.0 and everything working fine except rrule.
If i try with simple recurrence, it is working, but rrule recurrence not working.
let me share my code
<script src="https://unpkg.com/#fullcalendar/rrule#4.4.0/main.min.js"></script>
<script src="https://unpkg.com/#fullcalendar/core#4.4.0/main.min.js"></script>
<script src="https://unpkg.com/#fullcalendar/interaction#4.4.0/main.min.js"></script>
<script src="https://unpkg.com/#fullcalendar/daygrid#4.4.0/main.min.js"></script>
<script src="https://unpkg.com/#fullcalendar/timegrid#4.4.0/main.min.js"></script>
<script src="https://unpkg.com/#fullcalendar/resource-common#4.4.0/main.min.js"></script>
<script src="https://unpkg.com/#fullcalendar/resource-daygrid#4.4.0/main.min.js"></script>
<script src="https://unpkg.com/#fullcalendar/resource-timegrid#4.4.0/main.min.js"></script>
<scritpt src="https://unpkg.com/#fullcalendar/moment#4.4.0/main.min.js"></scritpt>
<script src="https://unpkg.com/#fullcalendar/interaction#4.4.0/main.min.js"></script>
<script src="{{asset('public/plugins/datepicker-master/dist/datepicker.js')}}"></script>
The code for generating event is as follows.
function makeEventFromBook(book) {
var event={};
var start_time_object=new Date(book.start_date+" "+book.book_time);
var end_time_object=new Date(start_time_object.getTime() +
parseInt(book.duration)*60*1000);
var start_time=start_time_object.toISOString();
var end_time=end_time_object.toISOString();
if(book.name==='null' || book.name==null)
book.name='';
event={
id:book.id,
resourceId: book.provider_id,
// start: start_time,
// end:end_time,
title:book.name,
overlap:false,
backgroundColor:`${book.service_item_id==0 ? '#ff0000' : '#1f1dd0'} `,
textColor:'#fff',
borderColor:'transparent',
rrule: {
count: 13,
freq: 'weekly',
interval: 1,
byweekday: [ 'mo', 'fr' ],
dtstart: '2020-03-01',
duration:"01:30"
},
groupId:book.id,
extendedProps:{
user_id:book.user_id,
user_name:book.user_name,
user_email:book.user_email,
user_phone_number:book.user_phone_number,
duration:book.duration,
book_date:book.book_time,
from_admin:book.from_admin,
service_type:book.service_type,
service_item_id:book.service_item_id,
provider_id:book.provider_id,
comment:book.comment,
}
}
return event;
}
What is issue here?
If anyone has experience, please help me.
I am sharing my calendar how it is being showed
There is no recurring event here.
Example of event data:
events=[ { id: 117, resourceId: 3, title: "Personal", backgroundColor: "#ff0000 ", rrule: { count: 13, freq: "weekly", interval: 1, byweekday: [ "mo", "fr" ], dtstart: "2020-03-01", duration: "01:30" }, groupId: 117 }, ]

You need to make sure you include the rrule Javascript library file, and the fullCalendar rrule plugin file, and include the plugin in your calendar config.
You also need to remove the "duration" property from your rrule, because that's not a valid rrule option, and will cause an error.
At the time of writing, you can get the rrule file from https://cdn.jsdelivr.net/npm/rrule#2.6.2/dist/es5/rrule.min.js
Here's a working demo: https://codepen.io/ADyson82/pen/poJWLzB
Demo code, for reference:
document.addEventListener("DOMContentLoaded", function() {
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ["interaction", "dayGrid", "timeGrid", "resourceTimeline", "rrule"],
header: {
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay"
},
events: [ { id: 117, resourceId: 3, title: "Personal", backgroundColor: "#ff0000 ", rrule: { count: 13, freq: "weekly", interval: 1, byweekday: [ "mo", "fr" ], dtstart: "2020-03-01" }, groupId: 117 } ]
});
calendar.render();
});

I have faced this issue!I was working with #fullcalendar/ #5.1.0 (ie.,#fullcalendar/core, #fullcalendar/rrule and so on) , the recurring events didn't display. Then I changed all my fullcalendar dependencies (#fullcalendar/) to #5.2.0 and used rrule #2.6.4. It is working fine!

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

Duplicating event in FullCalendar Scheduler 4.0.1 using calendar.AddEvent

I'm attempting to add functionality to my full calendar app where when a user clicks on an event, it will duplicate it (to be moved around later on).
The problem is that the duplicated event, while existing, does not display.
At first I thought it might be a resourceID issue; however, I quelled that fear by adding the resource ID property. I'm really not sure what the problem is at this point as both elements are functionally the same (although they are made with differing ID's).
An example of my code is (with the duplication block is marked //Duplication):
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../packages/core/main.css' rel='stylesheet' />
<link href='../packages/daygrid/main.css' rel='stylesheet' />
<link href='../packages/timegrid/main.css' rel='stylesheet' />
<link href='../packages/list/main.css' rel='stylesheet' />
<link href='../packages/timeline/main.css' rel='stylesheet' />
<link href='../packages/resource-timeline/main.css' rel='stylesheet' />
<script src='../packages/core/main.js'></script>
<script src='../packages/interaction/main.js'></script>
<script src='../packages/daygrid/main.js'></script>
<script src='../packages/timegrid/main.js'></script>
<script src='../packages/list/main.js'></script>
<script src='../packages/timeline/main.js'></script>
<script src='../packages/resource-common/main.js'></script>
<script src='../packages/resource-timeline/main.js'></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ["resourceTimeline"],
now: "2019-03-19",
header: {
left: "today prev,next",
center: "title",
right: "resourceTimelineDay,resourceTimelineWeek"
},
aspectRatio: 1.6,
defaultView: "resourceTimelineDay",
resources: [
{ id: "a", title: "Auditorium A" },
{ id: "b", title: "Auditorium B" }
],
events: [
{
id: "1",
resourceId: "a",
start: "2019-03-19T08:00:00",
end: "2019-03-07T07:00:00",
title: "event 1"
},
{
id: "2",
resourceId: "b",
start: "2019-03-19T10:00:00",
end: "2019-03-07T22:00:00",
title: "event 2"
}
],
// Duplication
eventClick: function(arg) {
dupedEvent = calendar.addEvent({
title: arg.event.title,
start: arg.event.start,
end: arg.event.end,
id: Math.random(),
resourceIds: arg.event.resourceIds
});
console.log("Orginial: ", arg.event);
console.log("Duplicate: ", dupedEvent)
}
});
calendar.render();
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
A working codepen if anyone would like to take a look:
https://codepen.io/anon/pen/JzBwwj?editors=0010

If you take a look at the objects you are logging the duplicate has no resourceIds, if you try logging arg.event.resourceIds it is undefined so isn't being set on the duplicate. That the reason they aren't being rendered. They aren't associated to a resource.
You can get the resources from the event using getResources, a method on the event object. That would be the correct way to do it, however I did manage to get it to render setting the resourceIds from arg.event._def.resourceIds.
Suggested solution:
dupedEvent = calendar.addEvent({
title: arg.event.title,
start: arg.event.start,
end: arg.event.end,
id: Math.random(),
resourceIds: arg.event.getResources().map(resource => resource.id)
});
}

Charts.js: Moment is not defined (using chart.bundle.min.js)

I have successfully created a chart and configured it using charts.js, but now I want to make the X Axis represent time. When I try to do this using the code below, I get the following console error: Uncaught ReferenceError: moment is not defined. I am using the chart.bundle.min.js because the documentation specifies the bundle comes with moment.js in it so I shouldn't need to download and link moment.js as well.
Here is the code, I got this from a stack member that was answering a question about time axis.
JavaScript:
function newDate(days)
{
return moment().add(days, 'd'); //THIS IS WHERE THE PROBLEM IS ACCORDING TO CONSOLE.
};
var config =
{
type: 'line',
data:
{
//Calling the function here, so also shows as error in console.
labels: [newDate(-4), newDate(-3), newDate(2), newDate(3), newDate(4), newDate(5), newDate(6)],
datasets:
[{
label: "My First dataset",
data: [4, 3, 1, 4],
}]
},
options:
{
scales:
{
xAxes:
[{
type: 'time',
unit: 'month',
}],
},
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
HTML:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/customFitStyling.css" type="text/css">
<link rel="stylesheet" href="css/w3c_v4.css" type="text/css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/chart.bundle.min.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>

It looks to me like Moment for some reason is not available in the bundle I have tried your code in JSFiddle and there is an error, however is load in Moment.js serpatley it works great.
Maybe use Chart.js and Moment.js and not the bundle, if you are worried about http requests you could always compress and bundle them yourself?

I looked at the documentation of charts.js :
When providing data for the time scale, Chart.js supports all of the formats that Moment.js accepts. See Moment.js docs for details.
So, you should use Chart.js api like this :
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
quarter: 'MMM YYYY'
}
}
}]
}
}
})
not moment().add()

Modifying fullcalendar.io to show 'eventLimit' link for just 1 event

I have a JS Fiddle here that will show event limit links when there is more then 1 event for a day. I'm trying to modify the .min file so that the limit link shows up when I have just 1 event on that day.
If I set the eventLimit value to 0, I still see a event in the day cell.
There is a line in the .min file that says
eventLimit:!1
and I tried setting the value to 0 but it didn't change the event in the day cell to an event link like I want.
Can anyone help with modifying the .min file to show event limit links for just 1 event per day, instead of the normal event within the cell?
Here is some code.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
//defaultDate: '2014-06-12',
defaultView: 'basicWeek',
editable: false,
height: 174,
eventLimit: 0,
eventLimitText: function(numEvents) {
return numEvents;
},
events: [{
title: 'Event',
start: '2017-09-18'
} //,
//{
//title: 'Event',
//start: '2017-09-18'
//}
]
});
});
<script src="https://fullcalendar.io/js/fullcalendar-2.2.5/lib/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.1/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.1/fullcalendar.min.js"></script>
<div id='calendar'></div>

Add events in 28-day cycle in FullCalendar.js

I'm using FullCalendar.js to show tasks entered by users. For this I have created a pop up to take Event basic details and details about recurrence. An event can recur daily, weekly, 28 day, 31 day , 30 day cycles. I have been able to render events for daily and weekly cases but I cant think about how to render events occurrences with 28/30/31 days between them.
My code for calendar is as follows:
$('#calendar').fullCalendar({
//height: 420,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: moment(),
defaultView: 'month',
eventRender: function (event, element, view) {
console.log(event.start.format());
if (event.ranges == undefined)
return true;
else {
return (event.ranges.filter(function (range) {
if (range.end == undefined)//Check if only start is given
return (event.end.isAfter(range.start))
else
return (event.start.isBefore(range.end) &&//If both start and end date is given
event.end.isAfter(range.start));
}).length) > 0;
}
},
events: function (start, end, timezone, callback) {
var events = getEvents(start, end); //This should be a JSON request
callback(events);
},
eventClick: function (calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
//$('#btnOpenPopUp').click();
}
});
and json for events is like so:
{
title: "My repeating event",
id: 1,
start: '10:00', // a start time (10am in this example)
end: '14:00', // an end time (6pm in this example)
dow: [1, 2, 3, 4, 5], // Repeat monday and thursday
ranges: [{
start: moment().startOf('month').subtract(1, 'month'),
end: moment().startOf('month').subtract(1, 'month').add(7, 'd'),
}, {
start: moment('2016-12-15', 'YYYY-MM-DD'), //all of february
//end: moment('2016-11-01', 'YYYY-MM-DD').endOf('month'),
}
I need help to render tasks that occur after every 28 days. Any suggestions?

Maybe you could use later.js project (http://bunkat.github.io/later/index.html) to calculate the occurrences of the tasks. This code sample will produce the all occurrences between 2 dates for every 28 days:
<html>
<head>
<script src="moment.js" type="text/javascript"></script>
<script src="moment-recur-min.js" type="text/javascript"></script>
<script type="text/javascript">
var recurrence = moment().recur("2016-12-06", "2017-12-06").every(28).days();
var allDates = recurrence.all("L");
console.log(allDates);
</script>
</head>
<body>
test
</body>
</html>