fullcalendar（jquery + json + php） - 将div颜色属性保存到mysql

时间：2016-06-03 14:48:52

标签： php jquery mysql json ajax

因此，我设法遵循fullcalendar脚本的其中一个教程，将基于jquery的日历连接到我的MySQL数据库，允许我将日历事件写入和读取到数据库中。 从jquery移交给mysql的变量是诸如唯一事件ID，开始日期，结束日期，标题等之类的东西，但遗憾的是，不是事件的标签颜色。由于我使用的是可拖动的“外部事件”，它基本上是可拖动的按钮，你可以拖放到日历上（自然都有不同的颜色），我现在遇到的问题是我无法使fullcalendar提取div的颜色然后通过PHP将其传递到我的MySQL数据库中。

所以这是一个问题： 如何调整jquery脚本以提取var color = event.backgroundColor;变量并将其添加到我的php脚本中？

我对jquery和javascript一无所知，因此非常感谢帮助。我也试图向自由程序员投入几美元，但即使他最终还是放弃了。

这是我到目前为止的代码：

calendar.php中的Fullcalendar脚本

<script>
    $(document).ready(function() {

        var zone = "08:00";  //Change this to your timezone

    $.ajax({
        url: 'process.php',
        type: 'POST', // Send post data
        data: 'type=fetch',
        async: false,
        success: function(s){
            json_events = s;
        }
    });


    var currentMousePos = {
        x: -1,
        y: -1
    };
        jQuery(document).on("mousemove", function (event) {
        currentMousePos.x = event.pageX;
        currentMousePos.y = event.pageY;
    });

        /* initialize the external events
        -----------------------------------------------------------------*/

        $('#external-events .external-event').each(function() {

            // store data so the calendar knows to render an event upon drop
            $(this).data('event', {
                title: $.trim($(this).html()), // use the element's text as the event title
                //color: $.trim($(this).backgroundColor()), // use the element's bgcolor as the events background
                stick: true // maintain when user navigates (see docs on the renderEvent method)
            });

            // make the event draggable using jQuery UI
            $(this).draggable({
                zIndex: 999,
                revert: true,      // will cause the event to go back to its
                revertDuration: 0  //  original position after the drag
            });

        });


        /* initialize the calendar
        -----------------------------------------------------------------*/

        $('#calendar').fullCalendar({
            events: JSON.parse(json_events),
            //events: [{"id":"14","title":"New Event","start":"2015-01-24T16:00:00+04:00","allDay":false}],
            utc: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: true,
            droppable: true, 
            slotDuration: '00:30:00',
            eventReceive: function(event){
                var title = event.title;
                var start = event.start.format("YYYY-MM-DD[T]HH:mm:SS");
                var color = event.backgroundColor;
                $.ajax({
                    url: 'process.php',
                    data: 'type=new&title='+title+'&startdate='+start+'&zone='+zone+'&color='+color,
                    type: 'POST',
                    dataType: 'json',
                    success: function(response){
                        event.id = response.eventid;
                        $('#calendar').fullCalendar('updateEvent',event);
                    },
                    error: function(e){
                        console.log(e.responseText);

                    }
                });
                $('#calendar').fullCalendar('updateEvent',event);
                console.log(event);
            },
            eventDrop: function(event, delta, revertFunc) {
                var title = event.title;
                var start = event.start.format();
                var end = (event.end == null) ? start : event.end.format();
                var color = event.backgroundColor;
                $.ajax({
                    url: 'process.php',
                    data: 'type=resetdate&title='+title+'&start='+start+'&end='+end+'&eventid='+event.id+'&color='+color,
                    type: 'POST',
                    dataType: 'json',
                    success: function(response){
                        if(response.status != 'success')                            
                        revertFunc();
                    },
                    error: function(e){                     
                        revertFunc();
                        alert('Error processing your request: '+e.responseText);
                    }
                });
            },
            eventClick: function(event, jsEvent, view) {
                console.log(event.id);
                  var title = prompt('Event Title:', event.title, { buttons: { Ok: true, Cancel: false} });
                  if (title){
                      event.title = title;
                      console.log('type=changetitle&title='+title+'&eventid='+event.id);
                      $.ajax({
                            url: 'process.php',
                            data: 'type=changetitle&title='+title+'&eventid='+event.id,
                            type: 'POST',
                            dataType: 'json',
                            success: function(response){    
                                if(response.status == 'success')                            
                                    $('#calendar').fullCalendar('updateEvent',event);
                            },
                            error: function(e){
                                alert('Error processing your request: '+e.responseText);
                            }
                        });
                  }
            },
            eventResize: function(event, delta, revertFunc) {
                console.log(event);
                var title = event.title;
                var end = event.end.format();
                var start = event.start.format();
                var color = event.backgroundColor;
                $.ajax({
                    url: 'process.php',
                    data: 'type=resetdate&title='+title+'&start='+start+'&end='+end+'&eventid='+event.id+'&color='+color,
                    type: 'POST',
                    dataType: 'json',
                    success: function(response){
                        if(response.status != 'success')                            
                        revertFunc();
                    },
                    error: function(e){                     
                        revertFunc();
                        alert('Error processing your request: '+e.responseText);
                    }
                });
            },
            eventDragStop: function (event, jsEvent, ui, view) {
                if (isElemOverDiv()) {
                    var con = confirm('Are you sure to delete this event permanently?');
                    if(con == true) {
                        $.ajax({
                            url: 'process.php',
                            data: 'type=remove&eventid='+event.id,
                            type: 'POST',
                            dataType: 'json',
                            success: function(response){
                                console.log(response);
                                if(response.status == 'success'){
                                    $('#calendar').fullCalendar('removeEvents');
                                    getFreshEvents();
                                }
                            },
                            error: function(e){ 
                                alert('Error processing your request: '+e.responseText);
                            }
                        });
                    }   
                }
            }

        });

    function getFreshEvents(){
        $.ajax({
            url: 'process.php',
            type: 'POST', // Send post data
            data: 'type=fetch',
            async: false,
            success: function(s){
                freshevents = s;
            }
        });
        $('#calendar').fullCalendar('addEventSource', JSON.parse(freshevents));
    }


    function isElemOverDiv() {
        var trashEl = jQuery('#trash');

        var ofs = trashEl.offset();

        var x1 = ofs.left;
        var x2 = ofs.left + trashEl.outerWidth(true);
        var y1 = ofs.top;
        var y2 = ofs.top + trashEl.outerHeight(true);

        if (currentMousePos.x >= x1 && currentMousePos.x <= x2 &&
            currentMousePos.y >= y1 && currentMousePos.y <= y2) {
            return true;
        }
        return false;
    }

    });

