Tuesday, April 11, 2017

JavaScript FullCalendar color event

I made change color event, but I got some problems and I dont know why event don't change color on grey. I try use json_encode. I do this in controller query to check if event exists in save_event table (its a pivot table). And I don't know how I should do it. I know the easier way will be to make input hidden but I think it's not practical because when there will be 100events on calendar there'll be 100 hidden inputs. I write many post about it and I try do this 3 days and i really don't have any ideas to figure. Maybe someone have tips how to do this simple think. On calendar user when joining to event then event should change color to grey.

Script:

<script src="/fullcalendar.js"></script>
<script src=""></script>
<script type="text/javascript">

$(document).ready(function() {

  var base_url = '';
  var color_event = <?php
    json_encode($eventColored);
  ?>

  $('#bootstrapModalFullCalendar').fullCalendar({
    weekends: true,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek'
    },
     eventClick: function(event, jsEvent, view) {
        $('#modalTitle').html(event.title);
        $('#modalBody').html(event.name);
        $('#eventUrl').attr('href','/home/zapis/'+event.id);
        $("#startTime").html(moment(event.start).format('HH:mm '));
        if (event.end) $("#endTime").html(moment(event.end).format('HH:mm '));
        else $("#endTime").html('');                                        
        $('#fullCalModal').modal();
        return false;
      },

    eventLimit: true,
    FirstDay: 1,
            contentheight : 650,
            editable : true,
            allDay : false,
            aspectRatio : 2,
            slotLabelFormat : 'HH:mm:ss',
            timeFormat : 'HH:mm',
            displayEventEnd : true,
            events: {
      url: base_url + '/api',
      error: function() {
        alert("cannot load json");
      }
    },
    eventAfterRender: function (event, element, view,events_id) {
    if(event.id == color_event){
      element.css('background-color', '#cccccc');                                                                                       
    }
      else
      {
        if (event.title == "Wydzial 1") 
        {
                element.css('background-color', '#378006');
                }
                else if(event.title == "Wydzial 2")
                {
                element.css('background-color', '#ff0000');     
                }
                else if(event.title == "Wydzial 3")
                {
                element.css('background-color', '#73e600');     
                }
                else{
                element.css('background-color', '#0066ff');
                }
              }
    }
  });
});
</script>

Controller:

$eventColos = HomeModel::all();
    foreach ($eventColos as $eventColo) {
       $eventColored =  DB::table('save_events')->where('events_id','=',$eventColo->id)->exists();
    }

  return view('home',['eventColored'=>$eventColored]);



via Mariusz

Advertisement