Fullcalendar数据加载问题：数据库日期时间分栏如何整合为DateTime

Got it, let's tackle this problem step by step. Since your database stores date and time in distinct columns but FullCalendar expects a single DateTime value for event start/end times, you’ve got three solid approaches to fix this—pick the one that fits your stack and workflow best:

1. Merge Date/Time at the Backend (Model/Controller Layer) #

This is the most clean and maintainable option, as it keeps data formatting logic centralized. Let’s use a common framework example (adjust for your tech stack if needed):

Example with Laravel (PHP) #

If you’re using Laravel, add an accessor to your Event model to combine the two columns into a single DateTime object:

use Carbon\Carbon;

class Event extends Model
{
    // Accessor for combined start datetime
    public function getStartDateTimeAttribute()
    {
        // Merge date and time columns, return a Carbon instance
        return Carbon::parse("{$this->event_date} {$this->event_time}");
    }

    // Repeat for end datetime if needed
    public function getEndDateTimeAttribute()
    {
        return Carbon::parse("{$this->end_date} {$this->end_time}");
    }
}

Then in your controller, format this combined value into the ISO 8601 string FullCalendar requires:

public function getCalendarEvents()
{
    $events = Event::all()->map(function ($event) {
        return [
            'title' => $event->title,
            'start' => $event->start_datetime->toIso8601String(),
            'end' => $event->end_datetime->toIso8601String(),
            // Add other event fields (description, color, etc.) here
        ];
    });

    return response()->json($events);
}

For other frameworks (like ASP.NET, Django), the logic is identical: create a computed property that combines the date and time fields into a proper DateTime object, then serialize it to ISO 8601 for the frontend.

2. Merge Directly in Your Database Query #

If you prefer handling the merge at the database level, use SQL functions to concatenate and convert the columns into a DateTime. Here’s how to do it for common databases:

MySQL/MariaDB #

SELECT
    title,
    STR_TO_DATE(CONCAT(event_date, ' ', event_time), '%Y-%m-%d %H:%i:%s') AS start_datetime,
    STR_TO_DATE(CONCAT(end_date, ' ', end_time), '%Y-%m-%d %H:%i:%s') AS end_datetime
FROM events;

Your controller can then directly fetch this pre-computed start_datetime and end_datetime and pass them to FullCalendar without extra processing.

PostgreSQL #

SELECT
    title,
    (event_date || ' ' || event_time)::timestamp AS start_datetime,
    (end_date || ' ' || end_time)::timestamp AS end_datetime
FROM events;

3. Merge Date/Time on the Frontend (Last Resort) #

If you can’t modify backend code for some reason, you can combine the fields directly in JavaScript before passing data to FullCalendar. Just make sure your date/time formats are consistent (e.g., YYYY-MM-DD for dates, HH:mm:ss for times):

document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');
    const calendar = new FullCalendar.Calendar(calendarEl, {
        events: function(info, successCallback) {
            fetch('/your-events-api-endpoint')
                .then(res => res.json())
                .then(rawEvents => {
                    const formattedEvents = rawEvents.map(event => ({
                        title: event.title,
                        // Merge date and time into ISO 8601 format
                        start: `${event.event_date}T${event.event_time}`,
                        end: `${event.end_date}T${event.end_time}`
                    }));
                    successCallback(formattedEvents);
                });
        }
    });
    calendar.render();
});

Key Notes to Avoid Issues #

• Timezone Consistency: Always ensure your merged DateTime values use a consistent timezone (preferably UTC) to avoid display bugs in FullCalendar.
• Format Validation: Double-check that your date/time strings match the expected formats (e.g., no missing leading zeros in hours/minutes) to prevent parsing errors.

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