Question

我正在制作一个议程项目，其中全日历与数据库相关联。首先，我是法国人，对我的英语很抱歉。

我使用wampserver和PDO扩展来连接我的数据库。我知道如何使用php，html，但我使用javascript和jquery的技巧很少。

我已成功编写基本功能，而我的代码或多或少基于此tutorial

现在，我想更改事件的背景颜色并将这些颜色保存在我的数据库中。理想情况下，我希望将每个不同的事件名称链接到不同的背景颜色。由于我编写了两种添加/创建新事件的方法，这意味着：

1 - 当我在日历上拖放外部事件时，其背景颜色记录在数据库中;

2 - 当我直接在日历上选择某些日子时，会出现一个弹出窗口，询问我事件的标题：如果我写的标题在列表中已知，我就是这样，这个事件是使用与列表中标题关联的背景颜色记录;

我认为第1点更容易编程第2点，如果你能帮我解决第1点，我会很高兴。

目前，我已经在我的数据库中创建了一个名为＆＃34; backgroundColor＆＃34;的新列。（输入varchar，大小255，utf8_general_ci）并且我已经用phpmyadmin手动填充了这些已经记录的事件的单元格。我已成功加载和显示具有正确背景颜色的数据库中的事件。

但是，我没有成功编写第1点和第2点。我认为第1点链接到函数eventReceive和文件add_events以及链接到函数select和文件add_events的第2点。

这是我的代码：

planning_rbs

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />

    <link href='assets/css/fullcalendar.css' rel='stylesheet' />
    <link href='assets/css/fullcalendar.print.css' rel='stylesheet' media='print' />

    <script src='assets/js/moment.min.js'></script>
    <script src='assets/js/jquery.min.js'></script>
    <script src='assets/js/jquery-ui.min.js'></script>
    <script src='assets/js/fullcalendar.min.js'></script>
    <script src='lang-all.js'></script>


