i am trying to show data from events.json file to my website. my code is showing data in console.log but how can i store it in variable to resue it, on the website.

events.json file data:

[
{
      "id": "d8jai72s",
      "name": "Vacations",
      "description": "TEST",
       "date": "March/16/2022",
      "type": "vacation"
     
    }
]

Code to show response in console:

$(document).ready(function() {
fetch("events.json")
.then(response => {
   return response.json();
})
.then(jsondata => console.log(jsondata));

i want to use this response here in same .js file:

    $("#demoEvoCalendar").evoCalendar({
        format: "MM dd, yyyy",
        titleFormat: "MM",

        calendarEvents: [{
          

> // i want place response data in calendarEvents here with other events.

      id: "d8jai72s",
      name: "Vacations",
      description: "Winter Vacation Starts (All Classes)",
       date: ["January/01/2022", "January/13/2022"],
      type: "vacation",
      everyYear: 0
    }
]
});

UPDATE: Following the comment "Take whatever code that you want to access jsondata and move it into the .then(jsondata => { ... }) function "

i edited my code as following and it doesn't work:

$(document).ready(function() {
fetch("events.json")
.then(response => {
   return response.json();
})
.then(jsondata => {


    $("#demoEvoCalendar").evoCalendar({
        format: "MM dd, yyyy",
        titleFormat: "MM",

        


        calendarEvents: [
          
  
    {
      id: "d8jai72s",
      name: "New Academic Year",
      description: "New Academic year starts (GR. 2 to GR. 5)",
      date: "April/14/2022",
      type: "newyear",
      everyYear: 0
    },
    
   ]
  })
    });