Question

我需要创建一个日历，以允许我查看postgres数据库中的数据。

尤其是，我必须创建一个日历，其中显示日期和时间以及链接的事件。

我的表模式：

prenotazione（nome_rich，cogn_rich，email_rich，oggetto_rich，id，data_richiesta，orario_richiesta，orario_fine）

除了ID，我需要显示所有这些元素。

index.php

<?php
//index.php




?>
<!DOCTYPE html>
<html>
 <head>
  <title>Jquery Fullcalandar Integration with PHP and Mysql</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
  <script>

  $(document).ready(function() {
   var calendar = $('#calendar').fullCalendar({
    editable:true,
    header:{
     left:'prev,next today',
     center:'title',
     right:'month,agendaWeek,agendaDay'
    },
    events: 'load.php',
    selectable:true,
    selectHelper:true,
    select: function(Data_Richiesta, Orario_Richiesta, Orario_Fine)
    {
     var title = prompt("Enter Event Title");
     if(title)
     {
      var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
      var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
      $.ajax({
       url:"insert.php",
       type:"POST",
       data:{title:title, start:start, end:end},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        alert("Added Successfully");
       }
      })
     }
    },
    editable:true,
    eventResize:function(event)
    {
     var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
     var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
     var title = event.title;
     var id = event.id;
     $.ajax({
      url:"update.php",
      type:"POST",
      data:{title:title, start:start, end:end, id:id},
      success:function(){
       calendar.fullCalendar('refetchEvents');
       alert('Event Update');
      }
     })
    },

    eventDrop:function(event)
    {
     var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
     var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
     var title = event.title;
     var id = event.id;
     $.ajax({
      url:"update.php",
      type:"POST",
      data:{title:title, start:start, end:end, id:id},
      success:function()
      {
       calendar.fullCalendar('refetchEvents');
       alert("Event Updated");
      }
     });
    },

    eventClick:function(event)
    {
     if(confirm("Are you sure you want to remove it?"))
     {
      var id = event.id;
      $.ajax({
       url:"delete.php",
       type:"POST",
       data:{id:id},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        alert("Event Removed");
       }
      })
     }
    },

   });
  });

  </script>
 </head>
 <body>
  <br />
  <h2 align="center"><a href="#">Jquery Fullcalandar Integration with PHP and Mysql</a></h2>
  <br />
  <div class="container">
   <div id="calendar"></div>
  </div>
 </body>
</html>

load.php

<?php

//load.php

$connect = new PDO('pgsql:host=localhost;dbname=postgres', 'postgres', '123456789');

$data = array();

$query = "SELECT * FROM prenotazione ORDER BY id";

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

foreach($result as $row)
{
 $data[] = array(
  'id'   => $row["id"],
  'Nome'   => $row["name_rich"],
  'Cognome'   => $row["cogn_rich"],
  'Email'   => $row["email_rich"],
  'Oggetto'   => $row["oggetto_rich"],
  'Data_Richiesta'   => $row["data_richiesta"],
  'Orario_Richiesta'   => $row["orario_richiesta"],
  'Orario_Fine'   => $row["orario_fine"]
 );
}

echo json_encode($data);

?>

我需要知道如何实现日历。

Answer 1

您可以在PHP脚本中枚举预定的事件

  // enumerate scheduled events
  $since     = time() - 60 * 60 * 24 * 2;
  $jsevents = ''; // we'll put all events into this, then output it in a script call at the end
  $query = "SELECT scheduleid,workshopid,DATE_FORMAT(schedules.date,'%a. %c/%e') AS date,unix_timestamp(date) AS stamp,schedules.starttime,schedules.endtime,pic,theme,workshops.name AS title,
    locationid,schedules.proids,cost,workshops.description,date < current_date() AS old
    FROM schedules LEFT JOIN workshops USING(workshopid)
    WHERE schedules.active=1 AND public=0 AND date>=DATE_SUB(current_date(),INTERVAL 30 DAY) ORDER BY stamp,starttime";
  $result = mQ($query);
  while($row = mysqli_fetch_assoc($result))
  {
    // we just need to create the javascript event for the calendar
    $startdate = date("Y, *, d", $row['stamp']);
    $startdate = str_replace("*", date('m', $row['stamp']) - 1, $startdate); // javascript messes up the month by 1
    $jsevent   = "{title:" . json_encode($row['title']).',pic:'.json_encode($row['pic']);
    if($row['starttime'] == "00:00:00")
    {
      $jsevent .= ",start:new Date($startdate)";
    }
    else
    {
      @list($hrs, $min, $sec) = explode(":", $row['starttime']);
      $jsevent .= ",allDay:0,start:new Date($startdate, $hrs, $min, $sec)";
    }
    if($row['stamp'] < $since)
      $jsevent .= ",className:'pastEvent uide_".$row['workshopid']."'";
    else
    {
      $jsevent .= ",className:'uide_".$row['workshopid']."',url:'/show_event.php?id=".$row['workshopid']."&date=".date('Y-m-d',$row['stamp'])."'";
    }
    $jsevent .= "}";
    $jsevents .= ($jsevents!='' ? ',' : '').$jsevent;
  }

然后实例化日历

echo "<script>
$(document).ready(function()
{
  var cal = $('#calendar');
  cal.fullCalendar(
  {
    availableViews:['month'],
    events:[". $jsevents."]
  });
});
</script>";

数据库中的日历

1 个答案: