Календарь кликов Google Календарная дата и страница перенаправления с датой в URL - PullRequest
Новая
       17

Календарь кликов Google Календарная дата и страница перенаправления с датой в URL

0 голосов
/ 12 марта 2019

Как добавить ссылку в Google Calendar Charts?Я хочу сделать даты кликабельными, и когда я нажму на нее, страница будет перенаправлена, а дата, на которой я щелкнул, должна быть в URL.Так что я ожидаю такую ​​ссылку. mypage.php? Date = 2019-02-21

Вот мой код.

<script type="text/javascript">
      google.charts.load("current", {packages:["calendar"]});
      google.charts.setOnLoadCallback(drawChart);

   function drawChart() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
       dataTable.addRows([
        <?php
            $show=mysqli_query($con,"SELECT * FROM event");
            while($found=mysqli_fetch_array($show)){ 
                $event_id = $found['event_id'];
                $event_date = $found['event_date'];

                $sd = date_parse_from_format("Y-n-d", $event_date);
                $year = $sd["year"];
                $month = $sd["month"] - 1;
                $day = $sd["day"];  

                    $febs=mysqli_query($con,"SELECT COUNT(*) FROM event WHERE event_date = '$event_date'");
                    $row = mysqli_fetch_array($febs);
                    $counts = $row[0];

        ?>

          [ new Date(<?php echo $year; ?>, <?php echo $month; ?>, <?php echo $day; ?>),  <?php echo $counts; ?> ],

        <?php } ?>
        ]);

       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

         var options = {
                 title: "EVENTS CALENDAR PLOT",
                 height: 350,
                 noDataPattern: {
                   backgroundColor: '#75f990',
                   color: '#00ff34'
                 }
               };

       chart.draw(dataTable, options);
   }
</script>

1 Ответ

2 голосов
/ 12 марта 2019

Вы можете использовать событие 'select' графика, чтобы узнать, на какую дату нажал пользователь.
используйте форматер даты, чтобы отформатировать выбранную дату и открыть URL-адрес. 

var formatDate = new google.visualization.DateFormat({
  pattern: 'yyyy-MM-dd'
});
google.visualization.events.addListener(chart, 'select', function () {
  var selection = chart.getSelection();
  if (selection.length > 0) {
    window.open('http://thispage.php/?date=' + formatDate.formatValue(new Date(selection[0].date)));
  }
});

см. Следующий рабочий фрагмент,
Например, URL записывается в консоль ... 

google.charts.load('current', {
  packages:['calendar']
}).then(function () {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'date', id: 'Date' });
  dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
  dataTable.addRows([
    [new Date(), 1]
  ]);

  var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

  var options = {
    title: 'EVENTS CALENDAR PLOT',
    height: 350,
    noDataPattern: {
      backgroundColor: '#75f990',
      color: '#00ff34'
    }
  };

  var formatDate = new google.visualization.DateFormat({
    pattern: 'yyyy-MM-dd'
  });
  google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();
    if (selection.length > 0) {
      //window.open('http://thispage.php/?date=' + formatDate.formatValue(new Date(selection[0].date)));
      console.log('http://thispage.php/?date=' + formatDate.formatValue(new Date(selection[0].date)));
    }
  });

  chart.draw(dataTable, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="calendar_basic"></div>
...