fullcalender: Events not displaying in calendar-CodePudding

I am trying to render my events on the calendar I render. I am following its official examples

event should appear on the date

Actual result

It just render an empty calendar

Any advice is appreciated

CodePudding user response：

I have to convert my start time and end time to the correct format of as the documentation

var momentStart = moment(content.start, 'MM-DD-YYYY');
var momentStartString = momentStart.format('YYYY-MM-DD'); 

var momentEnd = null;
var momentEndString = "";

if (content.end != null) {
  momentEnd = moment(content.end, 'MM-DD-YYYY');
  momentEndString = momentEnd.format('YYYY-MM-DD');
}

CodePudding user response：

~~Try to change function parameter name to something differnent than events.~~

Edit: Right - nothing naming related.

        $(document).ready(function () {

            var eventList = [
              {
                "title": "some subject",
                "start": "2022-01-28T13:00:00",
                "color": "pink"
              }
            ];
            
                        GenerateCalendar(eventList);

            function GenerateCalendar(myevents) {
                console.log("GenerateCalendar Enter ", myevents);
                // do not create another calendar if one exist
                var calendarEl = document.getElementById('calender');
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    headerToolbar: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                    },
                    initialView: 'dayGridMonth',
                    navLinks: true, // can click day/week names to navigate views
                    businessHours: true,
                    editable: true,
                    selectable: true,
                    events: myevents

                });
                calendar.render();
            }
        })

<style>
    body {
        margin: 40px 10px;
        padding: 0;
        font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
        font-size: 14px;
    }

    #calendar {
        max-width: 1100px;
        margin: 0 auto;
    }

    .fc-header-toolbar {
        /*
            the calendar will be butting up against the edges,
            but let's scoot in the header's buttons
        */
        padding-top: 1em;
        padding-left: 1em;
        padding-right: 1em;
    }
</style>

<h2>Index</h2>
<div id="calender"></div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8 M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>