Я работаю над проектом повестки дня с полным календарем, связанным с базой данных. Прежде всего, я так извиняюсь за мой английский.full calendar event Цвет фона
Я использую расширение 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, связанной с выбором функции и файлом add_events.
Это мой код:
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));
?>