Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Laravel 5.4 zmiana kolory eventu gdy user zapisze sie na niego
Forum PHP.pl > Forum > PHP
K3n0
Witam mam problem nie wiem jak zrobić, aby event zmieniał kolor. A dokładniej chodzi mi o to, że nie wiem jak w funkcji w w skrypcie do fullcalendarza pobrać zmienną events_id, która odpowiedzialna jest za relację.
Kombinuję na różne sposoby i nie wiem jak to ugryść. Czy zrobić to w controllerze czy w wywoływaniu kalandarza.

Widok:
  1. <script src="{{ asset('js/fullcalendar') }}/fullcalendar.js"></script>
  2. <script src="{{ asset('js/bootstrap.js') }}"></script>
  3. <script type="text/javascript">
  4. $(document).ready(function() {
  5. var base_url = '{{ url('/') }}';
  6. $('#bootstrapModalFullCalendar').fullCalendar({
  7. weekends: true,
  8. header: {
  9. left: 'prev,next today',
  10. center: 'title',
  11. right: 'month,agendaWeek'
  12. },
  13. eventClick: function(event, jsEvent, view) {
  14. $('#modalTitle').html(event.title);
  15. $('#modalBody').html(event.name);
  16. $('#eventUrl').attr('href','/home/zapis/'+event.id);
  17. $("#startTime").html(moment(event.start).format('HH:mm '));
  18. if (event.end) $("#endTime").html(moment(event.end).format('HH:mm '));
  19. else $("#endTime").html('');
  20. $('#fullCalModal').modal();
  21. return false;
  22. },
  23.  
  24. eventLimit: true, // allow "more" link when too many events
  25. FirstDay: 1,
  26. contentheight : 650,
  27. editable : true,
  28. allDay : false,
  29. aspectRatio : 2,
  30. slotLabelFormat : 'HH:mm:ss',
  31. timeFormat : 'HH:mm',
  32. displayEventEnd : true,
  33. events: {
  34. url: base_url + '/api',
  35. error: function() {
  36. alert("cannot load json");
  37. }
  38. },
  39. eventAfterRender: function (event, element, view,events_id) {
  40. if(event.id === 1){
  41. element.css('background-color', '#cccccc');
  42. }
  43. else
  44. {
  45. if (event.title == "Wydzial 1")
  46. {
  47. element.css('background-color', '#378006');
  48. }
  49. else if(event.title == "Wydzial 2"){
  50. element.css('background-color', '#ff0000');
  51. }
  52. else if(event.title == "Wydzial 3"){
  53. element.css('background-color', '#73e600');
  54. }
  55. else{
  56. element.css('background-color', '#0066ff');
  57. }
  58. }
  59.  
  60. }
  61. });
  62. });
  63. </script>
  64.  

Ta 1 wstawiłem, żeby sprawdzić czy chociaż if dobrze smiga. Domyślam się że zamiast 1 należy spawdzić czy ten event znajduje sie w tablicy odpowiedzialnej za relacje i tu jest problem nie mam pojećia jak to sprawdzić
Controller:
  1. public function index()
  2. {
  3. $events= HomeModel::all();
  4. // foreach ($events as $event) {
  5. // if ($event->title=="Wydzial 1") {
  6. // }
  7. // elseif($event->title == "Wydzial 2"){
  8. // }elseif ($event->title == "Wydzial 3") {
  9. // }elseif ($event->title == "Wydzial 4") {
  10. // }
  11. // }
  12.  
  13.  
  14. return view('home',['events'=>$events]);
  15. }

Model:
  1. <?php
  2. namespace App;
  3.  
  4. use Illuminate\Database\Eloquent\Model;
  5.  
  6. class HomeModel extends Model
  7. {
  8. protected $table = 'events'; // you may change this to your name table
  9. public $timestamps = true; // set true if you are using created_at and updated_at
  10. protected $primaryKey = 'id'; // the default is id
  11. public function usersave()
  12. {
  13. return $this->belongsToMany(User::class,'save_events','events_id','users_id');
  14. }
  15. }

Byłbym wdzięczny nawet na nakietowanie w jaki sposób to rozwiązać bo naprawdę nie mam bladego pojecia.

W controllerze dodalem cos takiego $eventscolo=DB::table('save_events')->select('events_id')->get(); . Pobieram id eventow, przekazuje do widoku ale teraz nie wiem jak sprawidzc. Próboje zrobić cos takiego w if (event.id===eventscolo) i nie dziala ;p
Pyton_000
Weź Ty w końcu zmień nazwę tego HomeModel na EventModel...
K3n0
Teraz cieżko mi to zmienić. Wiem, że powinienen pomyśleć na starcie i nazwać wszystko właściwie.

Czy można zrobić w skrypcie js coś takiego:
To jest w widoku:
  1. eventAfterRender: function (event, element, view) {
  2. @foreach ($eventsss as $eventss)
  3. @if($eventss == $eventscolo)
  4. element.css('background-color', 'grey');
  5. @else
  6. @if ($eventss->title=="Wydzial 1")
  7. element.css('background-color', 'red')
  8. @elseif($eventss->title == "Wydzial 2")
  9. element.css('background-color', 'blue');
  10. @elseif ($eventss->title == "Wydzial 3")
  11. element.css('background-color', 'green');
  12. @elseif ($eventss->title == "Wydzial 4")
  13. element.css('background-color', 'yellow');
  14. @endif
  15. @endif
  16. @endforeach
  17. }

Controller:
  1. public function index()
  2. {
  3. $eventscolo=DB::table('save_events')->select('events_id')->get();
  4. $eventsss=DB::table('events')->select('id','title')->get();
  5. return view('home',['eventscolo'=>$eventscolo],['eventsss'=>$eventsss]);
  6. }


