Monday, April 10, 2017

Laravel+JavaScript hidden input with color value passing to function

Hi i make project in Laravel 5.4 and i got big problem to make changing color event. I use full calendar. I passing from controller 5 colors to view. I make 5 hidden inputs. Now i dont know how pass this 5 input to function what change event color. Event color should be diffrent. So i made IF in controller some if. And i must do somethink like that: If event title is "Wydzial 1" its change color to red if event title is "Wydzial 2" event get blue color. And when User accept to event(Join to event), event change color. For this last a made relation in Laravel and its working. But i got some problems with this color i dont learn yet JS i just want learn first PHP, and next learn JS.

View: 1.Input hidden

    @foreach($colorrr as $colorr)

<input type="hidden" value="" id="my_color" name="" />
@endforeach

2.Script with fullcalendar

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

  $(document).ready(function() {

    var base_url = '';
    var color = $("#my_color").val();


    $('#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, color) 
      {
        if(color == "grey"){
        element.css('background-color', 'grey');
        }
        if(color == "red"){
        element.css('background-color', 'red');
        }
        if(color == "blue"){
        element.css('background-color', 'blue');
        }
        if(color == "green"){
        element.css('background-color', 'green');
        }
        if(color == "yellow"){
        element.css('background-color', 'yellow');
        }

              } 

    });
  });
</script>

Controller:

/**
* Show the application dashboard.
* 
* @return \Illuminate\Http\Response
*/
public function index()
{ 
$eventscolo=DB::table('save_events')->select('events_id')->get();
$eventsss=DB::table('events')->select('id','title')->get(); 

foreach ($eventsss as $eventss) 
{

  if(DB::table('save_events')->where('events_id','=',$eventss->id)->exists())
  {

        $colorrr = 'grey';

  }
  else
      { 
          if ($eventss->title=="Wydzial 1") 
              {

                 $colorrr = 'red';

              }
                  elseif($eventss->title == "Wydzial 2")
                  {

                   $colorrr = 'blue';

                  }
                  elseif ($eventss->title == "Wydzial 3") 
                  {

                   $colorrr = 'green';

                  }
                  elseif ($eventss->title == "Wydzial 4") 
                  {

                     $colorrr = 'yellow';

                  }
      } 
      $colorrr = 
          [
              '0'=>'grey',
              '1'=>'red',
              '2'=>'blue',
              '3'=>'green',
              '4'=>'yellow'
          ];
}

dump($colorrr);
return view('home',['eventscolo'=>$eventscolo,'eventsss'=>$eventsss,'colorrr'=>$colorrr]);


via Mariusz

Advertisement