如何在引导日历中编写 php 代码

Question

I am using a Bootstrap full calendar. It is working fine, but when I add the PHP code it doesn't work properly.

This is the code where I'm fetching all data for the task table. While displaying inside the calendar only the last row is showing, the remaining rows are not:

 <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

It is because you are running through all of your events in one single object.

Your code would print out several events looking like this in the source code:

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

    }            
],

When it infact should be looking like this:

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 
    },           
],

So basically change it up to this:

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

You should also delete last comma so maybe Ole's code plus something like that:

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;
?>
]