基于CakePHP 3.5的小时段事件日历开发技术咨询

Hey there! Let's walk through how to build this hourly slot-based event management system in CakePHP 3.5—here's a step-by-step breakdown that covers everything from database setup to frontend rendering.

First, you'll need an events table to store your time-slot events. At minimum, it should track the date, the specific time slot, and basic event details. Here's a sample migration or SQL snippet to set this up:

CREATE TABLE events (
    id INT AUTO_INCREMENT PRIMARY KEY,
    event_date DATE NOT NULL,
    start_time TIME NOT NULL,
    title VARCHAR(255) NOT NULL,
    description TEXT,
    created DATETIME DEFAULT CURRENT_TIMESTAMP,
    modified DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    -- Add a unique constraint to prevent duplicate slots for the same date
    UNIQUE KEY unique_event_slot (event_date, start_time)
);

In CakePHP, you can generate this with a migration file using the bake command or manual migration code—either way, that unique constraint is key to preventing duplicate bookings at the database level.

Next, create a controller method to generate your 2-hour interval slots for a given date, then mark any slots that are already occupied by existing events.

// src/Controller/EventsController.php
public function dayView($date = null) {
    // Handle the target date (default to today if no date is provided)
    $targetDate = $date ? \Cake\I18n\FrozenDate::parse($date) : \Cake\I18n\FrozenDate::today();

    // Generate 2-hour slots starting at 7:00 (adjust start/end times as needed)
    $startHour = 7;
    $endHour = 19; // Ends at 19:00 (7 PM)
    $timeSlots = [];
    for ($hour = $startHour; $hour <= $endHour; $hour += 2) {
        $timeString = sprintf('%02d:00', $hour);
        $timeSlots[$timeString] = [
            'time' => $timeString,
            'available' => true
        ];
    }

    // Fetch all occupied slots for the target date
    $occupiedSlots = $this->Events->find()
        ->where(['event_date' => $targetDate])
        ->extract('start_time')
        ->map(function($time) {
            return $time->format('H:i');
        })
        ->toArray();

    // Mark occupied slots as unavailable
    foreach ($occupiedSlots as $slot) {
        if (isset($timeSlots[$slot])) {
            $timeSlots[$slot]['available'] = false;
        }
    }

    $this->set(compact('targetDate', 'timeSlots'));
}

This method does three key things:

• Parses the target date (using CakePHP's FrozenDate for date handling)
• Generates your 2-hour interval slots from 7:00 onward
• Queries existing events to mark used slots as unavailable

Now create a view template to render these slots. Available slots will be clickable to add events, while occupied ones will be disabled.

// src/Template/Events/day_view.ctp
<h2><?= $targetDate->format('F j, Y') ?> 事件时段管理</h2>

<div class="time-slot-container">
    <?php foreach ($timeSlots as $slot): ?>
        <div class="time-slot">
            <?php if ($slot['available']): ?>
                <?= $this->Form->create(null, ['url' => ['action' => 'add']]) ?>
                <?= $this->Form->hidden('event_date', ['value' => $targetDate->format('Y-m-d')]) ?>
                <?= $this->Form->hidden('start_time', ['value' => $slot['time']]) ?>
                <?= $this->Form->button($slot['time'], ['class' => 'btn btn-success slot-available']) ?>
                <?= $this->Form->end() ?>
            <?php else: ?>
                <button class="btn btn-secondary slot-unavailable" disabled>
                    <?= $slot['time'] ?> (已占用)
                </button>
            <?php endif; ?>
        </div>
    <?php endforeach; ?>
</div>

<style>
.time-slot-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}
.time-slot .btn {
    padding: 0.8rem 1.2rem;
    font-size: 1rem;
}
.slot-unavailable {
    cursor: not-allowed;
    opacity: 0.7;
}
</style>

This template renders each slot as either a clickable button (for available slots) or a disabled button (for occupied ones). The form submits directly to the add action with the date and pre-selected time slot.

Finally, implement the add method to handle event creation, with extra validation to ensure no duplicate slots are saved (even if someone bypasses frontend checks).

// src/Controller/EventsController.php
public function add() {
    $event = $this->Events->newEntity();
    if ($this->request->is('post')) {
        $event = $this->Events->patchEntity($event, $this->request->getData());
        
        // Double-check if the slot is already taken
        $existingEvent = $this->Events->find()
            ->where([
                'event_date' => $event->event_date,
                'start_time' => $event->start_time
            ])
            ->first();

        if ($existingEvent) {
            $this->Flash->error('这个时段已经被占用啦，请选择其他时段。');
            return $this->redirect($this->referer());
        }

        if ($this->Events->save($event)) {
            $this->Flash->success('事件已成功添加！');
            return $this->redirect(['action' => 'dayView', $event->event_date->format('Y-m-d')]);
        }
        $this->Flash->error('添加事件失败，请再试一次。');
    }
    $this->set('event', $event);
}

This method:

• Uses CakePHP's entity patching to handle form data
• Adds a safety check to ensure the slot isn't already occupied
• Redirects back to the day view with success/error messages

• Reusable Logic: Extract the slot-generation code into a CakePHP Component or Helper so you can use it across multiple controllers/views.
• AJAX Loading: Replace the full page reload with AJAX to load slots and submit events without refreshing the page.
• Custom Intervals: Make start time, end time, and slot interval configurable (e.g., store in a settings table) if you ever need to adjust the 2-hour rule.

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