Place details by clicking fullcalendar events

Asked

Viewed 95 times

1

I’m making a calendar for periodic intervention events.

So far I managed to show the details of the dressings, in case count as title "curative" otherwise opens the details(general). but I have 3 different types of events, so I want 3 different types of details to show.

Unfortunately I am only able to open a specific. I have already made an "Else if" repeating the code of the dressings, but even so does not open, nor generates error.

Any idea how I can make it work or a better way than the one I’m doing?

Agenda.php

<?php 
    include("db.connect.php"); 
    require_once("functions.inc.php");
?>
<script>
    var url = window.location.href;
    var recortar = url.indexOf("agenda=");
    var tec = url.substr(recortar + 7);
    var table = $('#example').DataTable({
        "iDisplayLength": 5,
        "bLengthChange": false,
        pagingType: "simple",
        "order": [[ 1, 'asc' ]],
    });

    $('#example tbody').on('click', 'tr', function () {
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
        } else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    });

    <?php


    if(isset($_GET['agenda'])){
    $tec = selecttec($_GET['agenda']);
// curativas
    $sql = "SELECT * FROM npedido WHERE tec1= '$tec' OR tec2= '$tec' OR responsable = '$tec' ";
    $stmt2 = sqlsrv_query( $conn, $sql);
// agendamentos
    $sql_agenda = "SELECT * FROM nagenda WHERE tec1= '$tec' OR tec2= '$tec'";
    $stmt_agenda = sqlsrv_query( $conn, $sql_agenda);
// preventivas
    $sql_preventivas = "SELECT * FROM nagenda1 WHERE tec1= '$tec' OR tec2= '$tec'";
    $stmt_preventivas = sqlsrv_query( $conn, $sql_preventivas);

?>
    var name = "<?php echo utf8_encode($tec); ?>";
    table.search(name).draw();
    $("#tec_name").val(name);
    $( "#example tr").each(function() {
       if(this.id == tec){
         $(this).addClass('selected');
       }
    });
    var tec = "<?php echo $tec; ?>";
    var events = function () {
        return [

            // curativas agenda 
            <?php while($row = sqlsrv_fetch_array($stmt2, SQLSRV_FETCH_NUMERIC)) { 
                if(strlen(str_replace(' ', '', $row[7])) < 15){ $start=date('h:i Y-m-d',strtotime(str_replace("18", "2018", substr($row[7], -16, 8)))) ;}else{ $start= date('Y-m-d H:i',strtotime($row[7])) ; }  
                if(strlen(str_replace(' ', '', $row[7])) < 15){ $end = date('h:i Y-m-d',strtotime(str_replace("18", "2018", substr($row[7], -16, 8)))) ;}else{ $end = date('Y-m-d H:i ',strtotime($row[7])) ; }   
                $start = substr($start,0,10)."T". substr($start,10); 
                $start = str_replace(" ","",$start);
                $end = substr($end,0,10)."T". substr($end,10); 
                $end = str_replace(" ","",$end);
            ?> {
                id: '<?php echo $row[0] ?>',
                title: '<?php echo "Curativa - ".utf8_encode($row[8])."";  ?>',
                start: '<?php echo $start; ?>',
                end: '<?php echo $end; ?>',
                color: '#0FB1DA',
            },
            <?php }?> 
            // agendamento
            <?php while($row = sqlsrv_fetch_array($stmt_agenda, SQLSRV_FETCH_NUMERIC)) {?> 
                {
                id: '<?php echo $row[0]; ?>',                
                title: '<?php echo "Agendamento - ".utf8_encode($row[4])."";  ?>',
                start: '<?php echo $row[6]; ?>',
                end: '<?php echo $row[7]; ?>',
                color: '<?php echo $row[10];?>',
            },
            <?php }?> 

            // preventivas
            <?php while($row = sqlsrv_fetch_array($stmt_preventivas, SQLSRV_FETCH_NUMERIC)) {?> 
                {
                id: '<?php echo $row[0]; ?>',
                title: '<?php echo "teste - ".utf8_encode($row[4])."";  ?>',
                start: '<?php echo $row[6]; ?>',
                end: '<?php echo $row[7]; ?>',
                color: '#34C624',
            },
            <?php }?> 

        ];
    }
    table.search("").draw();
    <?php }else{?>
    $('#example tbody tr:eq(0)').click();
    <?php }sqlsrv_close($conn);?>
