dimanche 24 mars 2019

Highlight date if it has an event using fullCalendar

I am trying to fetch all events in my db and highlight the dates that has an event in my UI. For now, I can only do it using static data and in my test code, it display the event name which what I want is to just highlight the date without displaying event name, how can I fetch I achieve it?

 $('#calendars').fullCalendar({

height: 395,

header: {
  // title, prev, next, prevYear, nextYear, today
  left: 'prev',
  center: 'title',
  right: 'next'
},
events: [
  {
      title  : 'event1',
      start  : '2019-03-01'
  },
  {
      title  : 'event2',
      start  : '2019-03-05',
  },
  {
      title  : 'event3',
      start  : '2019-03-15'
  },
  {
    title  : 'event5',
    start  : '2019-05-15'
  }

],
eventRender: function (event, element, view) {
    // like that
    var dateString = moment(event.start).format('YYYY-MM-DD');
    $('#calendar').find('.fc-day-number[data-date="' + dateString + '"]').css('background-color', '#FAA732');
},
});

And the result for this one is like this:

enter image description here

I am planning to use ajax like:

events: [
    $.ajax({
         type: 'GET',
         url: '/events',
         success: function(events){
             //return the result as  the events data.
         }

    });
],

but I don't know how to implement it. This is my eventController;

 public function allEvents(){
    $events = Events::whereNotNull('event_date')->get();

    return $events;
}

How can I possibly achieve my goal? Been stuck up here for days in this part.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire