Im using fullcalendar. And when i click on an event it opens a dialog where i see the current event title/description/startdate/enddate. I have an update edit button so when i change one of the variables it wil change the variable in the database. But that doesnt work somehow.
agenda_view.php:
<html>
<head>
<link href='<?=base_url();?>testcalendar/css/fullcalendar.css' rel='stylesheet' />
<script src='<?=base_url();?>testcalendar/js/jquery-1.9.1.min.js'></script>
<script src='<?=base_url();?>testcalendar/js/jquery-ui-1.10.2.custom.min.js'></script>
<script src='<?=base_url();?>testcalendar/js/fullcalendar.min.js'></script>
<script src='<?=base_url();?>testcalendar/js/fullcalendarextern.js'></script>
<script src='<?=base_url();?>testcalendar/js/nieuweafspraak.js'></script>
<link href="<?=base_url();?>testcalendar/assets/css/jquery-ui-1.10.0.custom.css" rel="stylesheet" type="text/css" />
<style>
body {
margin-top: 40px;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="dialogstatusevent" style="display:none" title="Mijn Afspraak">
<form>
<div class="control-group">
<div class="controls">
<label class="control-label">Titel:</label>
<input type="text" name="title" id="titlestatus" class="text ui-widget-content ui-corner-all">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="control-label">Description:</label>
<input type="text" name="description" id="descstatus" class="text ui-widget-content ui-corner-all">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="control-label">Van:</label>
<input type="text" name="datestatusstart" id="datestatusstart" class="text ui-widget-content ui-corner-all">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="control-label">Tot:</label>
<input type="text" name="datestatusend" id="datestatusend" class="text ui-widget-content ui-corner-all">
</div>
</div>
</form>
</div>
<div id='calendar'></div>
</body>
</html>
Fullcalendarextern.js:
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: "../testcalendar/fullcalendar/events.php",
// Convert the allDay from string to boolean
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: '../testcalendar/fullcalendar/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end ,
type: "POST",
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: '../testcalendar/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
});
},
eventResize: function(event) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: '../testcalendar/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
});
},
eventClick: function(calEvent, jsEvent, view) {
$( "#dialogstatusevent" ).dialog({
autoOpen: false,
height: 'auto',
width: 'auto',
modal: true,
closeOnEscape:true,
resizable:false,
show:'fade',
buttons: {
"Edit": function() {
var titlestatus = $("#titlestatus").val(),
descstatus = $('#descstatus').val(),
datestart = $('#datestatusstart').val(),
dateend = $('#datestatusend').val();
$.post('../testcalendar/db/processupdate.php',{
user_name: titlestatus, user_desc: descstatus, user_start: datestart, user_end: dateend, action:'joined'
}); var nTime = 1 * 50;
window.setTimeout("location.reload()", nTime);//End Post
$("#titlestatus").val('');
$("#descstatus").val('');
$("#datestatusstart").val('');
$("#datestatusend").val('');
$(this).dialog("close");
},
"Cancel": function() {
$("#titlestatus").val('');
$("#descstatus").val('');
$("#datestatusstart").val('');
$("#datestatusend").val('');
$(this).dialog("close");
}
}
}
);
$("#titlestatus").val(calEvent.title),
$("#descstatus").val(calEvent.description),
$("#datestatusstart").val(calEvent.end),
$("#datestatusend").val(calEvent.start),
$("#datestatusstart").datepicker({ dateFormat: 'yy-mm-dd' }),
$("#datestatusend").datepicker({ dateFormat: 'yy-mm-dd' });
$( "#dialogstatusevent" ).dialog( "open" );
},
eventMouseover: function(event, domEvent) {
var layer = '<div id="events-layer" class="fc-transparent" style="position:absolute; width:100%; height:100%; top:-1px; text-align:right; z-index:100"><a><img src="../testcalendar/editbt.png" title="edit" width="14" id="edbut'+event.id+'" border="0" style="padding-right:3px; padding-top:2px;" /></a><a><img src="../testcalendar/delete.png" title="delete" width="14" id="delbut'+event.id+'" border="0" style="padding-right:5px; padding-top:2px;" /></a></div>';
$(this).append(layer);
$("#delbut"+event.id).hide();
$("#delbut"+event.id).fadeIn(300);
$("#delbut"+event.id).click(function() {
$.ajax({
url: '../testcalendar/fullcalendar/delete_events.php',
data: 'id=' + event.id ,
type: "POST",
});
var nTime = 1 * 50;
window.setTimeout("location.reload()", nTime);
});
$("#edbut"+event.id).hide();
$("#edbut"+event.id).fadeIn(300);
$("#edbut"+event.id).click(function() {
var title = prompt( '\n\nNew Event Title: ');
if(title){
$.ajax({
url: '../testcalendar/fullcalendar/update_title.php',
data: 'title='+ title+'&id='+ event.id ,
type: "POST",
});
var nTime = 1 * 50;
window.setTimeout("location.reload()", nTime);
}
});
},
eventMouseout: function(calEvent, domEvent) {
$("#events-layer").remove();
},
});
});
processupdate.php:
<?php
//include db configuration file
include 'connection.php';
function user_joined($user_name,$user_desc, $user_start, $user_end){
$q = "UPDATE evenement SET title='". $user_name ."'description='". $user_desc ."'start='". $user_start ."'end='". $user_end ."' WHERE id=".$id;
mysql_query($q);
}
{
$user_name=$_POST['user_name'];
$user_desc=$_POST['user_desc'];
$user_start=$_POST['user_start'];
$user_end=$_POST['user_end'];
$action=$_POST['action'];
if ($action=='joined'){
user_joined($user_name, $user_desc, $user_start, $user_end);
}
}
/*if ( (isset($_POST["id"]) && strlen($_POST["id"]) >= 3 && strlen($_POST["id"]) <= 60) &&
(isset($_POST["name"]) && strlen($_POST["name"]) >= 3 && strlen($_POST["name"]) <= 50) &&
(isset($_POST["age"]) && strlen($_POST["age"]) >= 3 && strlen($_POST["age"]) <= 40) )
{ //check $_POST["name"] and $_POST["address"] and $_POST["city"] are not empty
$id = $_POST["id"];
$name = $_POST["name"];
$age = $_POST["age"];
$q = "INSERT INTO tbltest ( id, name, age) VALUES
('".$id."','".$name."','".$age."')";
mysql_query($q);
}*/
?>
connection.php:
<?php
$db_host = "localhost";
// Place the username for the MySQL database here
$db_username = "roots";
// Place the password for the MySQL database here
$db_pass = "root";
// Place the name for the MySQL database here
$db_name = "blackboks-calendar";
// Run the actual connection here
mysql_connect("$db_host","$db_username","$db_pass") or die ("could not connect to mysql");
mysql_select_db("$db_name") or die ("no database");
?>
Try if you are getting an alert ?
<?php
include 'connection.php';
function user_joined($user_name,$user_desc, $user_start, $user_end)
{
$q = "UPDATE evenement SET title='". $user_name ."'description='". $user_desc ."'start='". $user_start ."'end='". $user_end ."' WHERE id=".$id;
mysql_query($q);
}
$user_name=$_POST['user_name'];
$user_desc=$_POST['user_desc'];
$user_start=$_POST['user_start'];
$user_end=$_POST['user_end'];
$action=$_POST['action'];
if ($action=='joined')
user_joined($user_name, $user_desc, $user_start, $user_end);
print_r($_POST);
?>
Pass id through POST as well , you need to send the required id value
$.post('../testcalendar/db/processupdate.php',
{ 'user_name' : titlestatus, 'user_desc': descstatus, 'user_start' : datestart, 'user_end' : dateend, 'action':'joined' ,'id' : id },
function(response){
alert(response);
});
It doesnt echo the id.
processupdate.php:
<?php
include 'connection.php';
function user_joined($user_name,$user_desc, $user_start, $user_end)
{
$q = "UPDATE evenement SET title='". $user_name ."'description='". $user_desc ."'start='". $user_start ."'end='". $user_end ."' WHERE id=".$id;
mysql_query($q);
}
$id=$_POST['id'];
$user_name=$_POST['title'];
$user_desc=$_POST['user_desc'];
$user_start=$_POST['user_start'];
$user_end=$_POST['user_end'];
$action=$_POST['action'];
if ($action=='joined')
user_joined($user_name, $user_desc, $user_start, $user_end);
echo $id;
print_r($_POST); ?>
Like this? it doesnt output something in the alert either:(
<?php
include 'connection.php';
function user_joined($user_name,$user_desc, $user_start, $user_end){
$q = "UPDATE evenement SET title='". $user_name ."'description='". $user_desc ."'start='". $user_start ."'end='". $user_end ."' WHERE id=".$id;
mysql_query($q);
}
{
$user_name=$_POST['user_name'];
$user_desc=$_POST['user_desc'];
$user_start=$_POST['user_start'];
$user_end=$_POST['user_end'];
$action=$_POST['action'];
if ($action=='joined')
user_joined($user_name, $user_desc, $user_start, $user_end);
} ?>
Related
I'm adding a search filter in my system but it won't search.Please someone tell Me the problem with my coding.
Controller
public function facility_reservation_view(){
$name = $this->input->post('name');
$searchtype = $this->input->post('searchtype');
$datefrom = $this->input->post('datefrom');
$dateto = $this->input->post('dateto');
$status = $this->input->post("status");
$query = $this->model_facility->facility_reservation_table($name, $status, $searchtype, $datefrom, $dateto);
echo json_encode($query);
}
Model
public function facility_reservation_table($name, $status, $searchtype, $datefrom, $dateto){
// storing request (ie, get/post) global array to a variable
$requestData= $_REQUEST;
global $access;
$columns = array(
// datatable column index => database column name for sorting
0 => 'fr_id',
1 => 'fr_status',
2 => 'CONCAT(fr_fname, fr_mname, fr_lname)',
3 => 'fr_room',
4 => 'fr_purpose',
5 => 'CONCAT(fr_date_from, fr_time_from)',
6 => 'CONCAT(fr_date_to, fr_time_to)'
);
$sql = "SELECT * FROM facility_reservation WHERE fr_enabled = 1";
$query = $this->db->query($sql);
$totalData = $query->num_rows();
$totalFiltered = $totalData; // when there is no search parameter then total number rows = total number filtered rows.
$sql = "SELECT * FROM facility_reservation WHERE fr_enabled = 1";
if ($searchtype == "divdate") {
$sql .= " AND fr_date_from BETWEEN ? AND ? ";
$data = array($datefrom, $dateto);
}
elseif ($searchtype == "divname"){
$sql .= " AND fr_fname LIKE ? " ;
$data = array($name);
}
elseif ($searchtype == "divstatus") {
$sql .= " AND fr_status LIKE ? ";
$data = array($status);
}
$query = $this->db->query($sql, $data);
$totalData = $query->num_rows();
$totalFiltered = $totalData; // when there is no search parameter then total number rows = total number filtered rows.
$sql .=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." "; // adding length
$query = $this->db->query($sql);
$data = array();
$token = en_dec("en", $this->session->userdata('token_session'));
foreach( $query->result_array() as $row ) { // preparing an array for table tbody
$nestedData=array();
$nestedData[] = $row["fr_id"];
$nestedData[] = $row["fr_status"];
$nestedData[] = $row["fr_fname"]." ".$row["fr_mname"]." ".$row["fr_lname"];
$nestedData[] = $row["fr_room"];
$nestedData[] = $row["fr_purpose"];
$nestedData[] = $row["fr_date_from"]." ".$row["fr_time_from"];
$nestedData[] = $row["fr_date_to"]." ".$row["fr_time_to"];
$nestedData[] = '<button data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#viewFRModal" class="btn btn-info btnViewFR btnTable" name="update" data-value="'.$row['fr_id'].'" id="'.$row['fr_id'].'"><i class="fa fa-eye"></i> View</button> <button data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#updateFRModal" class="btn btn-success btnUpdateFR btnTable" name="update" data-value="'.$row['fr_id'].'" id="'.$row['fr_id'].'"><i class="fa fa-edit"></i>Update</button> <button data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#deleteFRModal" class="btn btn-primary btnDeleteFR btnTable" name="delete" data-value="'.$row['fr_id'].'" id="'.$row['fr_id'].'"><i class="fa fa-trash"></i> Delete</button>';
$data[] = $nestedData;
}
$json_data = array(
"draw" => intval( $requestData['draw'] ),
"recordsTotal" => intval( $totalData ),
"recordsFiltered" => intval( $totalFiltered ),
"data" => $data
);
return $json_data;
}
view
<div class="row">
<div class="col-lg-2">
<div class="form-group">
<label class="form-control-label col-form-label-sm">Select Filter</label>
<select id="sosearchfilter" class="form-control sosearchfilter">
<option value="divdate">Search by Date</option>
<option value="divname">Search by First Name</option>
<option value="divstatus">Search by Status</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group row">
<div class="divdate" id="divdate">
<?php
$dateInTwoWeeks = strtotime('-1 weeks');
$dateInTwoWeeks = date("m/d/Y", $dateInTwoWeeks);
// echo $dateInTwoWeeks;
?>
<label class="form-control-label col-form-label-sm">Date</label>
<div class="input-daterange input-group" id="datepicker">
<input type="text" id="datefrom" class="input-sm form-control material_josh search-input-select1 searchDateTo" value="<?=$dateInTwoWeeks;?>" name="start" readonly/>
<span class="input-group-addon" style="background-color:#fff; border:none;">to</span>
<input type="text" id="dateto" value="<?=today_text();?>" class="input-sm form-control material_josh search-input-select2 searchDateFrom" name="end" readonly/>
</div>
</div>
<div class="divname" id="divname" style="display: none;">
<label class="form-control-label col-form-label-sm">Name</label>
<input type="text" class="input-sm form-control material_josh search-input-text search_name" id="search_name" placeholder="Name.." onkeypress="return (event)" />
</div>
<div class="divstatus" id="divstatus" style="display: none;">
<label class="form-control-label col-form-label-sm">Status</label>
<select id="search_status" class="form-control fr_status" >
<option value="<?php foreach ($get_stat->result() as $gdept) { ?>" ></option>
<option value="<?=$gdept->fr_status_name?>"><?=$gdept->fr_status_name?></option>
<?php } ?>
</select>
</div>
</div>
</div>
<div class="col-lg col-6" style="padding-left: 0">
<div class="pull-right">
<label class="form-control-label col-form-label-sm "></label>
<button type="submit" id="search_order" class="btn blue-grey search_order">Search</button>
<button type="button" data-target="#addFRModal" class="btn btn-primary addsupp"> Add New Room Reservation</button>
</div>
</div>
</div>
js
$(function(){
var base_url = $("body").data('base_url'); //base_url come from php functions base_url();
var token = $("#token").val();
var d = new Date();
var date = d.getFullYear() + "/" + (d.getMonth()+1) + "/" + d.getDate();
var searchDateTo = $("#searchDateTo").val();
function fillDatatable(name, status, searchtype, datefrom, dateto) {
var dataTable = $('#table-grid').DataTable({
destroy : true,
"bDeferRender": true,
"order": [[ 1, "desc" ]],
"serverSide": true,
"columnDefs": [
{ "targets": 1,
"createdCell": function (td, cellData, rowData) {
if (cellData == "Approved"){
$(td).css('background-color', '#DFF0D0')
}else if (cellData == "Disapprove"){
$(td).css('background-color', '#F5DBD9')
}else if (cellData == "Pending"){
$(td).css('background-color', '#FEECB5')
}else if (cellData == "Cancel"){
$(td).css('background-color', '#CFCFC4')
}else if (cellData == "New"){
$(td).css('background-color', '#DAF0F7')
}
}
}],
"ajax":{
url:base_url+"Main_facility/facility_reservation_view", // json datasource
type: "post", // method , by default get
data: { 'name':name, 'status':status, 'searchtype':searchtype, 'datefrom':datefrom, 'dateto':dateto },
beforeSend:function(data) {
$.LoadingOverlay("show");
},
complete: function() {
$.LoadingOverlay("hide");
},
error: function(){ // error handling
$(".table-grid-error").html("");
$("#table-grid").append('<tbody class="table-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
$("#table-grid_processing").css("display","none");
}
}
});
}
function toastMessage(heading, text, icon, color) {
$.toast({
heading: heading,
text: text,
icon: icon,
loader: false,
stack: false,
position: 'top-center',
allowToastClose: false,
bgColor: color,
textColor: 'white'
});
}
fillDatatable('divdate', searchDateTo, date, "");
// $(".searchBtn").on("click", function(){
// name = $(".searchName").val();
// status = $(".searchStat").val();
// fillDatatable(name, status);
// });
$("#sosearchfilter").change(function() {
var searchtype = $('#sosearchfilter').val(); // id ng dropdown
var currentdate = new Date();
var dateto = $('#searchDateTo').val();
var datefrom = $('#searchDateFrom').val();
if(searchtype == "divdate") {
$('.divdate').show('slow');
$('.divname').hide('slow');
$('.divstatus').hide('slow');
$(".search_name").val("");
$(".search_status").val("");
$(".searchDateTo").val($.datepicker.formatDate('mm/dd/yy', dateto));
$(".searchDateFrom").val($.datepicker.formatDate('mm/dd/yy', datefrom));
}
if(searchtype == "divname") {
$('.divdate').hide('slow');
$('.divname').show('slow');
$('.divstatus').hide('slow');
$(".search_name").val("");
$(".search_status").val("");
$(".searchDateTo").val("");
$(".searchDateFrom").val("");
}
if(searchtype == "divstatus"){
$('.divdate').hide('slow');
$('.divname').hide('slow');
$('.divstatus').show('slow');
$(".search_name").val("");
$(".search_status").val("");
$(".searchDateTo").val("");
$(".searchDateFrom").val("");
}
});
$("#search_order").click(function() {
searchtype = $('#sosearchfilter').val();
datefrom = formatDate($("#datefrom").val());
dateto = formatDate($("#dateto").val());
name = $('#search_name').val();
status = $('#search_status').val();
checker = 0;
if (searchtype == "divdate") {
if (datefrom == "" || dateto == "") {
toastMessage('Note', 'Please fill in the Date fields.', 'info', '#FFA500');
checker = 0;
}
else {
checker = 1;
}
}else if (searchtype == "divname") {
if (name == "") {
toastMessage('Note', 'Please fill in the Name.', 'info', '#FFA500');
checker = 0;
}
else {
checker = 1;
}
}else if (searchtype == "divstatus") {
if (status == "") {
toastMessage('Note', 'Please fill in the Status Field.', 'info', '#FFA500');
checker = 0;
}
else {
checker = 1;
}
}
if (checker == 1) {
fillDatatable(searchtype, datefrom, dateto, name, status);
}
});
Expecting to get the right code so I can fetch the data I wanted to search
Here's my MVC coding and wanted to show you all so you can answer me clearly been stuck here for a while and would be happy if someone could help me.
I need to create a calendar that allows me to view data in my postgres database.
In particular, I have to create a calendar in which the days and hours and the linked events are displayed.
My table schema:
prenotazione ( nome_rich, cogn_rich,email_rich, oggetto_rich, id, data_richiesta, orario_richiesta, orario_fine )
I need to display all these elements, except the 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">Jquery Fullcalandar Integration with PHP and Mysql</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);
?>
I need to know how to implement a calendar.
You can enumerate the scheduled events in your PHP script
// 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;
}
and then instantiate the calendar
echo "<script>
$(document).ready(function()
{
var cal = $('#calendar');
cal.fullCalendar(
{
availableViews:['month'],
events:[". $jsevents."]
});
});
</script>";
I'm sharing with you my js code in which conflicts are occurring. It's not including files such as minicart/content.html, authentication-popup.html, Template/collection.html, Template/messages.html, checkout/captcha.html in the console whereas it's in luma (default) theme:
jQuery(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar_mode = '';
var switchMode = '<?php echo $block->getScopeConfig('events/calendar_setting/allow_switch_mode'); ?>';
var defaultMode = '<?php echo $block->getScopeConfig('events/calendar_setting/default_view_mode'); ?>';
if (switchMode == '1') {
calendar_mode = 'month,agendaWeek,agendaDay';
}
var events = <?php echo $eventsJson; ?>;
jQuery('#calendar').fullCalendar({
<?php if ($locale != 'en') { ?>
locale: "<?php echo $locale; ?>",
<?php } ?>
editable: true,
displayEventEnd:true,
disableDragging: true,
header: {
left: 'prev,next today',
center: 'title',
right: calendar_mode
},
defaultView: defaultMode,
eventTextColor: 'white',
timeFormat: 'H:mm',
events: events,
eventMouseover: eventMouseoverFunc,
eventMouseout: eventMouseoutFunc
});
</script>
okay so while debugging i found out that the conflict was occurring due to 2 major issues:
changing the class of jQuery('#calendar').fullCalendar({ to jQuery('#any_unique_id').fullCalendar({ and parallely changing the calendar div id to the same div id='calendar'> to div id='any_unique _id'>
changing the require function to :
require(['jquery', 'mage/mage','fullcalendar', 'moment'<?php if ($locale != 'en') { ?>, 'locale_all'<?php } ?>], function($){
And finally it worked!
I have the below code:
$('#demo-calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
slotDuration: '00:15:00',
defaultView: 'agendaDay',
editable: false,
droppable: true,
drop: function() {
if ($('#drop-remove').is(':checked')) {
$(this).remove();
}
},
viewRender: function(currentView){
var minDate = moment();
if (minDate >= currentView.start && minDate <= currentView.end) {
$(".fc-prev-button").prop('disabled', true);
$(".fc-prev-button").addClass('fc-state-disabled');
}
else {
$(".fc-prev-button").removeClass('fc-state-disabled');
$(".fc-prev-button").prop('disabled', false);
}
},
select:function (){$('#demo-calendar').fullCalendar('unselect')},
eventLimit: true,
events: [
<?php foreach ($appowthslot as $appowthslotlist){
$startdate = date('Y-m-d H:i:s',strtotime($appowthslotlist->starttime));
$enddate = date('Y-m-d H:i:s',strtotime($appowthslotlist->endtime));
if($appowthslotlist->relatedappid !=0 ){
$color = "#ff0000";
}else{
$color = "#076903";
}
?>
{
"color": "<?php echo $color; ?>",
"start": "<?php echo $startdate; ?>",
"end": "<?php echo $enddate; ?>",
},
<?php } ?>
],
eventClick: function(event) {
var cdate=new Date();
var mydate = new Date(event.start);
var now = mydate.toUTCString().toString();
var res = now.replace("GMT","");
var newdate= new Date(res);
if(cdate>newdate){
alert("Appointment can't be book for previous Time");
}else{
if(event.color == "#ff0000"){
alert("This Slot is already Booked");
}else{
startdate = (new Date(event.start)).toISOString().slice(0, 19);
$('#scheduled_date #start_time_hidden').val(startdate);
$('#scheduled_date #start_time').val(startdate.replace("T"," "));
enddate = (new Date(event.end)).toISOString().slice(0, 19);
$('#scheduled_date #end_time_hidden').val(enddate);
$('#scheduled_date #end_time').val(enddate.replace("T"," "));
$('#scheduled_date').modal('show');
}
}
}
});
I am not getting the default time slot as 15 minutes but I am getting the timeslot interval as 1 hour.
When I am clicking the week view and then again clicking on day view I am getting 15 minutes timeslot.
You have already used
$('#demo-calendar').fullcalendar({
...
slotDuration: 15,
...
});
Instead of it you can try bellow option
$('#demo-calendar').fullcalendar({
...
slotMinutes: 15,
...
});
Hope it's works
I have set up a jqgrid and it loads the data via php. No results are displayed
The grid is set up with
$(document).ready(function () {
$("#list_records").jqGrid({
url: "grid.php",
datatype: "json",
mtype: "GET",
colNames: ["ID", "Encuesta", "Fecha", "Quien","Opciones"],
colModel: [
{ name: "id_consulta"},
{ name: "texto"},
{ name: "fecha"},
{ name: "quien"},
{name:'act',index:'act', width:130,sortable:false,formatter:myFormatter, search:false}
],
pager: "#perpage",
rowNum: 8,
rowList: [10,20],
sortname: "id_consulta",
sortorder: "asc",
height: 'auto',
viewrecords: true,
gridview: true,
caption: ""
});
$('#list_records').jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "bw"});
});
function myFormatter (cellvalue, options, rowObject)
{
var idconsulta = rowObject[0];
return "</a><input type=button value='Enviar' onclick=\"loadingForm(" + idconsulta + ");\" />";
}
And the corrsponding json output from the php files is
{"page":1,"total":2,"records":"18","rows":[{"id":"18","cell":["18","Camila quieres participar? ","2015-03-02","dwk"]},{"id":"17","cell":["17","Halo concepci\u00f3n wie gehts ","2015-03-02","idkl"]},{"id":"16","cell":["16","\u00bfAlguien quiere participar?","2015-03-02","dwk"]},{"id":"15","cell":["15","\u00bfEs \u00fatil una aplicaci\u00f3n para realizar encuestas instant\u00e1neas? ","2015-03-02","idkl"]},{"id":"14","cell":["14","Camila quieres participar? ","2015-03-02","idkl"]},{"id":"13","cell":["13","Halo concepci\u00f3n wie gehts ","2015-03-02","idkl"]},{"id":"12","cell":["12","\u00bfAlguien quiere participar?","2015-03-02","dwk"]},{"id":"11","cell":["11","\u00bfEs \u00fatil una aplicaci\u00f3n para realizar encuestas instant\u00e1neas? ","2015-03-02","idkl"]},{"id":"10","cell":["10","Halo concepci\u00f3n wie gehts ","2015-03-02","dwk"]},{"id":"9","cell":["9","\u00bfAlguien quiere participar?","2015-03-02","idkl"]}]}
if I remove
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
I get results displayed but can not use pagination
i found a solution that works for me so to set up a jqgrid via php mysql with filtering via toolbar and paging i used the following
$(document).ready(function () {
jQuery('#rowed2').jqGrid({
url:'server.php',
datatype: 'json',
colNames:['ID','ENCUESTA', 'FECHA', 'QUIEN','ACTIONS'],
colModel:[
{ name: 'id_consulta',width:30,search:false,sortable:false},
{ name: 'texto', width:250},
{ name: 'fecha', width:65},
{ name: 'quien', width:100},
{name:'act',index:'act', width:100,sortable:false,formatter:myFormatter, search:false}
],
rowNum:10,
rowList:[10,20,30],
pager: '#prowed2',
sortname: 'ID',
viewrecords: true,
height: '400',
width: '600',
sortorder: 'asc'
});
$('#rowed2').jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "bw"});
});
function myFormatter (cellvalue, options, rowObject)
{
var idconsulta = rowObject[0];
return "</a><input type=button value='Ver Resultado' onclick=\"loadingForm(" + idconsulta + ");\" />";
}
the php file used is the following
<?php
error_reporting(0);
ini_set('max_execution_time', 600);
require_once 'cliente/config.php';
$db = mysql_connect($server,$user,$pass);
mysql_select_db($dbname,$db);
$page = $_GET['page']; // get the requested page
$limit = $_GET['rows']; // get how many rows we want to have into the grid
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
$sord = $_GET['sord']; // get the direction
if(!$sidx) $sidx =1; // connect to the database
$filterResultsJSON = json_decode($_GET['filters']);
$counter = 0;
$sql='';
if($filterResultsJSON != "") {
$filterArray = get_object_vars($filterResultsJSON);
while($counter < count($filterArray['rules']))
{
$filterRules = get_object_vars($filterArray['rules'][$counter]);
if($counter == 0){
$sql .= ' WHERE ' . $filterRules['field'] . ' LIKE "%' . $filterRules['data'] . '%"';
}
else {
$sql .= ' AND ' . $filterRules['field'] . ' LIKE "%' . $filterRules['data'] . '%"';
}
$counter++;
}
}
$result = mysql_query("SELECT COUNT(*) AS count FROM consulta $sql");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
if( $count >0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
if ($limit<0) $limit = 0;
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
if ($start<0) $start = 0;
$SQL2 = "SELECT * from consulta $sql ORDER BY id_consulta desc LIMIT $start , $limit";
$result = mysql_query( $SQL2 ) or die("Couldn?t execute query.".mysql_error());
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$responce->rows[$i]['id']=$row[id_consulta];
$responce->rows[$i]['cell']=array($row['id_consulta'],utf8_encode($row['texto']),$row[fecha],$row[quien],""); $i++;
}
echo json_encode($responce);
?>