<script>

    $(document).ready(function() 
    {

        var currentLangCode = 'fr';

        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 .fc-event').each(function() 
        {
            // store data so the calendar knows to render an event upon drop
            $(this).data('event', 
            {
                title: $.trim($(this).text()), // use the element's text as the event title
                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(
        {
            header: 
            {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            selectable: true,
            selectHelper: true,
            events: "http://localhost/tests/fullcalendar/events_rbs.php",
            editable: true,
            eventLimit: true,
            lang: currentLangCode,
            utc: true,
            droppable: true, 

            eventReceive: function(event)
            {
                var title = event.title;
                var start = event.start.format();
                var end = start;
                var backgroundColor = event.backgroundColor;

                $.ajax(
                {
                    url: 'http://localhost/tests/fullcalendar/add_events_rbs.php',
                    data: 'title='+ title+'&start='+ start +'&end='+ end +'$backgroundColor='+ backgroundColor,
                    type: "POST"
                });

                $('#calendar').fullCalendar('renderEvent', eventData, true);

                console.log(event);
            },

            eventDragStop: function (event, jsEvent, ui, view) 
            {
                if (isElemOverDiv()) 
                {
                    var con = confirm('Voulez-vous supprimer cette activité?');
                    if(con == true) 
                    {
                        $.ajax(
                        {
                            url: 'http://localhost/tests/fullcalendar/delete_event_rbs.php',
                            data: 'id='+event.id,
                            type: 'POST',
                            dataType: 'json'
                        });
                    }
                }
            },

            select: function(start, end) 
            {
                var title = prompt('Activité:');
                var eventData;
                if (title) 
                {
                    var start = start.format();
                    var end = end.format();

                    eventData = 
                    {
                        title: title,
                        start: start,
                        end: end
                    };

                    $.ajax(
                    {
                        url: 'http://localhost/tests/fullcalendar/add_events_rbs.php',
                        data: 'title='+ title+'&start='+ start +'&end='+ end ,
                        type: "POST"
                    });

                    $('#calendar').fullCalendar('renderEvent', eventData, true);
                }
            },

            eventClick: function(event)
            {
                var title = prompt('Nouveau titre:', event.title, { buttons: { Ok: true, Cancel: false} });
                if (title)
                {
                    event.title = title;

                    $.ajax(
                    {
                        url: 'http://localhost/tests/fullcalendar/change_title_rbs.php',
                        data: 'title='+title+'&id='+id,
                        type: 'POST',
                        dataType: 'json'
                    });
                };
            },

            eventDrop: function(event,dayDelta,minuteDelta,allDay) 
            {
                var start = event.start.format();
                var end = (event.end == null) ? start : event.end.format();

                $.ajax(
                {
                    url: 'http://localhost/tests/fullcalendar/update_events_rbs.php',
                    data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
                    type: "POST"
                });
            },

            eventResize: function(event) 
            {
                start = event.start.format();
                end = event.end.format();

                $.ajax(
                {
                    url: 'http://localhost/tests/fullcalendar/update_events_rbs.php',
                    data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
                    type: "POST"
                });
            }

        });


        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>
<style>

    body 
    {
        margin-top: 40px;
        text-align: center;
        font-size: 14px;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    }

    #trash
    {
        width:32px;
        height:32px;
        float:left;
        padding-bottom: 15px;
        position: relative;
    }

    #wrap 
    {
        width: 1100px;
        margin: 0 auto;
    }

    #external-events 
    {
        float: left;
        width: 150px;
        padding: 0 10px;
        border: 1px solid #ccc;
        background: #eee;
        text-align: left;
    }

    #external-events h4 
    {
        font-size: 16px;
        margin-top: 0;
        padding-top: 1em;
    }

    #external-events .fc-event 
    {
        margin: 10px 0;
        cursor: pointer;
        background-color: green;
    }

    #external-events p 
    {
        margin: 1.5em 0;
        font-size: 11px;
        color: #666;
    }

    #external-events p input 
    {
        margin: 0;
        vertical-align: middle;
    }

    #calendar 
    {
        float: right;
        width: 900px;
    }

</style>
</head>
<body>

    <div id="demo-header"></div>

    <div id='wrap'>

        <div id='external-events'>
            <h4>Nouvelle activité</h4>
            <div class='fc-event'>IPER</div>
            <div class='fc-event'>Hélitreuillage</div>

            <p>
                <h4>Supprimer activité (faire glisser sur la poubelle)</h4>
                <img src="assets/img/trashcan.png" id="trash" alt="">
            </p>
        </div>

        <div id='calendar'></div>

        <form action='planning_rbs.php' method='post'>
            <p>
            <input type='submit' value="Actualiser la page" />
            </p>
        </form>

        <form action='../page_d_accueil.php' method='post'>
            <p>
            <input type='submit' value="Retour à la page d'accueil" />
            </p>
        </form>

        <div style='clear:both'></div>

    </div>

</body>
</html>

add_events_rbs

    <?php

    $title=$_POST['title'];
    $start=$_POST['start'];
    $end=$_POST['end'];
    $backgroundColor=$_POST['backgroundColor'];

    // connexion à la base de données
    try 
    {
        $bdd = new PDO('mysql:host=localhost;dbname=pva_test1', 'root', '');
    } 
    catch(Exception $e) 
    {
        exit('Impossible de se connecter à la base de données.');
    }

    $sql = "INSERT INTO planning_rbs (title, start, end, backgroundColor) VALUES (:title, :start, :end, :backgroundColor)";
    $q = $bdd->prepare($sql);
    $q->execute(array(':title'=>$title, ':start'=>$start, ':end'=>$end, ':backgroundColor'=>$backgroundColor));

?>

Answer 1

1。您可以使用eventDrop并在其中进行ajax调用，您可以使用

访问backgroundColor

eventDrop: function( event, delta, revertFunc, jsEvent, ui, view){
  ajax
  console.log(event.backgroundColor)
}

2。酥料饼

eventRender: function( event, element, view ) { 
 element.popover({
   title: event.title,
   container: 'body',
   placement: 'auto',
   html: true,
   content: 'your content'
  })
}

完整的日历事件背景颜色

1 个答案: