FullCalendar事件颜色修改及DataTable事件插入技术求助

Hey David, great job getting the FullCalendar event colors sorted out! Now let's get those same events into your DataTable—here are two straightforward ways to do it based on your existing code:

Method 1: Extend your existing event source approach #

You can keep using addEventSource and add a success callback to capture the event data once FullCalendar fetches it, then push that data into your DataTable:

var getAllBookings = function () {
    var cal = $('#calendar');
    var table = $('#example').DataTable(); // Get reference to your DataTable
    
    // Clear existing data to avoid duplicates
    cal.fullCalendar('removeEvents');
    table.clear().draw();

    cal.fullCalendar('addEventSource', {
        id: 'OpenBookings',
        url: '/api/Bookings/',
        color: 'red',
        textColor: 'white',
        success: function(data) {
            // Parse the API response if it's a string (skip if already JSON)
            var eventData = JSON.parse(data);
            // Add events to DataTable and refresh
            table.rows.add(eventData).columns.adjust().draw();
        }
    });

    cal.fullCalendar('refetchEventSources', "OpenBookings");
};

This ties directly into your current FullCalendar setup, letting you reuse the same API call for both the calendar and table.

Method 2: Use a manual AJAX call (matching your getBookingsID pattern) #

If you prefer consistency with your existing getBookingsID function, you can make a manual AJAX request, modify the events to set colors, then render them to both FullCalendar and DataTable:

var getAllBookings = function () {
    var cal = $('#calendar');
    var table = $('#example').DataTable();
    
    // Clear existing data
    cal.fullCalendar('removeEvents');
    table.clear().draw();

    $.ajax({
        type: 'GET',
        contentType: 'application/json',
        url: '/api/Bookings/',
        success: function (data) {
            var eventData = JSON.parse(data);
            
            // Add color properties to each event before rendering
            var coloredEvents = eventData.map(event => ({
                ...event,
                color: 'red',
                textColor: 'white'
            }));
            
            // Render to FullCalendar
            cal.fullCalendar('renderEvents', coloredEvents, true);
            // Add to DataTable
            table.rows.add(eventData).columns.adjust().draw();
        }
    });
};

This approach gives you full control over data manipulation—useful if you need to tweak event data before displaying it in either component.

Quick Notes: #

• Ensure your DataTable is initialized first (run $('#example').DataTable() when your page loads)
• If your API returns a JSON object directly (not a string), remove the JSON.parse(data) line and use data instead
• Verify that your event data fields match the columns defined in your DataTable to avoid display issues

内容的提问来源于stack exchange，提问作者David