Develop Reference

Can you store js code on the fly in a variable and have js read it?

I'm not sure if what I'm trying to do is the correct/valid approach to what I'm trying to accomplish; essentially, I'm retrieving data from a db via an ajax call, I want this data to populate a js library where the layout is something like
data[
item{
name: 'name',
start_date: date,
end_date: date
},
item{
name: 'name',
start_date: date,
end_date: date
},
]
is there any way I can populate the code inside 'data' on the fly?
I was thinking with a loop to populate a variable which would hold the data and placing it like so
//this is hard coded, but the idea is that a loop would populate this with the necessary information
let items = "
item{
name: 'name',
start_date: date,
end_date: date
},
item{
name: 'name',
start_date: date,
end_date: date
}";
data[
items
]
Would this be a valid approach?
thanks in advance!
UPDATE:
For clarification, this what I have
$('#calendar').fullCalendar({
defaultDate: today,
eventLimit: true,
events: [
{
title: 'Some event',
start: '2022-08-31',
end: '2022-08-31'
},
{
title: 'Some event',
start: '2022-08-31',
end: '2022-08-31'
}
]
});
What im trying to achieve is something like this
let allEvents = "
{
title: 'Some event',
start: '2022-08-31',
end: '2022-08-31'
},
{
title: 'Some event',
start: '2022-08-31',
end: '2022-08-31'
}";
$('#calendar').fullCalendar({
defaultDate: today,
eventLimit: true,
events: [
allEvents;
]
});
Would this be possible?

So, closing this question, thanks to #DaveNewton for the insight, it really clarified what I was supposed to do; I apologize for the confusion, my thought process essentially revolved around 'echoing' or 'printing' code in php.
my approach was:
$.ajax({
type: "GET",
url: filethathandlesrequest.php,
data: {
data_to_be_sent: 'data',
},
success: function(response) {
response = JSON.parse(response);
eventsGotten = response.return_result;
//this is where I create the object
let eventsToDisplay = [];
for (let index = 0; index < eventsGotten.length; index++) {
const element = eventsGotten[index];
let singleEvent = {title: element.description, start: element.start_date, end: element.end_date};
eventsToDisplay.push(singleEvent);
}
if (response.return_code === 0) {
if ($('#calendar').exists()) {
loadScript(plugin_path + 'fullcalendar/fullcalendar.min.js', function() {
$('#calendar').fullCalendar({
defaultDate: today,
//editable: true,
eventLimit: true,
events: eventsToDisplay // <-- this is where I use it; and it works!
});
});
}
} else { //you can ignore this, this is just to not display anything if my ajax request fails
if ($('#calendar').exists()) {
loadScript(plugin_path + 'fullcalendar/fullcalendar.min.js', function () {
$('#calendar').fullCalendar({
defaultDate: today,
//editable: true,
eventLimit: true,
events: []
});
});
}
}
});

It seems you are asking if you can import data from a database and populate a JSON array in Javascript with it. The answer would be yes. In fact, I do this routinely to create Javascript front ends that can be quickly rendered and only talk to the database when necessary so you're not waiting on it. You can use Jquery ajax calls to retrieve and write data. I like to have local variables with JSON formatted data which I use to run the app. The app can quickly read and write changes to these JSON arrays. Keep in mind if the page is reloaded or fails all the data to that point will be lost and the user will have to start over so you need to store data to the database at strategic intervals. You can also use HTML localStorage to store data in the browser itself. I've found this an efficient way to build single-page Javascript apps without resorting to React or some of the other frameworks. It's not as efficient though, but easier to code and maintain.

The approach I would take is to define a particular DOM element as a parent / container for the DOM elements which will represent each item. Iterate over the items array in your ajax response, and create DOM elements with jquery for each item. Something along the lines of $('<div>${currentItem.name}>/div>').appendTo(containerDiv);

How to show all events without range limitation in fullcalendar?

I want to show all events without any limitation in fullcalendar v5.
Here's my code.
document.addEventListener('DOMContentLoaded', function() {
var calendarEventsEl = document.getElementById('calendar-events');
calendarEvents = new FullCalendar.Calendar(calendarEventsEl, {
initialView: 'listMonth',
navLinks: false, // can click day/week names to navigate views
dayMaxEvents: true,
eventTimeFormat: {
hour: 'numeric',
minute: '2-digit',
meridiem: false
},
eventSources: [{
method: 'POST',
url: '/calendar/get_all',
failure: function() {
document.getElementById('script-warning').style.display = 'block'
}
}]
});
calendarEvents.render();
})
At this moment, I can show all events for the month.
If I check the response for eventSources api, the response has all events.
But what I want to do is to show all events without any limitation like week, month, etc.
I tried to change the initialView option to list and tried to set validRange and visibleRange to null.
Any ideas?

When there are too many events, a link that looks like “+2 more” is displayed. The exact action that happens when the user clicks the link is determined by eventLimitClick.
A value of false (the default) will display all events as-is.
A value of true will limit the number of events to the height of the day cell. View a live demo.
An integer value will limit the events to a specific number of rows.
For the all-day section in the TimeGrid views, a value of true will limit the number of events to 5. To fine-tune this, use View-Specific Options like this:
var calendar = new Calendar(calendarEl, {
eventLimit: true, // for all non-TimeGrid views
views: {
timeGrid: {
eventLimit: 6 // adjust to 6 only for timeGridWeek/timeGridDay
}
}
});

Events are duplicated when switching months in Fullcalendar v4

I'm using Fullcalendar v4 like this. Events are loaded correctly, but when I manually add a new one (it is also saved to SQL database via ajax call), then I change month and return back, this event is rendered twice. I'm not sure what cause this, because when I change months again, event is still doubled only, not trippled.
I've tried set lazyLoading or cache to false and also, for example, remove all events before rendering with $('.fc-event').remove(); but it did not help.
var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
defaultView: 'resourceTimeline30',
views: {
resourceTimeline30: {
type: 'resourceTimeline',
duration: { days: 30 }
}
},
editable: false,
selectable: true,
resources: [ ... ],
events: 'https://www.example.com/?fullcalendar=load',
/*
// did not help
lazyLoading: true,
events: {
url: 'https://www.example.com/?fullcalendar=load',
cache: false,
extraParams: function() {
return {
cachebuster: new Date().valueOf()
};
}
}
*/
});
calendar.render();

