How to display fullcalendar within jquery steps?

Question

What is the appropriate way to display fullcalendar within jquery steps?

I've tried the following way but it doesn't work.

If I try to display in first step it loads fine but after that no. How to fix this issue?

Please, I really need help, I've spent hours on this. I can't understand what to do.

It just won't render on second step or more.

Could someone help figure this?

js

// Validate steps wizard

// Show form
var form = $(".steps-validation").show();

$(".steps-validation").steps({
    headerTag: "h6",
    bodyTag: "fieldset",
    transitionEffect: "fade",
    titleTemplate: '<span class="step">#index#</span> #title#',
    labels: {
        finish: 'Submit'
    },
    onStepChanging: function (event, currentIndex, newIndex)
    {
        
        // Always allow previous action even if the current form is not valid!
        if (currentIndex > newIndex)
        {
            return true;
        }
        
        if ( currentIndex == 0 ) {
           
                var today = new Date();
                document.getElementById("currentDate").innerHTML = moment(today).format('DD-MM-YYYY');
                  var calendarEl = document.getElementById("calendar");
                  var calendar = new FullCalendar.Calendar(calendarEl, {
                    headerToolbar: {
                      left: "prev",
                      center: "title",
                      right: "today next",
                    },
                    
                    selectable: true,
                    validRange: function(nowDate){
                    return {start: nowDate} //to prevent anterior dates
                    },
                    showNonCurrentDates: false,
                    dateClick: function(info) {
                        var chosenDate = info.dateStr;
                        document.getElementById("currentDate").innerHTML = moment(chosenDate).format('DD-MM-YYYY');
                        finalDate = chosenDate;
                        if ( document.getElementById("time-slots").style.display = "none") {
                           $("#time-slots").fadeIn();
                        }
                    }
                  });
                  calendar.render();
                
              
        }
        
        // Needed in some cases if the user went back (clean up)
        if (currentIndex < newIndex)
        {
            // To remove error styles
            form.find(".body:eq(" + newIndex + ") label.error").remove();
            form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
        }
        form.validate().settings.ignore = ":disabled,:hidden";
        return form.valid();
    },
    onFinishing: function (event, currentIndex)
    {
        form.validate().settings.ignore = ":disabled";
        return form.valid();
    },
    onFinished: function (event, currentIndex)
    {
        alert("Submitted!");
    }
});

// Initialize validation
$(".steps-validation").validate({
    ignore: 'input[type=hidden]', // ignore hidden fields
    errorClass: 'danger',
    successClass: 'success',
    highlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
    },
    unhighlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
    },
    errorPlacement: function(error, element) {
        error.insertAfter(element);
    },
    rules: {
        email: {
            email: true
        }
    }
});