wie zu PHP-Code in Bootstrap-Kalender

Question

Ich benutze einen Bootstrap-Vollkalender. Es funktioniert gut, aber wenn ich den PHP-Code hinzufüge, funktioniert es nicht richtig.

Dies ist der Code, wo ich alle Daten für die task Tabelle abrufen. Während in dem Kalender zeigt nur die letzte Zeile zeigt, sind die restlichen Zeilen nicht:

<script> 
 
     
 
     $(function() { 
 

 
     /* initialize the external events 
 
     -----------------------------------------------------------------*/ 
 
     function ini_events(ele) { 
 
      ele.each(function() { 
 

 
      // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) 
 
      // it doesn't need to have a start or end 
 
      var eventObject = { 
 
       title: $.trim($(this).text()) // use the element's text as the event title 
 
      }; 
 

 
      // store the Event Object in the DOM element so we can get to it later 
 
      $(this).data('eventObject', eventObject); 
 

 
      // make the event draggable using jQuery UI 
 
      $(this).draggable({ 
 
       zIndex: 1070, 
 
       revert: true, // will cause the event to go back to its 
 
       revertDuration: 0 // original position after the drag 
 
      }); 
 

 
      }); 
 
     } 
 
     ini_events($('#external-events div.external-event')); 
 

 
     /* initialize the calendar 
 
     -----------------------------------------------------------------*/ 
 
     //Date for the calendar events (dummy data) 
 
     var date = new Date(); 
 
     var d = date.getDate(), 
 
       m = date.getMonth(), 
 
       y = date.getFullYear(); 
 
     $('#calendar').fullCalendar({ 
 
      header: { 
 
      left: 'prev,next today', 
 
      center: 'title', 
 
      right: 'month,agendaWeek,agendaDay' 
 
      }, 
 
      buttonText: { 
 
      today: 'today', 
 
      month: 'month', 
 
      week: 'week', 
 
      day: 'day' 
 
      }, 
 
      //Random default events 
 
      
 
      events: [ 
 
     <?php 
 
      $task = mysql_query("SELECT * FROM task"); 
 
      while($tsk = mysql_fetch_assoc($task)){ 
 
       /*$start_date = $tsk['t_started_on'];*/ 
 
       $start_date = "2016-05-10 9:00"; 
 
       $d_t=explode(" ",$start_date); 
 
       $ex_d = $d_t[0];//2016-05-10 
 
       $date=explode("-",$ex_d); 
 
       $y=$date[0]; 
 
       $m=$date[1]; 
 
       $d=$date[2]; 
 

 
       $ex_t = $d_t[1];//09:00 
 
       $time=explode(":",$ex_t); 
 
       $h = $time[0]; 
 
       $m = $time[1]; 
 
     ?> 
 
     { 
 
      title: '<?php echo $tsk['t_title'];?>', 
 
      start: new Date(y, m, d, 8, 30), 
 
      /* start:'<?php// date("2016, 05, 10, 8, 30");?>',*/ 
 
      end: new Date(y, m, d, 16), 
 
      allDay: false, 
 
      backgroundColor: "#f56954", //red 
 
      borderColor: "#f56954" //red 
 
     }, 
 
     <?php } ?> 
 
    ], 
 
      
 
      editable: true, 
 
      droppable: true, // this allows things to be dropped onto the calendar !!! 
 
      drop: function (date, allDay) { // this function is called when something is dropped 
 

 
      // retrieve the dropped element's stored Event Object 
 
      var originalEventObject = $(this).data('eventObject'); 
 

 
      // we need to copy it, so that multiple events don't have a reference to the same object 
 
      var copiedEventObject = $.extend({}, originalEventObject); 
 

 
      // assign it the date that was reported 
 
      copiedEventObject.start = date; 
 
      copiedEventObject.allDay = allDay; 
 
      copiedEventObject.backgroundColor = $(this).css("background-color"); 
 
      copiedEventObject.borderColor = $(this).css("border-color"); 
 

 
      // render the event on the calendar 
 
      // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) 
 
      $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); 
 

 
      // is the "remove after drop" checkbox checked? 
 
      if ($('#drop-remove').is(':checked')) { 
 
       // if so, remove the element from the "Draggable Events" list 
 
       $(this).remove(); 
 
      } 
 

 
      } 
 
     }); 
 

 
     /* ADDING EVENTS */ 
 
     var currColor = "#3c8dbc"; //Red by default 
 
     //Color chooser button 
 
     var colorChooser = $("#color-chooser-btn"); 
 
     $("#color-chooser > li > a").click(function (e) { 
 
      e.preventDefault(); 
 
      //Save color 
 
      currColor = $(this).css("color"); 
 
      //Add color effect to button 
 
      $('#add-new-event').css({"background-color": currColor, "border-color": currColor}); 
 
     }); 
 
     $("#add-new-event").click(function (e) { 
 
      e.preventDefault(); 
 
      //Get value and make sure it is not null 
 
      var val = $("#new-event").val(); 
 
      if (val.length == 0) { 
 
      return; 
 
      } 
 

 
      //Create events 
 
      var event = $("<div />"); 
 
      event.css({"background-color": currColor, "border-color": currColor, "color": "#fff"}).addClass("external-event"); 
 
      event.html(val); 
 
      $('#external-events').prepend(event); 
 

 
      //Add draggable funtionality 
 
      ini_events(event); 
 

 
      //Remove event from text input 
 
      $("#new-event").val(""); 
 
     }); 
 
     }); 
 
    
 
    </script>

