push new items to an object from fields

actually i’m about to create a calendar with events, and i want to add new events with a form, let me explain.

i have:

let eventsArray = [
            {
                id: 'my event name',
                date: '2021/08/23',
                content: 'my events description',
            },
        ];

result and demo: https://jsfiddle.net/er73av8h/

Now, i want to populate this object through 3 field maybe (id, date and content), but i’m not sure on how i can do this.

Answer

I made a very simple example of what you want. If my example works for you I will write a description of how this code works.

Example:

let eventsArray = [
    {
        id: 'my event name',
        date: '2021/08/23',
        content: 'my events description',
    },
];

let wrp = document.getElementById('calendar');

function addInfoInCalendar() {
    wrp.innerHTML = '';
    for (const iterator of eventsArray) {
        wrp.innerHTML += '<div>' + iterator.id + ' ' + iterator.date + ' ' + iterator.content + '</div>';
    }
}
addInfoInCalendar();

let formWrp = document.getElementById('myForm');
let f_id = myForm.querySelectorAll('[name="id"]')[0];
let f_date = myForm.querySelectorAll('[name="date"]')[0];
let f_content = myForm.querySelectorAll('[name="content"]')[0];
let f_button = myForm.querySelector('button');

f_button.addEventListener('click', addNewInfo);

function addNewInfo() {
    eventsArray.push({
        id: f_id.value,
        date: f_date.value,
        content: f_content.value
    });

    addInfoInCalendar();
}
<div id="myForm">
    <input type="text" name="id">
    <input type="date" name="date">
    <input type="text" name="content">
    <button>Send</button>
</div>

<div id="calendar"></div>

Example 2:

In this example is your code! I added a few new lines at the end of the code and marked them with a comment.

let eventsArray = [
    {
        id: 'My Name',
        date: '2021/08/23',
        content: 'my events description',
        source: '#',
    },
];

let today = new Date(),
    currentMonth = today.getMonth(),
    currentYear = today.getFullYear();

// array for weeks
const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
// array for month
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

// structure
let structureCalendar = createElement('div', window.root, {
    id: 'structureCalendar',
}),
    // header
    calendarHeader = createElement('header', structureCalendar, {}),
    // header columns left center and right
    headerLeft = createElement('div', calendarHeader, { className: 'left' }),
    headerCenter = createElement('div', calendarHeader, { className: 'center' }),
    headerRight = createElement('div', calendarHeader, { className: 'right' }),
    // inside left column
    buttonPrev = createElement('button', headerLeft, { textContent: 'Previous' }),
    buttonNext = createElement('button', headerLeft, { textContent: 'Next' }),
    centerTitle = createElement('h1', headerCenter, {
        textContent: months[currentMonth] + ' ' + currentYear,
    }),
    // calendar body
    calendarBody = createElement('div', structureCalendar, { id: 'calendar' }),
    weekdayBody = createElement('ul', calendarBody, { id: 'weekdays' }),
    daysBody = createElement('ul', calendarBody, { id: 'days' });

// init calendar
showCalendar(currentMonth, currentYear);

// map week days
weekdays.map((item, i) =>
    // change to monday
    today.getDay() - 0 == i
        ? createElement('li', weekdayBody, { className: 'today', textContent: item })
        : createElement('li', weekdayBody, { textContent: item })
);

// buttons next prev
buttonPrev.onclick = () => prev();
buttonNext.onclick = () => next();

// generate calendar
function showCalendar(month, year) {
    // first day - 1
    let firstDay = new Date(year, month).getDay() - 1;

    // clear preview content
    daysBody.textContent = '';

    // filing data about month and in the page via DOM.
    centerTitle.textContent = months[month] + ' ' + year;

    // creating all cells
    let date = 1;
    for (let i = 0; i < 6; i++) {
        //creating individual cells, filing them up with data.
        for (let j = 0; j < 7; j++) {
            if (i === 0 && j < firstDay) {
                createElement('li', daysBody, { textContent: '' });
            } else if (date > daysInMonth(month, year)) {
                break;
            } else {
                let li = createElement('li', daysBody, {}),
                    info = createElement('div', li, {
                        className: 'info',
                        textContent: weekdays[j],
                    }),
                    div = createElement('div', li, { className: 'date', textContent: date });
                // ----------------------------
                // ----- view events
                if (typeof eventsArray !== 'undefined') {
                    viewEvents(eventsArray, li, [year, month, date]);
                }
                // ----------------------------
                if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
                    li.className = 'today';
                }
                date++;
            }
        }
    }
}

// view events
function viewEvents(data, where, args) {
    return (
        data &&
        data.map((item) => {
            let date = item.date.split('/'),
                year = parseInt(date[0]),
                month = parseInt(date[1]) - 1,
                day = parseInt(date[2]);

            if (year === args[0] && month === args[1] && day === args[2]) {
                let event = createElement('div', where, { className: 'ev', id: item.id }),
                    eventDesc = createElement('div', event, { className: 'ev-desc' });
                eventDesc.innerHTML = `<div class="eventFlarumCalendar">${item.content}</div>`;
                event.onclick = () => alert(eventDesc.textContent);
            }
        })
    );
}

