Espero que tenha em mente o post anterior sobre como construir um calendário básico com YeAPF.
Este exemplo visa habilitar a função arrastar e soltar de uma lista ul para um calendário e precisa de dois arquivos: testarCalendario.css e testarCalendario.html. Partimos do suposto que o YeAPF está em /var/www/YeAPF e que este exemplo está em /var/www/testes. Adapte para sua realidade.
Primeiro testarCalendario.css:
#meuTeste .calBand {
border-bottom: dotted 1px #B9B9B9;
font-size: 10px }
#meuTeste .calTag {
font-size: 18px;
padding-right: 4px;
padding-bottom: 2px }
#meuTeste .calDayLCell {
float:left;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
overflow: hidden;
}
#meuTeste .calDayLFreeCell {
color: #E41F69;
font-weight: 800 }
#meuTeste .calDayLHighLight {
background-color: #F3F0B1;
font-weight: 800 }
.highlight {
background-color: #71B0DF;
}
ul
{
list-style-type: none;
}
Agora testarCalendario.html:
<html>
<!-- definição de estilo -->
<link rel="stylesheet" type="text/css" href="testarCalendario.css" />
<!-- carregamento do YeAPF -->
<script src="../../YeAPF/yloader.js"></script>
<!-- contenedor do calendário -->
<div id='meuTeste'></div>
<!-- lista de coisas que podem ser arrastadas -->
<div style='width: 400px; float:left'>
<ul>
<li draggable=yes>José Neves</li>
<li draggable=yes>Ana Maria Malvestida</li>
<li draggable=yes>Fulano do Lado</li>
</ul>
</div>
</html>
<script>
var myCalendar = yCalendar().
setDivContainerName('meuTeste').
setCellSize(64,48).
setOrientation(0).
build().
each(function(aDiv) {
aDiv.setAttribute('droppable','yes')
});
</script>
Agora teste com o navegador. Pode ser usando o apache (http://localhost/testes/testarCalendario.html) ou diretamente o arquivo (file:///var/www/testes/testarCalendario.html)
Uma vez que funcione, repasse a maneira de criar elementos com a opção de arrastar e soltar e também em como pegar dados do seu banco de dados usando Ajax.
A mágica acontece na chamada ao each() após o build. Tornamos cada elemento que aponte para um dia válido na tabela em droppable.