12 svar · 832 visningar · startad av Peeer
Hej!
Säg att jag håller på och ska bygga en kalender. I kalendern ska man kunna lägga in händelser som sträcker sig över flera dagar (se bild). Hur sjutton gör man det på bästa sätt?
Först tänkte jag tabellceller som slås ihop, men det blir bök när en händelse startar samma dag som en annan slutar. Kreativa tips någon?
ingen?
Var tänker du spara eventen och hur hämtar du dem? SQL-tabell?
Min första tanke är olika block som sträcker sig över en eller flera dagar. När du hämtar event måste du kolla vilken blocktyp som ska kopplas till det och på vilken dag det ska starta.
Ja eventen ligger i en databas.
Kan du förklara mer hur du menar med blocken? Hur ska man göra så att de kan sträckas över flera dagar? Hur bygger man upp själva kalendern?
Att bygga upp kalendern kan man ju göra väldigt enkelt (typ tabellceller), men det blir krångel när det kommer flerdagarshändelser som sagt.
Kolla in andra kalendrar och få lite inspiration, t.ex. https://www.google.com/calendar. Inläggningen där är väldigt smidig.
Ett tips kan vara att lägga evenemanget som ett enskilt evenemang på de olika dagarna men ha någon ikon eller liknande som visar att det fortsätter från föregående dag och en ikon som visar att det fortsätter in på nästa dag.
chrille@swu skrev:
Kolla in andra kalendrar och få lite inspiration, t.ex. https://www.google.com/calendar.
Jo jag vet. Det är därför som bilden i första inlägget är hämtat från just googles kalender. Jag vill att den ska se ut som den men vet inte hur jag ska göra.
Du kanske kan räkna ut hur många dagar händelsen är aktiv, och använda rowspan.
Ska iväg och grilla, men hann få ihop en liten snutt hur jag tänkte. Kanske kan vara något på vägen.
<style type="text/css">
.date {
background: #eee;
}
table {
border: 1px solid #aaa;
border-collapse: collapse;
}
table td {
border: 1px solid #ccc;
width: 100px;
}
.handelse {
background: #eee;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<?php
$datum = date("j");
$handelse = array(// datum => antal dagar, todo
6 => array(2, "Klippa håret"),
4 => array(1, "Mat hos far")
);
for ($i = $datum; $i <= $datum+6; $i++)
{
echo "<td class=\"date\">$i</td>\n";
}
echo "</tr><tr>\n";
for ($i = $datum; $i <= $datum+6; $i++)
{
if (array_key_exists($i, $handelse))
{
$info = $handelse[$i][1];
$colspan = " colspan=\"". $handelse[$i][0] ."\"";
$class = " class=\"handelse\"";
$i = $i+$handelse[$i][0]-1;//Hoppa över antal dagar i loopen
}
else
{
$info = "";
$colspan = "";
$class = "";
}
echo "<td$colspan$class> $info</td>\n";
}
?>
</tr>
</tbody>
</table>
Inte så snygg kod och dåligt kommenterad. Men jag hann visa hur tanken är iaf.
Peeer: Hur fick du dit veckodagarna i gCal? :) (sorry ;))
her0n skrev:
Du kanske kan räkna ut hur många dagar händelsen är aktiv, och använda rowspan.
Tänkt lite i de banorna också, men hur gör man om man har en händelse som börjar på måndagen och slutar på tisdagen. En annan händelse som börjar på tisdagen och slutar på onsdagen och en händelse som bara utspelar sig på tisdagen. Blir bök med colspan då!
Silfver > Veckodagar? (Mån/tis/ons?) De är väl där som standard? :o
Peeer skrev:
Silfver > Veckodagar? (Mån/tis/ons?) De är väl där som standard? :o
GAH! Veckor menar jag. :) Du har veckonummer i din bild.
Om du vet hur bred varje dag är i din kalender, kan du ju använda t.ex. en div med z-index ovanför kalendern, du kollar hur många dagar en händelse sträcker sig och multiplicerar med en dags bredd.
Det hade nog jag försökt med.
Testade snabbt nu med Google's kalender.
Den gör precis som jag säger ovan, detta är stilen på en händelse som stäcker sig från idag till på söndag:
element.style {
left:403px;
top:1px;
width:996px;
z-index:5;
}
Eftersom man vet bredden för en dag, är det lätt att sätta "left", "width" osv.
MickeA.com skrev:
Om du vet hur bred varje dag är i din kalender, kan du ju använda t.ex. en div med z-index ovanför kalendern, du kollar hur många dagar en händelse sträcker sig och multiplicerar med en dags bredd.
Det hade nog jag försökt med.
Mjo, det är väl en möjlighet kanske. Men det blir ett himla bökande med top-placeringen då också. Om två händelser berör samma dag (typ en börjar och en slutar), så ska de ju inte krocka med varandra. Sen ska de andra ändarna på de händelserna inte krocka med något annat osv. Man vill ju inte ha överlapp på händelserna.
Googlecalender resizas ju dessutom när man ändrar fönstrets storlek. Hur går det ihop med den statiska storleken?
silfver skrev:
GAH! Veckor menar jag. :) Du har veckonummer i din bild.
Ah, det borde jag ju ha förstått att du menade. Sorry..
http://recover89.googlepages.com/googlecalendarweeknumbers