Here I am trying to load the calendar as you can see it seems to be squished to the left and I am unsure why. I tried setting width of the calendar manually when rendering it but nothing seems to work. However when I resize the screen it goes to the normal size I want it to be

My jQuery:

<script>
$(document).ready(function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        width: 1000,
        initialView: 'timeGridWeek', // default view being week
        locale: 'en-gb',
        headerToolbar: {
            left: 'prev,next,today',
            center: 'title',
            right: 'timeGridWeek,timeGridDay,dayGridMonth' // displays buttons to show each view: week, day, and month
        },
        slotDuration: '00:15:00', // Each slot is 15 minutes
        slotLabelInterval: '00:15:00', // Display time labels every 15 minutes
        slotLabelFormat: { //sets the time being 2 digits   
            hour: 'numeric',
            minute: '2-digit',
            omitZeroMinute: false,
            meridiem: 'short'
        },
        slotMinTime: '08:00:00', // Start time for the slots (8:00 AM)
        slotMaxTime: '17:00:00', // End time for the slots (5:00 PM)
        selectable: true,
        allDaySlot: false,
        select: function(info) {
            const selectedStartTime = moment(info.start).format('YYYY-MM-DD HH:mm');
            const fixedDuration = moment.duration('00:15:00');
            const selectedEndTime = moment(info.start).add(fixedDuration).format('YYYY-MM-DD HH:mm');

            $('#start_time').val(selectedStartTime);
            $('#end_time').val(selectedEndTime);

            $('#start_time').prop('readonly', true);
            $('#end_time').prop('readonly', true);

            $('#event_entry_modal').modal('show');
        },
        eventClick: function(info) {
            $('#eventModalLabel').text(info.event.title);
            $('#eventModalStart').text(moment(info.event.start).format('DD/MM/YYYY HH:mm'));
            $('#eventModalEnd').text(moment(info.event.end).format('DD/MM/YYYY HH:mm'));
            $('#eventModalNurse').text(info.event.extendedProps.nurseFirstName + ' ' + info.event.extendedProps.nurseLastName);
            $('#eventModalPatient').text(info.event.extendedProps.patientFirstName + ' ' + info.event.extendedProps.patientLastName);

            var patientProfileUrl = '/employeeProfile/' + info.event.extendedProps.patientId;

            $('#viewPatientProfile').off('click').on('click', function() {
                window.parent.location.href = patientProfileUrl;
            });

            $('#eventModal').modal('show');
        },
        events: '/calendar/displayEvents',
        editable: true,
        hiddenDays: [0, 6],
        views: {
            dayGridMonth: {
                selectable: false,
                selectMirror: false
            }
        }
    });
    calendar.render();
});

My HTML:

  <div class="tab-pane fade" id="profile-appointments">
                        <div id='calendar'></div>

I have tried setting the screen width using js and css neither work. I tried using a set timeout on the rendering of the calendar incase it was rendering too quickly this also did not work.