</script>

view.details.agenda.inc.php

<div id="mydiv" class="container col-md-5">
    <?php
$idpedido = $_POST['id'];
        include("db.connect.php");
        $sql = "SELECT * FROM nagenda where id='$idpedido'";
    $stmt = sqlsrv_query( $conn, $sql );
    while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_NUMERIC) ) { 
        $wo =utf8_decode($row[1]);
        $tec1 =utf8_encode($row[2]);
        $tec2 =utf8_encode($row[3]);
        $assunto =utf8_encode($row[4]);
        $descre =utf8_encode($row[5]);
        $dataini =utf8_decode($row[6]);
        $datafim =utf8_decode($row[7]);
        $repete =utf8_decode($row[8]);
        $fimrepete =utf8_decode($row[9]);
        $cor =$row[10];
}
 sqlsrv_close($conn);
 ?>
    <div class="panel-group">
        <div class="panel panel-primary">
            <div id="mydivheader" class="panel-heading">
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-md-11">
                            <div class="pull-left">
                                <?php echo $_POST['title']; ?>
                            </div>
                        </div>
                        <div class="pull-right">
                            <button id="close" type="button" class="close" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-6">
                            <div clasS="pull-left">
                                <label class="control-label mb-10" for="review">Técnico 1</label>
                            </div>

                            <input id="te" readonly name="textinput" type="text" value="<?php echo $tec1; ?> "
                                placeholder="placeholder" class="form-control input-md">

                        </div>
                        <div class="col-md-6">
                            <div clasS="pull-left">
                                <label class="control-label mb-10" for="review">Técnico 2</label>
                            </div>
                            <input id="te" readonly name="textinput" type="text" value=" <?php echo $tec2; ?>"
                                placeholder="placeholder" class="form-control input-md">
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <div clasS="pull-left">
                                <label class="control-label mb-10" for="review">Assunto</label>
                            </div>
                            <input readonly id="te" name="textinput" type="text" value="<?php echo $assunto;  ?> "
                                placeholder="placeholder" class="form-control input-md">
                        </div>
                        <div class="col-md-6">
                            <div clasS="pull-left">
                                <label class="control-label mb-10" for="review">WO/NF/ID Cliente</label>
                            </div>
                            <input id="te" name="textinput" type="text" value="<?php echo $wo; ?> " placeholder="placeholder"
                                readonly class="form-control input-md">
                        </div>

                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-12">
                            <div clasS="pull-left">
                                <label class="control-label mb-10" for="review">Descrição</label>
                            </div>
                            <textarea readonly class="form-control" rows="5" name="ope_r" placeholder="add review"><?php echo $descre;?></textarea>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <div clasS="pull-left">
                             <label class="control-label mb-10" for="review">Data de Notificação</label>
                            </div>
                            <input type="text" class="form-control" id="start2" value="<?php echo str_replace("T"," ",$dataini);?>" name="data" placeholder="Data de incio" readonly>
                        </div>
                        <div class="col-md-6">
                            <div clasS="pull-left">
                             <label class="control-label mb-10" for="review">Data de Notificação</label>
                            </div>
                            <input type="text" class="form-control" id="end" value="<?php echo str_replace(" T","",$datafim);?>" name="data" placeholder="Data de incio" readonly>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-12">
                            <div clasS="pull-right">
                                <button type="button" id="addFechar" class="btn btn-primary">Fechar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $('.data_formato').datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        language: "pt-BR",
        //startDate: '+0d'
    });
