Convert ajax response with jQuery

I have an JSON that is coming as a response from ajax call

The object

[
   {
      "name":"Elly",
      "phone":"4345353534",
      "date":"2023-06-20",
      "time":"10:30:00",
      "comment":"Some comment here",
      "timestamp":"2023-06-06 09:16:28",
      "badge": "badge bg-success"
      "color": "green"
   },
   {
      "name":"Peter",
      "phone":"3943476534875",
      "date":"2023-06-20",
      "time":"18:00:00",
      "comment":"No comment",
      "timestamp":"2023-06-06 06:16:28",
      "badge": "badge bg-danger"
      "color": "red"
   }
]

The AJAX Call

$(document).on('click', '#bookings', function() {
	var account = $('#account').val();
	$.ajax({
		url:"bookings.php",
		method:"POST",
		data:{account:account},
		success:function(data) {
            //the JSON result
            //The function below is placed here
           }
	});
});

Then I have this function where I try to create the events with the data from the AJAX response. In this example, the AJAX return just 2 records, but they might be any number.

The function

$(function (e) {
		var calendar = $("#calendar").calendarGC({
			dayBegin: 0,
			prevIcon: '<',
			nextIcon: '>',
			onPrevMonth: function (e) {
				console.log("prev");
				console.log(e)
			},
			onNextMonth: function (e) {
				console.log("next");
				console.log(e)
			},
			events: [
				{
					date: new Date("2023-06-07"),
					eventName: "Holiday",
					className: "badge bg-danger",
					onclick(e, data) {
						console.log(data);
					},
					dateColor: "red"
				},
				{
					date: new Date("2023-06-07"),
					eventName: "Holiday with wife",
					className: "badge bg-danger",
					onclick(e, data) {
						console.log(data);
					},
					dateColor: "red"
				}
			],
			onclickDate: function (e, data) {
				console.log(e, data);
			}
		});
	})

So, function with the new events to become like this

The expected result

$(function (e) {
		var calendar = $("#calendar").calendarGC({
			dayBegin: 0,
			prevIcon: '<',
			nextIcon: '>',
			onPrevMonth: function (e) {
				console.log("prev");
				console.log(e)
			},
			onNextMonth: function (e) {
				console.log("next");
				console.log(e)
			},
			events: [
				{
					date: new Date("2023-06-20"),
					eventName: "Elly",
					className: "badge bg-success",
					onclick(e, data) {
						console.log(data);
					},
					dateColor: "green"
				},
				{
					date: new Date("2023-06-20"),
					eventName: "Peter",
					className: "badge bg-danger",
					onclick(e, data) {
						console.log(data);
					},
					dateColor: "red"
				}
			],
			onclickDate: function (e, data) {
				console.log(e, data);
			}
		});
	})

What I have tried is

var json = $.parseJSON(data);
var array = [];
json.forEach((item) => {
    item = {}
    item ["date"] = new Date('"'+item.date+'"');
    item ["eventName"] = item.name;
    item ["className"] = item.badge;
    item ["dateColor"] = item.color;
    jsonObj.push(item);
});

1. You overwrite item each time
2. This is simpler

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const data = `[ { "name":"Elly", "phone":"4345353534", "date":"2023-06-20", "time":"10:30:00", "comment":"Some comment here", "timestamp":"2023-06-06 09:16:28", "badge": "badge bg-success", "color": "green" }, { "name":"Peter", "phone":"3943476534875", "date":"2023-06-20", "time":"18:00:00", "comment":"No comment", "timestamp":"2023-06-06 06:16:28", "badge": "badge bg-danger", "color": "red" } ]`;


const obj = $.parseJSON(data);
const array = obj.map((item) => ({

  "date": new Date('"' + item.date + '"'),
  "eventName": item.name,
  "className": item.badge,
  "dateColor": item.color
}));

console.log(array)

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- end snippet -->