Question

我使用http://arshaw.com/fullcalendar/显示完整日历，以通过json显示来自数据库的事件。我需要通过更改日历单元格的颜色来标记预订日期。

所以我猜我需要像

这样的东西

If (date == booked){
 $(element).css("backgroundColor", "red");
}

以下是填充日历的代码。

<script>
   $(document).ready(function() {

$('#calendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  },
  editable: false,

  events: {
    url: '{{URL::to('/json')}}',
    type: 'GET',

  },

   '': 'h(:mm)t' ,// uppercase H for 24-hour clock


  loading: function(bool) {
    if (bool) $('#loading').show();
    else $('#loading').hide();
  }

});

});

这是我的json对象

    public function json()
{
    $bookings = Booking::all();
    //dd($bookings);
    foreach ($bookings as $b)


        $data[] = ['title'=>$b->status,
                 'start'=> $b->event_date .' ' .$b->start_time,
                 'end'=>$b->event_date .' ' .$b->end_time,
                 'description'=>'',
                 'color'=>'',
                 'status'=>$b->status,
                 'backgroundColor' => ($b->status ==='confirmed'?'#FFC0CB' : '#FFA500'),
                 'slotMinutes'=>'10',
                 'allDay'=>false];
    //return $bookings;
    return $data;


}

理想情况下，我想发送一系列日期，我需要将其标记为已预订。如果有人能够朝着正确的方向推动我，我真的很喜欢它。

由于

Answer 1

这就是我解决它的方式。

       eventRender: function (event, element, monthView) { 
          if (event.title == "booked") { 
         var date = $.fullCalendar.formatDate( event.start , 'yyyy-MM-dd'  );//event.start;

     $('.fc-day[data-date="' + date + '"]').addClass('booked'); 

    }
  },

将日期标记为在fullcalendar中预订

1 个答案: