如何在 bootsrap 完整日历中使用 PHP 变量

how to use php variable in bootsrap full calendar

本文关键字:PHP 变量 日历 bootsrap      更新时间:2023-09-26

我正在使用引导完整日历,从这里我无法传递 php varaiable insted 的开始:new Date(y, m, d, 8, 30(,我想传递 $y 的 y insted 和 m insted 的 $m,我该怎么办,他们今天会在这里给出,因为我不想这样

$(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),
                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("");
        });
      });
   <!-- HTML code-->
  <div id="calendar"></div>  
## Update query ##  
        //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 ?>, <?= $h ?>, <?= $m ?>),
          end: new Date(y, m, 15, 10, 00),
          allDay: false,
          backgroundColor: "#0073b7", //Blue
          borderColor: "#0073b7" //Blue
       },
       <?php } ?>
    ],
      
 

你可以用你的JS代码打印它,只要你的js代码嵌入在php文件中。

如果没有,通常的做法是在涉及的元素的数据属性中打印您的 php 变量值......然后,您只需检索该值,例如:

 <div id="aGoodIdForMe" data-new-date-y="<?= $y ?>"></div>

然后,在你的JS代码中,无论是嵌入的还是加载的脚本文件,你都可以使用这个:

 var y = $('#aGoodIdForMe').data('newDateY');
 {
     start: new Date(y, m, d, 8, 30)
 }

你可以在这里看看.data((是如何工作的

您可以在日历声明中直接打印从 php 代码中获得的变量,就像您使用简化的打印标签对标题所做的那样 <?= $y ?> ,这相当于<?php echo $y; ?>如下:

title: '<?php echo $tsk["t_title"]?>',
start: new Date(<?= $y ?>, <?= $m ?>, <?= $d ?>, 8, 30),
end: new Date(y, m, d, 16),
allDay: false,
backgroundColor: "#f56954",
borderColor: "#f56954"  

服务器将打印该$y变量的值,客户端会将其解释为普通的javascript。

作为指导,这将是从字符串中取出变量的一种方法:

$dummyTimestamp = "2015-12-05 21:09";
$d_t=explode(" ",$dummyTimestamp);
$date = $d_t[0];
$time = $d_t[1];
$arrayDate=explode("-",$date);
$y=$arrayDate[0];
$m=$arrayDate[1];
$d=$arrayDate[2];
$arrayTime=explode(":",$time);
$h = $arrayTime[0];
$m = $arrayTime[1];
echo $y ." ". $m ." ". $d;

请注意,这种方式是最简单但也不安全的,我向您推荐这篇文章,我认为它很好地解决了您的问题,您可以查看更好的做法。另一个建议是删除mysql_*函数,因为它们已被弃用,并且在 PHP 7 中已被删除,有关更多详细信息,请阅读此内容。

希望这对你有帮助。