Creating dynamic schedules with fullCalendar in javascript

As a first-time user of this library, I am attempting to add events to my calendar. Instead of the standard method shown below:

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',

    titleFormat:{
        year: 'numeric',
        month: 'short'  
    },

    events: [{
        title: "February Outing",
        start: "2021-02-19",
        end: "2021-02-21"
    }]
});

calendar.render();

For some reason, I'd like to do it differently like this:

    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',

        titleFormat:{
            year: 'numeric',
            month: 'short'  
        },
   });


let myEvents = [
    {
        title: "February Outing",
        start: "2021-02-19",
        end: "2021-02-21"
    }
]

calendar.events = myEvents
calendar.render();

Unfortunately, this alternative approach does not seem to work as expected.

Thank you in advance for your help :)

Answer №1

To add events to your calendar, utilize the Calendar::addEvent method. Simply loop through your array of events called myEvents and add each event to the calendar like this:

myEvents.forEach(event => calendar.addEvent(event))

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Twilio SMS Notification: The Class extension value provided is not a valid constructor or null

When attempting to utilize Twilio for sending SMS messages in a Vue.js project, I encountered an error while accessing Tools -> Developer Tools. <template> <div> <input type="text" v-model="to" placeholder="Ph ...

What is the reason behind $('#id').val() not functioning properly when document.getElementById('id').value is working flawlessly?

$('#id').val() = $.cookie("name"); - does not function as expected, no changes occur document.getElementById('id').value = $.cookie("name"); - works properly What is the reason behind this inconsistency? ...

Having issues retrieving tweets from my Twitter account, even though I am able to successfully post tweets

I've been attempting to retrieve tweets from my Twitter account using the Twitter API, but I keep encountering errors with all combinations failing. Despite having all the necessary node_modules and everything appearing to be in order, I still receive ...

What is the process for assigning a background color to a specific option?

Trying to create a dropdown menu with various options and colors. Managed to set background colors for each option, but once an option is selected, the background color disappears. Is there a way to fix this issue? See my HTML example below: <select> ...

Handling exceptions in Express.js with EJS templating using Node.js

I have encountered an issue with routing while developing my first node.js/express web-app. I suspect it has something to do with the way I am connecting the router in Express 4. Here is some debug information related to the problem: var router = express ...

Encountering an issue upon launching a new next.js project

Upon setting up my next.js project and running it, I encountered the following error: Error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postc ...

What's the process for creating a Java object in PHP and utilizing it in JavaScript?

I am looking to create an object on a PHP page and send it as a response through an AJAX call to be used as a JavaScript object on the response page. This type of object is what I need to generate and pass along. var areaChartData = { labels ...

AngularJS: Issue with Variable Value Rendering

I recently started working with Angular. In my JavaScript file, I have the following code: App.controller('ProductController', ['$scope', 'ProductService', function ($scope, ProductService) { console.clear(); console. ...

What is the method for retrieving values from an object using keys that are subject to change?

Here is the code snippet I am working with: bodyLength.forEach((el, i) => { console.log(`${values.bodyTitleEn2 + i.toString()}`); body.push({ title: [ { key: 'en', value: values.bodyTi ...

Setting up jade includes with gulp-jade: A comprehensive guide

Struggling with setting up Jade includes in your gulpfile.js while using gulp-jade? Check out this link for more information. Below is a snippet from the gulpfile.js: var gulp = require('gulp'); var browserSync = require('browser-s ...

Checking for the presence of a certain key within an object containing arrays that are value-based rather than index-based, using a Javascript

As I've been exploring various code snippets to check for the presence of object keys within arrays, I came across some brilliant examples that have been really helpful... However, my current dilemma lies in dealing with a JSON response that requires ...

My ability to click() a button is working fine, but I am unable to view the innerHTML/length. What could be the issue? (NodeJS

Initially, my goal is to verify the existence of the modal and then proceed by clicking "continue". However, I am facing an issue where I can click continue without successfully determining if the modal exists in the first place. This occurs because when I ...

Revising Global Variables and States in React

Recently delving into React and tackling a project. I find myself needing to manage a counter as a global variable and modify its value within a component. I initialized this counter using the useState hook as const [currentMaxRow, setRow] = useState(3) ...

How can I update an Angular Datatable to display new JSON data?

I have a Datatable controller set up as shown below: //Module / Módulo var angularDataTables = angular.module("angularDataTables", ['datatables', 'datatables.buttons' , 'datatables.bootstrap']); //Controller / Controlador ...

Create a wait function that utilizes the promise method

I need to wait for the constructor() function, which contains an asynchronous method handled by Promise. My goal is to wait for two asynchronous methods within the constructor, and then wait for the constructor itself. However, my code is throwing an err ...

Insert a scrollbar into the new popup window on Internet Explorer after the window has been opened

I am looking to enable scrolling in a pop-up window after it has been opened. While FireFox offers the 'window.scrollbars' property for this, Internet Explorer does not have a similar feature. Is there a way to add scrolling functionality in IE u ...

You can't retrieve a JSON object using Javascript

Every time I execute the javascript/php code below, I encounter an issue where I keep receiving "undefined" when trying to alert the 'userid' property of the json object. However, if I turn the json object into a string using stringify(), it corr ...

Eliminating the muted attribute does not result in the sound being restored

I am looking to implement a feature where a video loads automatically without sound, but when a user clicks a button labeled "Watch with Sound", the video restarts from the beginning and plays with sound. Below is the JavaScript code: let videoButton = do ...

Divide the string into two equal sections with nearly identical lengths

Given a string: "This is a sample string", the task at hand is to split it into 2 strings without breaking any words. The goal is to create two strings with the closest length possible, resulting in: ["This is a", "sample string"]. For example: "Gorge i ...

"Click events on jQuery's cloned elements are not retained when the elements are removed and appended to a container for the second time

Take a look at this fiddle: https://jsfiddle.net/L6poures/ item.click(function() { alert("It's functioning") }) $("#container").append(item) var stored = item.clone(true, true) function add_remove() { $("#container").html("") $("#conta ...