displayEvent not functioning properly within fullcalendar

I'm attempting to add an event to FullCalendar.io using a JavaScript function.

I've tried two methods.

Triggering the function at the end of the page or by clicking.

No error is displayed, but the event isn't showing up on my calendar.

<div id='calendar'></div>


<script language="javascript">
id='13-17-1'
title='TextOK'
start= '2016-04-07T08:30:00'
end= '2016-04-07T09:30:00'
test=addCalanderEvent(id, start, end, title)


function addCalanderEvent(id, start, end, title)
{
var eventObject = {
title: title,
start: start,
end: end,
id: id

};

$('#calendar').fullCalendar('renderEvent', eventObject, true);
alert("OKOK")

}

</script>


<input type="button" onClick="addCalanderEvent('13-17-1','TITLE','2014-09-19T10:30:00','2016-04-19T10:30:00')">

Answer №1

You can find a code example below that demonstrates how to implement an event listener for button click events.

https://jsfiddle.net/Zak649mf/

/* Using jQuery 3.5.1 and moment.js 2.25.3 */

$('#calendar').fullCalendar({});

$('#addEventButton').on('click', function() {
  // Generate random event id
  var id = Math.random().toString(16).substring(7);
  addNewEvent(id, '2022-10-15', '2022-10-18', 'New Event ' + id);
});

function addNewEvent(id, start, end, title) {
  var newEvent = {
    id: id,
    start: start,
    end: end,
    title: title
  };
  $('#calendar').fullCalendar('renderEvent', newEvent, true);
}

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

Utilizing a string as an argument in a function and dynamically assigning it as a key name in object.assign

Within my Angular 5 app written in TypeScript, I have a method in a service that requires two arguments: an event object and a string serving as the key for an object stored in the browser's web storage. This method is responsible for assigning a new ...

What could be causing my AngularJs routing and animation to bypass the second redirection?

Recently started working with Angular and experimenting with routing and animations to manage my page transitions. I followed a helpful guide that helped me set everything up. I encountered a few issues: When trying to link back to the landing page (home ...

Determining the Percentage of a Bar Chart

When utilizing Chart.js along with the fork available at (https://github.com/leighquince/Chart.js), I successfully developed a bar chart featuring 3 bars: Goal, Actual, and Available data. My challenge lies in finding a method to calculate the percentage ...

What is the best way to implement a switch case with multiple payload types as parameters?

I am faced with the following scenario: public async handle( handler: WorkflowHandlerOption, payload: <how_to_type_it?>, ): Promise<StepResponseInterface> { switch (handler) { case WorkflowHandlerOption.JOB_APPLICATION_ACT ...

Eradicate white space in a JavaScript code

Calling all JS programmers! Here's a challenge for you, check out this demo: https://codepen.io/gschier/pen/jkivt I'm looking to tweak 'The pen is simple.' to be 'The pen issimple.' by removing the extra space after 'is& ...

Navigate between pictures using hover in jQuery

I am working on creating a feature where images cycle through individually every 2 seconds, but switch to the right image when its associated link is hovered. So far, I have managed to make the images show up on hover, but I am struggling with getting them ...

Tips on how to modify database records rather than generating new ones

Currently, my team is developing a web application that utilizes wearables to monitor vital parameters. As part of our integration testing, we are using a Fitbit device. The app itself is built with Angular and JavaScript, while the database is hosted on C ...

Why does the pound symbol in z-index always show up in Angular?

Having an issue with my code where I set a z-index in the CSS like this: .mat-mini-fab { position: absolute; right: 5px; top: 4px; z-index: 999; box-shadow: none !important; } However, whenever I visit my site, the z-index is not being appl ...

Sending data from configuration to factory in AngularJS and UI Router

Trying to perform a search in an http call with a dynamic value based on the current view. The factory setup is as follows: .factory('SearchService', ['$http','$filter', function($http, $filter) { var service = { get ...

Insufficient Resources Error (net::ERR_INSUFFICIENT_RESOURCES) encountered while executing jQuery script with multiple ajax requests for 2 minutes

Upon initially loading the code below, everything seems to be functioning smoothly with the dayofweek and hourofday functions. However, shortly thereafter, the browser (Chrome) freezes up and displays the error message: net::ERR_INSUFFICIENT_RESOURCES. Thi ...

When an element is dragged within the mcustomscrollbar container, the scroll does not automatically move downward

I am facing an issue where I have multiple draggable elements inside a Scrollbar using the mcustomscrollbar plugin. When I try to drag one of these elements to a droppable area located below the visible area of the scroller, the scroll does not automatical ...

Suggestions for relocating this function call from my HTML code

I have been working on updating a javascript function that currently uses an inline event handler to a more modern approach. My goal is to eliminate the unattractive event handler from the actual HTML code and instead place it in a separate modular javascr ...

Guidelines for submitting and displaying content on a single page with jQuery and MySQL

Objective: To develop a Q&A Script using PHP, JavaScript, and jQuery that allows users to post questions and provide answers. Upon submitting a new answer, it should be stored in the database and automatically displayed in the answers section. Challenge: ...

Generate a distinct identifier for the select element ID whenever a new row of data is inserted into a table

Although my title accurately describes my issue, I believe the solutions I have been attempting may not be on the right track. I am relatively new to javascript and web development in general, so please forgive me for any lack of technical terminology. Th ...

CORS blocked the JavaScript Image's request

I am encountering an issue with my code that involves capturing selected divs using the HTML2Canvas library. However, when I try to download the captured image file, it is not working as expected. The error message I keep receiving is "Access to Image at ...

Issue: Typescript/React module does not have any exported components

I'm currently facing an issue with exporting prop types from one view component to another container component and using them as state type definitions: // ./Component.tsx export type Props { someProp: string; } export const Component = (props: ...

Obtain the key's value from a JSON object that is nested within another

Managing a complex data structure is crucial in programming. How can I efficiently retrieve specific values using known keys from this nested data? Take, for instance: var data = { code: 42, items: [{ id: 1, category: [{ ...

AngularJS date formatting fails to properly format dates

{{ map.thedate }} The result is 2014-06-29 16:43:48 Even after using the following code, it still displays the same date as above. {{ map.thedate | date:'medium' }} ...

Converting axios response containing an array of arrays into a TypeScript interface

When working with an API, I encountered a response in the following format: [ [ 1636765200000, 254.46, 248.07, 254.78, 248.05, 2074.9316693 ], [ 1636761600000, 251.14, 254.29, 255.73, 251.14, 5965.53873045 ], [ 1636758000000, 251.25, 251.15, 252.97, ...

How can I dynamically update HTML content in React upon receiving an AJAX response?

Hi there, I'm new to using React and I have a requirement where I need to make an AJAX GET request to the server when a user clicks on a button. Based on the received response, I need to prepare HTML and display it. I tried implementing this with the ...