Question

我正在使用Bootstrap完整日历。它工作正常，但是当我添加PHP代码时，它无法正常工作。

这是我正在获取<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>表的所有数据的代码。在日历内部仅显示最后一行时，其余行不是：

{{1}}

Answer 1

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

您的代码会在源代码中打印出几个类似的事件：

- (void)willPresentActionSheet:(UIActionSheet *)actionSheet {
    [[actionSheet layer] setBackgroundColor:[UIColor grayColor].CGColor];
}

当它实际上应该是这样的：

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

Answer 2

你也应该删除最后一个逗号，所以也许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;
?>
]

如何在bootstrap日历中的PHP代码

2 个答案: