Example Event

[risingisland]

Sorry, I am new. Can you provide an example of how to add an event on a specific date?

[brospars]

This plugin is not designed to add events dynamically. You need to initialize it with a list of existing events, like so :

$("#container").simpleCalendar({
    // ...
    events: [{
        startDate: YYYY-MM-DDTHH:mm:ss.sssZ ,
        endDate: YYYY-MM-DDTHH:mm:ss.sssZ,
        summary: 'Event 1'
    },
    {
        startDate: YYYY-MM-DDTHH:mm:ss.sssZ ,
        endDate: YYYY-MM-DDTHH:mm:ss.sssZ,
        summary: 'Event 2'
    }]
});

[risingisland]

Thank you for your reply, but I am still struggling. I have added it like so, but still not working...

{ startDate: 2020-07-07T13:53:14.925Z, endDate: 2020-07-07T13:53:14.925Z, summary: 'Event 1' }

[brospars]

Can you share the full code ?

[risingisland]

Removing the contents of events, it displays. As is, nothing displays...

<script src="assets/js/simple-calendar/jquery.simple-calendar.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#container").simpleCalendar({
                    //Defaults options below
                    //string of months starting from january
                    months: ['january','february','march','april','may','june','july','august','september','october','november','december'],
                    days: ['sunday','monday','tuesday','wednesday','thursday','friday','saturday'],
                    displayYear:         true,              // Display year in header
                    fixedStartDay:       true,            // Week begin always by monday
                    displayEvent:        true,             // Display existing event
                    disableEventDetails: false, // disable showing event details
                    disableEmptyDetails: true, // disable showing empty date details
                    events: [
                        {
                            startDate:  2020-07-07T13:53:14.925Z,
                            endDate:    2020-07-07T13:53:14.925Z,
                            summary:    'Event 1'
                        }
                    ],                     // List of events
                    onInit:         function (calendar) {}, // Callback after first initialization
                    onMonthChange:  function (month, year) {}, // Callback on month change
                    onDateSelect:   function (date, events) {}, // Callback on date selection
                    onEventSelect:  function() {}, // Callback on event selection - use $(this).data('event') to access the event
                    onEventCreate:  function( $el ) {},          // Callback fired when an HTML event is created - see $(this).data('event')
                    onDayCreate:    function( $el, d, m, y ) {}  // Callback fired when an HTML day is created   - see $(this).data('today'), .data('todayEvents')
                });
            });
        </script>

[monsterbrain]

@risingisland I think you need to pass the date in string format ...

like "2020-07-07T13:53:14.925Z"

[risingisland]

That was it, the quotes or ticks need to be added. Thanks!!

[brospars]

Thanks @monsterbrain