// next month
function next() {
    currentMonth = (currentMonth + 1) % 12;
    currentYear = currentMonth === 11 ? currentYear + 1 : currentYear;
    showCalendar(currentMonth, currentYear);
}
// previus month
function prev() {
    currentMonth = currentMonth === 0 ? 11 : currentMonth - 1;
    currentYear = currentMonth === 0 ? currentYear - 1 : currentYear;
    showCalendar(currentMonth, currentYear);
}
function daysInMonth(iMonth, iYear) {
    return 32 - new Date(iYear, iMonth, 32).getDate();
}
// --- Create element
function createElement(element, where, args) {
    let d = document.createElement(element);
    if (args) for (const [k, v] of Object.entries(args)) d[k] = v;
    where.appendChild(d);
    return d;
}

/////////////////////////////////////////////////////////////
// NEW LINES

let formWrp = document.getElementById('myForm');
let f_id = myForm.querySelectorAll('[name="id"]')[0];
let f_date = myForm.querySelectorAll('[name="date"]')[0];
let f_content = myForm.querySelectorAll('[name="content"]')[0];
let f_button = myForm.querySelector('button');

f_button.addEventListener('click', addNewInfo);

function addNewInfo() {
    let nfd = f_date.value.split('-').join('/');

    eventsArray.push({
        id: f_id.value,
        date: nfd,
        content: f_content.value
    });

    showCalendar(currentMonth, currentYear);
}
.eventFlarumCalendar {
    cursor: help;
}

#structureCalendar header {
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    background: #ff6200;
    color: #fdfdfd;
}

#structureCalendar header .left,
#structureCalendar header .center,
#structureCalendar header .right {
    width: 100%;
    float: left;
}

#structureCalendar header .left h1,
#structureCalendar header .center h1,
#structureCalendar header .right h1 {
    line-height: 1.8rem;
    font-size: 25px;
}

#structureCalendar header .left button,
#structureCalendar header .center button,
#structureCalendar header .right button {
    background-color: #ff6200;
    border: 1px solid #ff6200;
    color: #fdfdfd;
    padding: 0.5rem 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 0 4px;
    cursor: pointer;
    transition: all 500ms ease;
}

.center {
    background: #ff6200;
}

#structureCalendar header .left button:hover,
#structureCalendar header .center button:hover,
#structureCalendar header .right button:hover {
    background-color: #ff6200;
    border-color: #ff6200;
    color: #fdfdfd;
    transition: all 500ms ease;
}

#calendar #days,
#calendar #weekdays {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

#calendar #days li,
#calendar #weekdays li {
    display: block;
    float: left;
    width: calc(100% / 7);
    padding: 5px;
    box-sizing: border-box;
}

#calendar #weekdays {
    height: 40px;
    background: #ff6200;
    border-bottom: 2px solid #ff6200;
}

.contentcalflarum {
    display: flow-root;
}

#calendar #weekdays li {
    text-align: center;
    text-transform: uppercase;
    line-height: 20px;
    border: none !important;
    padding: 10px 6px;
    color: #474747;
    font-size: 13px;
    font-weight: bold;
}

#calendar #weekdays .today {
    background: #ff6200;
    color: #fdfdfd;
}

#calendar #days li {
    height: 150px;
    overflow-y: auto;
    background: #fdfdfd;
    position: relative;
    color: #ff6200;
    border: 1px solid #f0f0f0;
}

#calendar #days li:hover {
    background: #f0f0f0;
}

#calendar #days li .info {
    position: absolute;
    bottom: 2px;
    right: 2px;
    opacity: 0;
}

#calendar #days li .date {
    text-align: center;
    margin-bottom: 5px;
    background: #777ffa;
    color: #fdfdfd;
    width: 25px;
    height: 25px;
    line-height: 25px;
    border-radius: 50%;
    float: right;
    font-size: 12px;
    font-weight: bold;
}

#calendar #days .today {
    background: #f2f2fe;
}

#calendar #days .today:hover {
    background: #c0c4fd;
}

.ev {
    display: block;
    background: #f2f2fe;
    border: 1px solid #c0c4fd;
    border-radius: 4px;
    margin: 5px auto;
    transition: background 500ms ease;
}

.ev:hover {
    background: #777ffa;
    transition: background 500ms ease;
}

.ev-desc {
    padding: 0.2rem 0.5rem;
}

.ev-desc a {
    text-decoration: none;
    color: #ff6200;
    transition: color 500ms ease;
}

.ev:hover .ev-desc a {
    color: #a8adfc;
    transition: color 500ms ease;
}

@media (max-width: 768px) {
    #structureCalendar header {
        height: auto;
        text-align: center;
        padding: 1rem;
    }

    #structureCalendar header .left,
    #structureCalendar header .center,
    #structureCalendar header .right {
        width: 100%;
        float: none;
    }

    #calendar #weekdays,
    #calendar .null {
        display: none;
    }

    #calendar #days li {
        height: auto !important;
        border: 1px solid #f0f0f0;
        width: 100%;
        padding: 10px;
        margin-bottom: -1px;
    }

    #calendar #days li .info {
        left: 2px;
        opacity: 1;
        color: #d9dbfe;
    }

    #calendar .date {
        float: none;
    }
}
<div id="myForm">
    <input type="text" name="id">
    <input type="date" name="date">
    <input type="text" name="content">
    <button>Send</button>
</div>

<div class="contentcalflarum">
    <div class="calforflarum" id="root"></div>
</div>