我正在处理一个具有与数据库链接的完整日历的议程项目。首先，我是法国人，很抱歉我的英语不好。
我使用 wampserver 和 PDO 扩展连接到我的数据库。 我知道如何使用 php、html，但我对 javascript 和 jquery 的掌握很少。
我已经成功地编写了基本功能，我的代码或多或少是基于这个 tutorial
现在，我想更改事件的背景颜色并将这些颜色保存在我的数据库中。理想情况下，我希望每个不同的事件名称都链接到不同的背景颜色。 由于我已经编写了两种添加/创建新事件的方法，这意味着:
1 - 当我在日历上拖放一个外部事件时，它的背景颜色被记录在数据库中；
2 - 当我直接在日历上选择一些日子时，会出现一个弹出窗口询问我事件的标题:我希望如果我写的标题在列表中已知，则此事件记录为与列表中的标题关联的背景颜色；
我认为第 1 点比第 2 点更容易编程，如果你能帮我解决第 1 点，我会很高兴。
目前，我在我的数据库中创建了一个名为“backgroundColor”的新列(类型为 varchar，大小为 255，utf8_general_ci)并且我已经用 phpmyadmin 手动填充了这些单元格以用于已经记录的事件。我已成功加载并显示具有正确背景颜色的数据库中的事件。
但是，我没有成功对第 1 点和第 2 点进行编程。我认为第 1 点链接到函数 eventReceive 和文件 add_events，第 2 点链接到函数 select 和文件 add_events。
这是我的代码:
计划_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));
?>
最佳答案
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'
})
}
关于javascript - 完整的日历事件背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29645679/