FullCalendar v2+Laravel 选中空闲时段打开预约创建blade页传参实现咨询

1. 修改FullCalendar的select回调逻辑 #

你只需要替换现有代码中的select回调部分即可实现跳转传参，修改后的完整JS代码如下：

$(document).ready(function () {
    var events = {!! json_encode($events) !!};
    var resources = {!! json_encode($resources) !!};
    $('#calendar').fullCalendar({
        defaultView: 'agendaDay',
        defaultDate: moment().format("YYYY-MM-DD"),
        timeFormat : 'HH:mm',
        editable: true,
        height: 1150,
        eventLimit: true, // allow "more" link when too many events
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaDay,agendaTwoDay,agendaWeek,month'
        },
        views: {
            agendaTwoDay: {
                type: 'agenda',
                duration: { days: 2 },
                groupByResource: true
            }
        },
        allDaySlot: false,
        slotLabelFormat:"HH:mm",
        hiddenDays: [0],
        minTime:"07:00:00",
        maxTime: "23:59:59",
        slotDuration:"00:15:00",
        resources: resources,
        events: events,
        selectable: true,
        initialView: 'resourceTimelineWeek',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'resourceTimelineWeek,timeGridDay'
        },
        select: function(startDate, endDate, jsEvent, view, resource) {
            // 格式化选中的时间为标准日期格式
            const startTime = startDate.format('YYYY-MM-DD HH:mm');
            const endTime = endDate.format('YYYY-MM-DD HH:mm');
            const resourceId = resource.id;
            // 若需要传递资源名称可新增下行：const resourceName = resource.title;

            // 拼接跳转地址，这里使用Laravel路由别名生成基础路径，避免硬编码URL
            const createUrl = "{{ route('appointments.create') }}" + 
                `?start=${encodeURIComponent(startTime)}&end=${encodeURIComponent(endTime)}&resource_id=${encodeURIComponent(resourceId)}`;
            
            // 执行跳转
            window.location.href = createUrl;
        }
    });
})

注意：请提前确认你的routes/web.php中已经为预约创建页面定义了别名为appointments.create的路由，若你的路由别名不同，请替换代码中的对应部分。

2. 后端接收参数并传递到视图 #

在你的预约控制器AppointmentController的create方法中接收前端传递的参数，示例代码如下：

use Illuminate\Http\Request;

public function create(Request $request)
{
    // 校验传入参数的合法性
    $validated = $request->validate([
        'start' => 'nullable|date',
        'end' => 'nullable|date',
        'resource_id' => 'nullable|exists:resources,id',
    ]);

    // 将默认值传递到预约创建视图
    return view('create-appointment', [
        'default_start' => $validated['start'] ?? '',
        'default_end' => $validated['end'] ?? '',
        'default_resource_id' => $validated['resource_id'] ?? '',
        // 其他你原本需要传递到视图的参数，比如资源下拉列表数据等
    ]);
}

3. 视图页预填参数（可选） #

你可以在create-appointment.blade.php的表单中直接使用传递过来的默认值预填表单项，示例如下：

<!-- 开始时间输入框 -->
<input type="datetime-local" name="start" value="{{ old('start', $default_start) }}">

<!-- 结束时间输入框 -->
<input type="datetime-local" name="end" value="{{ old('end', $default_end) }}">

<!-- 资源选择下拉框 -->
<select name="resource_id">
    @foreach($resources as $resource)
        <option value="{{ $resource->id }}" {{ old('resource_id', $default_resource_id) == $resource->id ? 'selected' : '' }}>
            {{ $resource->title }}
        </option>
    @endforeach
</select>

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