I jak to zrobiłem wszystkie eventy są na czerwono
Pyton_000
Pokaż dump($eventscolo, $eventsss);
Bo na moje oko masz 2 tablice i próbujesz zrobić nie wiadomo co....

Pokaż co w Konsoli przeglądarki wypluje Ci:

Kod
        eventAfterRender: function (event, element, view) {
            console.log(event, element);
            if (event.id === 1) {
                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');
                }
            }

        }
K3n0
tutaj dump:
Collection {#296 ▼
#items: array:2 [▼
0 => {#288 ▼
+"events_id": 1
}
1 => {#295 ▼
+"events_id": 8
}
]
}

Collection {#290 ▼
#items: array:7 [▼
0 => {#298 ▼
+"id": 1
+"title": "Wydzial 2"
}
1 => {#299 ▼
+"id": 5
+"title": "Wydzial 1"
}
2 => {#300 ▼
+"id": 6
+"title": "Wydzial 1"
}
3 => {#301 ▼
+"id": 7
+"title": "Wydzial 4"
}
4 => {#302 ▼
+"id": 8
+"title": "Wydzial 1"
}
5 => {#303 ▼
+"id": 9
+"title": "Wydzial 2"
}
6 => {#304 ▼
+"id": 10
+"title": "Wydzial 1"
}
]
}
i tak mam 2 tablice bo chce sprawdzic czy event o danym id znajduje sie w pivot table zeby zmienialo kolor i nie jestem pewny wlasnie tego czy dobrze to rozkminiam
Pyton_000
A konsola Developerska>
K3n0
a konsole:

Object { id: 1, name: "bbbbb", title: "Wydzial 2", start: Object, end: Object, source: Object, _id: "1", className: Array[0], allDay: false, _allDay: false, 2 więcej… } Object [ <a.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.fc-draggable> ] home:201:13
Object { id: 5, name: "asdasdsa", title: "Wydzial 1", start: Object, end: Object, source: Object, _id: "5", className: Array[0], allDay: false, _allDay: false, 2 więcej… } Object [ <a.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.fc-draggable> ] home:201:13
Object { id: 6, name: "dfgdgdfgd", title: "Wydzial 1", start: Object, end: Object, source: Object, _id: "6", className: Array[0], allDay: false, _allDay: false, 2 więcej… } Object [ <a.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.fc-draggable> ] home:201:13
Object { id: 7, name: "kkkkkkkkkkkkkkkkkkkkkkkk", title: "Wydzial 4", start: Object, end: Object, source: Object, _id: "7", className: Array[0], allDay: false, _allDay: false, 2 więcej… } Object [ <a.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.fc-draggable> ] home:201:13
Object { id: 8, name: "bbbb", title: "Wydzial 1", start: Object, end: Object, source: Object, _id: "8", className: Array[0], allDay: false, _allDay: false, 2 więcej… } Object [ <a.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.fc-draggable> ] home:201:13
Object { id: 9, name: "222", title: "Wydzial 2", start: Object, end: Object, source: Object, _id: "9", className: Array[0], allDay: false, _allDay: false, 2 więcej… } Object [ <a.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.fc-draggable> ] home:201:13
Object { id: 10, name: "asdasda", title: "Wydzial 1", start: Object, end: Object, source: Object, _id: "10", className: Array[0], allDay: false, _allDay: false, 2 więcej… } Object [ <a.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.fc-draggable> ]


Ale nie jestem pewny czy o to Ci chodzi;p
Pyton_000
noo i ten kod nie koloruje CI eventu?
K3n0
Ogolnie eventy koloruja sie ale chce zrobić coś takiego:
Uzytkownik zapisuje sie na event i jak sie zapisze to event zmienia kolor na szary

A czy może da się jakoś zmienna z kontrolera przenieś do Js skryptu.
  1. public function index()
  2. {
  3. echo $eventscolo=DB::table('save_events')->select('events_id')->get();
  4. echo '</br>';
  5. echo $eventsss=DB::table('events')->select('id','title')->get();
  6. foreach ($eventsss as $eventss)
  7. {
  8. //$eventid=$eventss->id;
  9. if($eventss == $eventscolo)
  10. {
  11. echo $colorrr = 'grey';
  12. echo '</br>';
  13. }
  14. else
  15. {
  16. if ($eventss->title=="Wydzial 1")
  17. {
  18. echo '</br>';
  19. echo $colorrr = 'red';
  20. echo '</br>';
  21. }
  22. elseif($eventss->title == "Wydzial 2")
  23. {
  24. echo '</br>';
  25. echo $colorrr = 'blue';
  26. echo '</br>';
  27. }
  28. elseif ($eventss->title == "Wydzial 3")
  29. {
  30. echo '</br>';
  31. echo $colorrr = 'green';
  32. echo '</br>';
  33. }
  34. elseif ($eventss->title == "Wydzial 4")
  35. {
  36. echo '</br>';
  37. echo $colorrr = 'yellow';
  38. echo '</br>';
  39. }
  40. }
  41. }
  42. //dump($eventscolo, $eventsss);
  43. return view('home',['eventscolo'=>$eventscolo],['eventsss'=>$eventsss],['color'=>$color]);
  44. }

i np czy da sie zmienna color przenieść do js bo w kalendarzu mam eventColor i np zeby tu przenosilo kolor z kontrolera

OK sprawdzanie czy event istnieje w tablicy zrobiłem, teraz tylko mam pytanie czy mogę zmienna z controllera przenieść do skryptu js dotyczacego kalendarza bo mam tam opcje eventColor i chcialbym przypisac color z controllera do tej opcji.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.