Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Currently, when I click on a given date, a modal is opened with two inputs, one for the user to enter the date in "DD/MM/YYYY" and another for him to enter the time in "HH:mm:ss". I'm managing to do this, but when I click confirm, the event is not shown/updated on the calendar.

I'm using ReactJS and Typescript in the project.

Another question is, how could I use an API to save data from scheduled events?

This is my code: Calendar.tsx

import { useState } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import { AddEventModal } from '../AddEventModal';
import { EventInput } from '@fullcalendar/core/index.js';
export function Calendar() {
  const [isOpen, setIsOpen] = useState(false);
  const [events, setEvents] = useState<EventInput[]>([]);
  const handleAddEvent = (arg: { dateStr: string }) => {
    setIsOpen(true);
  const handleModalClose = () => {
    setIsOpen(false);
  const handleEventClick = (info: EventInput) => {
    console.log("Cliquei no evento de: ", info.event);
  const handleModalSubmit = (newEvent: EventInput) => {
    setEvents([...events, newEvent]);
  return (
      <FullCalendar
        plugins={[ dayGridPlugin, interactionPlugin ]}
        initialView="dayGridMonth"
        locale="pt-br"
        height={800}
        events={events}
        selectable={true}
        dateClick={handleAddEvent}
        eventClick={handleEventClick}
      {isOpen && (
        <AddEventModal
          isOpen={isOpen}
          onClose={handleModalClose}
          onAddEvent={handleModalSubmit}
AddEventModal.tsx
import { EventInput } from "@fullcalendar/core/index.js";
import React, { useState } from "react";
import Modal from 'react-modal';
interface AddEventModalProps {
  isOpen: boolean;
  onClose: () => void;
  onAddEvent: (newEvent: EventInput) => void;
export function AddEventModal({ isOpen, onClose, onAddEvent }: AddEventModalProps) {
  const [eventDate, setEventDate] = useState('');
  const [eventTime, setEventTime] = useState('');
  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const newEvent: EventInput = {
      title: 'Novo Evento',
      start: `${eventDate}T${eventTime}`,
      allDay: false,
    onAddEvent(newEvent);
    onClose();
    setEventDate('');
    setEventTime('');
  return (
    <Modal
      isOpen={isOpen}
      onRequestClose={onClose}
      <form onSubmit={handleFormSubmit}>
        <input
          type="text"
          placeholder="DD/MM/YYYY"
          value={eventDate}
          onChange={(event) => setEventDate(event.target.value)}
        <input
          type="text"
          placeholder="HH:mm:ss"
          value={eventTime}
          onChange={(event) => setEventTime(event.target.value)}
        <button type="submit">Confirmar</button>
        <button type="button" onClick={onClose}>Cancelar</button>
      </form>
    </Modal>
I searched the documentation, but I didn't quite understand how it works: https://fullcalendar.io/docs/eventAdd
I also tried saving an event dynamically without using the modal, but I still wasn't successful.
                I didn't quite understand how it works... well you're looking in the wrong place. eventAdd is a callback which runs when an event has been added to the calendar. To add one yourself, you need the addEvent function. That is just a regular JS function, and you call it in a very standard way like any other JS function. If you want to know how to get hold of the calendar object on which you can call the function, read the "Calendar API" section of fullcalendar.io/docs/react
– ADyson
                May 11 at 14:49
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.