如何在引导日历php代码


how to php code in bootstrap calender

我使用的是Bootstrap完整日历。它工作得很好,但当我添加PHP代码时,它就不能正常工作了。

这是我为task表获取所有数据的代码。当在日历内显示时,只显示最后一行,其余行不显示:

<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>

这是因为您在一个对象中运行所有事件。

你的代码会在源代码中打印出几个类似这样的事件:

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

实际情况应该是这样的:

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

所以基本上改为:

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

您还应该删除最后一个逗号,所以也许Ole的代码加上类似的东西:

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