Fullcalendar Function Not In Scope

Question

I am trying to interact with Fullcalendar from outside of scope. For example below, I am trying to change the colour of an event. Another example would be to simply display an alert with the current view.

The catch is, that I am using a tool called FileMaker which has the ability to Perform A Function Inside Javascript rather than a button inside of the HTML.

As far as I am aware, I don't have an event listener I can use. Is there a way I can have the calendar render globally?

<!DOCTYPE html>
<html lang='en'>

    <head>

        <meta charset='utf-8' />

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.4.2/main.min.css"></style>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.4.2/main.min.css"></style>

        <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.4.2/main.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.4.2/main.min.js"></script>

        <script>

            document.addEventListener
            (
                'DOMContentLoaded', function()
                {
                    var calendarEl = document.getElementById('calendar');

                    var calendar = new FullCalendar.Calendar
                    (
                        calendarEl,
                        {
                            plugins: [ 'dayGrid' ]
                            ,events: 'https://fullcalendar.io/api/demo-feeds/events.json'
                        }
                    );

                    calendar.render();
                }
            );

            function changeColour(id)
            {
                var event = calendar.getEventById(id);
                event.setProp( color, '#000000' );
            }

        </script>

    </head>
    
    <body>
        <div id='calendar-container'>
            <div id='calendar'></div>
        </div>
    </body>

</html>

I think you found a use case for a fat arrow function in a addEventListener. — Wayne, May 27 '22 at 02:34
I don't think an arrow function will solve this, unless I'm unaware of a behavior nuance. — bruderdog, May 27 '22 at 03:38

score 1 · Accepted Answer · answered May 27 '22 at 02:20

1

Try moving your changeColour function inside the DOMContentLoaded function and attaching it to the window explicitly

document.addEventListener('DOMContentLoaded', function(){
    var calendar = new FullCalendar....
    ....
    window.changeColour = function(id){
        var event = calendar.getEventById(id);
        event.setProp( color, '#000000' );
    }
}

That way it should be able to access calendar

answered May 27 '22 at 02:20

bruderdog

121
2
6

alternatively you can attach `calendar` to the window instead like `window.calendar = new FullCalendar...` – bruderdog May 27 '22 at 02:22
Out of curiosity, using the same example, could you suggest how to get the scroll top and left position of the calendar? I have tried a few different methods but everything comes back as zero – Scott Aug 12 '22 at 04:51
@Scott try `calendar.getBoundingClientRect()` and see if that's what you're after. – bruderdog Aug 13 '22 at 06:55

Fullcalendar Function Not In Scope

1 Answers1