how to use php variable in bootsrap full calendar

Question

I am using bootstrap full calendar ,from here i cann't pass the php varaiable insteed of start: new Date(y, m, d, 8, 30), i want pass the y insteed of $y and m insteed of $m,how can i do, here they will give today,for me don;t want like this

$(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 } ?>
    ],
      

 

Answer 1

You can directly print the variable you got from your php code in the calendar declaration, just how you did with the title using simplified print tags <?= $y ?>, which are equivalent to <?php echo $y; ?> like so:

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"  

The server will print your value for that $y variable, and the client will interpret it as normal javascript.

As a guidance this would be a way to take the variables out of the string:

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

Note that this way is the most simple but is insecure aswell, I'd recommend you this post, I think it covers your problem really well and you can check out better practices. Another recommendation would be to get rid of mysql_* functions since they are deprecated and they've been deleted in PHP 7, for more details read this.

Hope this helps you.

Answer 2

You can print it in your JS code, as long as your js code is embedded in a php file.

If not, an usual practice is to print your php variable value in a data- attribute for an element involved in... Then, you only have to retrieve that value, for example:

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

Then, in your JS code, no matter if it is embedded or is a script file loaded, you could use this:

 var y = $('#aGoodIdForMe').data('newDateY');

 {
     start: new Date(y, m, d, 8, 30)
 }

You can look how .data() works here