Fatal编程技术网

Javascript 来自数据库的日历

javascript php postgresql

Javascript 来自数据库的日历,javascript,php,postgresql,Javascript,Php,Postgresql,我需要创建一个日历，允许我查看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&

我需要创建一个日历，允许我查看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>

<?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);

?>


Jquery Fullcalandar与PHP和Mysql的集成
$（文档）.ready（函数（）{
var calendar=$（“#calendar”）.fullCalendar({
是的，
标题：{
左：'上一个，下一个今天'，
中间：'标题'，
右图：“月，agendaWeek，agendaDay”
},
事件：“load.php”，
是的，
selectHelper:对，
选择：函数（数据集、Orario\u Richiesta、Orario\u Fine）
{
变量标题=提示（“输入事件标题”）；
如果（标题）
{
var start=$.fullCalendar.formatDate（开始，“Y-MM-DD HH:MM:ss”）；
var end=$.fullCalendar.formatDate（end，“Y-MM-DD HH:MM:ss”）；
$.ajax({
url:“insert.php”，
类型：“POST”，
数据：{title:title，start:start，end:end}，
成功：函数（）
{
日历。完整日历（“参考事件”）；
警报（“添加成功”）；
}
})
}
},
是的，
eventResize:函数（事件）
{
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”，
类型：“POST”，
数据：{title:title，start:start，end:end，id:id}，
成功：函数（）{
日历。完整日历（“参考事件”）；
警报（“事件更新”）；
}
})
},
eventDrop:函数（事件）
{
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”，
类型：“POST”，
数据：{title:title，start:start，end:end，id:id}，
成功：函数（）
{
日历。完整日历（“参考事件”）；
警报（“事件更新”）；
}
});
},
事件单击：函数（事件）
{
如果（确认（“您确定要删除它吗？”））
{
var id=event.id；
$.ajax({
url:“delete.php”，
类型：“POST”，
数据：{id:id}，
成功：函数（）
{
日历。完整日历（“参考事件”）；
警报（“事件移除”）；
}
})
}
},
});
});
load.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>

<?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);

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

您可以在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;
  }

//枚举计划的事件
$since=time（）-60*60*24*2；
$jsevents=''；//我们将把所有事件放入其中，然后在最后的脚本调用中输出它
$query=“选择scheduleid、workshopid、日期\格式（schedules.DATE、%a.%c/%e）作为日期，unix \时间戳（日期）作为戳记，schedules.starttime、schedules.endtime、pic、theme、Workshop.name作为标题，
locationid，schedules.ProID，cost，Workshop.description，日期<当前日期（）为旧
使用（workshopid）从左侧明细表加入车间
其中schedules.active=1，public=0，date>=date\u SUB（current\u date（），INTERVAL 30 DAY）按戳排序，starttime”；
$result=mQ（$query）；
while（$row=mysqli\u fetch\u assoc（$result））
{
//我们只需要为日历创建javascript事件
$startdate=日期（“Y，*，d”，$row['stamp']）；
$startdate=str_replace（“*”，date（'m'，$row['stamp']）-1，$startdate）；//javascript将月份弄乱了1
$jsevent=“{title:”.json_encode（$row['title']），pic:'.json_encode（$row['pic']）；
如果（$row['starttime']==“00:00:00”）
{
$jsevent.=“，开始：新日期（$startdate）”；
}
其他的
{
@列表（$hrs，$min，$sec）=爆炸（“：”，$row['starttime'）；
$jsevent.=“，全天：0，开始：新日期（$startdate，$hrs，$min，$sec）”；
}
如果（$row['stamp']<$since）
$jsevent.=”，类名：'PasteEvent uide.'$row['workshopid']。“”；
其他的
{
$jsevent.=”，类名：'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>";

echo”
$（文档）.ready（函数（）
{
var cal=$（“#日历”）；
cal.fullCalendar(
{
AvailableView:[“月”]，
事件：[“$jsevents.”
});
});
";
给定代码中到底有什么不起作用？是否有任何错误消息涉及？首先，你需要编写php代码没有我需要实现那里。我不知道如何创建/实现日历，然后我建议您开始阅读日历、php并用数据库中的数据填充它们。例如，看一下他们的文档。@ OrjHugSt-是的，我试着用这个，但是我正在寻找一些能给我更多细节的东西（考虑我必须写：名字，姓氏，电子邮件，对象，开始日期，结束日期，小时）。