So, if anybody needs it, according comments above, the working solution is:
Replace:
events: 'https://www.example.com/?fullcalendar=load',
With
eventSources: [{
'id': 1,
'url': 'https://www.example.com/?fullcalendar=load'
}],
And use that ID as second parameter in addEvent()
calendar.addEvent(event, 1);

FullCalendar display within date range

I am trying to display FullCalendar withing a certain date range. To do so I added the following visibleRange option to my code but it is not working. The calendar is simply not displaying.
this.$calendar.fullCalendar({
//other settings
defaultView: 'basic',
visibleRange: {
start: moment('2017-05-22'),
end: moment('2017-05-29')
},
duration: { days: 7 },
//other settings
});
Any idea how I can achieve this?
Thanks

Using momentjs 2.18.1, jquery 3.2.1, fullcalendar 3.4.0 this shows the view from 5/22 through 5/28:
$('#calendar').fullCalendar({
defaultView: 'basic',
visibleRange: {
start: moment('2017-05-22'),
end: moment('2017-05-29')
} // Don't use duration in combination with visibleRange? Appears to override
/*,
duration: {
days: 7
}*/
});
Demo # https://jsfiddle.net/ez33y8gv/

Fullcalendar : disableResizing is only working on month view

I put three views in my fullcalendar : month, agendaWeek and agendaDay.
I need to activate drag & drop and forbidden events resizing.
I use this following solution to do that on each render event :
$("#calendar").fullCalendar(
'renderEvent',
{
title: "event name",
editable: true,
disableResizing: true
},
true
);
It's only working in the month view, that is I can drag & drop and resize events in agendaWeek and agendaDay views.
How can I remove resizing in this views ?
Thanks.

I try to use the calendar option durationEditable:false but it did not work. The workaround was to use CSS and hide the resize element:
.fc-resizer.fc-end-resizer {
display: none;
}

place eventStartEditable: false as shown here:
initialView: 'resourceTimeline',
slotMinWidth:1,
eventDurationEditable: false, // Disable Resize
eventStartEditable: false, // disable dreage drop
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
hour12: true
},
Its Working,
for More
https://fullcalendar.io/docs/v1/disableResizing

disableResizing is available only as a global setting in FullCalendar. So if you want to disable resizing of all events in the calendar, you simply set the setting when you initialize FullCalendar:
var $calendar = $('#calendar').fullCalendar({
[...]
disableResizing: true,
[...]
});
If you want to disable resizing of specific events, you could take a look at this pull request.

place editable:false as shown here:
header:{
left:'prev,next today',
center:'title',
right: 'agendaWeek, list, rrule'//'month,agendaWeek,agendaDay'
},
editable:false, // place it under header. it worked for me
Works for Version 3