Answer 1

Es ist, weil Sie durch all Ihre Veranstaltungen in einem einzigen Objekt ausgeführt werden.

Ihr Code würde im Quellcode wie dies mehrere Ereignisse auszudrucken suchen:

events: [ 
    { 
      title: 'sometitle', 
      title: 'sometitle', 
      title: 'sometitle', 
      title: 'sometitle', 
      start: new Date(y, m, d, 16, 30), 
      end: new Date(y, m, d, 18), 
      allDay: false, 
      backgroundColor: "#f56954", //red 
      borderColor: "#f56954" //red 

    }    
], 

Wenn es infact wie folgt aussehen sollte:

events: [ 
    { 
      title: 'sometitle', 
      start: new Date(y, m, d, 16, 30), 
      end: new Date(y, m, d, 18), 
      allDay: false, 
      backgroundColor: "#f56954", //red 
      borderColor: "#f56954" //red 
    }, 
    { 
      title: 'sometitle', 
      start: new Date(y, m, d, 16, 30), 
      end: new Date(y, m, d, 18), 
      allDay: false, 
      backgroundColor: "#f56954", //red 
      borderColor: "#f56954" //red 
    }, 
    { 
      title: 'sometitle', 
      start: new Date(y, m, d, 16, 30), 
      end: new Date(y, m, d, 18), 
      allDay: false, 
      backgroundColor: "#f56954", //red 
      borderColor: "#f56954" //red 
    },   
], 

es also im Grunde um dies zu ändern up:

events: [ 
    <?php 
      $task = mysql_query("SELECT * FROM task"); 
      while($tsk = mysql_fetch_assoc($task)){ 
    ?> 
    { 
      title: '<?php echo $tsk['t_title']?>', 
      start: new Date(y, m, d, 16, 30), 
      end: new Date(y, m, d, 18), 
      allDay: false, 
      backgroundColor: "#f56954", //red 
      borderColor: "#f56954" //red 
    }, 
    <?php } ?> 
] 

Answer 2

Sie sollten auch letzte Komma löschen, vielleicht Ole's Code plus etwas wie th an:

events: [ 
<?php 
    $tasks = ''; 
    $task = mysql_query("SELECT * FROM task"); 
    while($tsk = mysql_fetch_assoc($task)){ 

     $tasks .= '{ 
      title: \''.$tsk['t_title'].'\', 
      start: new Date(y, m, d, 16, 30), 
      end: new Date(y, m, d, 18), 
      allDay: false, 
      backgroundColor: "#f56954", //red 
      borderColor: "#f56954" //red 
     },'; 

    } 

    $tasks = rtrim($tasks,','); 
    echo $tasks; 
?> 
]