</script>
<script>
    //Make the DIV element draggagle:
    dragElement(document.getElementById("mydiv"));

    function dragElement(elmnt) {
        var pos1 = 0,
            pos2 = 0,
            pos3 = 0,
            pos4 = 0;
        if (document.getElementById(elmnt.id + "header")) {
            /* if present, the header is where you move the DIV from:*/
            document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
        } else {
            /* otherwise, move the DIV from anywhere inside the DIV:*/
            elmnt.onmousedown = dragMouseDown;
        }
        function dragMouseDown(e) {
            e = e || window.event;
            e.preventDefault();
            // get the mouse cursor position at startup:
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            // call a function whenever the cursor moves:
            document.onmousemove = elementDrag;
        }
        function elementDrag(e) {
            e = e || window.event;
            e.preventDefault();
            // calculate the new cursor position:
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            // set the element's new position:
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        }
        function closeDragElement() {
            /* stop moving when mouse button is released:*/
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }
    $('#addFechar').click(function () {
        $("#mydiv").remove();
        $("#op").removeClass("overlay");
    });
    $("#close").click(function () {
        $("#mydiv").remove();
        $("#op").removeClass("overlay");
    });
</script>

Calendar.js

$(function () {
  loadEvents();
  showTodaysDate();
  initializeCalendar();
  getCalendars();
  initializeRightCalendar();
  initializeLeftCalendar();
  disableEnter();
  document.getElementById("agendaName").innerHTML = document.getElementById("tec_name").value;
});
/* --------------------------initialize calendar-------------------------- */
var initializeCalendar = function () {
  $('.calendar').fullCalendar({
    locale: 'pt',
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    // create events
    events: events(),
    defaultTimedEventDuration: '00:30:00',
    forceEventDuration: true,
    eventBackgroundColor: '#337ab7',
    editable: false,
    height: screen.height - 160,
    timezone: 'America/Chicago',
  });
}
/*--------------------------calendar variables--------------------------*/
var getCalendars = function () {
  $cal = $('.calendar');
  $cal1 = $('#calendar1');
  $cal2 = $('#calendar2');
}
var initializeRightCalendar = function () {
  $cal2.fullCalendar('changeView', 'listWeek');
  $cal2.fullCalendar('option', {
    header: false,
    viewRender: function (view) {
      var title = view.title;
      $("#title").html(title);
    },
    navLinks: false,
    selectable: true,
    selectHelper: true,
    dayRender: function (date, cell) {
      if (moment().diff(date, 'days') > 0) {
        cell.css("background-color", "#F5F5F5");
        $(cell).addClass('disabled');
      }
    },
    height: 'auto',
    contentHeight: 'auto',
    eventClick: function (calEvent, jsEvent, view) {
      var str = calEvent.title;
      var res = str.slice(0, 8);
      if (res == "Curativa") {
        $.ajax({
          type: "POST",
          data: {
            id: calEvent.id,
            title: calEvent.title,
            start: moment(calEvent.start).format('D-M-Y H:mm'),
            end: moment(calEvent.end).format('D-M-Y H:mm'),
          },
          url: "dist/view.details.inc.php",
          success: function (result) {
            $("#op").addClass("overlay");
            $('#teste').append(result);
            $('#teste').fadeIn(1000);
          }
        });
      } else {
        $.ajax({
          type: "POST",
          data: {
            id: calEvent.id,
            title: calEvent.title,
            start: moment(calEvent.start).format('D-M-Y H:mm'),
            end: moment(calEvent.end).format('D-M-Y H:mm'),
          },
          url: "dist/view.details.agenda.inc.php",
          success: function (result) {
            $("#op").addClass("overlay");
            $('#teste').append(result);
            $('#teste').fadeIn(1000);
          }
        });
      }
    }
  });
}
/* -------------------manage cal1 (left pane)------------------- */
var initializeLeftCalendar = function () {
  $cal1.fullCalendar('option', {
    header: false,
    viewRender: function (view) {
      var title = view.title;
      $("#title").html(title);
    },
    navLinks: false,
    selectable: true,
    selectHelper: true,
    dayRender: function (date, cell) {
      if (moment().diff(date, 'days') > 0) {
        cell.css("background-color", "#F5F5F5");
        $(cell).addClass('disabled');
      }
    },
    select: function (startDate, endDate) {
      var yesterday = new Date(new Date().setDate(new Date().getDate()-1));
      if (startDate > yesterday) {
        var tec_name = document.getElementById("tec_name").value;
        $.ajax({
          type: "POST",
          data: {
            tec: tec_name,
            start: startDate.format(),
            end: endDate.format(),
          },
          url: "dist/processo.add.event.php",
          success: function (result) {
            $("#op").addClass("overlay");
            // $("#teste").html(result);
            $('#teste').append(result);
            $('#teste').fadeIn(1000);
          }
        });
      }
    },

    eventClick: function (calEvent, jsEvent, view) {
      var str = calEvent.title;
      var res = str.slice(0, 8);
      if (res == "Curativa") {
        $.ajax({
          type: "POST",
          data: {
            id: calEvent.id,
            title: calEvent.title,
            start: moment(calEvent.start).format('D-M-Y H:mm'),
            end: moment(calEvent.end).format('D-M-Y H:mm'),
          },
          url: "dist/view.details.inc.php",
          success: function (result) {
            $("#op").addClass("overlay");
            $('#teste').append(result);
            $('#teste').fadeIn(1000);
          }
        });
      } else {
        $.ajax({
          type: "POST",
          data: {
            id: calEvent.id,
            title: calEvent.title,
            start: moment(calEvent.start).format('D-M-Y H:mm'),
            end: moment(calEvent.end).format('D-M-Y H:mm'),
          },
          url: "dist/view.details.agenda.inc.php",
          success: function (result) {
            $("#op").addClass("overlay");
            $('#teste').append(result);
            $('#teste').fadeIn(1000);
          }
        });
      }
    }
  });
}

/* -------------------moves right pane to date------------------- */
var cal2GoTo = function (date) {
  $cal2.fullCalendar('gotoDate', date);
}
var loadEvents = function () {
  $.getScript("js/events1.js", function () {});
}
var newEvent = function (start) {
  $('input#title').val("");
  $('#newEvent').modal('show');
  $('#submit').unbind();
  $('#submit').on('click', function () {
    var title = $('input#title').val();
    if (title) {
      var eventData = {
        title: title,
        start: start
      };
      $cal.fullCalendar('renderEvent', eventData, true);
      $('#newEvent').modal('hide');
    } else {
      alert("Title can't be blank. Please try again.")
    }
  });
}
var editEvent = function (calEvent) {
  $('input#editTitle').val(calEvent.title);
  $('#editEvent').modal('show');
  $('#update').unbind();
  $('#update').on('click', function () {
    var title = $('input#editTitle').val();
    $('#editEvent').modal('hide');
    var eventData;
    if (title) {
      calEvent.title = title
      $cal.fullCalendar('updateEvent', calEvent);
    } else {
      alert("Title can't be blank. Please try again.")
    }
  });
  $('#delete').on('click', function () {
    $('#delete').unbind();
    if (calEvent._id.includes("_fc")) {
      $cal1.fullCalendar('removeEvents', [getCal1Id(calEvent._id)]);
      $cal2.fullCalendar('removeEvents', [calEvent._id]);
    } else {
      $cal.fullCalendar('removeEvents', [calEvent._id]);
    }
    $('#editEvent').modal('hide');
  });
}
/* --------------------------load date in navbar-------------------------- */
var showTodaysDate = function () {
  n = new Date();
  y = n.getFullYear();
  m = n.getMonth() + 1;
  d = n.getDate();
};
var getCal1Id = function (cal2Id) {
  var num = cal2Id.replace('_fc', '') - 1;
  var id = "_fc" + num;
  return id;
}
var disableEnter = function () {
  $('body').bind("keypress", function (e) {
    if (e.keyCode == 13) {
      e.preventDefault();
      return false;
    }
  });
}

  • it was good to be corrected.. it would be better if someone helps me if

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.