FullCalendar-调用在foreah循环内的模式

时间:2018-10-31 03:14:10

标签: javascript laravel fullcalendar

背景检查:我目前正在对事件的详细信息进行模态查看。一个用于日历视图,另一个用于列表视图。现在我的问题是,尽管我可以从列表视图中调用模式,但在日历视图中却无法做到这一点(通过eventClick方法)。因此,我的目标是在laravel foreach循环中调用一个模式。

这是查看代码:

id =“ calendarView”中的日历面

<div class="m-portlet__body">
    <div id="calendar2"> </div>
</div>

在id =“ listView”内的列表端

<tbody>
    @for ($day = 1; $day <= $day_count; $day++)
        <tr class="fc-list-heading">
            <td class="fc-widget-header" colspan="3">
                <a class="fc-list-heading-main">{{ Carbon::today()->format('F') }} {{ $day }} </a>
            </td>
        </tr>

        @foreach($trainings as $training)
            @if ($training->start_date->format('j') == $day &&
                $training->start_date->format('F') == Carbon::today()->format('F') &&
                $training->start_date->format('Y') == Carbon::today()->format('Y'))
                <tr class="fc-list-item m-fc-event--accent">
                    <td class="fc-list-item-time fc-widget-content">{{ $training->start_time }} to {{ $training->end_time }}</td>

                    <td class="fc-list-item-title fc-widget-content">
                        {{ $training->title }} - @if($training->type_id == 1) Lecture Only @elseif ($training->type_id == 2)Assessment Only @else Lecture and Assessment @endif
                        <div class="fc-description">{{ $training->venue }} - 
                            @if($training->total_participants - $training->joined_participants < 5 && $training->total_participants - $training->joined_participants > 0) <a class="m--font-warning"> {{ $training->total_participants - $training->joined_participants }} slot/s remaining </a>
                            @elseif($training->total_participants - $training->joined_participants == 0) <a class="m--font-danger">Full</a>
                            @else <a class="m--font-success"> {{ $training->total_participants - $training->joined_participants }} slot/s remaining </a>
                            @endif
                        </div>
                    </td>

                    <td class="text-center fc-list-item-alt fc-widget-content">
                        <a href="#" data-toggle="modal" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" data-target="#m_modal_{{ $training->id }}" >
                            <i class="fa fa-eye fa-md"></i>
                        </a>

                        <a href="#" data-toggle="modal" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" data-target="#modal_delete{{ $training->id }}" >
                            <i class="fas fa-trash-alt fa-md"></i>
                        </a>
                    </td>

                </tr>
            @endif
            @continue

        @endforeach
    @endfor
</tbody>

事件的模式(用于查看和编辑)

@foreach($trainings as $training)
            <div class="modal fade" id="m_modal_{{ $training->id }}" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    @include('admin.training_index.show')
                </div>
            </div>

            <div class="modal fade" id="modal_delete{{ $training->id }}" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 class="h3">Confirm Delete?</h3>  
                        </div>
                        <div class="modal-body">
                            <h6>Are you sure you want to delete event for {{ $training->start_date->format('F j, Y') }}? </h6>                             
                        </div>

                        <div class="modal-footer">
                            <a href="/admin/training/{{ $training->id }}/delete" class="btn btn-danger">DELETE</a>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach

还有用于从fullCalendar调用模式的脚本

$(function() {
      $('#calendar2').fullCalendar({
        defaultView: 'month',
        eventClick:  function(jsEvent) {

            $("#m_modal_" + jsEvent['id']).modal();

            //$("#m_modal_4").modal("show");
            // $("#m_modal_" + jsEvent['id']).modal("show");
        },
        dayClick: function(date) {
            alert('Clicked');
        },
        events: [
            <?php foreach($trainings as $training)
                { 
            ?>
                {
                    id: "{{ $training->id }}",
                    title: "{{ $training->title }}",
                    start: "{{ $training->start_date }}",
                    end: "{{ $training->start_date }}"

                },

            <?php } ?>
        ]
      })
    });

0 个答案:

没有答案