全日历功能不在范围内

Question

我正在尝试从范围外与 Fullcalendar 进行交互。例如下面，我正在尝试更改事件的颜色。另一个例子是简单地显示当前视图的警报。

要注意的是，我正在使用一个名为 FileMaker 的工具，它能够 Perform A Function Inside Javascript 而不是 HTML.

中的按钮

据我所知，我没有可以使用的事件侦听器。有没有办法让日历在全球范围内呈现？

<!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>

Answer 1

尝试将您的 changeColour 函数移动到 DOMContentLoaded 函数中，并将其显式附加到 window

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

这样它应该能够访问日历

全日历功能不在范围内

Fullcalendar Function Not In Scope

javascript

scope

filemaker

fullcalendar

fullcalendar-4