</script>

calendar.php - ＆gt;外部事件又称可拖动事件按钮

  <div class="box box-solid">
    <div class="box-header with-border">
      <h4 class="box-title">Draggable Audits</h4>
    </div>
    <div class="box-body">
      <!-- the events -->
      <div id="external-events">
        <div class="external-event bg-aqua">FO Check-In</div>
        <div class="external-event bg-blue">FO Check-Out</div>
        <div class="external-event bg-light-blue">HSKP Room</div>
        <div class="external-event bg-teal">Fitness Centre</div>
        <div class="external-event bg-yellow">Reservation</div>
        <div class="external-event bg-orange">F+B Breakfast</div>
        <div class="external-event bg-green">F+B A La Carte</div>
        <div class="external-event bg-lime">F+B Chinese</div>
        <div class="external-event bg-red">F+B Chinese PDR</div>
        <div class="external-event bg-purple">FO Club IC</div>
        <div class="external-event bg-fuchsia">F+B Lobby Lounge</div>
        <div class="external-event bg-muted">Ballroom Event</div>
        <div class="external-event bg-navy">SEC Fire Drill</div>

        <div class="checkbox">
          <label for="drop-remove">
            <input type="checkbox" id="drop-remove">
            remove after drop
          </label>
        </div>
        <button id="trash" type="button" class="btn btn-primary btn-danger btn-lg">DRAG HERE TO DELETE</button>
      </div>
    </div>
    <!-- /.box-body -->
  </div>

process.php脚本，用于处理读写MySQL表 （注意：获取颜色字段工作正常，但我无法将颜色数据写入表中，因为我无法从jquery中提取event.backgroundcolor()变量）

<?php
session_start();

include '../plugins/MySQL/connect_db.php';
$con = mysqli_connect($dbhost,$dbuser,$dbpass,$dbname);

$type = $_POST['type'];
$holidex = $_SESSION['Holidex'];

if($type == 'new')
{
    $startdate = $_POST['startdate'].'+'.$_POST['zone'];
    $title = $_POST['title'];
    $color = $_POST['color'];
    $insert = mysqli_query($con,"INSERT INTO calendar(`title`, `startdate`, `enddate`, `allDay`, `color`, `holidex`) VALUES('$title','$startdate','$startdate','true','$color','$holidex')");
    $lastid = mysqli_insert_id($con);
    echo json_encode(array('status'=>'success','eventid'=>$lastid));
}

if($type == 'changetitle')
{
    $eventid = $_POST['eventid'];
    $title = $_POST['title'];
    $update = mysqli_query($con,"UPDATE calendar SET title='$title' where id='$eventid' and holidex='$holidex'");
    if($update)
        echo json_encode(array('status'=>'success'));
    else
        echo json_encode(array('status'=>'failed'));
}

if($type == 'resetdate')
{
    $title = $_POST['title'];
    $startdate = $_POST['start'];
    $enddate = $_POST['end'];
    $eventid = $_POST['eventid'];
    $update = mysqli_query($con,"UPDATE calendar SET title='$title', startdate = '$startdate', enddate = '$enddate', holidex = '$holidex' where id='$eventid' and holidex='$holidex'");
    if($update)
        echo json_encode(array('status'=>'success'));
    else
        echo json_encode(array('status'=>'failed'));
}

if($type == 'remove')
{
    $eventid = $_POST['eventid'];
    $delete = mysqli_query($con,"DELETE FROM calendar where id='$eventid' and holidex='$holidex'");
    if($delete)
        echo json_encode(array('status'=>'success'));
    else
        echo json_encode(array('status'=>'failed'));
}

if($type == 'fetch')
{
    $events = array();
    $query = mysqli_query($con, "SELECT * FROM calendar where holidex='$holidex'");
    while($fetch = mysqli_fetch_array($query,MYSQLI_ASSOC))
    {
    $e = array();
    $e['id'] = $fetch['id'];
    $e['title'] = $fetch['title'];
    $e['start'] = $fetch['startdate'];
    $e['end'] = $fetch['enddate'];

    $allday = ($fetch['allDay'] == "true") ? true : false;
    $e['allDay'] = $allday;

    $e['color'] = $fetch['color'];
    array_push($events, $e);
    }
    echo json_encode($events);
}


?>

0 个答案:

没有答案
相关问题
最新问题